Dans un article précédent, je vous parlais du Projet AMP lancé par Google dans le but d’accélerer la consultation de contenus en ligne depuis un appareil mobile (smartphone, tablette,…). La librairie AMP HTML permet d’implémenter les spécifications du projet grâce l’intégration d’un fichier Javascript et l’insertion d’un certain nombre de metadonnées.

 

Comment ça marche

AMP HTML fonctionne par insertion de sa librairie Javascritp et en suivant une certaine mise en page HTML

<!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>body {opacity: }</style><noscript><style>body {opacity: 1}</style></noscript>     <script async src="https://cdn.ampproject.org/v0.js"></script>   </head>   <body>Hello World!</body> </html>

Ce bout de code permet le chargement de ressources qui accelereront la page. Les tags obligatoires à une utilisation optimale du Framework sont les suivants :

  1. Le doctype HTML 5 : <!doctype html>
  2. L’attribut ⚡ ou simplement amp dans le tag html (<html amp>)
  3. Les tags head et body. Ceux-ci sont en effet optionnels en HTML (non ce n’est pas du laxisme, juste question de perf…)
  4. Un lien canonique : <link rel= »canonical » href= »$UNE_URL » />
  5. L’encodage utf-8 : <meta charset= »utf-8″>
  6. Le viewport : <meta name= »viewport » content= »width=device-width,minimum-scale=1″>
  7. La librairie JS : <script async src= »https://cdn.ampproject.org/v0.js »></script>

L’exemple était plutôt basique, mais dans la vraie vie, un site contient des images, des vidéos,…AMP propose différents composants qui vont nous permettre d’inclure ces différents élements.

Inclure des images

<!doctype html> <html AMP lang="en">   <head>     <meta charset="utf-8">     <title>Hello, AMPs</title>     <link rel="canonical" href="https://charlesen.fr/comment-booster-le-chargement-de-votre-site-sur-mobile-avec-amp-html.html" />     <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">     <script type="application/ld+json">       {         "@context": "http://schema.org",         "@type": "NewsArticle",         "headline": "Une page avec des images",         "datePublished": "2015-10-07T12:02:41Z",         "image": [           "logo.jpg"         ]       }     </script>     <style>body {opacity: }</style><noscript><style>body {opacity: 1}</style></noscript>     <script async src="https://cdn.ampproject.org/v0.js"></script>   </head>   <body>     <h1>Une page plus élaborée</h1>     <amp-img src="welcome.jpg" alt="Welcome" height="2000" width="800"></amp-img>   </body> </html>

Les attributs recommandés sont :

  • Les dimensions (largeur-width et hauteur – height)
  • Un text alternatif au cas votre image mettrait longtemps à se charger (réseaux,…)

 

Inclure des vidéos

<amp-video width=400 height=300 src="https://votresite.com/videos/unevideo.mp4"     poster="unevideo-image-preview.jpg">   <div fallback>         <p>Votre navigateur ne supporte pas le tag video HTML5 :-(</p>   </div> </amp-video>

 

Vous pouvez aussi inclure une vidéo Youtube…Il faut dans ce cas inclure autre fichier Javascript (Pour des raisons évidentes de rapidité, la librairie ne prend en compte que les tags de base : img, video,..)

<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>

Considérons la vidéo suivante : https://www.youtube.com/watch?v=DNoROPIEsGQ (Un cadeau que j’aimerai bien avoir à Noël :D). L’inclure dans notre page se fait simplement :

<amp-youtube     data-videoid="DNoROPIEsGQ"     layout="responsive"     width="480" height="270"> </amp-youtube>

L’attribut layout permet de gérer automatiquement différentes résolutions d’écran.

 

De nombreux autres élements sont gérer par le Framework : audio, tweet,…

 

Plus d’informations