Il existe environ 1,5 million de pages mobiles accélérées (AMP) sur le Web.

AMP aide non seulement à améliorer le temps de chargement, mais supprime également le JavaScript, le CSS et le chargement paresseux inutiles. Il a aidé diverses organisations à développer des pages Web propres et rationalisées et à tripler la vitesse de leurs pages.

Dans cet article, vous découvrirez les composants d'un AMP, son fonctionnement, ses avantages, ses restrictions et sa position par rapport aux applications Web progressives (PWA) et à la conception Web réactive.

Qu'est-ce que l'AMP ?

Découvrons ce qu'est AMP pour mieux le comprendre.

Une combinaison des trois composants de base et des techniques d'optimisation garantit une expérience utilisateur ultra rapide.

Composants de base d'AMP

AMP est composé de trois éléments : HTML, JavaScript et Cache.

AMP HTML

AMP HTML est différent des balises HTML classiques car il contient également des balises spécifiques à AMP. Également appelées balises personnalisées, ces balises facilitent l'exécution d'AMP dans le code.

AMP HTML restreint certains codes HTML pour des performances fiables du site Web. Le moteur de recherche Google et d'autres plates-formes reconnaissent AMP via des balises HTML.

JavaScript AMP

La bibliothèque JavaScript AMP met en œuvre les meilleures pratiques de performance AMP pour garantir un rendu rapide des pages HTML AMP. Les meilleures pratiques incluent le CSS en ligne et le déclenchement des polices.

Tout ce qui provient des ressources externes est rendu asynchrone avec AMP JS afin d'éviter tout retard de rendu. AMP JS désactive également les sélecteurs CSS lents et précalcule les éléments de la page avant de charger les ressources pour améliorer les performances de la page.

Cache AMP

La mise en cache est une technique bien connue pour améliorer les performances d'une page. AMP utilise un réseau de diffusion de contenu basé sur un proxy sous la forme d'un cache AMP pour les documents AMP valides.

Le cache AMP est livré avec son propre système de validation. Le système utilise une série d'assertions qui valident le balisage d'une page par rapport aux spécifications AMP HTML.

Une version distincte du système de validation enregistre les erreurs de validation directement dans la console d'un navigateur, ce qui vous permet de voir les modifications de code qui affectent les performances et l'expérience utilisateur.

Techniques d'optimisation

Maintenant que vous connaissez les composants de base qui composent le framework AMP, passons en revue les techniques d'optimisation qui permettent le chargement rapide des pages.

Exécution JavaScript asynchrone

AMP n'autorise que le JavaScript asynchrone, car JavaScript a tendance à retarder le rendu des pages et à bloquer la construction du DOM. Il est important de s'assurer que JavaScript ne retarde pas le rendu, sinon il affecte directement les vitesses de chargement de la page.

Taille statique pour toutes les ressources

AMP aime déterminer la taille et la position de chaque élément avant que les ressources ne soient chargées. C'est la raison pour laquelle toutes les ressources externes telles que les images ou les publicités doivent indiquer leur taille HTML. En utilisant ces informations, AMP charge la mise en page de la page sans attendre le téléchargement des ressources.

Mécanisme d'extension

AMP bloque beaucoup de Javascript, CSS et HTML inutiles pour la vitesse, mais il permet des extensions pour des éléments tels que les visionneuses et les intégrations de médias sociaux.

Aucune utilisation de JavaScript tiers

Les JavaScripts tiers ralentissent le temps de chargement en raison du chargement synchrone. Les pages AMP autorisent JavaScript, mais uniquement dans les iframes en bac à sable. En raison du sandboxing, Javascript ne peut pas bloquer l'exécution de la page principale.

CSS en ligne et lié à la taille

CSS a tendance à provoquer des ballonnements et retarde également le rendu. AMP HTML utilise le style en ligne pour supprimer de nombreuses requêtes HTTP vers des pages Web. Il devrait y avoir 50 Ko ouverts pour le CSS en ligne, suffisamment d'espace pour les pages Web sophistiquées.

Déclenchement efficace des polices

Une page typique se compose de scripts de synchronisation et de quelques styles externes. Le navigateur ne télécharge pas les polices tant que les scripts ne sont pas chargés.

Exécuter uniquement des animations accélérées par GPU

Les animations lourdes nécessitent une accélération GPU. Le GPU exécute toutes ses tâches en couches. Pourtant, le GPU ne peut pas mettre à jour la mise en page. Il confie la tâche au navigateur Web, qui n'est pas aussi efficace du point de vue de la vitesse.

Priorisation du chargement des ressources

L'une des façons dont AMP maintient des vitesses rapides consiste à donner la priorité au chargement des ressources. Il charge uniquement les ressources nécessaires et pré-extrait également les ressources chargées paresseux.

Chargement instantané des pages

Les AMP sont chargés instantanément car ils sont rendus avant même qu'un utilisateur ne pointe vers une page vers laquelle il souhaite naviguer. Ceci est rendu possible via l'API de pré-connexion AMP sans utiliser beaucoup de bande passante ou de CPU.

Avantages de l'AMP

L'expérience utilisateur s'améliore lorsque les pages d'une application se chargent plus rapidement que la norme. Il améliore l'expérience Web sur différents appareils et plates-formes. Grâce à ces innovations, AMP présente de nombreux avantages.

Engagez plus de clients

Les visiteurs de votre site Web obtiendront instantanément les informations dont ils ont besoin. Cela est possible car le temps de chargement médian des AMP est inférieur à une seconde. Un temps de chargement aussi bref conduit à un engagement accru de la page et rend les visiteurs plus susceptibles d'agir sur vos CTA.

Maximiser les revenus

Tout comme une seconde d'indisponibilité peut déterminer le sort de la valeur marchande d'un conglomérat, un retard d'une seconde sur votre site Web diminue votre taux de conversion de 12 %. AMP offre une expérience utilisateur plus rapide sur les sites Web, les annonces et les pages de destination post-clic.

Maintenir la flexibilité

Lorsque vous utilisez AMP, vous avez la possibilité d'utiliser des composants Web optimisés. Vous pouvez utiliser CSS pour styliser et récupérer des données à partir des pages Web, puis effectuer des tests A/B pour garantir la meilleure expérience utilisateur.

Réduire la complexité

Le processus de création d'AMP est simple et direct. L'intégralité de votre archive peut être facilement convertie en AMP, y compris votre archive CMS. Aucune compétence particulière n'est requise pour optimiser les pages AMP.

Maximiser le retour sur investissement

Une fois les pages AMP créées, elles sont distribuées simultanément sur différentes plates-formes. Cette fonctionnalité d'AMP permet aux annonces d'être utilisées à la fois sur les pages AMP et non AMP. Ainsi, vous pouvez créer des publicités et diffuser votre expérience de marque sur toutes les plateformes, en maximisant le retour sur investissement de votre budget publicitaire.

Créer un avenir durable

En tant que projet open source, AMP vise à créer des applications qui s'engagent à offrir des expériences utilisateur plus rapides et meilleures. Vous pouvez faire partie de cet avenir durable en déployant AMP dans vos applications mobiles et vos sites Web.

Améliorer l'expérience utilisateur

Votre objectif ultime devrait être de créer une meilleure expérience utilisateur. AMP peut accélérer votre temps de chargement de 15 % à 85 %. Même si cela ne signifie qu'une seconde d'amélioration, cela vaut la peine d'essayer AMP - vous pourriez être surpris de voir à quel point cela améliore votre UX.

Boostez le référencement

Lors du classement des sites Web, les algorithmes de Google reconnaissent la vitesse de chargement des pages et la réactivité mobile. Le temps de chargement de votre site Web mobile aidera à déterminer votre rang de page. Plus il se charge rapidement, plus il sera classé haut dans la page de résultats du moteur de recherche.

Les pages optimisées pour AMP comportent une icône représentant un éclair vert sous le titre, indiquant leur vitesse de chargement rapide. Les pages compatibles AMP sont également présentées sous forme de carrousel au-dessus des publicités payantes sur les SERP.

Restrictions de l'AMP

Il ne fait aucun doute que les pages AMP offrent de nombreux avantages, mais certaines lacunes ne peuvent être négligées. En voici quelques-uns.

Pas de JavaScript tiers

Étant donné que les AMP limitent JavaScript, les développeurs ne peuvent pas suivre les capacités d'analyse. En conséquence, il devient difficile de fournir une expérience utilisateur sur mesure.

Pas de suivi Google Analytics

La raison pour laquelle les AMP sont plus rapides empêche également AMP d'utiliser Google Analytics. Google utilise une version en cache des AMP au lieu de charger des pages à partir du serveur. Il ne garde pas une trace du nombre de visiteurs jusqu'à ce que vous fassiez des configurations GA et que vous utilisiez des codes de suivi distincts.

AMP par rapport aux autres frameworks optimisés

AMP est un moyen innovant d'accélérer les temps de chargement de vos pages mobiles, mais ce n'est pas le seul framework optimisé. Voici comment il se dresse contre les alternatives.

AMP vs articles instantanés Facebook

Les pages AMP et les articles instantanés Facebook accélèrent le processus de chargement des informations. Même si les pages AMP sont plus populaires que les alternatives Web, le taux d'engagement et la vitesse d'un article instantané Facebook sont bien supérieurs à ceux d'un AMP. En effet, Facebook a commencé à donner la priorité aux articles texte et vidéo, ce qui a conduit les développeurs à cesser d'utiliser des articles instantanés.

AMP vs conception de sites Web réactifs

Les sites Web mobiles dominent les applications Web depuis 2015, lorsque Google a lancé son algorithme adapté aux mobiles, un événement appelé mobilegeddon. Les pages Web mobiles créées avec une conception Web réactive offrent des formats flexibles pour différentes tailles et orientations d'écran.

D'autre part, AMP est venu en 2016 pour accélérer le temps de chargement des pages Web. Les deux pages utilisent Javascript et HTML pour la partie codage, mais AMP se concentre généralement davantage sur la vitesse et a également introduit le rendu de contenu instantané.

AMP se combine avec les sites Web réactifs existants sans nécessiter la refonte des pages Web, mais pour développer une page Web réactive à combiner avec une autre, une refonte est nécessaire. La conception Web réactive fait évoluer les pages Web plutôt que de travailler sur la vitesse. AMP a des fonctionnalités plus limitées qui lui permettent de charger des pages Web beaucoup plus rapidement que les pages de conception Web réactives.

AMP contre PWA

AMP est optimisé pour la vitesse, tandis que les applications Web progressives (PWA) mettent l'accent sur l'apparence du site Web. Les PWA mettent à jour les pages Web de manière dynamique sans interrompre l'expérience utilisateur.

AMP et PWA, s'ils sont utilisés ensemble, peuvent vous aider à créer un site Web dynamique avec un processus de rendu de page rapide.

Améliorez vos pages mobiles

Avec une gamme de frameworks optimisés comme AMP, Facebook Instant Articles et PWA, il n'y a vraiment aucune excuse pour un faible engagement et des taux de rebond élevés sur vos pages mobiles. Utilisez les techniques d'optimisation AMP pour offrir une expérience puissante et répondre aux attentes de vitesse de Google.

Utiliser AMP pour optimiser votre site Web ? Vous aurez également besoin d'une plate-forme de développement mobile. Voir toutes les options disponibles sur G2.