Page mobile accélérée


Les pages mobiles accélérées sont une structure ouverte multiplateforme qui peuvent considérablement augmenter la vitesse de chargement des sites web mobiles. Cela se base sur la réduction du CSS et du JavaScript, un réseau de diffusion de contenu et une modification du HTML. Le projet est pris en charge par Google.

Contexte

L’utilisation de l’Internet mobile augmente à rythme très rapide dans le monde entier. On dit aussi que l’avenir d’Internet sera mobile dans de nombreux domaines. Le contenu web se doit donc d’être optimisé pour ces appareil-là. Le commerce mobile est également concerné. Les changements dans les habitudes de navigation affectent les aspects de webdesign et les adaptations techniques qui sont utilisées sur les sites web d’aujourd’hui. Afin d’améliorer l’utilisabilité, les sites mobiles doivent être plus rapide. Selon un sondage mené en Allemagne en 2015, plus de 50% des interrogés considèrent que les pages mobiles ne devraient pas prendre plus de 3 secondes à charger.

Une autre étude a révélé que le taux de rebond augmente de plus de 50% si le chargement d’un site mobile nécessite plus de 10 secondes. L’effet de ces différences dans les temps de chargement est encore plus évident sur les boutiques en ligne. Ici, quelques fractions de seconde peuvent déterminer si un visiteur devient un acheteur ou non. L’optimisation de la vitesse devrait donc être intégrée dans l’optimisation mobile. En nommant la vitesse comme un facteur de classement en 2010, Google a par ailleurs souligné que cette dernière est un aspect très important d’une expérience utilisateur positive.

Historique

Le projet Accelerated Mobile Pages a été lancé en octobre 2015. La création de cette entreprise ouverte a lancé de nombreux débats entre les éditeurs et les entreprises technologiques : la nécessité de charger plus rapidement du contenu mobile en était souvent le sujet principal. Les initiateurs, dont Google, WordPress et Adobe, aspiraient à créer un écosystème mobile complet. Ce système devait être bénéfique à la fois pour les éditeurs et pour les développeurs, ainsi que les utilisateurs et les plateformes grand public. Les autres partenaires technologiques incluent les réseaux sociaux Pinterest, Twitter et LinkedIn. Les éditeurs qui ont été les premiers à intégrer les AMP étaient le Washington Post et Buzzfeed aux États-Unis, le Zeit et le Frankfurter Allgemeine Zeitung en Allemagne et le journal El Pais en Espagne.

En raison de l’approche open source, il faut s’attendre à ce que les pages mobiles accélérées se répandent et s’enracinent rapidement, comme l’a par exemple fait le système d’exploitation Android pour les smartphones. Avec l’annonce de Google sur l’indexation des sites web AMP à partir du mois de février 2016, les webmasters ont désormais une incitation supplémentaire pour mettre en place cette structure. On pense même que Google rendra les pages AMP reconnaissables dans les SERP, tout comme il le fait déjà pour les pages qui sont optimisées pour une utilisation mobile. Dans cette vidéo en anglais, Paul Bakaus, développeur HTML5, donne une explication détaillée et claire du projet AMP et en souligne les avantages technologiques.

<video type="youtube">SOx1XfOjJPI</video>

Principe de fonctionnement

La vitesse de chargement d’un site web dépend principalement de la taille des fichiers à partager. On tente donc de réduire la taille totale d’une page web à son minimum. Dans le même temps, le contenu du site AMP est mis en cache et à disposition sur un serveur proxy. Si un utilisateur accède au contenu, ce dernier est chargé dans un réseau de distribution du contenu. Le code source des sites AMP peut être interprété par tous les serveurs.

  • AMP HTML : le code source HTML est personnalisé est réduit par AMP. Une seule demande HTTP est produite par appel de page.
  • AMP JavaScript : les sites web AMP utilisent uniquement le JavaScript asynchrone. Il garantit un rendu rapide du site web car le chargement de la page ne peut pas être bloqué par les ressources JS. Si des fichiers JavaScript tiers sont intégrés, ce sera effectué à l’aide d’iframes.
  • AMP CDN : un cache des sites AMP est créé sur les serveurs proxy partout dans le monde. De cette façon, le contenu peut ensuite être livré via un réseau de distribution de contenu basé sur http 2.0. Le CDN vérifie également si le site web AMP est fonctionnel.

Le grand avantage des pages mobiles accélérées est que la vitesse de chargement d’un site web peut être calculée et échelonnée avec précision et à l’avance. D’autres améliorations comprennent la spécification de la taille de fichier exacte pour les images ou autres supports intégrés. Lorsqu’un site web AMP est chargé, la technologie permet de prioriser les téléchargements individuels. Ici, les positions des fichiers individuels au sein des sources sont également interprétées en plus de la taille du fichier.

Les fichiers CSS sont également affectés par l’optimisation de la vitesse. Par exemple, seuls les inline styles qui ne dépassent pas 50 kB sont autorisés pour le CSS.

Applications

Fondamentalement, les pages mobiles accélérées ne se limitent pas à une zone spécifique du web. Les applications de e-commerce pour les sites web AMP, les formulaires d’inscription spéciaux, les cartes de paiement, etc. sont également envisageables. Les pionniers avaient choisi de s’abstenir de toute restriction préalable. En ce qui concerne l’intégration des sites web AMP dans les résultats de recherche Google, seuls les éditeurs d’actualités ont jusqu’à présent été affectés (décembre 2015). À long terme, cependant, les boutiques en ligne possédant des pages spéciales de produits AMP ou encore les agences de voyage, qui simplifient la réservation à travers des sites AMP pour les utilisateurs mobiles, sont égalements susceptibles d’être intégrées. Comme il n’y a pas de limites en terme de plateforme ou de but, de nombreuses applications différentes apparaîtront certainement au cours des prochaines années.

Modifications dans le code HTML

Des modifications dans le code source HTML sont nécessaires pour intégrer les sites web AMP. Par exemple, les balises multimédias reçoivent le préfixe “amp” :

  • images : amp-image
  • vidéos : amp-video
  • fichiers audiot: amp.audio
  • iframes : amp-iframe


Voici un exemple dans le cas d’une vidéo : 

<amp-video src="topvideo.jpg" alt="ma meilleure video" height="500" width="800"></amp-video>


Ces balises doivent être utilisées pour les sites AMP :

  • Format du document :
<!doctype html>
  • Balise de premier niveau : balise <html> (<html amp> fonctionne aussi).
  • Liens canoniques dans la section <head> :
<link rel="canonical" href="Original-URL" />
  • Codage dans la section <head> :
<meta charset="utf-8">
  • Viewport dans la section <head> :
<meta name="viewport" content="width=device-width,minimum-scale=1">
  • Référence au AMP-CDN dans la zone <head> :
<script async src="https://cdn.ampproject.org/v0.js"></script>
  • Précision sur l’opacité :
<style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>


Alors que l’attribut rel et canonique n’est pas une obligation dans les sites web classiques, les sites web AMP doivent contenir ces deux éléments dans la section.

  • L’attribut rel indique aux robots d’exploration qu’il existe également une version AMP de la page en question.

Exemple : 

<link rel="amphtml" href="https://www.mapage.fr/pageamp-la-page-complete.html">
  • Balise canonique : la balise canonique sur le site web AMP pointe vers le site web original.
<link rel="canonical" href="https://www.monsite.fr/pagecomplete.html">

À compter d’aujourd’hui, Google n’a pas publié de recommandations spécifiques concernant les balises rel des sites AMP ou si ces dernières devaient être combinées avec d’autres balises rel pour l’app indexing. Même pour la combinaison avec le hreflang, il n’existe toujours pas de consignes spécifiques. Si la page AMP est le seul site web qui possède ce contenu, la balise canonique pointe donc vers elle-même. 

<link rel="canonical" href=" https://www.monsite.fr/pageamp-la-page-complete.html ">

Importance pour le marketing mobile

Les sites web AMP sont censés se charger en millisecondes. Étant donné que les publicités sont également affectées par une vitesse optimisée du chargement, les annonceurs peuvent utiliser la méthode AMP pour essayer de s’assurer que leurs publicités n’ont pas d’effet négatif sur l’expérience utilisateur. C’est parce qu’aujourd’hui, les bannières publicitaires et les interstitiels sont souvent perçus comme une perturbation par les utilisateurs mobiles.

Enfin, Les structures AMP prennent en charge plusieurs formats de publicité. Cette technologie présente donc aux annonceurs un large gamme d’options publicitaires. Étant donné que la structure n’est pas dépendante de la plateforme, les annonceurs ne se limitent pas à une seule entreprise lorsqu’ils souhaitent placer des publicités.

Liens web

Récupérée de « https://fr.ryte.com/wiki/index.php?title=Page_mobile_accélérée&oldid=4837 »

Category