Comment AMP fonctionne
Les optimisations suivantes, lorsqu'elles sont combinées, sont la raison pour laquelle les pages AMP sont si rapides qu'elles semblent se charger instantanément. Il y a 7 raisons au total, mais si vous n'avez pas le temps de tout lire, regardez simplement la vidéo explicative :
Exécution asynchrone de l'intégralité du JavaScript AMP
JavaScript est puissant et peut modifier à peu près tous les aspects de la page, mais il peut également bloquer la création du DOM et retarder le rendu de la page (voir aussi Ajouter de l'interactivité avec JavaScript). Pour empêcher JavaScript de retarder le rendu des pages, AMP autorise uniquement le JavaScript asynchrone.
Les composants AMP comprennent certes du JavaScript intégré, mais ils sont soigneusement conçus pour s'assurer qu'ils ne provoquent pas de dégradation des performances.
Bien que le JS personnalisé soit autorisé dans amp-script et que le JS tiers soit autorisé dans les iframes, il ne peut pas bloquer le rendu. Par exemple, si un JS tiers utilise l'API très mauvaise pour les performances document.write, l'affichage de la page principale n'en est pas pour autant bloqué.
Dimensionnez toutes les ressources de manière statique
Les ressources externes telles que les images, annonces ou iframes doivent indiquer leur taille dans le code HTML afin qu'AMP puisse déterminer la taille et la position de chaque élément avant le téléchargement des ressources. AMP charge la mise en page de la page sans attendre le téléchargement des ressources.
AMP dissocie la mise en page du document de celle des ressources. Une seule requête HTTP est nécessaire pour mettre en page l'ensemble du document (+polices). Étant donné qu'AMP est optimisé pour éviter les recalculs et les mises en page de style chronophages dans le navigateur, aucune nouvelle mise en page n'a lieu lors du chargement des ressources.
Ne laissez pas les mécanismes d'extension empêcher le rendu
AMP empêche les mécanismes d'extension de bloquer le rendu des pages. AMP prend en charge des extensions pour des éléments tels que les lightboxes, les éléments Instagram intégrés, les tweets, etc. Bien que ceux-ci nécessitent des requêtes HTTP supplémentaires, ces requêtes ne bloquent pas la mise en page et le rendu des pages.
Toute page qui utilise un script personnalisé doit indiquer au système AMP qu'il y aura éventuellement une balise personnalisée. Par exemple, le script amp-iframe indique au système qu'il y aura une balise amp-iframe. AMP crée la boîte iframe avant même de savoir ce qu'elle comprendra :
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
Écartez tout JavaScript tiers du chemin critique
Les JS tiers aiment utiliser le chargement JS synchrone. Ils aiment également intégrer d'autres scripts de synchronisation avec document.write. Par exemple, si vous avez cinq annonces sur votre page et que chacune d'entre elles provoque trois chargements synchrones, chacun avec une connexion d'une seconde de latence, vous passez 15 secondes à charger du JS uniquement.
Les pages AMP autorisent le JavaScript tiers, mais uniquement dans des iframes en bac à sable. En les restreignant aux iframes, elles les empêchent de bloquer l'exécution de la page principale. Même s'ils déclenchent plusieurs recalculs de style, leurs minuscules iframes impliquent des DOM légers.
Le temps nécessaire pour effectuer les recalculs de style et les mises en page est limité selon la taille du DOM. Ainsi, les recalculs d'iframes sont très rapides par rapport au recalcul des styles et de la mise en page de la page.
Tout le code CSS doit être intégré au code de la page et limité en termes de taille
Le CSS bloque tout affichage, bloque le chargement des pages et a tendance à être volumineux. Dans les pages AMPHTML, seuls les styles intégrés au code HTML sont autorisés. Cela supprime une ou plusieurs requêtes HTTP du chemin de rendu critique par rapport à ce que demande la plupart des pages Web.
En outre, la feuille de style intégrée au code HTML correspond à une taille maximale de 50 kilooctets. Bien que cette taille soit suffisamment grande pour les pages très sophistiquées, elle exige quand même une bonne hygiène CSS de la part de l'auteur.
L'activation des polices doit être efficace
Dans la mesure où les polices Web sont très grandes, l'optimisation des polices Web est cruciale pour assurer de bonnes performances. Sur une page typique qui présente quelques scripts de synchronisation et quelques feuilles de style externes, le navigateur met du temps à lancer le téléchargement de ces énormes polices.
Le système AMP ne lance aucune requête HTTP tant que le téléchargement des polices n'a pas démarré. Cela n'est possible que parce que, avec AMP, l'ensemble du JS est doté de l'attribut async et que seules les feuilles de style intégrées au code HTML sont autorisées. En conséquence, aucune requête HTTP n'empêche le navigateur de télécharger des polices.
Minimisez les recalculs de style
Chaque fois que vous effectuez une mesure, cela déclenche des recalculs de style chronophages tandis que le navigateur doit remettre en page toute la page. Avec les pages AMP, toutes les lectures du DOM ont lieu avant les écritures. Cela garantit un maximum d'un seul recalcul de styles par frame.
Apprenez-en plus sur l'impact des recalculs de style et de la mise en page sur les performances de rendu.
Exécutez uniquement des animations accélérées par GPU
La seule façon d'obtenir des optimisations rapides consiste à les exécuter sur le GPU. Le GPU connaît les calques et sait comment effectuer certaines opérations sur ces calques. Il peut les déplacer ou les estomper, mais il ne peut pas mettre à jour la mise en page, c'est pourquoi il transmettra cette tâche au navigateur, et ça, ce n'est pas bon.
Les règles pour le CSS relatif aux animations garantissent que les animations peuvent être accélérées par le GPU. Plus précisément, AMP autorise uniquement l'animation et la transition via les propriétés transform et opacity afin que la mise en page ne soit pas requise. Apprenez-en plus sur l’utilisation de « transform » et « opacity » pour les changements animés.
Priorisez le chargement des ressources
AMP contrôle tous les téléchargements de ressources : il privilégie le chargement des ressources, en ne chargeant que ce qui est nécessaire, et pré-extrait les ressources à chargement différé.
Lorsqu'AMP télécharge des ressources, il optimise les téléchargements afin que les ressources les plus importantes à ce moment précis soient téléchargées en priorité. Les images et les annonces ne sont téléchargées que si elles sont susceptibles d'être vues par l'utilisateur, au premier plan, ou si l'utilisateur est susceptible de les atteindre rapidement en faisant défiler le contenu.
AMP pré-extrait également des ressources à chargement différé. Les ressources sont chargées le plus tard possible, mais récupérées le plus tôt possible. De cette façon, le chargement est très rapide, mais le processeur n'est utilisé que lorsque les ressources sont réellement présentées aux utilisateurs.
Chargez vos pages instantanément
La nouvelle API de pré-connexion est utilisée intensivement pour garantir que les requêtes HTTP soient aussi rapides que possible lorsqu'elles sont effectuées. Ainsi, une page peut être rendue avant que l'utilisateur déclare explicitement qu'il souhaite y accéder. La page pourra de cette manière être déjà disponible au moment où l'utilisateur la sélectionne, ce qui permettra un chargement instantané.
Bien que le pré-rendu puisse être appliqué à tout contenu Web, il peut également utiliser beaucoup de bande passante et mobiliser le CPU. AMP est optimisé pour réduire ces deux facteurs. Le pré-rendu télécharge uniquement les ressources au premier plan et aucun rendu des éléments qui pourraient excessivement solliciter le CPU n'a lieu à ce moment.
Lorsque les documents AMP sont prérendus pour un chargement instantané, seules les ressources au premier plan sont réellement téléchargées. Lorsque les documents AMP sont prérendus pour un chargement instantané, les ressources susceptibles de beaucoup solliciter le CPU (comme, par exemple, les iframes tiers) ne sont pas téléchargées.
Découvrez pourquoi AMPHTML ne tire pas pleinement parti du scanner de pré-chargement.