Read more

"/>
Accelerated Mobile Pages (AMP) – Les sites Web mobiles sont encore plus rapides

Accelerated Mobile Pages (AMP) – Les sites Web mobiles sont encore plus rapides

La vitesse est un facteur clé pour les utilisateurs d'Internet aujourd'hui. Le temps de chargement détermine si les visiteurs restent sur un site Web ou non. En particulier, l'utilisation croissante de l'internet mobile nécessite aujourd'hui des sites Web mobiles rapides.

Un nouveau cadre devrait maintenant fournir la vitesse nécessaire. Le projet Open Source Accelerated Mobile Pages Project garantit un chargement plus rapide des pages Web mobiles en rendant le contenu HTML statique. Google prévoit d'intégrer les sites AMP dans ses résultats de recherche dès février 2016.

Cet article montre ce que c'est Pages mobiles accélérées et quel impact le cadre pourrait avoir sur la recherche.

L'objectif et le fonctionnement de l'AMP

AMP a initialement pour objectif d’augmenter la satisfaction des utilisateurs mobiles en réduisant les temps de chargement. Il est clair depuis longtemps que des mesures s'imposent dans ce domaine: selon Google, environ les deux cinquièmes des utilisateurs quittent un site Web s'il faut plus de trois secondes pour le télécharger. Avec AMP, le contenu devrait maintenant être disponible en quelques millisecondes. Même les contenus plus complexes tels que les vidéos ou les images haute résolution sont chargés plus rapidement.

740x400-AcceleratedMobilePages-02 Pages mobiles accélérées Google AMP

Le fonctionnement de l’AMP s’explique relativement simplement. Le contenu d'un site Web réduit à un minimum de code source est mis en cache sur un serveur proxy dans un réseau de diffusion de contenu. À partir de là, le contenu peut être chargé rapidement lorsque le document correspondant est récupéré sur Internet. Il ne doit jouer aucun rôle dans AMP, avec quel appareil (smartphone ou tablette) le contenu est utilisé.

AMP est basé sur trois composants:

premier AMP HTML: Il s'agit d'une forme personnalisée de HTML pouvant être interprétée par tous les serveurs. Il n'y a toujours qu'une seule requête http par téléchargement de page.

deuxième AMP JavaScript: AMP n'autorise que le JavaScript asynchrone. Cela enregistre le rendu rapide du site car aucune ressource externe ne peut être bloquée. Le code JavaScript tiers ne peut être chargé que via des iframes, qui n'affectent pas non plus le rendu du contenu principal.

troisième Réseau de diffusion de contenu AMP: Divers serveurs proxy enregistrent et mettent en mémoire tampon les documents AMP. Les documents sont chargés via le réseau de distribution de contenu via http 2.0. Dans le même temps, il est vérifié que le site AMP fonctionne également.

De plus, d'autres réglages garantissent des vitesses de chargement élevées. Par exemple, la taille de fichier des sources de données externes pour les images, les publicités ou les iframes doit être spécifiée dans le document HTML. AMP utilise ces données pour déterminer la position et la taille de chaque élément avant son téléchargement. De même, AMP donne la priorité aux fichiers téléchargés. En outre, seuls les styles en ligne de 50 kilo-octets maximum sont autorisés pour CSS.

Particularités de la mise en œuvre

Le code HTML des pages Web AMP devrait idéalement être ajusté à certains endroits. Ceci s’applique, par exemple, à des sources de média telles que des images, des vidéos ou des iframes. Tous les tags reçoivent le supplément "amp".

  • Images: amp-img
  • Vidéos: amp video
  • Fichiers audio: ampli audio
  • iframes: amp-iframe

Exemple de fichier image inséré:

avertissement: Les autres balises telles que "embed" ne sont pas autorisées sur les pages AMP. Vous pouvez trouver une liste préliminaire des tags requis sur Github.

Les balises suivantes sont requises pour un document AMP:

    Type de document:

    tag haut niveau jour ( fonctionne aussi)

    et de jour

    Lien canonique dans le gamme:

    Codage dans le gamme:

    Fenêtre dans le gamme:

    Référence à AMP-CDN dans le gamme:

    Indication de l'opacité:

Astuce: En outre, les éditeurs ont la possibilité d'optimiser leurs pages AMP pour la coloration (couleurs d'arrière-plan, couleurs du texte). C'est l'élément