Guide de préparation à l'évaluation

4.1.1 Qu'est-ce que la technologie AMP ?

AMP est une méthode de création de pages Web pour du contenu statique permettant un affichage rapide. AMP se compose de trois parties :

  1. AMP HTML correspond à HTML avec des restrictions pour assurer des performances fiables. De plus, certaines extensions permettent de créer du contenu enrichi plus élaboré qu'avec le HTML de base.
  2. La bibliothèque AMP JS garantit un affichage rapide des pages AMP HTML.
  3. Le système de cache Google AMP Cache peut être utilisé pour fournir des pages AMP HTML.

AMP HTML

Pour faire simple, AMP HTML correspond au format HTML complété par des propriétés AMP personnalisées. Le fichier AMP HTML le plus simple ressemble à cela :

<!doctype html>
<html ⚡>
 <head>
   <meta charset="utf-8">
   <link rel="canonical" href="hello-world.html">
   <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>Hello World!</body>
</html>


La plupart des balises d'une page AMP HTML sont des balises HTML normales, mais certaines balises spécifiques AMP viennent remplacer les balises HTML (voir également l'article suivant en anglais : HTML Tags in the AMP spec). Ces éléments personnalisés, appelés composants AMP HTML, présentent des formats courants qui pourront être mis en œuvre facilement et efficacement.

Par exemple, la balise amp-img est entièrement compatible avec l'attribut srcset, même dans les navigateurs qui ne le prennent pas encore en charge. Découvrez comment créer votre première page AMP HTML.

AMP JS

La bibliothèque AMP JS met en œuvre toutes les bonnes pratiques AMP pour optimiser les performances, gère le chargement des ressources et offre les balises personnalisées susmentionnées. Toutes ces fonctionnalités garantissent un affichage rapide de votre page.

Une des optimisations les plus importantes est le fait que tout ce qui provient de ressources externes devient asynchrone. Ainsi, aucun élément de la page ne peut bloquer l'affichage.

Parmi les autres optimisations, on trouve : le bac à sable de tous les cadres iFrame, le précalcul de la mise en forme de tous les éléments de la page avant le chargement des ressources, et la désactivation des sélecteurs CSS lents.

Pour en savoir plus sur les optimisations et les limites, consultez les spécifications AMP HTML.

Google AMP Cache

Le système Google AMP Cache est un réseau de diffusion de contenu basé sur le proxy qui sert à afficher tous les documents AMP valides. Il récupère toutes les pages AMP HTML, les met en cache et améliore automatiquement leurs performances. Ce système de cache permet de charger le document, tous les fichiers JS et toutes les images à partir de la même origine, qui utilise HTTP 2.0 pour une efficacité maximale.

Le cache contient également un système de validation intégré qui permet de confirmer que la page est sûre de fonctionner, et qu'elle ne dépend pas de ressources externes. Le système de validation exécute une série de déclarations afin de s'assurer que le balisage de la page est conforme aux spécifications AMP HTML.

Cet outil de validation peut également être intégré à chaque page AMP. Cette version permet de consigner les erreurs de validation directement dans la console du navigateur lors de l'affichage de la page. Vous pouvez ainsi voir dans quelle mesure les modifications complexes de votre codage peuvent jouer sur l'efficacité et l'expérience utilisateur.

En savoir plus sur le processus de test de vos pages AMP HTML

Ces informations vous-ont elles été utiles ?
Comment pouvons-nous l'améliorer ?