Google AMP, améliorez le temps de chargement sur mobile

Le 7 octobre 2015, avec le soutien de Twitter, WordPress et de plusieurs éditeurs et autres sociétés, Google a présenté son nouveau format : l’AMP (Accelerated Mobile Pages).
Constitué d’un ensemble de protocoles il est utilisé pour structurer votre site et faciliter le chargement et l'affichage sur les appareils mobiles. Initialement destiné aux sites de presse anglophones comme BBC News, The Washington Post, ou The Guardian,  le projet AMP a continuellement évolué et s’applique aujourd’hui à tous types de sites y compris e-commerce.
Google AMP contient 2 enjeux.
Permettre à vos utilisateurs une meilleure expérience utilisateur avec une navigation rapide et fluide sur mobile. On le sait, la vitesse de chargement d’un site internet joue un rôle essentiel dans l’expérience client. Environ 40% des gens abandonnent une page Web qui prend plus de 3 secondes à charger (source KISSmetrics), la vitesse de chargement est donc devenue une base de la conception des pages d’un site Web.
Si en plus il s’agit d’un site e-commerce cette rapidité devient primordiale si vous voulez convertir vos visiteurs en acheteurs.
Selon Google, le plugin AMP réduit le temps de chargement des pages sur mobile entre 15% et 85%. Plus simplement, l’Accelerated Mobile Pages prend une page qui est déjà compatible avec les mobiles et la rend plus rapide, en la dépouillant des bases. Les pages optimisées pour l'AMP se classent donc mieux et plus rapidement, et elles convertissent, de ce fait, plus de visiteurs de sites mobiles en clients. Preuve de l'attention portée par Google aux utilisateurs.
Google a également décidé que l’AMP deviendrait un facteur de classement dans les résultats de recherche. Les pages optimisées pour l’AMP permettront donc un meilleur référencement naturel de votre site et une meilleure place dans les SERP. Une réelle opportunité pour vous d’augmenter votre trafic. De plus, la navigation étant plus rapide vous limiterez les risques d’un taux de rebond élevé.
Alors attention à ne pas confondre l’AMP avec les techniques qui servent à rendre un site « mobile friendly » (optimisé pour les appareils mobiles), l’AMP est un concept bien distinct.
Si les pages optimisées pour les mobiles sont chargeables et visibles sur les appareils mobiles, l’AMP lui est conçu pour charger beaucoup plus rapidement votre site, offrant aux utilisateurs un contenu instantanément disponible. On pourrait comparer cela aux articles instantanés de Facebook, mais dans le cadre des résultats de recherche.
Pour mieux comprendre le projet Google AMP qui fait beaucoup parler de lui dans l’actualité du Web, on va tout vous expliquer en 3 questions, et après, promis, vous aurez tout compris !
 

Google AMP qu'est-ce que c’est en fait ?
Si vous voulez une réponse simple, compréhensible par tout le monde (même par vos parents) : une Accelerated Mobile Page (ou AMP, pour faire court) est un projet open source de Google et Twitter développé pour aider les éditeurs à améliorer la vitesse et la lisibilité de leurs contenus sur tablette ou smartphone, ceux-ci nécessitant des pages adaptées au risque de mettre du temps avant de se charger.
Si vous souhaitez une réponse plus technique : c'est essentiellement une forme allégée de code HTML. Une page HTML conçue pour être super légère et générer un chargement très rapide.
En gros, le plugin AMP rend vos pages mobiles accessibles plus rapidement, en utilisant du code HTML optimisé et en ne rendant que celles qui conviennent aux utilisateurs mobiles. Les pages se chargent plus rapidement en éliminant certains aspects du gestionnaire de code HTML qui les ralentiraient.
La version qui s’affichera dans les résultats de Google sera généralement hébergée sur gstatic.com, il s’agit en fait d’une version en cache hébergée sur Google.
 

Google AMP comment le mettre en place ?
En soi, créer une page compatible AMP est assez simple, la partie la plus complexe sera d’adapter votre site au format.
Il faut également que vous sachiez que votre site en version AMP ne sera pas exactement comme votre site en version non AMP, en effet les éléments de design passent souvent à la trappe…
La première étape consiste à ajouter une URL canonique (il s’agit d’une balise qui indique à un moteur de recherche, que plusieurs contenus identiques ont des URL différentes et quelle URL principale est celle que vous souhaitez pour indexer votre site) qui indiquera l’adresse de la version AMP de votre site. Le plus souvent en ajoutant un /amp à la fin de votre URL.
Le format AMP doit également suivre d’autres règles très strictes de compatibilité afin d’être mis en avant par Google dans les résultats de recherches sur les appareils mobiles. Parmi ces règles on retrouve :

• Ajouter différentes balises importantes comme une balise charset par exemple
• Ajouter un éclair après la balise html. Vous avez sans doute remarqué quand vous faites une recherche dans google depuis votre téléphone mobile que certains résultats affichent un petit éclair en haut à gauche des noms des sites. Eh bien voilà la façon dont google affiche que ce résultat est optimisée AMP, c’est donc ce résultat que vous avez intérêt à choisir pour surfer facilement depuis votre mobile.
• Renommer certaines balises (une balise img devra être renommée amp-img)
• Utiliser des composants spécifiques pour gérer des animations et des interactivités (intégrer un slideshow, un code de suivi Google Analytics, des sections en accordéon…).
• Utiliser des scripts JavaScript asynchrones. Si du JavaScript est inclus dans vos pages mobiles, le script ne sera pas rendu pour vos pages mobiles accélérées. Vous ne pourrez utiliser que la bibliothèque JavaScript fournie par AMP et comme vous n'aurez aucun contrôle, vous risquez d'être confronté à un chargement plus lent. Cela pourrait être le seul inconvénient de l'AMP.
• Bloquer des mécanismes d’extensions (insertion de feeds Instagram, tweets…)
• Hiérarchiser le chargement des ressources
• Utiliser un style de CSS rationalisé et relativement léger (50 Ko maximum)

A savoir aussi :

• Les formulaires ne sont pas autorisés sur les pages de plug-ins AMP
• Les polices personnalisées devront être spécialement chargées
• Pour les images, vous devrez adapter la hauteur et la largeur pour éviter les déformations
• Pour les vidéos vous devrez utiliser des extensions approuvées par AMP
• Les boutons de partage, comme ils utilisent du Javascript pour fonctionner, peuvent ne pas s’afficher correctement. Cette version légère AMP priorise la rapidité et la lisibilité non pas le partage, c’est un point avec lequel il faudra composer

Alors rassurez-vous, pour que les sites AMP fonctionnent, ils doivent être validés et heureusement plusieurs outils ont été mis en place pour vous aider.

• AMP Validator vous permet de vérifier si votre code est conforme AMP ou non. Si ce n’est pas le cas, il vous indiquera clairement vos erreurs et vous proposera les solutions adaptées.
• Test AMP quant à lui vous permettra d’analyser la compatibilité AMP d’une adresse URL précise.
• Google Chrome vous permet également de vérifier la validité de votre code, sans avoir à passer par AMP Validator.

   

Google AMP quels avantages pour votre site ?
Il y a beaucoup d’avantages à optimiser votre site en AMP mais surtout au-delà d’y chercher des avantages il faut y voir une priorité ! Si on observe l’augmentation croissante du trafic internet depuis des appareils mobiles, l’utilisation de l’AMP devient évidente.
En 2017, Google annonçait que sur son moteur de recherche, le nombre de recherches via mobile avait dépassé le nombre de recherches via ordinateur. Evident quand on sait que le trafic mobile prend de plus en plus d’ampleur, dépassant même pour la première fois le trafic sur ordinateur en novembre 2016 (source StatCounter).
Le « mobile moment » comme l’appelle Google est arrivé et votre entreprise ne peut pas rater cette révolution qui va prendre de plus en plus d’ampleur dans les années à venir.
Et si vous n’êtes toujours pas convaincus voici une liste non exhaustive des différents avantages du passage à l’AMP.
1. Une baisse du taux de rebond ou de l’abandon de chargement du site.
« 50 % des internautes abandonnent le chargement d’une page qui dure plus de 3 secondes. »
Cette seule phrase devrait suffire à vous convaincre !
Et selon une étude, un délai de chargement de 1 seconde peut réduire votre taux de conversion de 3,50%, réduire la visibilité des pages de 9,40% et augmenter le taux de rebond jusqu'à 8,30% .
A une époque où la soif insatiable des internautes pour la rapidité d'affichage est devenue banale, où les gens sont pressés tout le temps et où on veut tout tout de suite, même 3 secondes suffisent à vous faire perdre un internaute, un utilisateur, un client…
Les fichiers AMP se chargent environ deux fois plus vite qu'une page mobile non adaptée avec seulement un dixième de temps de latence. C'est un énorme avantage par rapport aux pages Web classiques. Cette vitesse de chargement comporte des avantages primordiaux pour votre entreprise. Vos visiteurs pourront accéder plus rapidement à votre contenu et seront donc plus susceptibles de passer par un processus d'achat, les différentes étapes étant fluides et rapides.
Alors oui le contenu de votre site est important, mais si vos pages ne sont pas accessibles ou trop lentes à se charger, les utilisateurs ne le liront pas.
C'est pourquoi il est primordial aujourd’hui de rendre le chargement de vos pages rapide.
L'AMP est là pour ça… Préparez-vous à expérimenter des augmentations de vues de vos pages spectaculaires !
2. Une amélioration de l’expérience utilisateur.
L’expérience utilisateur est au cœur des stratégies Web, plus un utilisateur est bien sur votre site plus il y reste, plus il y revient, plus votre taux de conversion augmente.
La vitesse de chargement du contenu d’un site est le premier moyen d’améliorer votre expérience utilisateur.
L’AMP va faire passer l'expérience de navigation de votre utilisateur au niveau supérieur.
 3. Un meilleur référencement naturel.
Ce n’est plus un secret pour personne, il existe une corrélation significative entre la vitesse de chargement d’un site et les classements dans les moteurs de recherche pour mobile.
En janvier 2018 Google a annoncé la mise en place du “speed update”. Pour faire simple : Google a décrété que la vitesse de chargement d’un site serait un critère de classement dans les résultats de recherche sur mobile.
L’AMP va donc avoir un rôle primordial jusque dans le référencement naturel de votre site car les pages AMP sont souvent mieux référencées que les pages Web non optimisées.
Encore un élément en faveur du côté indispensable de l’AMP !
Alors attention, ce n’est pas le format AMP en lui-même qui va favoriser votre positionnement pour Google mais les améliorations qu’il va apporter à votre site en version mobile telles que la vitesse de chargement du site, son adaptation à une utilisation sur mobile et un taux de rebond bas…
4. Une meilleure visibilité dans les SERP.
Au-delà d’un meilleur référencement naturel et donc d’un meilleur classement, Google AMP permet une bien meilleure visibilité dans les résultats de recherche.
Une îcône AMP a été prévue pour signaler aux utilisateurs que le site est optimisé AMP. Cela leur indique donc que leur navigation sur mobile sera facilitée. Un atout pour aller sur un site plutôt qu’un autre et un bon moyen d’augmenter votre taux de clic sur les SERP.
De plus Google ayant annoncé la création de l’index “mobile first” en novembre 2016 on le sait maintenant… les sites mobiles sont affichés en priorité !
Alors, ce n’est pas encore vrai pour tous les résultats de recherche, mais même si le fait d'avoir une page avec des protocoles AMP n'augmente pas votre autorité de domaine ou votre autorité de page, c’est déjà un prérequis pour figurer dans les sliders d’actualités situés au-dessus des résultats de recherche classiques. De quoi donner à votre page un coup de pouce substantiel dans les résultats de recherche, et obtenir beaucoup plus de trafic.
Imaginez le résultat si vos concurrents utilisent l’AMP et pas vous…
5. Un format aussi disponible pour la publicité.
Et oui ! Le format AMP est aussi disponible pour vos publicités ou votre référencement payant. Ainsi vos pages de publicité qui utilisent l’AMP s’ouvrent plus vite que celles qui ne le sont pas.
Comme vu plus haut avec une vitesse de navigation plus rapide l’expérience utilisateur est améliorée et sur des publicités cela se concrétise par un  taux de conversion plus élevé.
Vos publicités sont mieux exploitées que si elles n’étaient pas optimisées grâce à l’AMP.
 
Oui… Passer à l’AMP, c’est se plier aux règles de Google en faisant souvent des compromis graphiques, en limitant les contenus dynamiques, en travaillant plus ou en payant plus cher pour développer du code spécifique et si pour certains sites une version AMP parait difficilement imaginable pour d’autres il a suffi de passer à une version AMP pour passer loin devant leurs concurrents.
Le format AMP est en train de devenir LE standard pour la navigation sur mobile et il faut le voir comme le futur de la navigation mobile qui ne cesse de prendre de l’ampleur.
Google continue d’améliorer ses systèmes. Après le « mobile friendly » qui représentait déjà une avancée conséquente, le projet AMP nous prouve que Google n'a pas encore fini de penser à des améliorations s’adaptant à nos nouvelles pratiques.
Entre les nouvelles mises à jour de l'algorithme, de moteur de recherche mobile, de fonctionnalités avancées, on a bien compris que les outils continueront à être développés
Et d’ailleurs, après l’index “mobile first”, pourquoi Google n’afficherait-il pas uniquement les pages AMP d’ici quelques années ? Soyez prêt !
 
FIDESIO, vous accompagne dans la création de site internet vitrine ou e-commerce: étude, UX, conception, design, développement, SEO.
Notre agence web est capable de répondre à tous vos besoins et d'élaborer une véritable stratégie digitale.
N'hésitez pas à nous contacter.