AMP : Définition

Google a lancé le projet open-source Accelerated Mobile Pages pour garantir que les pages Web mobiles fonctionnent à une vitesse optimale.

Le projet AMP vise à « construire ensemble le web du futur » en vous permettant de créer des pages web et des publicités qui sont toujours rapides, belles et très performantes sur tous les appareils et toutes les plateformes de distribution.

AMP a été construit en collaboration avec des milliers de développeurs, d’éditeurs, de sites web, de sociétés de distribution et de sociétés technologiques. Plus de 1,5 milliard de pages AMP ont été créées à ce jour et plus de 100 fournisseurs d’analyses, de technologies publicitaires et de CMS prennent en charge le format AMP.

Lorsque vous créez des pages mobiles au format AMP, vous obtenez :

  1. Des performances et un engagement accrus : Les pages créées dans le cadre du projet open-source AMP se chargent presque instantanément, offrant aux utilisateurs une expérience fluide et plus engageante sur leurs mobiles et leurs ordinateurs de bureau.
  2. Flexibilité et résultats : Les entreprises ont la possibilité de décider comment présenter leur contenu et quels fournisseurs de technologie utiliser, tout en maintenant et en améliorant les indicateurs clés de performance.

Vous avez probablement déjà cliqué sur une page AMP, mais vous ne vous en êtes pas rendu compte. La seule chose que vous avez peut-être remarquée, c’est l’instantanéité de la page après votre clic. Les pages web construites en AMP ont un indicateur en forme d’éclair dans le résultat de la recherche.

La raison pour laquelle les pages AMP se chargent instantanément est que AMP restreint le HTML/CSS et le JavaScript, ce qui permet un rendu plus rapide des pages Web mobiles. Contrairement aux pages mobiles ordinaires, les pages AMP sont automatiquement mises en cache par Google AMP Cache pour des temps de chargement plus rapides sur la recherche Google.

Les utilisateurs ont certaines attentes lorsqu’ils sont sur leurs appareils mobiles, ils veulent des expériences significatives, pertinentes et plus rapides – pour garantir que les attentes de votre public cible soient satisfaites, les CHA sont votre meilleur atout.

Comment fonctionne la PGA ?

Google a lancé le framework open-source Accelerated Mobile Pages (AMP) en février 2016. Ce framework a été construit parce qu’il y avait un besoin de créer des expériences utilisateur optimisées et étroitement intégrées, au lieu des expériences mobiles maladroites et lentes auxquelles les utilisateurs sont confrontés au quotidien.

Google a lancé le projet AMP afin de créer un cadre de travail qui fournirait un chemin exact pour créer des expériences de pages Web mobiles optimisées. Le projet open-source AMP est bien documenté, facile à déployer, validable et conforme à la volonté de faire passer l’utilisateur en premier dans la conception des pages Web.
Depuis son lancement, non seulement le nombre de pages AMP a augmenté, mais leur vitesse aussi. Le temps médian de chargement d’une page AMP à partir de la recherche Google est désormais inférieur à une demi-seconde.

AMP entraîne une augmentation de 10 % du trafic sur le site web et une multiplication par deux du temps passé sur la page. Les sites de commerce électronique qui utilisent AMP connaissent une augmentation de 20 % des ventes et des conversions par rapport aux pages non AMP :

AMP aide les entreprises à créer des versions simplifiées, propres et pertinentes de leurs pages web, offrant aux utilisateurs une expérience web mobile plus rapide.

Les 3 composantes essentielles de l’AMP

Les pages AMP sont construites avec les trois composants de base suivants :

AMP HTML

Le HTML AMP est essentiellement du HTML, mais avec certaines restrictions pour des performances fiables.

La plupart des balises dans AMP HTML sont des balises HTML ordinaires, cependant, certaines balises HTML sont remplacées par des balises spécifiques à AMP. Ces balises personnalisées sont appelées composants AMP HTML et rendent les modèles de balises courants faciles à mettre en œuvre de manière performante. Les pages AMP sont découvertes par les moteurs de recherche et d’autres plateformes grâce à la balise HTML.

Vous pouvez choisir d’avoir une version non-AMP et une version AMP de votre page, ou seulement une version AMP.

AMP JavaScript (JS)

La bibliothèque AMP JS assure un rendu rapide des pages HTML AMP. La bibliothèque JS met en œuvre toutes les meilleures pratiques de performance d’AMP, telles que les CSS en ligne et le déclenchement des polices, ce qui permet de gérer le chargement des ressources et de vous donner les balises HTML personnalisées pour assurer un rendu rapide des pages.

L’AMP JS rend tout ce qui provient des ressources externes asynchrone, de sorte que rien sur la page ne peut bloquer le rendu. Le JS utilise également d’autres techniques de performance telles que le sandboxing de toutes les iframes, le précalcul de la disposition de chaque élément de la page avant le chargement des ressources et la désactivation des sélecteurs CSS lents.

Cache AMP

Le cache AMP de Google est utilisé pour servir les pages HTML AMP mises en cache. Le cache AMP est un réseau de diffusion de contenu basé sur un proxy utilisé pour diffuser tous les documents AMP valides. Le cache récupère les pages HTML AMP, les met en cache et améliore automatiquement les performances des pages.

Pour maintenir une efficacité maximale, AMP Cache charge le document, les fichiers JS et toutes les images à partir de la même origine qui utilise le protocole HTTP 2.0.

AMP Cache est doté d’un système de validation intégré qui confirme qu’une page est garantie de fonctionner et qu’elle ne dépend pas de forces externes qui pourraient la ralentir. Le système de validation fonctionne sur la base d’une série d’assertions qui confirment que le balisage de la page est conforme aux spécifications HTML d’AMP.

Une version supplémentaire du système de validation est disponible à côté de chaque page AMP. Cette version est capable d’enregistrer les erreurs de validation directement dans la console du navigateur lorsque la page est rendue, ce qui vous permet de voir les changements complexes dans votre code qui peuvent avoir un impact sur les performances et l’expérience utilisateur.

Les trois composants principaux d’AMP fonctionnent à l’unisson pour permettre aux pages de se charger rapidement.

7 techniques d’optimisation pour rendre les pages AMP si rapides.

Tout le JavaScript d’AMP est exécuté de manière asynchrone

JavaScript peut modifier tous les aspects de la page, il a le pouvoir de bloquer la construction du DOM et de retarder le rendu de la page – ces deux facteurs entraînent un chargement lent de la page. Pour s’assurer que JavaScript ne retarde pas le rendu de la page, AMP n’autorise que le JavaScript asynchrone.

Les pages AMP n’incluent pas de JavaScript écrit par l’auteur, mais toutes les fonctions interactives de la page sont gérées par des éléments AMP personnalisés. Ces éléments AMP personnalisés peuvent inclure du JavaScript, mais ils sont soigneusement conçus pour garantir qu’ils n’entraînent aucune dégradation des performances.

AMP permet à des tiers de JavaScript dans les iframes, mais il ne peut pas bloquer le rendu de la page.

Toutes les ressources sont dimensionnées de manière statique

Toutes les ressources externes telles que les images, les iframes et les publicités doivent indiquer leur taille HTML afin qu’AMP puisse déterminer la taille et la position de chaque élément avant le téléchargement des ressources de la page. AMP charge la mise en page de la page sans attendre le téléchargement d’une quelconque ressource.

AMP a la capacité de séparer la mise en page du document de celle de la taille, une seule requête HTTP est nécessaire pour mettre en page l’ensemble du document. AMP étant optimisé pour éviter toute mise en page coûteuse et tout recalcul dans le navigateur, il n’y a pas de nouvelle mise en page lors du chargement des ressources de la page.

Les mécanismes d’extension ne bloquent pas le rendering

AMP ne permet pas aux mécanismes d’extension de bloquer le rendu de la page, il prend en charge les extensions pour des éléments tels que les lightboxes et les embeds de médias sociaux, et bien que ceux-ci nécessitent des requêtes HTTP supplémentaires, ils ne bloquent pas la mise en page et le rendu de la page.

Si une page utilise un script personnalisé, elle doit indiquer au système AMP qu’elle aura éventuellement une balise personnalisée, AMP crée alors la balise requise pour que la page ne soit pas ralentie. Par exemple, si la balise amp-iframe indique à AMP qu’il y aura une balise amp-iframe, AMP crée alors la boîte iframe avant de savoir ce qu’elle va inclure.

Tout JavaScript tiers est maintenu en dehors du critical path.

Le JavaScript tiers utilise le chargement synchrone de JS, ce qui tend à ralentir votre temps de chargement. Les pages AMP autorisent le JavaScript tiers mais uniquement dans des iframes sandboxées, ce qui permet au chargement JavaScript de ne pas bloquer l’exécution de la page principale. Même si le JavaScript des iframes sandboxées déclenche de multiples recalculs de style, leurs minuscules iframes ont très peu de DOM.

Les recalculs des iframes sont exécutés très rapidement par rapport au recalcul des styles et de la mise en page de la page.

Les feuilles de style en cascade doivent être intégrées et limitées en taille
Le CSS bloque le rendu, il bloque également tout le chargement de la page, et il a tendance à provoquer un gonflement. AMP HTML n’autorise que les styles en ligne, ce qui supprime une ou plusieurs requêtes HTTP du chemin critique de rendu de la plupart des pages Web.

La feuille de style en ligne doit avoir une taille maximale de 75 kb. Bien que cette taille soit suffisante pour les pages très sophistiquées, elle oblige l’auteur de la page à adopter une bonne hygiène CSS.

Le déclenchement des polices est efficace

L’optimisation des polices Web est essentielle pour un chargement rapide, car les polices Web sont généralement de grande taille. Sur une page typique qui comprend quelques scripts de synchronisation et quelques feuilles de style externes, le navigateur attend pour télécharger les polices que tous les scripts soient chargés.

Le framework AMP déclare zéro requête HTTP jusqu’à ce que toutes les polices commencent à être téléchargées. Cela n’est possible que parce que tout le JavaScript d’AMP possède l’attribut async et que seules les feuilles en ligne sont autorisées. Il n’y a donc aucune demande HTTP qui empêche le navigateur de télécharger les polices.

Les recalculs de style sont réduits au minimum

Dans les pages AMP, toutes les lectures du DOM ont lieu avant toutes les écritures, ce qui garantit qu’il n’y a qu’un seul recalcul des styles par image – il n’y a donc aucun effet négatif sur les performances de rendu de la page.

Exécution des animations accélérées par le GPU uniquement

Pour exécuter des optimisations rapides, vous devez les exécuter sur le GPU. Le GPU travaille en couches, il sait comment effectuer certaines choses sur ces couches – les couches peuvent être déplacées et estompées. Cependant, lorsque le GPU ne peut pas mettre à jour la mise en page, il confie cette tâche au navigateur, ce qui n’est pas bon pour le temps de chargement de la page.

Les règles CSS relatives à l’animation garantissent que l’animation peut être accélérée par le GPU, ce qui signifie qu’AMP n’autorise l’animation et la transition que sur la transformation et l’opacité, afin que la mise en page ne soit pas nécessaire.

Le chargement des ressources est hiérarchisé

AMP contrôle le chargement de toutes les ressources, les classe par ordre de priorité, ne charge que ce qui est nécessaire et récupère au préalable toutes les ressources chargées paresseusement.

Lorsque AMP télécharge des ressources, il optimise les téléchargements afin que les ressources les plus importantes soient téléchargées en premier. Toutes les images et publicités ne sont téléchargées que si elles sont susceptibles d’être vues par l’utilisateur, si elles sont au-dessus du pli ou si le visiteur est susceptible de les faire défiler.

AMP a également la capacité de précharger les ressources chargées paresseusement, ces ressources sont chargées le plus tard possible, mais sont préchargé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 affichées aux utilisateurs.

Chargement instantané des pages

La nouvelle API AMP pre-connect est largement utilisée pour garantir que les requêtes HTTP sont aussi rapides que possible dès qu’elles sont effectuées. De ce fait, la page est rendue avant que l’utilisateur ne déclare explicitement qu’il souhaite y naviguer, la page peut être disponible au moment où l’utilisateur la voit, ce qui rend le chargement de la page instantané.

AMP est optimisé pour ne pas utiliser beaucoup de bande passante et de CPU lors du pré-rendu du contenu web. Lorsque les documents AMP sont pré-rendus pour un chargement instantané, les ressources au-dessus du pli sont effectivement téléchargées, et les ressources qui pourraient utiliser beaucoup de CPU, comme les iframes tiers, ne sont pas téléchargées.

Avantages de l’Accelerated Mobile Pages – AMP

AMP permet de charger les pages Web plus rapidement, ce qui améliore l’expérience utilisateur et incite les visiteurs à rester plus longtemps sur la page. AMP utilise AMP HTML qui aide les pages mobiles à se charger plus rapidement. En fait, selon Gary Illayes de Google, le temps de chargement médian des pages AMP est de 1 seconde, ce qui est 4 fois plus rapide que la page HTML standard moyenne.

Nous avons déjà évoqué le lien entre le taux de rebond et la vitesse des pages, et nous avons vu un compte rendu détaillé du fonctionnement d’AMP et de sa comparaison avec les PWA, les RWD et les Instant Articles de Facebook.

Cette section du guide se concentre sur les avantages et les restrictions d’AMP, vous aidant à obtenir un compte rendu détaillé de ce que vous allez faire lorsque vous créez des pages AMP.

Lorsque votre page web mobile se charge plus rapidement, vous améliorez automatiquement l’expérience utilisateur et vos indicateurs de performance clés. Grâce au chargement instantané des pages AMP, vous êtes en mesure d’offrir une expérience web rapide et cohérente à vos utilisateurs sur tous les appareils et toutes les plateformes telles que Google, LinkedIn et Bing.

AMP offre les avantages suivants à vos pages mobiles.

Engager les internautes

Le temps de chargement médian des pages AMP est inférieur à une seconde, ce qui signifie que lorsqu’un utilisateur arrive sur une page AMP, il obtient instantanément ce qu’il cherchait. Parce que la page se charge instantanément, il s’engage plus longtemps avec la page et est plus ouvert à l’apprentissage de votre offre, ce qui le rend plus susceptible d’effectuer l’action que vous vouliez qu’il prenne.

Maximise les revenus

Chaque seconde supplémentaire de chargement de votre page fait chuter vos conversions de 12 %. En d’autres termes, si vous voulez susciter l’intérêt de votre public et augmenter votre retour sur investissement, vous devez veiller à ce que votre page mobile réponde aux attentes de vos visiteurs en matière de vitesse.

Le framework AMP vous permet d’offrir aux utilisateurs une expérience plus rapide partout, y compris dans les publicités, les pages de renvoi post-clic et les sites web.

Maintenir la flexibilité et le contrôle

Lorsque vous adoptez le format AMP, vous avez la possibilité de conserver votre propre image de marque tout en profitant des composants web optimisés d’AMP. Vous pouvez utiliser les feuilles de style en cascade (CSS) pour personnaliser le style de votre page Web et utiliser du contenu dynamique pour récupérer des données si nécessaire.

Vous pouvez également utiliser les tests A/B pour tester et créer la meilleure expérience utilisateur mobile possible pour vos clients.

Réduire la complexité de vos opérations

Le processus de création de pages AMP est assez simple et direct. Vous avez la possibilité de convertir l’ensemble de vos archives, surtout si vous utilisez des CMS, notamment Drupal et WordPress.

Il n’est pas nécessaire d’avoir des compétences particulières pour optimiser le code de chaque page AMP, le format AMP est entièrement portable et les pages AMP sont toujours rapides, quelle que soit la façon dont l’utilisateur y accède.

Optimisez votre retour sur investissement

Une fois créées, les pages AMP peuvent être diffusées simultanément sur une grande variété de plateformes de diffusion. Cela vous permet de diffuser vos annonces sur les pages AMP et non-AMP, ce qui signifie que vous pouvez créer vos annonces une fois et offrir une expérience de marque mémorable partout.

Créer un avenir durable

Le projet AMP est une initiative open-source qui protège l’avenir du web en aidant tout le monde à offrir une expérience utilisateur mobile meilleure et plus rapide. Vous pouvez rejoindre le projet AMP et construire un avenir durable pour votre entreprise sur un web ouvert et plus rapide en rejoignant le projet AMP.

Fournir une meilleure expérience utilisateur

Bien sûr, l’avantage le plus évident de l’utilisation de pages d’atterrissage post-clic accélérées pour les mobiles est qu’elles procurent une satisfaction beaucoup plus grande aux utilisateurs. Lorsqu’une personne sur deux ne peut pas se permettre d’attendre 10 secondes le chargement d’un site Web, accélérer le processus de 15 à 85 % peut avoir un impact considérable sur le bonheur des visiteurs.

Boostez votre référencement

L’algorithme de Google tient compte de la vitesse des pages et de la réactivité sur mobile. Plus votre page se charge rapidement sur mobile, plus elle sera bien classée dans les pages de résultats des moteurs de recherche.

Toutes les pages compatibles AMP apparaîtront dans un format carrousel, même au-dessus des annonces payantes dans les résultats de recherche, avec un éclair vert sous le titre.

Bien que l’utilisation des pages AMP vous offre de nombreux avantages, elle présente également quelques inconvénients.

Pas de JavaScript tiers

Comme vous n’avez pas la possibilité d’utiliser le JavaScript d’une tierce partie, vous devez dire adieu aux capacités d’analyse et de suivi qui vous permettent de proposer des expériences publicitaires très ciblées.

De plus, avec la version allégée de JavaScript de Google, les éléments de page qui nécessitent le transfert de données ne peuvent pas être utilisés sur les pages AMP.

Un tracking possible avec Google Tag Manager

Google utilise une version en cache des pages AMP pour les utilisateurs au lieu d’accéder à vos serveurs, c’est l’une des raisons pour lesquelles les pages AMP se chargent si rapidement. Bien que le cache permette à vos pages de se charger plus rapidement, Google Analytics ne suit pas les visites des utilisateurs, à moins que vous ne configuriez GA et n’appliquiez des codes de suivi distincts à vos pages AMP.

Vous pouvez cependant suivre les pages AMP dans Google Analytics avec Google Tag Manager.

Les pages AMP ont leurs propres avantages et inconvénients, mais si vous cherchez à offrir à vos visiteurs une expérience mobile rapide et optimisée, les avantages d’AMP l’emportent nettement sur les inconvénients.