Un regard technique sous le capot

Temps de lecture: 7 minutes

On a beaucoup parlé d'AMP, le projet Accelerated Mobile Pages piloté par Google, à la fois vivement et amèrement opposé. Quel que soit votre point de vue personnel, Google redouble d'efforts pour pousser AMP dans toutes leurs propriétés, de Gmail utilisant AMP d’autres fournisseurs n’auront pas d’autre choix que de prendre en charge une multitude de nouvelles fonctionnalités SERP visant à faire des résultats de recherche plus qu’une simple liste de liens.

Entrez AMP Stories, une nouvelle fonctionnalité AMP à laquelle Google donne la priorité aux moteurs de recherche, dès la sortie de la barrière. Avant d’entrer dans les faits sur AMP Stories, je pense qu’il est important de revenir sur ce qu’AMP est censé être.

Les prémisses et la promesse d'AMP

Pages mobiles accélérées est un projet qui affirme son indépendance vis-à-vis du Web et de la source ouverte, bien que à certains controverse historiquement principalement soutenu par les employés de Google.

Le principe est simple et louable: créez pour tous les sites Web un moyen simple de créer une expérience mobile ultrarapide qui reflète celle de votre ordinateur de bureau. Ceci est accompli par le biais d'un sous-ensemble minimal de HTML strictement contrôlé appelé AMP HTML, ainsi que d'un javascript optimisé et d'un CDN.

Vous n’avez pas besoin d’AMP pour créer un site Web rapide et convivial pour les mobiles. Vous pouvez créer votre site Web aussi rapidement que AMP avec la technologie standard en suivant les meilleures pratiques et en optimisant la vitesse. Si vous ne disposez pas d'un moyen facile de le faire et que vous ne souhaitez pas reconstruire complètement votre site, l'AMP peut sembler logique.

Lorsque Google donne la priorité au contenu AMP dans les résultats de recherche, les éditeurs sont de facto obligés de l’utiliser – qu’il y ait ou non des avantages pour le site ou les utilisateurs en dehors du positionnement prioritaire dans Google. Ou si la fonctionnalité AMP est même à moitié implémentée avec une pensée ou une considération pour les utilisateurs du monde réel, de nouvelles fonctionnalités sont simplement mises à profit pour devenir nouvelles.

Entrez Histoires AMP.

Laissez-moi vous raconter une histoire

À mon avis, la seule chose qui soit pire que de proposer une nouvelle fonctionnalité dans le seul but de proposer quelque chose de nouveau est de le faire avec une fonctionnalité qui est au mieux irréfléchie et, au pire, hostile à l'utilisateur.

AMP Stories se veut un moyen rapide pour les utilisateurs de consommer du contenu dans un format semblable à celui d'un magazine, un peu comme les fonctionnalités de «récits» de plusieurs sites de médias sociaux. L’objectif principal est d’être un moyen rapide et intuitif de «consommer du contenu». Ce contenu est ensuite classé par ordre de priorité en haut des résultats de recherche avec de belles grandes images.

En pratique, AMP Stories est un diaporama enrichi, mal implémenté, d’une utilisation contre-intuitive, inaccessible pour tout le monde, et qui va même à l’encontre des normes de Google en matière de rapidité.

Parlons de ces échecs, un par un, et voyons s’il est toujours possible d’utiliser AMP Stories malgré eux.

Navigation intuitive tactile en premier

Faites-moi une faveur – sortez votre téléphone et ouvrez ce lien: http://bit.ly/test-amp. C’est une véritable histoire AMP qui est actuellement diffusée sur Internet et priorisée dans les résultats de recherche.

(Si vous avez déjà utilisé AMP Stories par le passé, faites comme si vous n’êtes pas habitué.)

Histoires AMP

Lorsque quelqu'un clique sur ce lien dans les résultats de la recherche, la page sur laquelle il se trouve ressemble beaucoup à un article ou un article de blog classique: une image d'en-tête, un titre, un sous-titre et la signature de l'auteur. Si vous n’avez jamais vu une histoire AMP auparavant, vous voudrez peut-être essayer de faire défiler vers le bas avec votre doigt.

Nan. Ça ne marche pas et ça vous crie dessus:

Les histoires AMP échouent

Au lieu de faire défiler, il s'agit en fait d'un diaporama avec un tapotement pour la diapositive suivante et précédente.

Accessibilité

Pendant que l’histoire AMP est ouverte, vous souhaitez peut-être la faire pivoter? Les histoires AMP tournentNan. Nous sommes en 2019: vous tenez votre téléphone comment Google raconte vous tenez votre téléphone.

Et non, ce n’est pas que vous, ce texte est extrêmement petit et difficile à lire sur mobile. Si petit, en fait, il ne répond pas aux exigences d’accessibilité de Google concernant la taille de la police. Google exige que 70% du texte soit 14 pixels ou plus, mais cette page a 100% du texte à seulement 8px. Honnêtement, je suis choqué par le peu d’attention que nous avons consacré à rendre cette page accessible à tous. SNe dites-vous pas que «cette page peut seulement être visualisé en mode portrait "au lieu de" meilleur visionné "? Cette superposition ne permet à aucun moyen de continuer sans faire pivoter votre téléphone.

Alors que nous sommes sur le sujet des choses étant trop petites, consultez cette cible tactile:

Histoires AMP inspecter

Google exige que les cibles tactiles soient au minimum 48 × 48, en tant que test de réussite / échec. La cible tactile de cette interface principale échoue à 46 × 48.

Pire, si vous manquez cette cible tactile, vous pourrez accidentellement naviguer sur la page entière de la page suivante, car le reste de la page est constitué des cibles tactiles de navigation. Il n'y a pas de tampon, et 0 est un peu en deçà de la Zone de mémoire tampon de 8 pixels que Google recherche.

J'ai été vraiment surpris de voir à quel point l'outil de test mobile de Google, Lighthouse, a classé une histoire AMP pour l'accessibilité:

Accessibilité "width =" 512 "height =" 105 "srcset =" https://www.greenlanemarketing.com/wp-content/uploads/2019/07/Accessibility.png 512w, https://www.greenlanemarketing.com/ wp-content / uploads / 2019/07 / Accessibility-300x62.png 300w "tailles =" (largeur maximale: 512 pixels) 100vw, 512 pixels "/></p><p><span style=Parmi les autres éléments que Google n'aime pas en soi, citons les boutons ne contenant pas de noms accessibles et les images manquant de texte de remplacement pour les lecteurs d'écran.

Fonctionne sur les appareils de bureau et mobile

Ainsi, lorsque vous naviguez dans AMP Stories, il fonctionne comme un diaporama standard sur votre appareil mobile. Mais qu'en est-il aussi d'une expérience de bureau?

AMP Stories Desktop

Forcer les utilisateurs à utiliser le mode portrait sur leur téléphone est une chose, mais prendre cette expérience mobile contrainte et la faire flotter au milieu d'un navigateur de bureau est loin d'être une expérience de bureau.

Vous essayez de redimensionner votre fenêtre pour qu'elle corresponde mieux au petit contenu AMP Story de taille portrait? Bien essayé.

Développez "width =" 1600 "height =" 1110 "srcset =" https://www.greenlanemarketing.com/wp-content/uploads/2019/07/Expand.png 1600w, https://www.greenlanemarketing.com/ wp-content / uploads / 2019/07 / Expand-300x208.png 300w, https://www.greenlanemarketing.com/wp-content/uploads/2019/07/Expand-768x533.png 768w, https: // www. greenlanemarketing.com/wp-content/uploads/2019/07/Expand-1024x710.png 1024w "values ​​=" (largeur maximale: 1600px) 100vw, 1600px "/></p><p><span style=En fait, il ne semble pas que l’on pense beaucoup à l’expérience du bureau. Si vous redimensionnez mal votre fenêtre, la navigation en bas se chevauchera et obscurcira le texte de l'histoire.

AMP Stories text

Oh, et tant que nous y sommes, ne pensez pas que votre bouton de retour fonctionnera comme prévu pour afficher la page précédente de l’histoire. Au lieu de cela, il vous fait sortir de toute l'expérience AMP Story et revient à la dernière page HTML que vous avez visitée.

Heureusement pour au moins cet élément, les responsables AMP sont conscients que l'expérience de bureau est loin d'être idéale et y travaillent. En fait, il y a maintenant options qui peut contourner certains de ces problèmes de bureau.

La vitesse

La convivialité n’a jamais été la principale promesse de l’AMP. La vitesse mobile est le seul objectif. Dans cet esprit, regardez la capture d'écran suivante:

speed "width =" 1600 "height =" 1065 "srcset =" https://www.greenlanemarketing.com/wp-content/uploads/2019/07/speed.png 1600w, https://www.greenlanemarketing.com/ wp-content / uploads / 2019/07 / speed-300x200.png 300w, https://www.greenlanemarketing.com/wp-content/uploads/2019/07/speed-768x511.png 768w, https: // www. greenlanemarketing.com/wp-content/uploads/2019/07/speed-1024x682.png 1024w "values ​​=" (largeur max: 1600px) 100vw, 1600px "/></p><p><span style=Eh oui, c’est l’histoire d’AMP qui utilise l’outil de test mobile de Google, Lighthouse. La performance n’est pas simplement mauvaise, c’est lamentable.

Il semble qu’il n’ya pas de chargement paresseux du tout ici. Au lieu de cela, l'utilisateur doit attendre que l'intégralité du diaporama soit téléchargée et rendue en arrière-plan, même si elle n'a vu qu'une diapositive à la fois. L’indicateur «différer les images hors écran» de Lighthouse semble concorder, dans la mesure où il appelle chaque diapositive, seule la première est visible par l’utilisateur:

Chargement paresseux

Google estime également que l'utilisation du fil principal de script et de style par Google est en deçà des consignes de Google:

Lazy 2

Une fin de conte de fées

Alors, devriez-vous utiliser AMP Stories pour votre propre contenu?

J'aimerais pouvoir dire NON. Mais je vais peut-être dire.

La vérité est que, peu importe le degré de hasard de cette fonctionnalité et sa précipitation, Google lui accorde une grande priorité dans les résultats de recherche. Vraiment lourd:

Exemple en direct

En outre, il est extrêmement facile de créer des histoires AMP avec éditeurs de pointer-cliquer:

Editor "width =" 512 "height =" 235 "srcset =" https://www.greenlanemarketing.com/wp-content/uploads/2019/07/Editor.png 512w, https://www.greenlanemarketing.com/ wp-content / uploads / 2019/07 / Editor-300x138.png 300w "tailles =" (largeur maximale: 512 pixels), 100vw, 512 pixels "/></p><p><span style=À mon avis, si vous connaissez les limitations (graves) de ce format, vous pouvez les contourner pour fournir quelque chose qui pourrait toujours avoir de la valeur pour vos utilisateurs. Et cela peut avoir une valeur extrême pour vous, car vous pouvez obtenir une «position 0» convoitée dans les résultats de recherche.

Voici ce que je voudrais faire: créer une histoire AMP simple et courte qui se chargera rapidement malgré une optimisation médiocre. Une fois que vous avez amené les gens à votre histoire, dirigez-les vers un contenu plus raisonnablement formaté sur votre site mobile proprement dit.

Photo de couverture de Geoff Dallimore

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.