Guide du débutant pour les pages mobiles accélérées (AMP)

Pages mobiles accélérées est l'initiative de Google qui vise à résoudre le plus gros problème du Web mobile - la vitesse. Les expériences utilisateur que nous concevons avec soin sont extrêmement lentes sur les mobiles.

La lenteur n’est pas uniquement un problème d’UX, mais aussi réduit les taux de conversion, et nuit à l'accessibilité en excluant les utilisateurs avec des connexions Internet plus lentes. AMP est un effort d'équipe lancé dans le but de permettre aux éditeurs de créer une fois le contenu optimisé pour les mobiles, et fais le charger instantanément partout.

Depuis le lancement, de nombreux éditeurs tels que la BBC, The Economist, Guardian News et le Financial Times ont mis en œuvre cette initiative. Nous pouvons dès lors présumer que AMP est une innovation à considérer pour tous ceux qui souhaitent rester compétitifs sur le mobile. le web.

AMP en action

Avant de plonger dans les détails, voici la AMP démo, afin que vous puissiez le voir en action. La démo est accessible sur ce lien.

Pour voir AMP en action, vous devez faire deux choses:

Affichez la démonstration sur un périphérique mobile ou sur un simulateur de mobile, par exemple. Chrome DevTools 'Mobile Device Simulator.
Exécuter la requête de recherche dans la barre de recherche. Étant donné que Google AMP travaille actuellement principalement avec des sites d'informations, le meilleur choix est une nouvelle actualité..

Sur la capture d'écran ci-dessous, vous pouvez voir ce que j'ai obtenu en utilisant le terme de recherche rio olympics.

Démo accélérée de pages mobiles sur iPad

Comme vous pouvez le constater, les pages AMP apparaissent sous la forme Google Rich Cards, une Carrousel d'images optimisé pour les mobiles, que Google a publié en mai 2016.

Notez que Google différencie les pages AMP des autres pages optimisées pour les mobiles en utilisant 2 étiquettes différentes: AMP et Mobile-friendly. Il est également intéressant de cliquer sur certains résultats pour voir à quoi ressemble une page Web AMP et à quelle vitesse elle s'exécute sur un mobile..

Contexte technique

AMP est un norme Web construit sur les technologies Web existantes, et se concentrant sur le contenu statique. Il a 3 parties différentes:

AMP HTML: HTML modifié avec (1) la restriction de certaines fonctionnalités HTML / CSS habituelles et (2) l'introduction de nouveaux tags personnalisés (composants)
AMP JS: applique les meilleures pratiques afin de réduire le temps de chargement des pages
AMP CDN: un cache avec un système de validation intégré, qui optimise davantage votre site

Si vous voulez en savoir plus sur le fond technique des pages AMP, regardez la vidéo ci-dessous dans laquelle Paul Bakaus de Google donne une discours d'introduction sur AMP.

Si vous souhaitez approfondir vos connaissances, il est également utile de comprendre les techniques d'optimisation utilisées par AMP pour accélérer les performances sur mobile. Dans la vidéo ci-dessous, Malte Ubl, responsable de AMP Engineering, explique la anatomie de l'AMP en détail.

AMP HTML

Les pages mobiles accélérées sont pages HTML normales ce besoin de suivre un ensemble de règles pour accélérer le chargement des pages et obtenir un rendu fiable.

Regardons les choses les plus importantes que vous devez savoir à ce sujet. Vous pouvez également consulter la spécification HTML complète AMP.

Décidez si vous voulez une page AMP séparée

Pour la même page de contenu statique, vous pouvez avoir 2 versions séparées - un pour l’AMP et un pour la version non-AMP. Vous pouvez également choisir d'avoir une seule version - la page AMP, et l'utiliser partout. Concernant support du navigateur, Les revendications de la page Github d'AMP:

Si le support du navigateur vous inquiète toujours, consultez le post de Paul Irish, de Google, sur Stackoverflow..

Si vous souhaitez avoir deux pages (AMP et non-AMP), vous devez lien vers chacun d'eux afin de informer les moteurs de recherche sur l'existence de la deux les versions.

Ajoutez le code suivant au section de la page non-AMP:

Ajoutez également la ligne suivante au section de la page AMP:

Si vous n’avez qu’une seule page AMP, vous devez toujours liez-le de la manière suivante:

Boilerplate de départ

Le projet AMP offre différents départ des chaudières vous pouvez utiliser pour commencer. Jetez un coup d’œil à la norme la plus simple:

          Bonjour le monde!

Vous pouvez voir que le passe-partout relie la page HTML normale en utilisant le étiquette. le > la balise ajoute le Bibliothèque AMP JS.

 le   
Vous ne pouvez avoir un feuille de style intégrée, et il y a aussi beaucoup de règles de style interdites, par exemple, vous ne pouvez pas utiliser le !important qualificatif, le @importation règle et pseudo-classes.
 N'oubliez pas de vérifier les restrictions de feuille de style avant de commencer à écrire du CSS pour vos pages AMP.
 Il y a une autre chose importante à savoir sur les règles de style AMP: vous ne peut utiliser aucune mise en page que vous voulez - comme il est l’un des principes de l’AMP de permettre au navigateur de calculer l'espace de chaque élément sur la page en avance.
 Examinez les dispositions prises en charge et non prises en charge..
 AMP JS
 Les documents AMP peuvent inclure ni aucun script écrit par l'auteur, ni aucun script Java tiers, Cependant, cela ne signifie pas que les pages mobiles accélérées n'utilisent pas du tout JavaScript. La bibliothèque JavaScript d'AMP (le moteur d'exécution AMP) est responsable du chargement et du rendu rapide des pages AMP par appliquer les meilleures pratiques de performance.
 Composants AMP
 Les composants AMP sont défini par le runtime AMP. Ils sont les susdits Balises HTML spécifiques à AMP vous devez utiliser à la place de leur contrepartie habituelle, telle que  à la place du  étiquette.
 Chaque composant AMP contient un ressource externe particulière (une image, une vidéo, une intégration, etc.). Les ressources externes sont susceptibles de ralentir les sites Web. L’objectif principal de cette solution est de: gérer le chargement des ressources externes d'une manière raisonnable en les exécutant à l'intérieur des bacs à sable.
 AMP vous fournit 2 types de composants:
 Composants intégrés: ils sont toujours disponibles dans chaque document AMP, ils sont construit directement dans le runtime AMP. Actuellement, il y en a cinq:  pour diffuser des annonces
  pour les images, il est utilisé à la place du  étiquette
  pour le suivi des pixels (utilisé pour compter les pages vues)
  pour les fichiers vidéo HTML5 directs incorporés, remplace le  étiquette
  pour les éléments intégrés (peut être utilisé à la place de  dans certains cas)
 
 Composants étendus: Composants supplémentaires, vous devez les inclure explicitement dans votre document AMP. Il y a beaucoup d’utiles, tels que  et , voir la liste complète. Beaucoup d’entre eux peuvent être utilisés pour intégrer du contenu provenant de services tiers, comme de Twitter ou Instagram.
 
Notez que toutes les ressources chargées en externe, telles que  et  doit avoir un connu  et  attribut afin de permettre au navigateur de calculer la mise en page à l'avance.
 AMP CDN
 le AMP CDN est fondamentalement un cache, appelé le Google AMP Cache. Il récupère les documents AMP valides, les met en cache et les charge. AMP CDN a également un système de validation intégré.
 Il vaut la peine tester vos pages AMP avant de les laisser aller en ligne pour pouvoir en toute sécurité passer le validateur. Vous pouvez le faire de différentes manières.
  IMAGE: Projet AMP
Il est bon de savoir que le CDN AMP utilise le protocole HTTP / 2 pour obtenir les meilleures performances possibles..
 Outils AMP
 Il existe d'excellents outils qui peuvent vous aider à implémenter des pages mobiles accélérées. Voyons quelques-uns d'entre eux..
 Google fournit aux webmasters un outil pratique Outil de rapport de statut AMP qui indique le nombre de pages AMP indexées avec succès, ainsi que les erreurs liées à AMP.
 Les berceuses AMP PHP Library vous permet de convertir vos pages HTML en HTML AMP, et signale également la conformité de tout document HTML aux normes AMP.
 Si vous souhaitez utiliser AMP sur votre site WordPress, lisez le tutoriel de Yoast sur la configuration de WordPress pour AMP et sur le fonctionnement de AMP avec le plug-in Yoast SEO..
 Vous pouvez également vérifier Automattic Plugin AMP qui vous permet d'activer les pages mobiles accélérées sur votre site WordPress.
  IMAGE: WordPress.org
Considérations supplémentaires
 Si vous n'êtes toujours pas convaincu, regardez la vidéo sur un test de vitesse rapide au dessous de.
 
 Jonathan Abrams, le fondateur du Nuzzel, revendique encore mieux, affirmant que même les sites optimisés pour les mobiles, tels que le New York Times, se chargent beaucoup plus rapidement. - au lieu de prendre trois secondes pour charger la page moyenne, une page se charge en moins d'une demi-seconde lorsque les pages mobiles accélérées de Google sont activées.
 Vous pouvez également lire un article intéressant dans Verge sur le concours de Google AMP et les articles instantanés de Facebook. Si vous êtes toujours à la recherche d'une réponse à la question "Quel est le piège?", Consultez l'article de Yoast, qui évoque les craintes que l'AMP nous ramène à une époque Internet antérieure à 2000, et se demande s'il s'agit vraiment d'un standard ouvert..
 .