AMP Accelerated Mobile Page

Introduction

Le format de pages AMP ( Accelerated Mobile Page) proposé par Google est un format de pages mobiles destiné à accélérer considérablement l'affichage des pages sur smartphones.

Google multiplie ses efforts pour accélérer le chargement des pages Web. En début de mois dernier, la firme californienne levait le voile sur son projet AMP ou Accelerated Mobile Pages. Pour cette initiative, la société se tourne du côté des éditeurs de magazines en ligne et explique que ces derniers pourraient profiter de pages Web véritablement optimisées pour le mobile en se chargeant quasi-instantanément.

Pour ce faire, Google a mis au point AMP HTML, une variante du langage HTML classique permettant de minimiser les requêtes HTTP. L'idée est de ne charger le contenu que lorsqu'il est censé être visible à l'écran. Un Javascript sera en mesure de repérer le contenu du code optimisé pour AMP via un préfixe. Ainsi par exemple, la balise <video> se voit remplacée par <amp-video>. Les développeurs retrouveront plus d'information sur le site officiel ainsi que sur Github.

Créer votre première page AMP

Vous ne savez pas par où commencer ? Dans ce didacticiel, vous allez découvrir comment créer une page AMP HTML de base, comment l'organiser et vérifier sa conformité AMP et enfin, comment la préparer pour sa publication et sa distribution.

1 - Créer votre page AMP HTML
2 - Inclure une image
3 - Modifier la présentation et la disposition
4 - Prévisualiser et valider
5 - Préparer votre page pour la détection et la distribution
6 - Étapes finales avant publication

1 - Créer votre page AMP HTML

Le balisage suivant est un bon point de départ, un modèle standard. Copiez et enregistrez ce qui suit dans un fichier .html.

                      <!doctype html>
                      <html amp lang="en">
                        <head>
                          <meta charset="utf-8">
                          <title>Hello, AMPs</title>
                          <link rel="canonical" href="http://example.ampproject.org/article-metadata.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": "Open-source framework for publishing content",
                              "datePublished": "2015-10-07T12:02:41Z",
                              "image": [
                                "logo.jpg"
                              ]
                            }
                          </script>
                          <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>
                          <h1>Welcome to the mobile web</h1>
                        </body>
                      </html>

2 - Inclure une image

La plupart des balises HTML peuvent être utilisées directement dans AMP HTML, mais certaines, comme la balise <img>, sont remplacées par des balises équivalentes ou des balises AMP HTML personnalisées légèrement améliorées (et quelques balises problématiques sont purement interdites, voir les balises HTML dans la spécification).

Pour découvrir à quoi ressemblerait un balisage supplémentaire, voici le code requis pour intégrer une image dans la page :

                      <amp-img src="welcome.jpg" alt="Welcome" height="400" width="800"></amp-img>

Pour savoir pourquoi nous remplaçons les balises, telles que <img> par <amp-img>, et combien sont disponibles, accédez à Inclure des iframes et des éléments multimédias.

3 - Modifier la présentation et la disposition

Les pages AMP sont des pages Web ; toute application de style sur la page et sur ses éléments est réalisée à l'aide de propriétés CSS communes. Vous pouvez appliquer un style aux éléments à l'aide de sélecteurs de classe ou d'élément dans une feuille de style en ligne au sein de l'en-tête (<head>), appelée <style amp-custom> :

                      <style amp-custom>
                        /* any custom style goes here */
                        body {
                          background-color: white;
                        }
                        amp-img {
                          background-color: gray;
                          border: 1px solid black;
                        }
                      </style>

Chaque page AMP peut intégrer une seule feuille de style uniquement et l'utilisation de certains sélecteurs n'est pas autorisée. Tout savoir sur les styles.

AMP applique des règles strictes en matière de disposition des éléments sur la page. Sur une page HTML standard, vous utilisez presque exclusivement le style CSS pour disposer les éléments. Mais pour des performances optimales, AMP nécessite de définir dès le départ une taille explicite pour tous les éléments.

4 - Prévisualiser et valider

Prévisualisez la page AMP comme tout autre site HTML statique. Aucune étape de création ni aucun prétraitement ne sont requis. Soit :

Ouvrez la page directement dans le navigateur à partir du système de fichiers (certains éléments peuvent ne pas fonctionner en raison de l'échec de XMLHttpRequests). Soit :
Utilisez un serveur Web local, tel qu'Apache 2 ou Nginx. (Conseil: Pour un serveur Web rapide, exécutez python -m SimpleHTTPServer.)

Ensuite, vérifiez que votre page AMP est une page AMP valide. Dans le cas contraire, elle ne pourra pas être détectée ni distribuée par des plateforme tierces telles que Google Search. Pour valider :

1 - Ouvrez votre page dans votre navigateur.
2 - Ajoutez « #development=1 » à l'URL, par exemple, http://localhost:8000/released.amp.html#development=1.
3 - Ouvrez la console Chrome DevTools et vérifiez les erreurs de validation.

5 - Préparer votre page pour la détection et la distribution

Dans certains cas, vous pouvez avoir besoin de deux versions (non-AMP et AMP) de la même page. Par exemple, pour un article d'actualités. Supposons ce qui suit : Si Google Search trouve la version non-AMP de cette page, comment sait-il qu'il en existe également une version AMP ?

Relier les pages avec <link>

Pour résoudre ce problème, nous ajoutons des informations sur la page AMP dans la page non-AMP et vice versa, sous forme de balises <link> dans <head>.

Ajoutez ce qui suit sur la page non-AMP :

                      <link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">

Et ce qui suit sur la page AMP

                      <link rel="canonical" href="https://www.example.com/url/to/full/document.html">

Que se passe-t-il si je n'ai qu'une seule page ?

Si vous n'avez qu'une seule page, et que cette page est une page AMP, vous devez tout de même lui ajouter le lien canonique, qui dans ce cas pointe simplement vers elle-même :

                      <link rel="canonical" href="https://www.example.com/url/to/amp/document.html">

6 - Étapes finales avant publication

Félicitations ! Vous avez testé votre page en local et corrigé toutes les erreurs de validation. Votre première page AMP est donc prête pour envoi.

Familiarisez-vous avec le fonctionnement d'AMP et le comportement de tous les éléments en parcourant le menu de navigation à gauche. Et pour obtenir des informations générales sur les outils utilisés lors de la préparation du contenu pour production, accédez à Premiers pas avec Premiers pas avec le workflow de développement.

Pour plus d'informations, rendez vous sur le site officielle