Accelerated Mobile Pages / AMP : qu’est-ce que c’est ?

Accelerated Mobile Pages (AMP) est un projet soutenu par Google qui aide les éditeurs à publier leurs actualités sur Google le plus rapidement possible. L’objectif principal est d’améliorer l’expérience mobile des utilisateurs et de s’assurer que les pages se chargent rapidement sur les appareils mobiles.

À propos du projet AMP

En février 2016, Google a introduit des listes AMP intégrées dans les résultats de recherche mobile. Les pages qui tirent parti du code AMP apparaissent à des endroits particuliers dans les listes Google ou sont accompagnées d’une désignation AMP. Cela devrait attirer l’attention des utilisateurs sur le type de pages mobiles que Google souhaite qu’ils visitent. En outre, l’objectif est de motiver tous ceux qui n’utilisent pas encore le code AMP à rejoindre l’avenir.

L’objectif principal de ce projet est d’augmenter la vitesse de l’internet pour tous les utilisateurs mobiles. Les sites web lents sont non seulement un problème pour les internautes impatients, mais ils ont également un impact négatif sur les taux de conversion. L’idée optimiste derrière AMP est d’avoir des pages qui se chargent instantanément partout. La différence entre un temps de chargement de 3 et 6 secondes peut faire toute la différence dans le commerce en ligne, en particulier en ce qui concerne les conversions.

Il convient de mentionner que de nombreux éditeurs tels que la BBC, The Economist, le Financial Times, entre autres, ont déjà adopté le concept AMP et sont fermement représentés dans les résultats AMP mobiles de Google.

Qu’est-ce que les pages mobiles accélérées ?

Les pages AMP sont des pages très légères conçues pour se charger très rapidement, presque instantanément sur les appareils mobiles.

Les pages mobiles accélérées se composent de trois parties :

• AMP HTML – une version allégée de HTML.
• AMP JS – Bibliothèque JavaScript créée pour un rendu rapide du HTML AMP ; utilise les meilleures pratiques de performance telles que le sandboxing de tous les iframes, le précalcul de tous les éléments de la page avant le chargement des ressources, et la désactivation des sélecteurs CSS lents.
• Google AMP cache – un réseau de diffusion de contenu basé sur un proxy qui peut être utilisé pour diffuser des pages AMP. Le CDN récupère les pages AMP, les met en cache et améliore leurs performances.

Comment fonctionne AMP

AMP combine plusieurs méthodes d’optimisation pour permettre un chargement rapide des pages :

• n’autorise que les scripts asynchrones afin d’éviter que le JS ne retarde le rendu de la page
• les ressources externes indiquent leur taille en HTML, de sorte que la mise en page est chargée sans attendre les ressources
• ne laisse pas le mécanisme d’extension bloquer le rendu
• n’autorise le JavaScript de tiers que dans les iframes de type « sandbox », afin de les tenir à l’écart du chemin critique
• n’autorise que les feuilles de style CSS en ligne ; la taille maximale d’une feuille en ligne est de 50 KB
• aucune requête HTTP ne peut empêcher le navigateur de télécharger des polices.
• minimise tous les recalculs de style ; toutes les lectures du DOM se font en premier
• n’exécute que les animations accélérées par le GPU
• donne la priorité au chargement des ressources ; recherche au préalable les ressources chargées paresseusement et ne charge que ce qui est nécessaire

Navigateurs pris en charge

AMP prend en charge les deux dernières versions des principaux navigateurs pour les ordinateurs de bureau, les téléphones, les tablettes et l’affichage sur le web :

• Chrome
• Firefox
• Safari
• Opera
• Edge

AMP accepte également les corrections pour tous les navigateurs dont la part de marché est supérieure à 1 %.

Comment créer des pages AMP

Si vous exploitez un site web WordPress et que vous souhaitez disposer de versions AMP des pages à côté de la version normale du site web qui est présentée aux utilisateurs d’ordinateurs de bureau, il existe plusieurs plugins WordPress qui peuvent faire tout le travail à votre place. Malheureusement, aucun des plugins existants ne fonctionne avec les constructeurs de pages. Vous pouvez choisir d’utiliser le plugin uniquement pour les articles et de créer une version AMP plus simple de toutes les pages importantes, en utilisant le balisage HTML AMP.

Il est possible d’avoir deux versions de la page, une AMP et une non-AMP. Si vous avez deux versions, assurez-vous de créer un lien vers les deux, afin que les moteurs de recherche puissent facilement naviguer sur votre site web et présenter la bonne version aux visiteurs mobiles.

Vous trouverez plus de détails et d’excellentes instructions sur comment créer des pages AMP, comment les mettre en place et les valider, sur ampproject.org.