Pages mobiles accélérées (AMP)

Google a lancé le projet AMP (Accelerated Mobile Pages) pour rendre le web mobile plus rapide et plus agréable à utiliser. Ce cadre open-source permet de créer des versions de sites Web rationalisées et optimisées pour un chargement rapide sur les appareils mobiles.

Pour ce faire, il met en œuvre un type spécial de HTML, appelé AMP HTML, qui restreint certaines balises et certains scripts afin de réduire la taille et la complexité de la page. De plus, Google stocke les pages AMP sur ses serveurs pour une vitesse de chargement encore plus rapide, ce qui améliore les temps de chargement.

Avec AMP, ils s’efforcent d’améliorer l’expérience de navigation sur le web mobile. Nous nous efforçons de réduire le temps de chargement des pages, de stimuler l’engagement des utilisateurs et d’améliorer le classement des moteurs de recherche.

Qu’est-ce que l’AMP ?

Accelerated Mobile Pages (AMP) est un projet lancé par Google pour améliorer la vitesse et les performances des pages Web mobiles. Il s’agit d’un cadre ouvert qui permet aux développeurs web de créer des versions simplifiées de pages web optimisées pour un chargement rapide sur les appareils mobiles.

Les AMP (Accelerated Mobile Pages) sont un excellent moyen pour les développeurs web de créer des versions simplifiées des pages web afin de les charger rapidement sur les appareils mobiles. AMP utilise un type de HTML spécifique, appelé AMP HTML, qui restreint l’utilisation de certaines balises et de certains scripts afin de minimiser la taille et la complexité des pages. Par exemple, AMP HTML ne permet pas l’utilisation de certaines bibliothèques JavaScript et de polices personnalisées, ce qui peut ralentir le chargement des pages. En outre, les pages AMP doivent utiliser une mise en page simplifiée, ce qui améliore encore les temps de chargement.

Google met en cache les pages AMP sur ses serveurs, ce qui améliore encore les temps de chargement. Lorsqu’un utilisateur demande une page AMP, la version en cache est servie directement par les serveurs de Google et non par le serveur de l’éditeur, ce qui permet des temps de chargement plus rapides.

En outre, Google a mis en place un processus de validation des pages AMP afin de s’assurer qu’elles répondent aux spécifications techniques requises, ce qui permet un chargement plus rapide de la page sur les navigateurs web compatibles AMP.

AMP vise à créer un web mobile plus rapide et plus convivial en réduisant le temps de chargement des pages, en améliorant l’engagement des utilisateurs et en renforçant le classement des moteurs de recherche. Les pages AMP sont également conçues pour fonctionner de manière transparente sur différentes plateformes, ce qui permet une expérience utilisateur cohérente et positive quel que soit l’appareil utilisé.

Aperçu technique du cadre HTML AMP.

Le cadre HTML AMP est un sous-ensemble de HTML utilisé pour créer des pages AMP. Il est similaire au HTML ordinaire, mais avec certaines restrictions et des balises supplémentaires conçues pour améliorer les performances et la vitesse de la page.

Voici quelques caractéristiques clés du cadre HTML AMP :

• Utilisation limitée de JavaScript : les pages HTML AMP ne sont pas autorisées à inclure du JavaScript personnalisé, ce qui peut ralentir le chargement des pages. Au lieu de cela, les développeurs peuvent utiliser un ensemble de bibliothèques JavaScript pré-approuvées fournies par AMP.
• Mise en page simplifiée : Les pages HTML AMP doivent utiliser une mise en page simplifiée, ce qui peut contribuer à améliorer les temps de chargement. Cela inclut l’utilisation de balises spécifiques pour certains éléments de la page, comme la balise « amp-img » pour les images, qui ajoute automatiquement à l’image les attributs de taille et de mise en page appropriés.
• Restrictions sur certaines des balises HTML habituelles : Certaines des balises HTML habituelles, comme form ou input, ne sont pas prises en charge. Au lieu de cela, des versions spécifiques d’AMP, comme « amp-form » et « amp-input », sont conçues pour de meilleures performances.
• Utilisation de balises spécifiques à AMP : Le HTML AMP comprend plusieurs balises supplémentaires spécifiques au cadre AMP. Par exemple, la balise « amp-accordion » permet de créer des sections extensibles, et la balise « amp-video » permet d’intégrer des vidéos avec les attributs appropriés pour un chargement plus rapide.
• Utilisation d’attributs obligatoires et facultatifs : le langage AMP HTML exige certains attributs pour des balises spécifiques afin d’améliorer les performances et d’assurer la conformité aux spécifications AMP. Par exemple, la balise « img » doit inclure les attributs « width » et « height » pour permettre au navigateur de pré-rendre la page.

Tous ces éléments fonctionnent ensemble pour charger les pages AMP plus rapidement tout en conservant les informations pertinentes et essentielles, offrant ainsi une expérience utilisateur améliorée sur les appareils mobiles. Il est important de noter que le HTML AMP ne remplace pas le HTML normal, mais qu’il offre une alternative pour créer des pages à chargement rapide, en particulier pour le web mobile.

Caractéristiques principales d’AMP

Les pages mobiles accélérées (AMP) sont conçues pour améliorer la vitesse et les performances des pages Web mobiles. Voici quelques-unes des principales caractéristiques qui contribuent à sa capacité à charger rapidement les pages sur les appareils mobiles :

1. Taille réduite des pages : les pages HTML AMP sont conçues pour être plus petites et plus simples que les pages HTML ordinaires, ce qui permet de réduire la quantité de données qui doivent être téléchargées et traitées par le navigateur. Cela permet d’accélérer considérablement les temps de chargement, notamment sur les réseaux mobiles plus lents.
2. Mise en cache : Google met en cache les pages AMP sur ses serveurs, ce qui leur permet d’être servies directement à partir des serveurs de Google et non du serveur de l’éditeur. Cela peut encore améliorer les temps de chargement.
3. Hiérarchisation des ressources de chargement : AMP HTML dispose d’un mécanisme intégré pour hiérarchiser les ressources de chargement, telles que les images et les scripts. Ainsi, le contenu le plus important est chargé en premier, tandis que les ressources moins essentielles sont chargées en arrière-plan, ce qui permet à l’utilisateur de voir le contenu plus rapidement.
4. Restriction du Javascript : Les pages HTML AMP ne peuvent pas inclure de JavaScript personnalisé, ce qui peut ralentir le temps de chargement des pages. Au lieu de cela, les développeurs peuvent utiliser un ensemble de bibliothèques JavaScript pré-approuvées fournies par AMP.
5. Conception réactive : Les pages AMP sont conçues pour fonctionner de manière transparente sur différentes plateformes, permettant une expérience utilisateur cohérente et positive quel que soit l’appareil utilisé. Les pages AMP sont automatiquement ajustées pour s’adapter à la taille et à l’orientation de l’écran de l’appareil et fonctionnent sur diverses plateformes et appareils.

Toutes ces fonctionnalités fonctionnent ensemble pour que les pages AMP se chargent beaucoup plus rapidement, ce qui se traduit par une expérience utilisateur améliorée et augmente l’engagement des utilisateurs. Google affiche également les pages AMP avec une icône en forme d’éclair à côté d’elles dans ses résultats de recherche, ce qui rend plus probable le fait que les utilisateurs cliquent dessus, ce qui peut contribuer à augmenter le trafic et la visibilité des éditeurs utilisant AMP.

Avantages de l’AMP

L’utilisation des pages mobiles accélérées (AMP) présente plusieurs avantages, tant pour les éditeurs que pour les utilisateurs.

Pour les éditeurs :

• Amélioration du classement dans les moteurs de recherche : Google a déclaré que les pages AMP ont plus de chances d’apparaître plus haut dans les résultats de recherche. Cela peut accroître la visibilité et augmenter le trafic sur le site de l’éditeur.
• Augmentation de l’engagement des utilisateurs : Des temps de chargement de page plus rapides peuvent conduire à un engagement accru de l’utilisateur, tel qu’un temps plus long passé sur le site, plus de pages vues par visite et un taux de clics plus élevé.
• Une meilleure expérience mobile : AMP offre une meilleure expérience mobile aux utilisateurs, ce qui peut contribuer à accroître la fidélité à la marque et le nombre de visiteurs qui reviennent.
• Réduction des coûts : La création de pages AMP nécessite moins de ressources techniques et, par conséquent, peut permettre aux éditeurs d’économiser sur les coûts de développement.

Pour les utilisateurs :

• Temps de chargement des pages plus rapides : Les pages AMP sont conçues pour se charger rapidement sur les appareils mobiles, ce qui rend l’expérience utilisateur beaucoup plus positive. Les utilisateurs sont plus enclins à rester sur place si les pages se chargent rapidement et ne prennent pas trop de temps à télécharger.
• Une expérience cohérente sur tous les appareils : Les pages AMP sont conçues pour fonctionner de manière transparente sur différentes plateformes, ce qui permet une expérience utilisateur cohérente et positive quel que soit l’appareil utilisé. Cela augmente les chances d’engagement des utilisateurs.
• Une meilleure expérience du web mobile : Avec l’augmentation de l’utilisation du web mobile, il est crucial de disposer de pages à chargement rapide sur les appareils mobiles, ce que permet AMP.

Globalement, AMP est conçu pour améliorer l’expérience du web mobile pour les utilisateurs et accroître la visibilité et l’engagement des éditeurs. En offrant un web mobile plus rapide et plus convivial, AMP peut contribuer à améliorer le classement des moteurs de recherche, à renforcer l’engagement des utilisateurs et à permettre aux éditeurs de réaliser des économies.

Statistiques sur les améliorations

En ce qui concerne le temps de chargement des pages, les pages AMP peuvent se charger jusqu’à quatre fois plus vite et utiliser dix fois moins de données que les pages non-AMP. L’expérience de l’utilisateur est ainsi plus positive, ce qui l’incite à rester sur place et à s’intéresser au contenu.

En ce qui concerne l’engagement des utilisateurs, les pages AMP peuvent entraîner une augmentation du temps passé sur le site, un plus grand nombre de pages vues par visite et un taux de clics plus élevé. Cela peut se traduire par une augmentation des revenus des éditeurs grâce aux clics publicitaires ou à l’augmentation des ventes.

En ce qui concerne le classement des moteurs de recherche, Google a déclaré que les pages AMP ont plus de chances d’apparaître plus haut dans les résultats de recherche. Cela peut accroître la visibilité et augmenter le trafic sur le site de l’éditeur. En outre, de nombreux éditeurs ont remarqué une augmentation de leur trafic organique grâce à l’apparition des pages AMP dans les résultats de recherche.

Certaines études de cas ont montré une amélioration significative en utilisant AMP, par exemple :

• Le Washington Post a indiqué que les pages AMP recevaient 25 % de clics en plus, 20 % de visites de retour en plus et 35 % de probabilité en moins que l’utilisateur rebondisse sur le site.
• Les pages AMP de Pinterest ont obtenu un temps de chargement des pages 2x plus rapide, un taux de clics 20% plus élevé et un taux de conversion 23% plus élevé.
• Le New York Times a également indiqué que les pages AMP de son site obtiennent 20 % de clics en plus que leurs homologues non AMP.

Ce ne sont là que quelques exemples des nombreux avantages offerts par l’utilisation d’AMP. Il est important de noter que les résultats réels peuvent varier en fonction de la mise en œuvre, du type de contenu et de l’audience.

Mise en œuvre de l’AMP

La création de versions AMP de pages Web implique les étapes suivantes :

1. Convertissez votre code HTML en code AMP : Il s’agit de modifier votre code HTML existant pour le rendre conforme aux spécifications AMP HTML. Cela inclut l’utilisation des balises HTML AMP appropriées, telles que « amp-img » et « amp-video », et la suppression de toutes les balises et scripts non autorisés. Vous pouvez utiliser des outils en ligne tels que le validateur AMP ou le modèle en ligne du projet AMP pour vérifier l’absence d’erreurs dans votre code.
2. Ajoutez la bibliothèque AMP JS : Pour activer les optimisations de performances intégrées d’AMP, vous devrez inclure la bibliothèque AMP JS dans l’en-tête de votre document HTML AMP. Cette bibliothèque est responsable de la gestion de nombreuses optimisations des performances dans AMP, telles que le préchargement des ressources et la gestion de la mise en page.
3. Créez une version Google AMP Cache : Créez une version AMP de votre page Web qui vit dans le cache AMP de Google. Cette option est facultative, mais elle permet à vos pages d’être servies directement par les serveurs de Google, ce qui peut améliorer encore les temps de chargement. Pour créer une version en cache, vous devrez ajouter une balise spécifique dans l’en-tête de la page, indiquant l’URL de la version AMP de la page.
4. Ajouter des analyses : AMP fournit un mécanisme d’analyse intégré qui permet de suivre l’engagement et l’interaction des utilisateurs sur les pages AMP. Il est essentiel de configurer les outils d’analyse pour suivre le comportement des utilisateurs, les performances et les revenus des pages AMP.
5. Validez vos pages AMP : Avant de publier vos pages AMP, utilisez le validateur AMP pour vérifier qu’elles respectent les spécifications techniques et les meilleures pratiques requises.

Voici quelques bonnes pratiques pour la mise en œuvre d’AMP :

• Commencez par créer une version AMP de vos pages les plus importantes, telles que la page d’accueil, les articles à fort trafic et les pages de destination, puis développez lentement.
• Utilisez l’ensemble pré-approuvé de bibliothèques JavaScript fournies par AMP.
• Utilisez les fonctions de performance intégrées d’AMP et optimisez vos images pour un chargement plus rapide.
• Testez vos pages AMP sur différents appareils et navigateurs pour vous assurer qu’elles fonctionnent et s’affichent correctement.

Il existe également plusieurs outils et ressources disponibles pour faciliter le processus de mise en œuvre :

• Le site Web du projet AMP fournit une mine d’informations, notamment des didacticiels, des échantillons de code et les meilleures pratiques.
• Le plugin AMP pour WordPress vous permet de créer des versions AMP des pages de votre site web.
• Google Search Console vous permet de tester et de surveiller les performances de vos pages AMP et de corriger les erreurs éventuelles.
• Divers autres frameworks et bibliothèques sont également disponibles pour aider à mettre en œuvre AMP pour différentes technologies web, comme React, Angular ou Vue, etc.

Il est important de noter que la création de pages AMP requiert une bonne compréhension de HTML, CSS et JavaScript et peut nécessiter un certain travail de développement. Pourtant, l’amélioration des performances et de la visibilité dans les moteurs de recherche peut en valoir la peine.

Défis et limites

Les pages mobiles accélérées (AMP) sont un outil puissant pour créer des pages Web mobiles plus rapides et plus conviviales, mais elles comportent quelques défis et limites.

L’un des principaux défis de l’AMP réside dans les limites du cadre HTML de l’AMP. AMP HTML est une version simplifiée qui supprime certaines balises et certains scripts plus complexes, ce qui peut être contraignant pour les développeurs qui ont l’habitude de travailler avec du HTML standard. En outre, AMP HTML ne prend pas en charge les fonctionnalités plus avancées, telles que les formulaires et les scripts tiers, ce qui peut rendre difficile la création de certains types de pages ou de fonctionnalités.

Un autre défi est que AMP exige des versions distinctes des pages. Pour créer une version AMP d’une page, le développeur doit créer une version distincte en utilisant le cadre HTML AMP ; cela peut entraîner un surcroît de travail pour les développeurs, le référencement et l’équipe marketing. Cela peut également entraîner des problèmes pour maintenir la cohérence entre les versions AMP et non-AMP d’une page et pour s’assurer que tous les éléments de la page sont présents et fonctionnent correctement sur les deux versions.

Il existe des moyens de relever ces défis :

• Pour pallier les limites du cadre AMP HTML, il est essentiel de se concentrer sur la création de contenu et de fonctionnalités compatibles avec le cadre. Cela peut impliquer la simplification de vos pages et l’utilisation des composants AMP intégrés et des fonctions de performance.
• Pour répondre au besoin de versions distinctes des pages, il est essentiel de prévoir et de budgétiser le temps et les ressources de développement supplémentaires nécessaires à la création des pages AMP. En outre, il est essentiel d’établir un flux de travail pour maintenir la cohérence entre les versions AMP et non-AMP d’une page et d’utiliser des outils pour automatiser le processus.
• Pour surmonter certaines des limites de l’AMP, il est possible d’ajouter du javascript personnalisé en utilisant « amp-script », qui vous permet d’utiliser du JS personnalisé. Néanmoins, il peut être nécessaire de prendre en compte des considérations supplémentaires pour maintenir les performances.
• Pour remédier à l’impossibilité d’utiliser des formulaires, AMP fournit des composants alternatifs, tels que « amp-form », qui peuvent être utilisés pour créer des formulaires aux fonctionnalités limitées ; il en va de même pour d’autres composants tels que « amp-iframe » pour intégrer d’autres pages.

Il est important de noter qu’AMP n’est pas la solution parfaite pour tous les sites Web et qu’il peut ne pas convenir à tous les types de pages ou de fonctionnalités ; l’essentiel est de comprendre les compromis et de prendre des décisions éclairées sur les pages à convertir en AMP et celles à laisser en HTML standard.

Conclusion

Accelerated Mobile Pages (AMP) est un projet lancé par Google pour améliorer la vitesse et les performances des pages Web mobiles. Le cadre AMP utilise une version spécialisée du HTML appelée AMP HTML, qui limite l’utilisation de balises et de scripts spécifiques afin de réduire la taille et la complexité de la page, ce qui se traduit par des temps de chargement plus rapides. En outre, Google met en cache les pages AMP sur ses serveurs, ce qui améliore les temps de chargement. AMP vise à améliorer l’expérience de navigation sur le web mobile en réduisant le temps de chargement des pages, en améliorant l’engagement des utilisateurs et en renforçant le classement des moteurs de recherche.

Les avantages d’AMP pour les éditeurs et les utilisateurs comprennent l’amélioration des temps de chargement des pages, un engagement accru des utilisateurs et un meilleur classement dans les moteurs de recherche. Les éditeurs peuvent également économiser sur les coûts de développement. Toutefois, AMP présente certains défis et certaines limites, comme les limitations du cadre HTML AMP et la nécessité de disposer de versions distinctes des pages.

L’avenir d’AMP est prometteur, car de plus en plus d’entreprises commencent à l’adopter et Google continue à investir dans cette technologie. À mesure que le web mobile continue de se développer, AMP jouera probablement un rôle de plus en plus important en offrant une expérience web mobile plus rapide et plus conviviale. En outre, avec l’essor des Progressive Web App (PWA) et les efforts de Google pour rendre AMP plus flexible et plus convivial pour les développeurs en l’intégrant aux PWA et en en faisant une norme web, AMP pourra être utilisé dans une plus grande variété de scénarios.