AMP de Google: le guide amusant et convivial des pages mobiles accélérées

Voir la vidéo. Ignorez la copie.

C'est mon conseil pour vous une fois que vous arrivez sur le site de Google dédié au nouveau projet AMP (Accelerated Mobile Pages):

«Le projet AMP (Accelerated Mobile Pages) est une initiative open source qui incarne la vision selon laquelle les éditeurs peuvent créer une fois du contenu optimisé pour les mobiles et le charger instantanément partout.»

Si vous n'êtes pas développeur et que vous lisez la copie, vous serez avalé vivant par le jargon.

Regardez la vidéo, cependant, et vous comprendrez presque immédiatement ce qu'est AMP (sans parler d'une drôle de référence Spinal Tap , voir ci-dessous).

Ou vous pouvez simplement lire ce guide, car ce sera le plus amusant que vous ayez jamais lu sur AMP et son impact sur votre marketing de contenu.

Je promets.

Qu'est-ce que le projet AMP de Google?

Depuis la naissance de la philosophie Zero Moment of Truth de Google en 2011, ce n'est un secret pour personne qu'ils veulent «améliorer considérablement les performances du Web mobile».

Et je n'ai probablement pas besoin de vous dire qu'il y a un petit problème avec les performances du contenu sur le Web mobile.

Il y a de fortes chances que vous ayez un appareil mobile. Et il y a de fortes chances que vous ayez cliqué sur un lien sur cet appareil à partir d'une page de résultats de recherche, d'un site de réseau social ou à l'intérieur de votre boîte de réception ...

Mais ça ne vient jamais.

Eh bien, cela vient, mais dans un patchwork convulsif d'images, de vidéos et de publicités saccadées et saccadées au fur et à mesure que la page se charge. Vous regardez avec horreur, les yeux dilatés, rebondissant dans votre siège de métro comme quelqu'un qui doit aller aux toilettes.

"Combien de temps ceci va-t-il prendre?" vous ne criez à personne en particulier.

Qui sait, mais vous ne le saurez jamais car, comme 40% de la population, vous serez libéré de la page de chargement dans les 3 secondes. Ensuite, vous direz, comme mon chat noir Apollo Monkeystrap, "Le soupir."

Ce sont des moments mobiles insupportables comme ceux-ci que Google veut éliminer avec AMP.

À quelle vitesse AMP créera-t-il vos pages?

Sur une échelle de 1 à 10, un étant «pas de chargement du tout» et dix «chargement en une seconde», le contenu AMP se chargera à une vitesse de page de 11. (C'est la référence Spinal Tap dont je vous ai prévenu).

Mais sérieusement, à quelle vitesse?

Jon Parise, ingénieur logiciel chez Pinterest, a déclaré: «Les pages mobiles accélérées se chargent quatre fois plus rapidement et utilisent huit fois moins de données que les pages traditionnelles optimisées pour les mobiles.»

Quatre fois plus vite c'est bien! Mais qu'est-ce que cela signifie pour vous, notre sympathique banlieusard du métro essayant de télécharger une page Web sur son téléphone portable?

Selon NiemanLab, un article du New York Times optimisé pour l'AMP entièrement téléchargé sur mobile en 2,99 secondes. À titre de comparaison, lors d'un test dans Chrome sur un iMac rapide, la version de bureau de cette page a pris 3,82 secondes (la version mobile était plus rapide).

Si vous ne le saviez pas, NYTimes.com était connu pour être l'un des sites Web d'actualités mobiles les plus lents de ce côté de Saturne.

Ils ont depuis corrigé cela.

Êtes-vous sûr que c'est assez rapide?

Mais attendez, dites-vous, 2,99 secondes sont toujours à la limite du temps que notre banlieusard de métro est prêt à attendre. Lui, comme 40% de la population, a été libéré sous caution à 3 secondes. 2,99 secondes, c'est le couper de près! Ce n'est pas vraiment une amélioration.

C'est vrai, mais la différence est que dans le premier scénario non AMP sur un bureau, la page se chargeait toujours après 3 secondes. Dans la version AMP du scénario, il a été entièrement téléchargé en 2.99.

Plus important encore, la version AMP a atteint «domContentLoaded - un point clé dans le chargement d'une page Web où le HTML est entièrement téléchargé et certaines analyses importantes ont été effectuées» en 0,857 secondes.

Un clin d'œil prend environ 0,33 seconde.

En d'autres termes, clignez des yeux deux fois et vous, notre banlieusard du métro, pouvez commencer à lire la partie utile du contenu presque instantanément, grâce à AMP.

Pourquoi les pages mobiles traditionnelles se chargent-elles si lentement?

Je pense que je sais, mais comme je ne suis pas développeur, concepteur ou programmeur (et je ne sais même pas si ce sont des disciplines différentes), j'ai appelé l'un de nos développeurs ici à Rainmaker Digital, Mike Hale, pour m'aider à traduire.

Mike a déclaré que lorsqu'un site de bureau est inséré dans un navigateur mobile, plusieurs dizaines de paquets d'informations sont «appelés», souvent à partir de différents hôtes, dans le navigateur mobile.

Dans l'ancien et lent exemple du New York Times ci-dessus, un article pourrait contenir «192 demandes, certaines adressées aux hôtes du Times, la plupart adressées à une multitude d'autres serveurs hébergeant des dizaines de scripts».

La partie la plus utile sera téléchargée dans les 5 secondes après avoir cliqué, mais le reste arrive toujours, c'est pourquoi l'écran rebondit lorsque le navigateur se configure, puis se réinitialise.

Toujours perdu, j'ai pressé Mike: «Mais quel genre de choses sont demandées?! Comment s'appelle- t-on?!

Mike m'a dit que votre mobile pourrait appeler les scripts pour les plugins sociaux, les carrousels d'images, les SlideShares et les vidéos. Et puis, il y a probablement des logiciels d'analyse, des publicités et des scripts de suivi en arrière-plan.

Des choses sensées, quotidiennes, mais qui s'additionnent. Et vite.

Le problème est que votre appareil mobile n'a tout simplement pas le muscle de traitement pour réussir rapidement.

Cette illustration explique le problème du contenu mobile

Imaginez si vous alliez à la banque, alliez au guichet et demandiez 100 $, mais dans un ordre particulier: quinze billets d'un dollar, trois billets de cinq dollars, cinq billets de dix dollars et un billet de vingt dollars.

Si la banque fonctionnait comme le fait actuellement le Web mobile, le caissier ferait plusieurs voyages pour vous remettre chaque facture séparément.

Chacun de ces voyages est un «appel».

Cependant, si la banque était optimisée avec AMP, le caissier vous remettrait toutes vos factures en même temps. De plus, il ignorerait probablement votre demande spécifique pour certaines factures et vous livrerait simplement un billet de cent dollars.

AMP vise à simplifier les demandes qu'un navigateur doit faire.

"Le seul script que vous pouvez appeler est le javascript AMP", a déclaré Mike. «Tout est emballé dans un seul paquet. Je vous donne tout en même temps.

Et voici comment Yoast a décrit le contenu mobile AMP:

«Comparons cela à une voiture de course. Si vous voulez rendre une voiture de course plus rapide, vous lui donnez un moteur plus rapide et vous dépouillez tout le poids. Dans cette réduction de poids, vous supprimez également des choses comme les sièges arrière, la climatisation, etc. AMP n'est pas sans rappeler cela. C'est la version réduite d'un Web normal, car Google se soucie davantage de la vitesse que des fonctionnalités intéressantes. "

Ressentez cette piqûre d'amertume dans la dernière ligne? Ce n'est pas votre imagination. Nous y reviendrons dans un instant. Tout d'abord, regardons une expérience AMP pour vous aider à voir ce que je veux dire.

À quoi ressemble le contenu mobile optimisé pour AMP?

Heureusement, vous pouvez tester une démo du contenu des actualités AMP.

1. Sortez votre smartphone.
2. Ouvrez un navigateur (n'importe quel navigateur).
3. Tapez g.co/ampdemo.
4. Tapez des mots clés populaires tels que «Anniversaire de Justin Bieber», «Jennifer Lawrence» ou «Yoko Ono» dans le champ de recherche Google.
5. Appuyez sur "Envoyer".

Voici un exemple de l'apparence des résultats:

Comme vous pouvez le constater, le contenu AMP bénéficie d'une facturation optimale. C'est dans le carrousel qui se trouve au-dessus du pli. Les entrées standard se trouvent en dessous.

Vous pouvez faire défiler ce carrousel et lorsque vous trouvez un article alimenté par AMP que vous aimez, cliquez dessus. Voici à quoi cela ressemblera:

Lecture amusante, hein!

Pourquoi Google fait-il cela et devriez-vous vous en soucier? (Sorte de)

C'est là que ça devient étrange.

Comme je l'ai mentionné ci-dessus, Google est obsédé par l'optimisation des performances du Web mobile depuis cinq ans, c'est pourquoi nous avons écrit sur l'importance d'une vitesse de site Web très rapide (il y a six outils pour tester la vitesse de votre site dans cet article, au fait) aussi longtemps.

C'est pourquoi nous vous avons averti l'année dernière de la mise à jour mobile de Google, "Mobilegeddon".

Donc, à ce stade, AMP est en quelque sorte le point culminant de l'accent mis par Google sur l'optimisation du Web mobile, mais comment cela aide-t-il les éditeurs?

Cela semble simpliste, mais Google pense: les utilisateurs aiment le contenu. Ils aiment les contenus rapides. Plus vous pouvez distribuer rapidement du contenu rapide, plus le contenu peut être consommé.

Cependant, il y a autre chose à faire: Google tente de gagner la guerre de la consommation d'informations.

En quoi AMP est-il différent des articles instantanés et d'Apple News?

L'année dernière, Apple et Facebook ont ​​lancé des applications permettant aux utilisateurs de consommer des articles de presse: Apple News et Instant Articles.

Ces deux applications sont des produits autonomes.

Christian Cantrell, ingénieur senior en développement d'expérience au sein de l'équipe XD d'Adobe, a écrit sur Smashing Magazine: «Ce sont essentiellement des agrégateurs de nouvelles sophistiqués avec des moteurs de rendu personnalisés basés sur des formats de syndication propriétaires.»

En d'autres termes, les articles instantanés et Apple News renaissent RSS.

Google, d'autre part, cherche à s'adresser directement aux éditeurs et à les amener à optimiser le contenu mobile pour une consommation sur le Web ouvert, ce qui permet une entrée sans effort et une distribution facile, ce que vous ne pouvez pas obtenir dans une application.

Jusqu'à présent, certains grands éditeurs d'actualités ont participé:

• Time Inc.
• L'Atlantique
• Vox
• BBC
• Le Huffington Post

Un certain nombre d'entreprises technologiques telles que WordPress, Twitter, Adobe Analytics, Chartbeat, LinkedIn et Pinterest se sont également jointes.

Deux plaintes courantes concernant AMP

Les plaintes viennent dans au moins deux variétés:

1. Les détracteurs détestent les restrictions sur ce que le contenu mobile peut faire.
2. Les détracteurs déplorent que le petit éditeur soit sanctionné.

Yoast entre dans la première catégorie. Joost de Valk a écrit: «AMP limite ce que vous pouvez faire dans les pages HTML. Le design fantaisie est dépouillé au profit de la vitesse. AMP est essentiellement une fonction sur un projet de formulaire. »

Sachez que ce ne sont pas seulement les apparences qui sont affectées - hors de la boîte, AMP ne prend pas en charge les formulaires, ce qui signifie que les pages AMP ne vous aideront pas à développer votre liste de diffusion. Il existe des solutions de contournement technologiques, mais la situation est encore trop nouvelle pour voir comment celles-ci vont évoluer.

Vous remarquerez que la plupart des grands éditeurs utilisent AMP, mais cela signifie-t-il que l'AMP est là pour nuire aux petits éditeurs?

Paul Shapiro de Search Engine Land avait ceci à dire:

«Bien que les développeurs expérimentés puissent souvent obtenir des résultats similaires grâce à des optimisations intensives des performances, les éditeurs négligent souvent cela en raison de contraintes de ressources. AMP permet de réaliser facilement ces optimisations sans altérer l'expérience Web mobile principale. »

AMP peut s'avérer être un outil solide pour optimiser l'expérience mobile. Alors devriez-vous AMP?

Qui devrait s'inquiéter de l'AMP?

Ça dépend.

• Êtes-vous un grand éditeur de nouvelles? Puis paniquez, sauf si vous avez déjà une stratégie solide pour l'expérience utilisateur mobile. Ce que vous auriez dû déjà avoir en place il y a des mois, mais bon.
• Obtenez-vous une source de trafic importante depuis le mobile? Encore une fois, vous devez vous assurer que votre stratégie en matière d'expérience mobile est solide. Vous voudrez probablement regarder et voir comment AMP se développe, mais cela pourrait valoir la peine de faire quelques expériences.
• Êtes-vous sur un nouveau marché sans grande concurrence? Assurez-vous d'optimiser votre contenu mobile dans les 30 prochains jours, mais ne paniquez pas.
• Vous ne rentre dans aucune des catégories ci-dessus? Ensuite, asseyez-vous sur vos mains et surveillez ce qui se passe.

«Certainement quelque chose à garder sur le radar d'un éditeur», m'a dit notre directeur des produits et fondateur de StudioPress Brian Gardner. "Mais je suppose que ce sera une affaire fluide pendant un certain temps."

Qui sait? Il pourrait y avoir un moyen plus simple de faire tout cela plus tard - ce que Jake Goldman, président et fondateur de 10up, une agence de conseil en gestion de contenu WordPress, a également suggéré:

«Avec le temps, nous soupçonnons que l'AMP finira par devenir aussi complexe que le HTML« sans restriction »ou sera rendu inutile par les progrès du matériel mobile, des vitesses à large bande et des fonctionnalités de confidentialité standardisées - une solution à un problème que nous n'avons plus.

Mais disons que vous voulez jouer avec AMP.

Comment créer votre première page AMP

C'est là que vous pouvez remonter votre pantalon de développeur grand garçon / fille, car il faut un certain balisage de base pour démarrer avec AMP.

Je vous recommande de suivre ce didacticiel de base. Il vous apprendra comment:

• Créez votre première page AMP en utilisant un code standard.
• Mettez-le en scène.
• Vérifiez qu'il est conforme à AMP ( c'est une étape très importante ) à l'aide du validateur de Google.
• Préparez-vous à la publication et à la distribution.

Dans votre balisage, vous verrez que certains éléments ont une balise AMP. Ainsi, la balise <img> devient <amp-img>. La balise <anim> devient <amp-anim>. La balise <video> devient <amp-video>.

Etc.

Que devraient faire les utilisateurs de WordPress?

Si vous voulez essayer AMP, vous avez de la chance.

Le 24 février 2016, Automattic a publié un plugin AMP officiel. Par conséquent, les utilisateurs de WordPress ne sont qu'un plugin téléchargeable loin du contenu optimisé pour AMP.

Gardez cela à l'esprit, cependant: selon la page officielle du plugin AMP, le plugin ne prend pas en charge les pages ou les archives. Juste des messages.

Mais une fois que vous activez le plugin - bam - tous vos messages sont automatiquement AMPlified!

Avec le plugin actif, tous les articles de votre site auront des versions compatibles AMP générées dynamiquement.

Vous pouvez voir la version AMP de vos publications Web en mettant «/ amp» à la fin de l'url. Par exemple, la version AMP de yourwebsite.com/amp-wicked-fast devient yourwebsite.com/amp-wicked-fast/amp.

Et si vous êtes un client Rainmaker Platform: nous avons AMP sur nos écrans radar. Nous n'allons pas nous précipiter dans quoi que ce soit, étant donné l'histoire de Google en matière de redressements dramatiques à 180 degrés. Mais si AMP s'avère important à l'avenir, nous proposerons une solution AMP simple à nos utilisateurs.

AMP est-il un facteur de classement de recherche?

Non.

John Mueller de Google a déclaré que l'AMP n'est pas un facteur de classement. Il a dit que "La conversion de pages au format AMP satisfera le signal de classement adapté aux mobiles, mais il n'y a pas de signal de classement uniquement associé à AMP."

Matt Southern, rédacteur du Search Engine Journal, souligne:

«Ma question est la suivante: qu'importe si AMP est un signal de classement ou non si le contenu AMP a déjà un aller simple vers le haut de la première page? Dans la plupart des cas, le contenu AMP se classe déjà au-dessus des résultats organiques, ce qui est l'un des meilleurs augmentations de classement que l'on puisse demander. »

Il y a donc un avantage à sortir et à devancer vos concurrents dans le jeu de contenu mobile - une carotte sur un bâton que les gens de Distilled vous saluent au visage dans cette vidéo du vendredi tableau blanc.

Une autre raison pour laquelle je vous recommande de regarder cette vidéo de Whiteboard Friday est que les gens de Distilled ont souligné une autre distinction importante qu'offre AMP: une livraison ultra rapide via un serveur de mise en cache.

Tom Anthony, responsable de la R&D chez Distilled, déclare:

"Et puis tout cela est conçu pour être très fortement mis en cache afin que Google puisse héberger ces pages, héberger votre contenu réel sur place, et ainsi ils n'ont même plus besoin de le récupérer."

Juste pour sourire, voici ce que le blog Google avait à dire à propos de sa nouvelle approche de la mise en cache:

«Dans le cadre de cet effort, nous avons donc conçu une nouvelle approche de la mise en cache qui permet à l'éditeur de continuer à héberger son contenu tout en permettant une distribution efficace via le cache global haute performance de Google. Nous avons l'intention d'ouvrir gratuitement nos serveurs de cache à tout le monde. »

J'aime la gratuité.

AMP affectera-t-il votre publicité?

Ça ne devrait pas.

Selon Google, «nous voulons prendre en charge une gamme complète de formats publicitaires, de réseaux publicitaires et de technologies. Tous les sites utilisant AMP HTML conserveront leur choix de réseaux publicitaires, ainsi que tous les formats qui ne nuisent pas à l'expérience utilisateur. "

Et au cas où vous vous poseriez la question, voici une liste des réseaux publicitaires pris en charge sur le site officiel du projet Google AMP:

• A9
• Formulaire d'annonce
• AdReactor
• AdSense
• AdTech
• Dot et médias
• Double-clic
• Flite
• plista
• AdServer intelligent
• Yieldmo
• Revcontent

À propos, je pense que l'AMP est également destiné à apaiser les craintes des éditeurs quant à l'adoption croissante des bloqueurs de publicités. Mais c'est une autre histoire pour une autre fois. Il est probablement temps de conclure.

À vous…

Sensationnel. Nous avons couvert beaucoup de terrain ici.

Merci d'être resté avec moi. J'espère que vous avez trouvé cela utile et j'ai répondu à toutes vos questions sur le projet Google AMP.

Sinon, n'hésitez pas à me laisser un message dans les commentaires ci-dessous. De plus, laissez un commentaire si vous avez quelque chose à ajouter à ce que j'ai écrit ou si j'ai manqué quelque chose.

Quoi qu'il en soit, j'ai hâte de vous entendre.