Les pages AMP (Accelerated Mobile Pages) sont utilisées sur mobile pour accélérer le temps de chargement et améliorer l’expérience de navigation des mobinautes.
Ce format open source lancé par Google demande toutefois une conception spécifique en HTML. Il convient donc de respecter certaines règles si vous voulez que votre contenu se charge en un temps record sur mobile.
À titre d’exemple, les scripts tiers ne sont pas autorisés, tout comme les éléments de formulaire. Quant au CSS, le code est assez restreint.
Pour créer une page web compatible avec le format AMP, voici les 4 critères les plus importants que vous devez respecter.
1. L’expérience utilisateur est une priorité
L’objectif premier d’une page AMP étant de charger le contenu rapidement sur mobile, Google place l’expérience utilisateur au centre des préoccupations.
Si vous avez un doute sur la façon de disposer un élément ou de construire votre page, faites toujours ce qui est le mieux pour l’utilisateur final, et ce, même si le développement de votre page AMP est plus complexe.
2. Les éléments doivent être rapides à charger
Ce critère à respecter n’est pas vraiment une surprise, mais il est important de le rappeler.
Si le visuel de votre page AMP doit être attirant vous ne devez pas pour autant développer un design au détriment de la vitesse de chargement.
Vous devez donc limiter et minimiser les requêtes HTTP pour optimiser l’affichage de votre page AMP. De plus, les images et les publicités ne doivent être chargées que si elles sont susceptibles d’être vues par l’utilisateur.
Enfin, évitez d’ajouter trop d’animations. Tout d’abord parce qu’elles ne sont pas forcément toutes compatibles avec le format AMP, parce que le rendu sur mobile risque d’être différent que sur un ordinateur, mais aussi parce que vous allez altérer le temps de chargement de votre page.
Certaines balises sont indispensables dans votre <head>
Rentrons un peu plus dans la technique. Une page AMP est créée en HTML AMP.
Si le code en lui-même est quelque peu similaire, certaines balises doivent obligatoirement apparaître dans l’en-tête de votre page :
- Les balises
<!doctype html>et<meta charset=« utf-8 »>sont obligatoires - La balise
<html ⚡>contient un éclair. Vous pouvez sinon la remplacer par<html amp> - La balise
<link rel=« canonical= href=« $URL »>doit contenir l’url de la version HTML de la page, ou l’url de la page AMP en question si la version HTML n’existe pas - Le script
<script async src=« https://cdn.ampproject.org/v0.js"></script>doit être inséré dans la balise<head> - La balise
meta <meta name="viewport" content=« width=device-width">doit aussi être ajoutée et il est même recommandé d’insérerminimum-scale=1etinitial-scale=1
Notez enfin que vous devez insérer une balise style[amp-boilerplate]. Pour obtenir le contenu intégral de cette balise rendez-vous la documentation officielle du format AMP.
Certains balises sont interdites
À l’inverse, certaines balises HTML sont interdites dans le format AMP, voici lesquelles :
BaseFrameFramesetObjectParamAppletEmbed
La création d’une page AMP est parfois complexe si vous passez directement par le code HTML, car bien d’autres règles doivent être respectées à ce niveau. Vous pouvez donc faire appel à un développeur expérimenté ou utiliser une plugin spécifique si vous êtes sous CMS. Vous pouvez aussi consulter nos tutoriels pour créer une version AMP de votre WordPress ou activer AMP sur votre boutique Shopify.
Ces quatre points évoqués dans l’article sont les plus importants à prendre en compte lors de la création de votre page AMP. En revanche, comme je vous le disais, d’autres règles doivent être respectées, n’hésitez donc pas à vous référer à la documentation officielle.
Lorsque vous aurez terminé de développer votre page AMP n’oubliez pas de vérifier si votre code est correct. Vous pouvez utiliser la console de votre navigateur, mais encore une fois, en cas de difficultés n’hésitez pas à chercher de l’aide auprès d’un freelance sur Codeur.com.
