Qu’est-ce que l’AMP ? Le guide complet des pages mobiles accélérées

Qu’est-ce que l’AMP ? Le guide complet des pages mobiles accélérées

Qu’est-ce que l’AMP ? Le guide complet des pages mobiles accélérées

Qu’est-ce que les pages mobiles accélérées de Google (AMP) ?

Accelerated Mobile Pages (AMP) est un cadre open-source formulé par Google visant à rendre l’expérience du web mobile meilleure, plus rapide et plus belle.
L’état d’esprit du mobile est là pour rester – cette affirmation est vraie tant du côté des entreprises que des consommateurs.

Dire que les utilisateurs consultent leur téléphone portable avant d’effectuer un achat serait un euphémisme. L’utilisation de l’internet mobile a dépassé l’utilisation des téléphones portables de bureau dans le monde entier.

Techniquement, les pages mobiles accélérées (AMP) sont des copies HTML dépouillées du contenu de pages Web existantes qui offrent des temps de chargement plus rapides que les documents HTML5 standard. Les pages AMP peuvent être servies par les sites web, en implémentant la balise rel=amphtml dans leur HTML.

Les pages AMP sont indiquées par un petit éclair gris à côté de certains résultats de recherche Google. Ce symbole AMP clignotant indique que le site web est optimisé pour se charger rapidement sur les appareils mobiles.

Example of Accelerated Mobile Pages

Composants des pages mobiles accélérées de Google

Composées de la forme la plus légère des langages de codage populaires, ces pages avec le cadre AMP contiennent une configuration AMP en trois étapes :

components of accelerated mobile pages

  • HTML : Comme Javascript n’est pas du tout autorisé, on utilise un balisage différent du code HTML traditionnel avec des balises uniques. Le cadre de l’AMP exige également que vous utilisiez une version simplifiée du CSS.Screenshot showing how AMP HTML tag works
  • JS : Elle est utilisée pour récupérer des ressources et est réduite pour éliminer les rendus sans importance. Grâce à la vaste bibliothèque de composants JS d’AMP, vous pouvez charger du contenu, créer des animations, modifier la mise en page, et bien plus encore.
  • CDN : Le réseau de diffusion de contenu basé sur un proxy (CDN), communément appelé AMP Cache, est un composant essentiel de la plate-forme AMP.

Fondamentalement, avec un code minimal, lorsque vous intégrez l’AMP pour normaliser vos pages mobiles, vous considérez la vitesse et la lisibilité comme une priorité absolue par rapport à tout autre élément, même par rapport au partage. C’est ce qui différencie la navigation mobile AMP de la navigation mobile non AMP.

Comment Google Accelerated Mobile Pages charge-t-il une page plus rapidement ?

Pour charger une page plus rapidement, le système AMP de Google fonctionne de la manière suivante :

  1. Exécuter tous les JavaScript AMP de manière asynchrone, c’est-à-dire que AMP crée des JavaScript individuels pour tous les blocs de contenu, et les charge séparément. Ainsi, pour une section particulière, la page entière n’a pas à subir de rendu.
  2. L’AMP charge la taille et la structure de la page sans aucune aide de ressources. Habituellement, le navigateur ne sait pas combien de temps la structure de la page va durer, mais dans le cas de l’AMP de Google, il détermine la taille des annonces, du contenu ou des visuels.
  3. En conservant tous les JavaScripts tiers dans la sandbox iframe, l’AMP Google garantit que les JavaScripts tiers ne peuvent pas bloquer le rendu des éléments principaux de la page. En d’autres termes, les annonces de tiers n’endommageront pas la vitesse de chargement du contenu de la page principale.
  4. L’AMP peut donner la priorité au chargement des ressources, ce qui permet à la page web de charger plus rapidement les éléments essentiels comme le contenu, les images, etc.Après avoir compris ce qu’est

l’AMP de Google et comment il fonctionne, nous devrions savoir pourquoi il est important pour le commerce électronique.

L’impact de la vitesse des pages web sur le taux de rebond

La vitesse est un facteur important pour mesurer le taux de rebond des pages web mobiles. Avant d’approfondir ce point, il est important d’expliquer que la vitesse est principalement considérée sous deux aspects pour les taux de rebond des sites mobiles, à savoir le temps de préparation du DOM et le temps de chargement d’une page entière :

Screenshot shows factors which could impact mobile browsing speed

1. Le temps de préparation des DOM : Le temps de préparation DOM est le temps nécessaire pour que le code HTML de la page soit reçu et analysé par le navigateur – c’est le meilleur indicateur du taux de rebond. Même si l’utilisateur ne sait pas quand le code HTML est reçu et analysé, le code doit être chargé avant que des éléments de la page, tels que les images, puissent être chargés. Si le code HTML est trop long, le temps de chargement du site est long. Pour accélérer le temps de préparation de votre page web mobile pour le DOM, il est préférable d’éviter l’utilisation de JavaScript qui bloque et empêche un navigateur d’analyser le code HTML. Les éléments de page qui utilisent JavaScript comprennent les publicités de tiers et les widgets sociaux qui doivent être récupérés sur un serveur externe avant que la page ne puisse être chargée.

2. Temps de chargement d’une page entière : Le temps de chargement d’une page complète comprend le temps nécessaire au chargement des images, des polices, des codes CSS, etc. sur une page web. Un chargement plus rapide d’une page entière entraîne un taux de rebond plus faible :

An example shows how browsing and bounce rates are directly proportional

Considérez ces révélations surprenantes sur la vitesse de chargement des pages :

  • Le site mobile moyen met 19 secondes à se charger sur une connexion 3G, et 77 % des sites mobiles mettent plus de 10 secondes à se charger.
  • Google a constaté que les conversions diminuent de 20 % pour chaque seconde supplémentaire que prend le chargement d’une page web. Pour comparer, les sites qui se sont chargés en 5 secondes avaient un href=”https://www.thinkwithgoogle.com/intl/en-154/insights-inspiration/research-data/need-mobile-speed-how-mobile-latency-impacts-publisher-revenue/” rel=”noopener” target=”_blank”>revenu publicitaire mobile 2x plus élevé que les sites qui se sont chargés en 19 secondes.
  • 61 % des utilisateurs ne retourneront probablement pas sur un site mobile auquel ils ont eu du mal à accéder.

Screenshot shows how many AMP pages have been published since launch

Depuis son lancement, non seulement le nombre de pages AMP a augmenté, mais aussi leur vitesse, le temps médian de chargement d’une page AMP à partir d’une recherche Google est maintenant inférieur à une demi-seconde.

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

Screenshot shows how much conversion rate increased with fast browsing experience

Google a accéléré les pages mobiles pour le commerce électronique

Au départ, l’AMP a été conçu pour les articles, les blogs et un autre contenu statique à charger plus rapidement. Mais, au fil des ans, avec les progrès, elle est maintenant fortement conseillée pour le commerce électronique. Alors que les sites de commerce électronique tournent lentement sur les mobiles, les équipes de développement du commerce électronique envisagent d’ajouter la fonctionnalité AMP pour réduire le temps de réponse des pages.

En ce qui concerne la navigation sur le web sur mobile, 46 % des personnes n’aiment pas attendre que les pages se chargent. Il faut en moyenne 15,3 secondes pour charger une page de destination sur un mobile.

Selon l’étude, un retard d’une seconde dans le temps de chargement des pages entraîne :

  • une perte de 7 % en termes de conversions
  • 11% de pages vues en moins
  • Réduction de 16 % de la satisfaction des clients
  • De plus, 50 % des utilisateurs mobiles abandonnent une page, si le temps de chargement est supérieur à 10 secondes.

mobile users fact

Pour mettre en œuvre la PGA pour le commerce électronique, il existe une approche légèrement différente. Voyons comment fonctionne la PGA pour le commerce électronique.

Il existe trois types de pages dans le commerce électronique où la PGA est efficace : La page d’accueil, les pages de catégories de produits et les pages de produits.

1. La page d’accueil

En ce qui concerne la PGA pour le commerce électronique, la page d’accueil est l’une des meilleures pages pour démarrer. Si la page d’accueil se charge rapidement, vous pouvez sauver beaucoup de clients potentiels.

2. Pages des catégories de produits

Les pages de catégories de produits sont les prochaines pages vitales pour ajouter l’AMP sur votre site de commerce électronique. Ainsi, lorsqu’un utilisateur consulte le produit sur Google, les pages optimisées pour l’AMP ont plus de chances d’être classées car elles sont relativement rapides.

3. Les pages de produits

Dans les pages de produits, l’AMP donne la priorité aux éléments de chargement : les images et les descriptions des produits sont des facteurs importants. L’AMP reconnaît les éléments et les fournit en premier. Tous les JS tiers seront chargés plus tard.

Ainsi, vous pouvez mettre en œuvre AMP pour le commerce électronique dans vos pages de produits en utilisant divers composants comme amp-selector, amp-access, amp-carousel, amp-bind, etc.

Comment activer l’AMP de Google sur votre site de commerce électronique

Pour ajouter Google AMP sur votre boutique en ligne, vous avez besoin des éléments suivants :

Ajout de l’AMP à la page d’accueil

La page d’accueil, étant la façade de votre magasin de commerce électronique, connaît plus de trafic que les pages intérieures. Pour que le parcours de vos acheteurs jusqu’à votre page d’accueil se déroule sans encombre, il est donc essentiel de simplifier la mise en page de votre page d’accueil en veillant à ce que le contenu ne soit pas statique.

Ajoutez donc un composant “amp-carousel” sur la page d’accueil qui vous permet d’afficher différentes images le long d’un axe horizontal. Dans ce cas, utilisez type=”carousel” pour afficher une séquence d’images sous forme de bande continue.

Ajout de la PGA aux pages des produits

Les pages de produits comprennent une description, des photos, des critiques et les prix d’un produit. Utilisez le sélecteur d’ampli pour faire choisir à l’utilisateur une liste d’options qui peuvent être du texte ou des images

Avantages de l’utilisation de Google AMP pour le commerce électronique

Améliorer les conversions grâce à une expérience rapide et conviviale

L’ajout d’une AMP à votre boutique de commerce électronique augmente la vitesse de chargement instantané des pages, ce qui permet à vos acheteurs de trouver vos produits facilement et rapidement. En reliant vos plateformes les plus utilisées telles que Google, Bing, Pinterest et Twitter aux pages AMP, vous pouvez créer une expérience de découverte surchargée pour les utilisateurs. Cette expérience utilisateur améliorée se traduit souvent par de meilleures conversions et un meilleur engagement.

Conserver la flexibilité et le contrôle

Même si vous choisissez d’adopter la PGA, vous pouvez toujours utiliser le CSS pour personnaliser votre style, les données dynamiques pour récupérer les nouvelles données là où elles sont nécessaires et les tests A/B pour expérimenter et construire la meilleure expérience possible pour l’acheteur.

Améliorer la valeur moyenne des commandes et maximiser les ventes

Avec l’AMP, votre magasin de commerce électronique fonctionne bien et le nombre de clients qui reviennent augmente. Ainsi, qu’il s’agisse d’un petit magasin ou d’une place de marché, l’AMP peut vous permettre de réaliser la vente.

Les avantages du CHA pour le commerce électronique

La mise en œuvre n’est pas facile

Le principal inconvénient de la mise en œuvre de la PGA dans votre magasin de commerce électronique est que vous aurez besoin d’un développeur expert en commerce électronique. Cela étant dit, la mise en œuvre est beaucoup plus facile, si vous êtes propriétaire d’un site WordPress. Dans ce cas, il vous suffit d’ajouter AMP for WordPress à votre site web.

Un classement plus élevé n’est pas garanti

Il est important de noter qu’il n’est pas garanti d’obtenir un meilleur classement directement dans les résultats de recherche. Outre la vitesse accrue qui permet de mieux classer les sites web, Google prend également en compte d’autres facteurs de classement.

Personnaliser les pages mobiles accélérées de Google

Les Webmasters,  en utilisant la Google Search Console ou votre HTML, peuvent optimiser le code AMP pour les rendre plus personnalisables et plus faciles à suivre. Le cache AMP est mis à jour en utilisant la requête “update-cache”.

Vous pouvez personnaliser de nombreuses options pour ajouter plus de fonctionnalités à vos pages AMP, telles que les annonces et les analyses, le contenu dynamique, la mise en page, les médias, la présentation, les réseaux sociaux, et bien plus encore.

Voici quelques exemples de personnalisation de votre document HTML AMP.

  • amp-pixel : pixel de suivi
  • amp-analytics : suivi analytique
  • amp-animation : ajouter des animations
  • amp-dynamic-CSS-classes : éléments CSS dynamiques
  • amp-iframe : afficher une iframe
  • amp-app-banner : bannière fixe

.

Write a comment