Google, leader incontesté des services web (recherche, pub, analytics...), propose depuis plus d'un an une nouvelle façon d'afficher vos pages, désignée sous le nom AMP project.
Si vous suivez à fond l'ensemble des actualités médiatiques et que vous utilisez énormément la recherche google, vous avez sûrement vu apparaître les "cartes" suivantes lors de vos recherches mobile :
Et oui, c'est cela AMP. Une place de choix dans la recherche Google, mais aussi une nouvelle façon de naviguer entre les sites. En effet, si vous cliquez sur une des cartes vous ne serez pas sur le site qui a envoyé le contenu (on comprendra pourquoi plus tard) mais vous resterez chez Google, qui vous permettra de "slider" entre chaque page de la recherche :
Intéressant non ? Mais ce n'est pas tout, si vous regardez plus attentivement vous vous rendrez compte que le site AMP est énormément plus rapide que votre site lui-même.
Le projet se repose sur 3 composants permettant de proposer cette nouvelle expérience utilisateur :
AMP est par défaut du HTML classique, mais dans certain cas de nouvelles balises sont mises en place pour permettre une rapidité d'exécution accrue. Vous avez par exemple
<amp-img>
qui va permettre un affichage plus rapide des images et cela même pour les navigateurs non compatibles. AMP interdit aussi l'utilisation de certaine balises considérées comme inutiles ou non performantes. Vous êtes donc restreint sur l'utilisation des balises suivantes,
<object>
,
<param>
, etc...
AMP propose une nouvelle utilisation de javascript dans vos pages web, au moyen d'une liste exhaustive de librairies javascript optimisées. Vous pouvez en trouver la liste ici. Mais l'optimisation principale réside en la désynchronisation des librairies javascript externes à votre site. C'est d'ailleurs pour cela que la plupart des pages AMP ne proposent pas de publicité. Cette dernière reste la hantise de la web performance.
AMP cache est en option mais c'est tout de même le point central d'AMP. Vous avez toujours rêvé d'avoir accès à l'un des meilleurs systèmes de cache du monde ? C'est maintenant possible : AMP Cache permet de stocker vos pages AMP directement dans le cache Google. C'est pour cela que vous n'êtes plus sur votre site mais directement sur www.google.com. Cela permet une optimisation exponentielle de la performance de votre page.
Pour aller plus loin dans la description des principes d'AMP je vous invite à lire cette article https://www.ampproject.org/fr/learn/amp-design-principles/ ou de regarder cette vidéo :
Comme AMP ce n'est jamais que du HTML nous allons commencer par la phase obligatoire : la mise en place des metas de notre page.
Commençons par créer un fichier index.amp, puis mettons la balise indiquant le type de document.
<!doctype html>Puis nous ouvrons la balise html en y ajoutant l'option AMP.
<!doctype html>
<html ⚡>
</html>Il nous faut maintenant mettre les metas obligatoires.
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<title>Ma première page AMP</title>
<link rel="canonical" href="http://test.fr/index.amp" />
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
Ma première page AMP
</body>
</html>Comme vous le constatez, on y retrouve :
Pour être présent dans la recherche AMP de Google comme vu précédemment, il faut mettre en place le schema.org, dont vous trouverez de plus amples informations ici.
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<title>Ma première page AMP</title>
<link rel="canonical" href="http://test.fr/index.amp" />
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"headline": "Exemple AMP",
"datePublished": "2017-05-25T19:37:41Z",
}
</script>
</head>
<body>
Ma première page AMP
</body>
</html>Nous avons maintenant une page de base. Mais est-elle vraiment AMP ? Afin d'effectuer une vérification, AMP a mis en place deux systèmes. Le plus simple est directement online, à cette url https://validator.ampproject.org/. Votre deuxième option est d'afficher votre page dans le navigateur en ajoutant
#development=1
à votre url. Dans votre console chrome vous devriez maintenant voir les erreurs de validation.
Une page web c'est bien, mais il faut y mettre du CSS. C'est aussi là que AMP est assez contraignant. Vous pouvez utiliser seulement un fichier CSS externe, sinon le CSS doit être dans une balise spécifique. Vous devez aussi définir explicitement la taille de chaque élément.
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<title>Ma première page AMP</title>
<link rel="canonical" href="http://test.fr/index.amp" />
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"headline": "Exemple AMP",
"datePublished": "2017-05-25T19:37:41Z",
}
</script>
<style amp-custom>
body {
background-color: white;
}
h1 {
color: red;
}
amp-img {
background-color: yellow;
border: 1px solid black;
}
</style>
</head>
<body>
<h1>Ma première page AMP</h1>
<div>
Salut tout le monde
</div>
<amp-img src="/wp-content/uploads/2017/05/logo-og-image.jpg" alt="amp" height="300" width="500"></amp-img>
</body>
</html>Pour terminer notre page, il faut que Google sache que nous avons fait une page AMP, et pour cela rien de plus simple.
Dans votre HTML vous devez notifier que la page existe en ajoutant la meta suivante :
<link rel="amphtml" href="URL DE LA PAGE AMP">
Dans la page AMP vous devez mettre votre page HTML en ajoutant cette balise :
<link rel="canonical" href="URL DE LA PAGE HTML">
Si vous n'avez qu'une page rien de plus vous n'avez qu'à mettre le lien canonique de votre page.
Bravo, vous avez fait un grand pas dans la web performance !
Il existe de nombreuses autres fonctionnalités disponibles, telles que la mise en place d'un système de login, un live blog mais aussi de la publicité, de l'analytics... Je vous invite à regarder la page https://www.ampproject.org/fr/docs/guides/ qui pourra vous inspirer pour votre application web.
Auteur(s)
Jonathan Jalouzot
Lead développeur au @lemondefr, mes technologies sont le symfony depuis 2009, le nodejs, l'angularjs, rabbitMq etc ... J'adore les médias et aimerai continuer dans ce secteur plein de surprise. Vous pouvez me retrouver sur les réseaux sociaux: Twitter: @captainjojo42 Instagram: @captainjojo42 Linkedin: https://fr.linkedin.com/in/jonathanjalouzot Github: https://github.com/captainjojo
Vous souhaitez en savoir plus sur le sujet ?
Organisons un échange !
Notre équipe d'experts répond à toutes vos questions.
Nous contacterDécouvrez nos autres contenus dans le même thème
Découvrez comment créer un Design System solide avec React. Ce guide simplifié explore les bases essentielles pour concevoir une interface cohérente, améliorer le développement et offrir une expérience utilisateur harmonieuse.
Découvrez comment notre Studio a intégré avec succès des composants React et Varnish ESI sur un site No Code. Explorez les défis à relever et les solutions mises en œuvre
Découvrez ce que sont les System Props, quels sont leurs avantages, et comment les intégrer pour améliorer vos composants d'interface.