Mobile, AMP – Petit introduction sur AMP Accelerated Mobile Pages de Google

by Posted on

La vitesse c’est la modernité, pas vrai ? Rappelez-vous le train à vapeur au 19eme siècle ! Et bien au 21ème, la vitesse, symbole de modernité, a pris la forme de l’affichage d’une page sur mobile. Blague à part, il existe plein de bénéfices prétendus ou avérés à la diminution du temps de chargement. Les voici, en vrac.

  • Le taux de conversion tombe de 27% après une seconde ! Il semble qu’un site ou application dispose de 8 secondes pour convaincre l’internaute, c’est la fameux taux de rebond (bounce rate). Donc, afficher votre contenu rapidement est capital, sinon c’est terminé bonsoir.
  • D’un point de vue SEO, la vitesse de chargement est un des critères déterminants dans le classement de la page au sein de Google par exemple. Un site lent est un site invisible.

En conclusion : l’expérience utilisateur (UX), le fait d’être correctement indexé, le taux de transformation sont donc directement impactés par la vitesse de chargement et “Mobile first”. Il est donc impératif d’infléchir positivement la vitesse de chargement de votre site.

Autant de bonnes raisons de s’initier au concept de AMP et par extension au format de ces principaux concurrents : Facebook Instant Articles ou Apple News. La solution AMP proposé par Google est open-source, celle de Facebook comme de Apple est bien évidemment contingente à leurs environnements.

Voilà les deux artciles les plus exhaustifs sur la question.

AMP de lancement

Bon la lecture des articles, ci-dessus, vous instruira bien plus que n’importe quelle synthèse mal fagotée qui pourrait être faite. Non, le souhait est plutôt de plonger sans trop de connaissances à priori sur la conversion “stricto sensu” de contenu existants en HTML en AMP-HTML. Pour se faire, il faut des exemples, un peu de temps et un bon environnement de développement. C’est la vocation des lignes qui suivent ci-dessous.

Via la console, vous pouvez lancer le serveur. Vous pourrez ensuite lancer l’un des exemples gracieusement offerts par google à l’adresse suivante http://localhost:8000/metadata-examples/
python -m SimpleHTTPServer
Mobile, AMP - Petit introduction sur AMP Accelerated Mobile Pages de Google

La balise image incorrecte en AMP-html. C’est intentionnel car on voit clairement avec l’aide de Chrome, la possibilité de débugger votre code HTML pour être conforme aux recommandations AMP de Google.
Mobile, AMP - Petit introduction sur AMP Accelerated Mobile Pages de Google

<!-- bad -->
<img src="leader_lion_small_800x300.jpg" alt="Lorem Ipsum?" height="300" width="800"></amp-img>

La balise image correcte en AMP-html
Mobile, AMP - Petit introduction sur AMP Accelerated Mobile Pages de Google

	<!-- good -->
	<amp-img src="leader_lion_small_800x300.jpg" alt="Lorem Ipsum?" height="300" width="800"></amp-img>

Source : https://www.ampproject.org/docs/guides/validate.html

En savoir plus

Published by Bruno Flaven

By now, Bruno Flaven works as AI Coordinator. He has been a project manager in a wide variety of Internet business applications both in Mobile and in Desktop for 20 years now. You can find more information about his professional life on his personal website (www.flaven.fr) or his linkedin profile: https://www.linkedin.com/in/brunoflaven. He is currently working In France Media Monde (FMM) mostly on mobile applications (iOS and Android). He has also worked as P.O for a Backoffice project made with Symfony. He also made few trainings to facilitate the handling of the tools that he helps to make.

Related Posts