Comment garantir que vos pages de destination sont conformes AMP

Lorsque le projet Accelerated Mobile Pages (AMP) a commencé, il se limitait principalement au contenu statique. Le cadre minimal a aidé principalement les éditeurs, leur permettant de créer une expérience de découverte et de consommation plus rapide et transparente pour les lecteurs.

Des années plus tard, cependant, beaucoup de choses ont changé. Les débuts unidimensionnels d'AMP sont remplacés par un ensemble d'outils évolué capable de créer des sites Web entiers. Lorsqu'il s'agit de lancer ces expériences polyvalentes à chargement rapide, l'objectif principal d'AMP est resté le même : rendre le Web mobile plus rapide.

Mais, la façon dont cela est réalisé est différente. Avec des solutions de contournement et des techniques avancées, les concepteurs ont trouvé des moyens de répondre aux contraintes des AMP tout en créant des pages qui, pour l'utilisateur occasionnel, n'ont pas l'air ou ne se sentent pas du tout contraintes.

Avec des mises à jour et des tactiques de conception en constante évolution, à quoi un concepteur doit-il aujourd'hui s'attendre lorsqu'il tente de respecter les normes de conformité AMP ?

7 Principes de conception des pages conformes AMP

Alors qu'une grande partie de ce que AMP peut faire a changé, les principes de conception guidant ses développeurs n'ont pas changé. Selon le site Web AMP, pour créer des pages conformes à AMP, vous devrez suivre ces sept piliers lors de la conception dans le cadre :

1. Expérience utilisateur > Expérience développeur > Facilité de mise en œuvre

Bien qu'AMP soit un projet open source, il a été initié par Google. Et, comme tout ce qui concerne Google, l'expérience utilisateur est la priorité. "En cas de doute", disent les créateurs AMP, "faites ce qui est le mieux pour l'expérience de l'utilisateur final, même si cela signifie qu'il est plus difficile pour le créateur de la page de créer ou pour le développeur de la bibliothèque de mettre en œuvre."

2. Ne faites les choses que si elles peuvent être rendues rapides

En tant que projet open source, les concepteurs peuvent s'approprier AMP. Mais, l'objectif ultime des pages mobiles accélérées est l' accélération. La personnalisation est un jeu équitable et attendu, mais uniquement au nom de la vitesse. Les créateurs d'AMP mettent en garde : « N'introduisez pas de composants ou de fonctionnalités dans AMP qui ne peuvent pas fonctionner de manière fiable à 60 ips ou qui entravent l'expérience de chargement instantané sur les appareils mobiles les plus courants d'aujourd'hui. »

3. Ne concevez pas pour un futur navigateur hypothétique plus rapide

Les créateurs AMP aiment leur framework comme les internautes aiment leurs pages : maintenant. La plate-forme a été conçue pour fonctionner sur le Web mobile d'aujourd'hui, pas celui de demain. Les concepteurs devraient donc construire dans cet esprit, pas un navigateur hypothétique qui fonctionne à des vitesses mach.

Dans le même temps, les développeurs d'aujourd'hui façonnent l'avenir d'AMP. Donc, ce n'est pas parce que vous ne pouvez pas faire fonctionner quelque chose maintenant que vous ne voudrez pas le faire un jour. C'est pourquoi il est important, selon les créateurs AMP, que les développeurs AMP « participent à l'élaboration des normes » pour que les optimisations soient disponibles pour AMP à l'avenir.

4. Ne cassez pas le Web

Assurer une excellente expérience utilisateur à tout moment signifie se préparer aux pires scénarios. Dans le cas d'AMP, cela pourrait prendre la forme d'une panne du cache AMP ou d'une défaillance des API. Si cela devait arriver, la consommation de votre contenu ne devrait que « se dégrader gracieusement ». Si votre contenu fonctionne avec un cache AMP, il devrait également fonctionner sans lui.

5. Priorisez les choses qui améliorent l'expérience utilisateur - mais faites des compromis si nécessaire

Bien que, dans la plupart des cas, un chargement de page plus rapide signifie une meilleure expérience utilisateur, ce n'est pas toujours le cas. Et, AMP-ing quelque chose ne devrait pas inhiber l'utilisateur. Il y a un équilibre et l'expérience utilisateur l'emporte toujours. Selon le site Web d'AMP : « Seul le compromis lorsque le manque de support pour quelque chose empêcherait AMP d'être largement utilisé et déployé. »

6. Résoudre les problèmes sur la bonne couche

Résoudre un problème avec AMP ne concerne pas ce qui est le plus facile à mettre en œuvre pour le développeur, mais ce qui est le mieux pour l'utilisateur final. Malheureusement, ces deux ne coïncident pas toujours. Par exemple, si quelque chose est plus facile à intégrer côté client, ne l'implémentez pas simplement si l'utilisateur bénéficiera d'une intégration côté serveur. En mettant l'accent sur l'UX, les problèmes doivent être résolus dans la bonne couche.

7. Aucune liste blanche

Le framework ne prend pas en charge la liste blanche. Ainsi, si vous recherchez un traitement spécial, vous ne le trouverez dans AMP pour aucun site, domaine ou origine, à une exception près, par exemple les créateurs :
lorsqu'il est « nécessaire pour des raisons de sécurité ou de performances ».

Comment vérifier la conformité AMP

Vous pourriez penser que la plus grande force des pages AMP est leur vitesse. Ce n'est pas le cas, disent ses créateurs. Ce n'est pas seulement la vitesse qui rend l'AMP si attrayant, mais sa capacité à être validée. De cette façon, les tiers, comme les réseaux sociaux, peuvent se sentir à l'aise d'envoyer des utilisateurs là-bas en sachant qu'ils obtiendront une page de destination post-clic rapide et transparente.

Pour répondre à la question « Mes pages sont-elles conformes à l'AMP ? », il existe quatre méthodes. Trois sont proposés par Google sur une base réussite/échec à l'aide de son validateur. Le validateur AMP vous aidera à découvrir tout problème avec vos pages avant le lancement. En fin de compte, la réussite leur confère la conformité AMP, signalant aux tiers qu'ils peuvent s'attendre à une expérience utilisateur rapide de votre page.

Console de développement du navigateur

Pour découvrir les problèmes avec vos pages AMP à l'aide de la console développeur du navigateur, procédez comme suit :

1. Ouvrez votre page AMP dans votre navigateur Web
2. Ajoutez "#development=1" à la fin de l'URL
3. Ouvrez la console de développement de votre navigateur pour vérifier les erreurs de validation

Toute erreur empêchant votre page de se conformer au format AMP ressemblera à ceci :

interface Web

L'utilisation de l'interface Web pour déterminer la conformité AMP est simple. Accédez d'abord à l'interface. Ensuite, entrez simplement votre code source dans son champ "URL", et enfin, cliquez sur le bouton valider.

Les erreurs trouvées avec cette méthode seront légèrement différentes. Comme indiqué ci-dessous, ils apparaîtront à côté de la source HTML de la page :

Extension de navigateur

Le plus simple des trois, ce validateur se trouve directement dans votre barre d'outils sous la forme d'une extension Chrome astucieuse. Sans effort de votre part, l'extension valide la page AMP sur laquelle vous vous trouvez. Et son statut indiquera avec l'une des trois icônes colorées.

• Une icône bleue signifie que la page sur laquelle vous vous trouvez n'est pas AMP, mais qu'il en existe une version AMP. Si vous cliquez sur l'icône, le navigateur vous amènera à la version mobile accélérée.
• Une icône rouge signifie qu'il y a une erreur sur cette page, et un nombre s'affichera à côté de cette icône, indiquant exactement combien il y en a.
• Une icône verte signifie qu'il n'y a pas d'erreurs sur la page AMP actuelle. Cependant, il peut y avoir des avertissements. S'il y en a, un nombre apparaîtra à côté de cette icône détaillant exactement combien.

Les trois permettent de détecter facilement les erreurs dans les pages AMP avant la publication. La quatrième option n'est pas proposée par Google, mais par Instapage, pour les créateurs qui tentent de créer une page de destination post-clic rapide. Voici comment l'utiliser lors de la création d'une page de destination post-clic AMP :

Comment créer une page de destination AMP post-clic avec Instapage

En lisant ces normes de conformité, vous pourriez frissonner de confusion. Heureusement, avec Instapage, la création d'une page de destination AMP post-clic est simple. Les utilisateurs peuvent simplement suivre ces étapes :

1 : Créer une nouvelle page

Lorsque vous commencez à créer votre nouvelle page, cliquez sur « Page AMP » lorsque vous y êtes invité :

Pour les utilisateurs, l'étape suivante peut sembler inconnue, car, normalement, le constructeur demande quel modèle vous souhaitez utiliser. Alors qu'Instapage propose des centaines de modèles de conversion éprouvés pour les pages non AMP, les pages AMP sont créées à partir de zéro. En tant que telles, les options de modèle n'existent actuellement pas pour les pages AMP.

Étape 2 : ajouter des éléments à la page

Si vous êtes un utilisateur régulier d'Instapage, vous remarquerez également que les widgets Timer et HTML ne sont pas dans la barre d'outils. Toutes les autres icônes et leurs capacités seront disponibles pour que vous puissiez créer votre page, cependant :

De plus, étant donné qu'AMP restreint CSS et JavaScript, ces options habituelles sont refusées au constructeur. Ce que vous verrez à la place est le suivant :

Ajustez l'arrière-plan, les polices, le référencement et tout ce que vous voyez ci-dessus. Faites-le vous-même ou collaborez avec votre équipe à l'aide de la solution de collaboration Instapage. Ensuite, enregistrez même les composants de votre page en tant qu'Instablocks™ pour les insérer dans d'autres pages. (Remarque : Bien qu'Instablocks et la solution de collaboration fonctionnent avec le générateur AMP, les blocs globaux et les cartes thermiques ne fonctionnent pas actuellement.)

Au fur et à mesure que vous ajoutez des widgets, vous remarquerez que le poids de la page augmente. Chaque page de destination AMP post-clic a une limite de poids de 75 Ko, et le validateur Instapage AMP garantit que vous ne la dépassez pas. Lorsque vous avez atteint 80 % de votre limite de conception, un avertissement apparaît, comme celui-ci, en bas de l'écran :

Étape 3 : Valider la page

Si vous continuez à construire au-delà de la limite de poids AMP, une fenêtre d'avertissement apparaîtra à nouveau pour vous en informer. Il vous demandera de valider la page pour confirmer :

Si votre page arrive sous la limite de poids, en passant la validation, ces notifications apparaîtront sur votre écran :

Étape 4 : Publier

Une fois que votre page est conçue et prête à être publiée, cliquez simplement sur « Publier ». Si vous dépassez toujours la limite de poids, cet avertissement apparaîtra :

Revenez à votre page et essayez de la réduire en supprimant du contenu. Rappelez-vous que les plus grands contributeurs au poids, selon la recherche, sont généralement les images. Lorsque vous êtes prêt, appuyez à nouveau sur publier. Évidemment, si vous voyez à nouveau le message, vous devrez réduire davantage votre page.

Si vous ne voyez pas ce message, vous êtes prêt à publier votre page et vous serez invité à saisir votre sous-domaine et votre domaine après avoir cliqué sur le bouton « publier ».

La page en direct ressemblera à ceci dans votre tableau de bord, avec le logo AMP éclair à côté de son nom :

Cliquez dessus à tout moment pour y revenir, où vous pouvez modifier, exécuter un test A/B, rassembler des rapports, etc.

Commencez à créer des pages de destination post-clic conformes AMP

Plus qu'une simple vitesse, c'est la conformité qui rend les pages de destination post-clic AMP si puissantes. En adhérant aux principes de conception du framework, vous vous assurez que les tiers peuvent compter sur une expérience mobile optimisée vers laquelle diriger le trafic.

Prêt à créer une page de destination AMP post-clic rapide et conforme ? Obtenez une démo AMP personnalisée ici.