A l’instar des recherches Google sur desktop, à partir de juillet, les recherches mobiles prendront elles aussi en compte le critère de vitesse. La firme de la Silicon Valley a en effet exprimé qu’un contenu sur mobile, même très pertinent, sera déclassé des pages de résultats dans le moteur de recherche si ses pages sont trop longues à charger.

Il est communément admis que la vitesse de chargement a un impact fort sur le taux de conversion et par conséquent sur les performances globales des ventes en ligne.
Avec cette annonce, Google va plus loin en indiquant qu’un site mobile dont la web performance laissera à désirer perdra en visibilité en étant moins bien référencé. L’effet direct sera donc une diminution du nombre de visites sur un site.
Le chiffre d’affaires d’une boutique en ligne étant lié à ces deux facteurs, c’est donc toute la rentabilité du site qui est remise en cause avec cette mise à jour.

Alors qu’en juin 2017, 56% des visites de sites en France ont été réalisées depuis un mobile (source DN/Médiamétrie et eStat), les e-commerçants se doivent de ne plus penser simplement “mobile first” mais bien “fast mobile first”, au risque de voir leur activité commerciale mise en péril. Un changement de vision imposé par le géant américain pour garantir l’expérience utilisateur et qui induit une nécessaire évolution des préoccupations des vendeurs en ligne.

Avec cette modification annoncée, les e-commerçants doivent donc travailler sur la performance web sur mobile. Voici la marche à suivre, éprouvée auprès de plus de 500 e-commerçants, pour éviter le coup d’epée du célèbre moteur de recherche d’ici juillet :

1/ Identifier les pages clés
Le référencement naturel Google représente une source de trafic majeure pour les sites e-commerce. En fonction de leur recherche et du référencement Google, les internautes ne vont pas tous arriver sur la même page. Il convient donc dans un premier temps d’identifier les pages sur lesquelles les internautes atterrissent le plus afin de concentrer ses efforts sur celles-ci.
L’approche la plus rentable et la plus pragmatique est bien de prendre note des pages les plus importantes pour son activité commerciale et de concentrer ses efforts sur celles-ci.

2/ Comparer la vitesse des pages clés avec celles des concurrents
En utilisant la page de test automatique fournie par Google, il est possible de comparer son site à celui du concurrent. A la fin du test, il suffit de sélectionner son industrie et de constater si l’on se situe dans les bons ou les mauvais élèves.

3/ Optimiser
Parmi les recommandations les plus importantes :
– utiliser un système de cache (CDN)
– activer la compression sur son serveur
– compresser et redimensionner les images afin de fournir à l’internaute du contenu toujours parfaitement adaptée à son terminal
La liste des optimisations à mener (et à maintenir dans le temps !) est longue et là aussi Google fourni PageSpeed Insights, un outil qui permet de faire un état des lieux à l’instant T de la mise en place de ces bonnes pratiques sur le site.

4/ Surveiller
Un site e-commerce est une machine complexe et perpétuellement en mouvement. Chaque semaine, un site subit plusieurs modifications qui peuvent entraîner de nouveaux ralentissements ou des perturbations. Si ces problèmes de performance ne sont pas identifiés et corrigés avant le prochain passage de la sonde Google, elles peuvent entraîner de lourdes répercussions sur le référencement. La mise en place d’un système de mesure en continu, d’alerte et d’identification des ralentissements est par conséquent nécessaire à la réussite d’un site sur le long terme.

L’article Google Speed Update : quand la performance web impact le SEO, comment préparer son site mobile ? est apparu en premier sur Quanta.

Decryptage. 😉

AMP, ou le principe d’offrir du contenu ultra-rapide sur le web mobile

Comme moi, vous avez dû connaître la frustration de ne pouvoir charger un contenu depuis votre mobile, alors que vous vouliez accéder à une information toute simple.

Dans ce genre de cas, comme tout le monde, vous quittez le site pour aller chercher le même contenu ailleurs. Et vous n’êtes pas seuls dans ce cas ! La plupart des internautes réagissent négativement face aux lenteurs et plébiscitent les expériences les plus rapides. Ce comportement utilisateur a pour conséquence un bien meilleur taux d’engagement des utilisateurs, et un meilleur référencement pour les sites qui auront misé sur la Web Performance.

Et c’est dans ce contexte de quête d’instantanéité, que le projet open-source AMP est lancé en 2016, par Google. Ce projet a d’ailleurs bien grandi depuis puisqu’il représente désormais une communauté de plus de 160 contributeurs au travers du monde.

Plus concrètement, AMP décrit un format permettant de créer une page qui va s’afficher plus rapidement sur les terminaux mobiles. Nous parlons ici d’un temps médian perçu par les utilisateurs de moins d’1 seconde.

Techniquement, les pages AMP sont finalement justes des pages web “normales”, en HTML, et donc compatibles avec l’ensemble des navigateurs web. Elles sont néanmoins fine-tunées pour être très légères dans leur chargement sur mobile. Et c’est là où ce projet devient intéressant pour Quanta, car Google touche directement à la question de la Web Performance sur mobile.

Le fonctionnement de Google AMP

AMP répond à plusieurs problématiques pour la rapidité d’affichage du contenu.

• Chargement instantané (originellement Instant rendering)

Il y a dans AMP la possibilité d’effectuer du pré-chargement des liens que l’utilisateur serait à même de cliquer, de sorte que lorsqu’il clique, le contenu s’affiche immédiatement comme s’il était déjà totalement en cache (en fait c’est un peu le même principe que le cache d’ailleurs, sauf qu’on le construit avant même d’accéder au contenu pour la première fois).

Pour ne pas trop surcharger le CPU et la bande passante nécessaire pour charger des contenus que l’utilisateur n’irait finalement pas voir, le système AMP va se contenter de pré-charger le haut de la page de destination uniquement et quand l’utilisateur accède réellement au contenu le reste de la page est chargée pendant qu’il prend connaissance du haut de la page.

• Non-modification de la mise en page pendant le chargement des éléments

Dans AMP, la taille de chaque élément est fixée dans le code HTML, ce qui permet d’éviter les “surprises” en cours de chargement. Une fois que le texte est affiché, il ne bougera plus tant que l’utilisateur n’interagit pas avec la page, s’assurant ainsi que la lecture ne soit pas perturbée.

Bien entendu, ce principe ne vaut pas que pour le texte classique. 😉 Si vous avez des vidéos et plein de trucs funky avec des “call to action” à afficher entre les paragraphes de votre texte, AMP peut se révéler une aide précieuse grâce au système des placeholders.

Grâce aux placeholders, vous pouvez ainsi afficher des bannières de pubs, des vidéos, ou n’importe quel autre élément venu d’extensions diverses, mais la taille de chaque élément sera pré-définie dans la page avec une zone pré-établie (typiquement un carré gris).

Un exemple simple serait celui d’une vidéo Youtube. Sur la page AMP, un rectangle prédéfini va s’afficher dans un premier temps, puis se remplir avec le preview d’une vidéo YouTube pendant que l’utilisateur est tranquillement en train de lire l’article.

Cerise sur le gâteau, ce système de placeholders pour les éléments d’une page AMP fait que le problème (récurrent) des pages qui se décalent au fur et à mesure du chargement des éléments n’existe plus. Plus besoin donc de “scroller” pour retrouver la ligne sur laquelle on était, comme si on reprenait la lecture d’un livre en étant dérangé toutes les 3 secondes !

• Les polices de caractères

Il y a dans le web une certaine lourdeur technique dans le chargement des fonts (ou polices de caractères) qui pour la plupart des pages se chargent très tard dans le déroulement du téléchargement de la page. Généralement, les polices de caractères vont être chargées après tout contenu pouvant éventuellement faire appel à une font, soit après l’ensemble des javascripts. Avec AMP, l’ordre de chargement est optimisé, et la ou les fonts vont pouvoir se charger dès le début en parallèle du reste ce qui fini par rendre l’affichage final beaucoup plus rapide.

• Analytics et vitesse enfin réunis

Avec AMP, l’usage des tags est limité de sorte d’éviter d’avoir plusieurs dizaines de tags pouvant potentiellement bloquer la page.

Chez Quanta, nous constatons que certains e-commerçants gardent fréquemment des tags dont ils ne se servent plus, ce qui ne fait que ralentir leurs utilisateurs. Et chacun de ces ralentissement amène un impact négatif sur leur taux de conversion.

Dans AMP, le sujet a été donc pris au sérieux pour éviter au maximum ces chargements intempestifs. Les tags peuvent être appelés mais seulement via une interface unique qui ne peut pas ralentir la page (asynchrone). Pour la plupart des “tag vendors”, l’implémentation du système de Google est assez simple. Maintenant, si vous utilisez des tags un peu plus “exotiques”, il sera toujours possible d’y faire appel moyennant un peu d’adaptation technique pour les utiliser avec AMP.

Toutes ces spécificités du système AMP ne sortent bien sûr pas de nulle part. Ce sont le résultat de nombreuses recherches et choix finalement très malins issus de discussions entre “perf-gurus” qui en avaient certainement assez qu’Internet soit toujours aussi lent, et ce, malgré les avancées technologiques.

Une innovation et…une controverse

Google AMP a pour but ultime une rapidité jusqu’ici inégalée sur mobile, soit un chargement qui parait désormais “instantané”. Cela semble donc une arme de web performance parfaite.

Cependant, comme toute nouveauté technique, Google AMP ne vient pas sans controverse.

Tout d’abord, il est à noté que ce nouveau format a été lancé sans l’aval du consortium W3C, qui, comme chacun le sait, est chargé de régir internet de façon ouverte et indépendante, à la manière d’un conseil des sages. Ce respect tacite du rôle du W3C sur le net permet bien souvent aux nouveaux formats qui peuvent apparaître de devenir des standards techniques, et donc, d’être largement diffusés. En bypassant W3C, Google prend donc le risque que le format AMP ne perdure pas longtemps.

Par ailleurs, une autre critique récurrente faite par de nombreux fins analystes du web (je vous conseille notamment les articles de Numérama, The Register, et CSS-Tricks sur le sujet) concerne la nature profonde du projet AMP.

Comme je l’ai expliqué dans cet article, le concept d’AMP vise à adapter le contenu à des spécifications techniques qui, à leur tour, servent la Web Performance. La crainte de nombreux auteurs est qu’à terme, dans l’espoir de voir leur référencement dans Google maintenu et leur attractivité auprès des utilisateurs toujours bonne, les créateurs de contenus digitaux finissent par appauvrir leurs productions pour coller aux recommandations techniques de Google.

Peur certainement justifiée, mais au regard des bénéfices en terme de Web Performance, chez Quanta, nous partons du principe que, comme toujours : « The truth lies somewhere in the middle.« .

Et vous, que pensez-vous de Google AMP ? L’utilisez-vous pour votre site ? N’hésitez pas à nous laisser des commentaires !

L’article Google AMP, quand le web devient instantané est apparu en premier sur Quanta.