Guide de préparation à l'évaluation

4.1.2 Fonctionnement de la technologie AMP

L'ensemble des optimisations suivantes permet aux pages AMP de s'afficher rapidement, comme si leur chargement était instantané.

Pour en savoir plus sur le fonctionnement de la technologie AMP, vous pouvez soit regarder la vidéo présentée par le responsable de l'ingénierie AMP, Malte Ubl, soit lire les informations sous la vidéo.

AMP Anatomy with Malte Ubl

Autoriser uniquement les scripts asynchrones

JavaScript est une technologie puissante. Elle permet de modifier une page sous tous ses aspects, mais peut aussi bloquer la construction DOM et retarder l'affichage de la page (voir également Ajouter de l'interactivité avec JavaScript). Pour éviter que JavaScript retarde l'affichage de la page, la technologie AMP autorise uniquement les fichiers JavaScript asynchrones.

Les pages AMP ne peuvent pas contenir de code JavaScript écrit par le développeur. Au lieu d'utiliser JavaScript, les fonctionnalités des pages interactives sont traitées par des éléments AMP personnalisés. Il se peut que les éléments AMP personnalisés contiennent du code JavaScript, mais ils ont été conçus expressément pour ne pas nuire aux performances.

Le code JavaScript tiers est autorisé dans les cadres iFrame, car il ne peut pas bloquer l'affichage. Par exemple, si le code JS tiers utilise l'API super-bad-for-performance document.write, il ne bloque pas l'affichage de la page principale.

Dimensionner toutes les ressources de manière statique

La taille des ressources externes comme les images, les annonces ou les cadres iFrame doit être indiquée dans le HTML, de manière à ce que la technologie AMP puisse définir la taille et la position de chaque élément avant le téléchargement des ressources. AMP charge la mise en page du document sans attendre le téléchargement des ressources.

AMP dissocie la mise en page du document de la mise en page des ressources. Une seule requête HTTP est requise pour mettre en page l'ensemble du document (+polices). Le format AMP a été conçu pour éviter les recalculs compliqués de style et de mise en page dans le navigateur. Ainsi, lors du chargement des ressources, aucune nouvelle mise en page ne sera effectuée.

Empêcher le blocage de l'affichage par les mécanismes d'extension

AMP empêche que l'affichage de la page ne soit bloqué par les mécanismes d'extension. AMP est compatible avec les extensions pour des éléments comme les annonces Lightbox, les intégrations Instagram, les tweets, etc. Des requêtes HTTP supplémentaires sont nécessaires pour ces extensions, mais elles ne bloquent pas la mise en page et l'affichage.

Si une page utilise un script personnalisé, elle doit avertir le système AMP qu'une balise personnalisée finira par être incluse. Par exemple, le script amp-iframe avertit le système de la présence future d'une balise amp-iframetag. AMP crée alors le cadre iFrame, avant même de savoir ce qu'il contiendra :

<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>

Éloigner le code JavaScript tiers du chemin critique

Le code JS tiers tend à utiliser le chargement JS synchrone. Il tend aussi à appliquer la technique "document.write" à d'autres scripts de synchronisation. Par exemple, si votre page dispose de cinq annonces et si chacune d'elle entraîne trois chargements synchrones avec une connexion d'une latence d'une seconde, le temps de chargement est de 15 secondes uniquement pour JS.

Les pages AMP autorisent le code JavaScript tiers uniquement dans les cadres iFrame de bac à sable. En imposant cette restriction, l'exécution de la page principale n'est pas bloquée. Même si plusieurs recalculs de style sont déclenchés, les minuscules cadres iFrame de ces pages disposent d'une construction DOM minime.

Le délai imparti pour effectuer les recalculs de style et les mises en page est imposé par la taille du DOM. Les recalculs des cadres iFrame sont donc très rapides en comparaison avec les recalculs de style et la mise en page.

Tout le code CSS doit être intégré et disposer d'une taille maximum

Le code CSS bloque l'intégralité de l'affichage ainsi que le chargement de la page. De plus, il a tendance à être surchargé. Dans les pages AMP HTML, seuls les styles intégrés sont autorisés. Par conséquent, une ou plusieurs requêtes HTTP peuvent être supprimées du chemin critique du rendu, ce qui n'est pas le cas avec la plupart des pages Web.

En outre, la feuille de style intégré dispose d'une taille maximale de 50 kilo-octets. Bien que cette taille soit suffisante pour des pages très sophistiquées, l'auteur de la page devra quand même utiliser le code CSS avec soin.

Télécharger les polices efficacement

Les polices Web étant très grandes, leur optimisation est essentielle pour rester performant. Sur une page typique contenant quelques scripts de synchronisation et quelques feuilles de style externes, le navigateur doit attendre un certain temps avant de commencer à télécharger ces grandes polices avant qu'elles s'affichent.

Le système AMP ne déclare aucune requête HTTP tant que le téléchargement des polices n'a pas commencé. Cela est possible pour deux raisons : d'une part parce que tout le code JS dans AMP dispose de l'attribut asynchrone, et d'autre part parce que seules les feuilles de style intégré sont autorisées. Il n'existe donc aucune requête HTTP qui empêche le téléchargement des polices par le navigateur.

Réduire au maximum les recalculs de style

Chaque fois que vous mesurez un élément, vous déclenchez des recalculs de style. Ceux-ci consomment beaucoup d'énergie, car le navigateur doit redisposer toute la page. Dans les pages AMP, les lectures DOM surviennent toujours avant les écritures. Il est ainsi possible de s'assurer qu'un seul recalcul de styles est effectué par encadrement.

En savoir plus sur l'influence des recalculs de style et de mise en page sur les performances d'affichage

N'exécuter que des animations accélérées par un processeur graphique

Pour que des optimisations soient rapides, elles doivent être exécutées sur le processeur graphique. Ce dernier connaît les couches, sait comment effectuer des actions sur ces couches, comment les déplacer, comment effectuer un fondu. Toutefois, il ne peut pas mettre à jour la mise en page. Il déléguera donc cette tâche au navigateur, ce qui n'est pas optimal.

Les règles du code CSS lié aux animations garantissent que les animations peuvent être accélérées par le processeur graphique. Plus précisément, AMP n'autorise les animations et les transitions que sur les propriétés "transform" (transformation) et "opacity" (opacité). La mise en page n'est donc pas requise. En savoir plus sur l'utilisation des propriétés "transform" et "opacity" pour la modification des animations

Définir les priorités pour le chargement des ressources

La technologie AMP contrôle tous les téléchargements de ressources : elle définit les priorités, effectue uniquement le chargement des ressources nécessaires, et prélit les ressources de chargement long.

Lorsque la technologie AMP télécharge des ressources, elle optimise les téléchargements de manière à ce que les ressources les plus importantes pour le moment soient affichées en premier. Les images et les annonces ne sont téléchargées que si elles sont susceptibles d'être vues par l'utilisateur, dans la partie au-dessus de la ligne de flottaison, ou si l'utilisateur est susceptible de rapidement les atteindre en faisant défiler l'écran vers le bas.

De plus, AMP prélit les ressources de chargement long. Les ressources sont chargées le plus tard possible, mais prélues le plus tôt possible. De cette manière, le chargement des éléments est rapide, et le processeur graphique n'est utilisé que lorsque les utilisateurs voient vraiment les ressources.

Charger les pages instantanément

On a beaucoup recours à la nouvelle API preconnect pour s'assurer que les requêtes HTTP sont effectuées le plus rapidement possible. Il est ainsi possible d'afficher une page avant même que l'utilisateur ait explicitement statué qu'il voulait y accéder : il se peut que la page soit déjà disponible au moment où l'utilisateur la sélectionne, et donc qu'elle se charge instantanément.

Le préaffichage peut être appliqué à tout contenu Web. Toutefois, il consomme beaucoup de bande passante et de capacités du processeur. La technologie AMP a donc été optimisée pour réduire cette consommation excessive. Le préaffichage ne télécharge que les ressources qui se trouvent dans la partie au-dessus de la ligne de flottaison, et ne s'occupe pas des éléments qui impliquent un gros travail de la part du processeur.

Lorsque les documents AMP sont préaffichés afin d'être chargés instantanément, seules les ressources qui se trouvent au-dessus de la ligne de flottaison sont téléchargées. En revanche, les ressources qui pourraient impliquer une utilisation excessive du processeur (telles que les cadres iFrame tiers) ne sont pas téléchargées.

Pour en savoir plus, consultez l'article suivant en anglais : Why AMP HTML doesn’t take full advantage of the preload scanner.

Contribuer à rendre AMP plus rapide

AMP est une technologie Open Source, qui est le fruit d'un effort collectif. Ensemble, nous devons rendre cette technologie encore plus rapide. Découvrez comment apporter votre contribution.

Ces informations vous-ont elles été utiles ?
Comment pouvons-nous l'améliorer ?