Annonces Google

Vous êtes ici : Dossiers référencement > Référencement mobile

Présentation technique du Projet AMP (Accelerated Mobile Pages Project)

Par , le 13 octobre 2015

Qu'est-ce que les pages au format AMP (Accelerated Mobile Pages) ? Comment rendre ses pages compatibles AMP ? Voici des explications pour les développeurs...

Accelerated Mobile Pages Project

AMP, c'est quoi ?

AMP (Accelerated Mobile Pages Project) est un projet distribué sous licence Apache 2 qui a pour but d'accélérer l'affichage des pages web.

Pour y parvenir, AMP permet aux éditeurs de développer et déployer des pages web spécialement écrites pour pouvoir être ensuite optimisées par des serveurs proxys spécialisés, qui peuvent remplacer les images par des versions optimisées, inclure les images visibles au dessus de la ligne de flottaison sou forme "inline" (src=data-uri), déplacer du CSS directement dans l'attribut style des éléments HTML (inline), précharger des composants, minifier les fichiers HTML et CSS...

Compatibilité

Comme toujours il faut vérifier si la compatibilité affichée correspond à votre audience et à vos besoins. AMP est annoncé pour supporté les 2 dernières versions des navigateurs les plus populaires, à savoir Chrome, Firefox, Edge, Safari et Opera, sur PC comme sur smartphone et tablette.

La compatibilité Internet Explorer est inexistante : les images ne s'affichent pas sous IE10 et inférieur...

Sous le capot

Un sous ensemble de HTML5

Certains éléments HTML sont interdits dans AMP :

  • <img>, <video>, <audio>, <iframe> sont remplacés par des composants spécifiques
  • <script> car l'utilisation directe de javascript est interdite.
  • <form> ainsi que tous les éléments de type "input" : <input>, <textarea>, <select>, <option>... Seul l'élément <button> est autorisé principalement pour les interactions.
  • <base>, <frame>, <frameset>, <object>, <param>, <applet>, <embed>,

Conséquence : exit donc les menus avec formulaire de recherche, formulaire de connexion, les menus déroulants...

Remarque : les liens doivent être relatifs et  les commentaires conditionnels ne sont pas autorisés.

La notion de composant

AMP interdit l'utilisation directe de javascript dans une page web. Seuls les composants pourront utiliser javascript. On doit définir pour chaque composant la largeur/hauteur et son comportement (taille qui s'adapte au design, ...). Un composant peut être composé de plusieurs autres composants : le carrousel amp- est composé de plusieurs composants images amp-img.

Pour le moment peu de composants sont disponibles :

  • [amp-img] permet d'insérer une image avec une politique de mise en cache publique.
  • [amp-audio] permet de lire un fichier audio. Ce composant est basé sur l'élément HTML5 audio. (lazy loading)
  • [amp-anim] permet d'insérer une image animée type GIF. On peut ajouter une image de prévisualisation via un composant [amp-img] placeholder.
  • [amp-ad] permet d'insérer une publicité dans la page. Chaque publicité est chargée dans une iframe.
    Pour le moment les seules régies supportées sont A9, AdReactor, AdSense, AdTech et Doubleclick.
  • [amp-pixel] permet de générer un compteur de vues au travers d'une image invisible. Bien qu'aucune solution officielle n'ait été publiée pour le moment concernant Google Analytics, on peut trouver sur le site The Verge le code suivant:

    https://ssl.google-analytics.com/collect?utmac=xxxx&dt=$TITLE&utmp=$CANONICAL_URL&t=pageview&tid=xxxxxx&dl=$CANONICAL_URL&cid=xxxx&z=xxxx

  • [amp-video] permet d'insérer une vidéo. Ce composant est basé sur l'élément HTML5 video (lazy loading). On peut ajouter une image de prévisualisation via un composant [amp-img] placeholder.
  • [amp-carousel] permet d'afficher un carrousel horizontal d'images.
  • [amp-lightbox] permet d'afficher une lightbox, une popup qui s'ouvre par exemple lors d'un click sur un bouton et recouvre le contenu pour afficher des informations. Les interactions sont gérées via des attributs sur les différents éléments et composants HTML, par exemple on="tap:ma-lightbox" pour déclencher l'ouverture d'une lightbox.
  • [amp-image-lightbox] permet d'afficher une lightbox contenant une image.
  • [amp-iframe] permet d'afficher une iframe. Beacoup de restrictions pour des raisons de sécurité concernant l'origine, l'emplacement dans la page, le fait que seuls les fichiers https peuvent être chargés.
  • [amp-instagram] permet d'afficher une image Instagram.
  • [amp-twitter] permet d'afficher un tweet.
  • [amp-youtube] permet d'afficher une vidéo Youtube.
  • [amp-fit-text] permet d'afficher du texte avec une taille de police optimisée.

CSS

L'utilisation de CSS via l'attribut style (inline CSS) est interdite. De plus seuls les sélécteurs simples sont autorisés (.classe, #id, tag, media queries...). Pour le moment les transitions, animations et filtres sont interdits, ce qui réduit encore les interactions puisque le javascript est interdit.

Validateur

Le projet est livré avec un validateur de pages web disponible ici : https://www.gstatic.com/amphtml/v0/validator.js

Projet AMP (Accelerated Mobile Pages Project)

Comment valider qu'une page AMP est bien valide ?

Le validateur AMP est intégré dans la librairie AMP JS library, si bien qu'il est disponible dans n'importe quelle page AMP. Pour valider vos pages AMP :

  1. Ouvrez une page AMP dans votre navigateur
  2. Ajoutez “#development=1” à la fin de l'URL, par exemple http://localhost:8000/released.amp.html#development=1
  3. Ouvrez la console Chrome DevTools et analysez les erreurs de validation qui sont rapportées

Vous aurez un tableau de ce type (pour les détails voyez ici) :

Validateur AMP

Ce tableau liste des exemples d'erreurs de validation de pages au format AMP (Accelerated Mobile Pages)

Vidéos

Voici une présentation de 25mn par Malte Ubl, responsable technique du projet AMP :

Une autre présentation par Paul Bakaus :

Quelques exemples de chargement de pages web AMP

Note : les comparaisons ont été réalisées sur les versions hébergées des pages AMP et non les versions optimisées par les proxys de Google.

The Verge

version AMP - version standard

New York Times


version AMP - version standard - version servie par le proxy Google

Conclusion

Actuellement AMP est adapté à l'optimisation des pages articles uniquement, car il limite beaucoup (trop) le développement de pages web enrichies. On se retrouve généralement avec des pages simplifiées, une sorte de version mobile light des articles. Les exemples fournis par Google ne sont d'ailleurs que des sites de news et des plateformes de blogs.

Le projet est amené à évoluer avec l'ajout de nouveaux composants, d'attributs HTML et de propriétés CSS autorisés. Mais il peut être rapidement adopté si Google annonce un effet bénéfique sur le ranking des pages optimisées AMP...

A ce sujet, lisez le tutoriel AMP HTML et SEO !

Rien n'empêche cependant les développeurs de s'inspirer des bonnes pratiques utilisées pour accélérer le chargement de leurs pages : utilisation des iframes pour les composants tiers (publicités/scripts/images/vidéos), optimiser l'affichage au dessus de la ligne de flottaison, réduire l'utilisation de javascript, attribuer une taille pour chaque image...

Sur ce sujet, lisez le dossier décrivant comment diagnostiquer ce qui ralentit le chargement de vos pages.

Article (Le Projet AMP (Accelerated Mobile Pages Project)) publié par WebRankInfo dans la rubrique Référencement mobile. Si vous souhaitez publier un extrait de cet article sur votre site, assurez-vous de respecter les conditions générales d'utilisation de WebRankInfo.

Un commentaire

  • Pierre Vican a dit le

    Ce projet AMP va contribuer à développer l'intérêt des visiteurs qui font leurs recherches dans le web à partir de leurs smartphones. Il faut attendre l'évolution de cette technologie intéressante. Dans le courant de 2016, on y verra sans doute plus clair. Nous en parlerons à notre webmaster. Merci pour cette nouvelle.

Postez un commentaire !

Les champs marqués du signe * sont obligatoires. L'adresse email ne sera pas affichée.

En postant un commentaire, vous acceptez les CGU du site WebRankInfo.

Annonces Google

Catégories des dossiers

Consultez les dossiers par thématiques :

Annonces Google

Formation référencement et webmarketing

Venez chez Ranking Metrics vous former au référencement, à Google AdWords et Analytics ainsi qu'aux réseaux sociaux ! Plus de 4000 entreprises sont déjà venues (Dossier possible OPCA, DIF...).

Préparés et animés par Olivier Duffez (WebRankInfo) et Fabien Faceries (AgentWebRanking), 2 professionnels reconnus dans le domaine, nos modules sur le référencement naturel sont très complets tout en laissant une grande place à l'interactivité pour répondre à toutes les questions des participants.

Pour connaître le plan détaillé de chaque module, le prix, les dates et les lieux, consultez le site de Ranking Metrics (organisme de formation).

Hébergement web

Hébergement web mutualisé et dédié

Pour un bon référencement, il faut un bon hébergeur. Testez Sivit by Nerim, l'hébergeur choisi par Olivier Duffez pour son site WebRankInfo.

A partir de 3€ HT/mois.