AMP pour accélérer le Web mobile
AMP signifie Accelerated Mobile Pages, ou Pages Mobile Accélérées. A l’heure où les appareils mobiles ont pris le dessus sur l’ordinateur fixe, où Google accorde la priorité aux sites optimisés pour la navigation itinérante, la vitesse de chargement sur mobile et tablette est un enjeu crucial. Découvrons ce qu’est le projet AMP.
AMP : qu’est-ce que c’est ?
Le Projet AMP est un projet open-source et dédié à l’accélération du Web mobile.
Il est composé par de nombreux partenaires, comme entre autres Google, LinkedIn, Twitter, WordPress, DailyMotion, Vimeo, … : la liste est disponible sur le site du projet.
Ce projet définit un nouveau standard de codage de page Web : AMP permet de créer des pages Web qui affichent rapidement du contenu statique. Il impose aux sites de fournir le contenu de leurs pages Web dans une version light très rapide à charger. L’intérêt annoncé de AMP est d’offrir à l’internaute un affichage des pages Web quasi instantané, de la même manière que sur Apple News ou encore Facebook Instant.
Selon le Projet AMP, les pages ainsi créées sont dix fois plus légères en moyenne et par conséquent jusqu’à quatre fois plus rapides à télécharger. Le but avoué est donc que l’internaute puisse consulter toujours plus de contenu Web, et de manière toujours plus rapide.
Et augmenter le nombre de pages vues par un internaute, c’est mécaniquement augmenter le nombre de publicités qu’il voit… Ce qui restera toujours le but ultime de notre ami Google 😉
Les techniques AMP
Techniquement, le fonctionnement d’AMP est basé sur trois choses différentes :
- l’AMP HTML est du HTML avec certaines restrictions pour des performances fiables et certaines extensions pour la construction de contenu enrichi au-delà du HTML de base.
- La bibliothèque AMP JS assure le rendu rapide des pages HTML AMP.
- Le cache Google AMP peut être utilisé pour servir les pages HTML AMP mises en cache.
Les résultats de recherche Google indiquent aux utilisateurs que vos pages utilisent AMP HTML en affichant l’icône spécifique (lightning bolt). Ainsi, les internautes sont prévenus que le contenu de votre site sera chargé rapidement sur leur mobile ou sur leur réseau.
Une page AMP possède la même URL que la page en langage HTML classique, accompagnée du suffixe /amp/.
Les optimisations apportées :
- Autorisation des scripts asynchrones uniquement : empêche JavaScript de retarder l’affichage de la page,
- Dimensionnement de manière statique de toutes les ressources (images, publicités, iframes) : déclaration de la taille de la ressource,
- Empêchement du blocage de l’affichage de la page par les mécanismes d’extension (tweets, instagram, mosaïque d’images, …),
- Obligation pour une feuille de style CSS d’être en ligne et de ne pas dépasser 50Ko : pas de requêtes HTTP supplémentaires,
- Hiérarchisation du chargement des ressources, par exemple lecture à l’ouverture de la page uniquement des images visibles au-dessus de la ligne de flottaison,
- Exécution des animations seulement si elles sont accélérées par GPU (processeur graphique),
- Préchargement des polices Web,
- …
Ces techniques seront détaillées plus avant dans un prochain article.
