Qu'est-ce que l'AMP ? Le guide complet des pages mobiles accélérées

SECTION 1 : Que sont les pages mobiles accélérées ?

L'état d'esprit axé sur le mobile est là pour rester - la déclaration est vraie du côté des entreprises et des consommateurs.

Dire que les utilisateurs consultent leurs mobiles avant de faire un achat serait un euphémisme. L'utilisation d'Internet mobile a dépassé l'utilisation mobile de bureau dans le monde entier. Même des pays comme l'Inde, le Mexique et l'Indonésie ont une utilisation des smartphones plus de 4 fois supérieure à celle des ordinateurs de bureau :

Il y a 30 milliards de moments mobiles (le moment où un client consulte son téléphone et attend une réponse immédiate) chaque jour rien qu'aux États-Unis. Cela signifie que chaque jour, votre marque dispose de 30 milliards d'opportunités mobiles pour offrir aux utilisateurs ce qu'ils souhaitent.

Et les dépenses publicitaires sur mobile restent à la traîne par rapport à la consommation de médias mobiles :

Il y a une raison pour laquelle les utilisateurs passent plus de temps à naviguer sur mobile au lieu d'acheter - les utilisateurs recherchent davantage la gratification instantanée lorsqu'ils sont sur leurs appareils mobiles.

Répondez à cette question : combien de temps attendez-vous qu'une page Web mobile se charge ?

Selon les données collectées par Google et SOASTA, 40% des consommateurs quittent une page dont le chargement prend plus de trois secondes.

Trois secondes.

C'est tout le temps dont vous disposez pour retenir l'attention d'un internaute qui a aimé votre annonce et qui a cliqué dessus. Et si votre page Web ne se charge pas dans le délai susmentionné, vous avez créé l'annonce, peu importe à quel point elle était convaincante, en vain. La mauvaise nouvelle est le fait que, selon les données, la plupart des sites mobiles de vente au détail prennent environ 6,9 secondes à charger, c'est plus du double du temps que 40% des utilisateurs attendent avant d'abandonner la page.

Comment la vitesse des pages Web affecte le taux de rebond

La vitesse est un facteur important lors de la mesure du taux de rebond pour les pages Web mobiles. Avant d'approfondir cela, il est important d'expliquer que la vitesse est principalement considérée sous deux aspects pour les taux de rebond des sites mobiles, à savoir le temps de préparation du DOM et le temps de chargement d'une page complète :

1. Temps de préparation DOM : le temps de préparation DOM est le temps qu'il faut pour que le code HTML de la page soit reçu et analysé par le navigateur - c'est le meilleur indicateur du taux de rebond. Même si l'utilisateur peut ne pas savoir quand le code HTML est reçu et analysé, le code doit être chargé avant que des éléments de page tels que des images puissent être chargés. Si le code HTML prend trop de temps, le temps de chargement du site Web est lent. Pour accélérer le temps de préparation du DOM de votre page Web mobile, il est préférable d'éviter l'utilisation de JavaScript qui bloque et empêche un navigateur d'analyser le code HTML. Les éléments de page qui utilisent JavaScript incluent des publicités tierces et des widgets sociaux qui doivent être récupérés à partir d'un serveur externe avant que la page puisse être chargée.

2. Temps de chargement d'une page complète : le temps de chargement d'une page complète comprend le temps nécessaire pour que les images, les polices, les codes CSS, etc. se chargent sur une page Web. Un chargement plus rapide d'une page entière entraîne un taux de rebond inférieur :

Pour vous assurer que votre page Web a un temps de chargement de pleine page plus rapide, vous devez optimiser les images, les polices et éviter les fichiers tiers susceptibles de ralentir le temps de chargement.

Le temps de chargement de la page est l'une des principales raisons du rebond de la page, le pire, c'est que les utilisateurs non seulement abandonneront la page, mais la recherche suggère que 79% des utilisateurs ne reviendront pas une fois qu'ils auront eu une expérience lente sur une page Web.

Considérez ces révélations surprenantes sur la vitesse de chargement des pages :

• Le chargement moyen d'un site mobile prend 19 secondes via une connexion 3G, et 77 % des sites mobiles mettent plus de 10 secondes à se charger.
• Google a constaté que les conversions diminuaient de 20 % pour chaque seconde supplémentaire nécessaire au chargement d'une page Web. À titre de comparaison, les sites qui se chargent en 5 secondes génèrent 2 fois plus de revenus publicitaires sur mobile que les sites qui se chargent en 19 secondes.
• 61 % des utilisateurs sont peu susceptibles de revenir sur un site mobile auquel ils ont eu du mal à accéder.

Qu'est-ce que ça veut dire?

Si le chargement des pages mobiles n'est pas instantané, pas assez rapide pour l'utilisateur, elles rebondiront et ne reviendront probablement pas.
Pour vous assurer que cela n'arrive pas à votre page Web mobile, il est important d'AMPlifier vos sites Web mobiles et vos pages de destination post-clic.

Qu'est-ce que l'AMP ?

Google a lancé le projet open source Accelerated Mobile Pages pour garantir que les pages Web mobiles fonctionnent à une vitesse optimale.

Le projet AMP vise à « construire ensemble le futur Web » en vous permettant de créer des pages Web et des publicités toujours rapides, belles et performantes sur tous les appareils et plates-formes de distribution.

AMP a été créé en collaboration avec des milliers de développeurs, d'éditeurs, de sites Web, de sociétés de distribution et d'entreprises technologiques. Plus de 1,5 milliard de pages AMP ont été créées à ce jour, et plus de 100 principaux fournisseurs d'analyse, de technologie publicitaire et de CMS prennent en charge le format AMP.

Lorsque vous créez des pages mobiles au format AMP, vous obtenez :

1. Performances et engagement supérieurs : les pages créées dans le projet open source AMP se chargent presque instantanément, offrant aux utilisateurs une expérience fluide et plus attrayante sur leurs mobiles et leur ordinateur de bureau.

2. Flexibilité et résultats : les entreprises ont la possibilité de décider comment présenter leur contenu et quels fournisseurs de technologies utiliser, tout en maintenant et en améliorant les KPI.

Vous avez probablement déjà cliqué sur une page AMP, vous ne vous en êtes pas rendu compte. La seule chose que vous avez peut-être remarquée est l'instantanéité de la page après avoir cliqué. Les pages Web construites AMP ont un indicateur éclair dans le résultat de la recherche.

Voici comment reconnaître AMP dans les résultats de recherche :

Voici à quoi ressemble une page AMP par rapport à une page Web normale :

La raison pour laquelle les pages AMP se chargent instantanément est que AMP restreint HTML/CSS et JavaScript, permettant un rendu plus rapide des pages Web mobiles. Contrairement aux pages mobiles classiques, les pages AMP sont automatiquement mises en cache par Google AMP Cache pour des temps de chargement plus rapides sur la recherche Google.

Les utilisateurs ont certaines attentes lorsqu'ils sont sur leurs appareils mobiles, ils veulent des expériences significatives, pertinentes et plus rapides - pour s'assurer que les attentes de votre public cible sont satisfaites, AMP est votre meilleur pari.

Ce guide vous expliquera tout ce que vous devez savoir sur le projet open source AMP. Nous allons passer en revue la procédure exacte du fonctionnement des AMP et ce qui rend les pages se chargent si rapidement.

Le guide présentera également des études de cas sur la façon dont l'utilisation des pages AMP a contribué à augmenter les conversions pour les entreprises de divers secteurs et les avantages que vous obtiendrez lorsque vous AMPlifiez vos pages. La dernière section expliquera ce que sont les pages de destination post-clic accélérées pour mobile et pourquoi vous devez créer les pages pour offrir aux visiteurs une page de destination post-clic plus rapide et plus pertinente.

SECTION 2 : Comment fonctionne l'AMP ?

Google a lancé le framework open source Accelerated Mobile Pages (AMP) en février 2016. Le framework a été construit parce qu'il y avait un besoin de créer des expériences utilisateur optimisées et étroitement intégrées, au lieu des expériences mobiles maladroites et lentes auxquelles les utilisateurs font face quotidiennement. base.

Google a lancé le projet AMP pour créer un cadre qui fournirait un chemin exact pour créer des expériences de pages Web mobiles optimisées. Le projet open source AMP est bien documenté, facilement déployable, validable et déterminé à donner la priorité à l'utilisateur dans la conception de pages Web.

Depuis son lancement il y a près de deux ans, 25 millions de domaines ont publié plus de 4 milliards de pages AMP :

Depuis son lancement, non seulement le nombre de pages AMP a augmenté, mais aussi leur vitesse, le temps médian qu'il faut à une page AMP pour se charger à partir de la recherche Google est désormais inférieur à une demi-seconde.

AMP entraîne une augmentation de 10 % du trafic sur le site Web avec une augmentation de 2 fois du temps passé sur la page. Les sites Web de commerce électronique qui utilisent AMP enregistrent une augmentation de 20 % des ventes et des conversions par rapport aux pages non AMP :

AMP aide les entreprises à créer des versions rationalisées, propres et pertinentes de leurs pages Web, offrant aux utilisateurs une expérience Web mobile plus rapide.

Chartbeat a analysé les données de 360 ​​sites Web utilisant AMP de juin 2016 à mai 2017 pour découvrir qu'un éditeur typique qui utilise des pages AMP a vu 16 % de tout le trafic mobile sur son contenu AMP.

Les pages AMP se chargent environ quatre fois plus vite que les pages Web standard, et les utilisateurs s'engagent 35 % plus avec les pages AMP qu'avec les pages Web mobiles standard :

Maintenant que nous savons pourquoi vous devriez utiliser les pages AMP, voyons comment fonctionne AMP, comment il se compare à la conception Web réactive, aux articles instantanés de Facebook et aux applications Web progressives.

Les 3 composants de base de l'AMP

Les pages AMP sont construites avec les trois composants principaux suivants :

AMP HTML

Le HTML AMP est essentiellement du HTML avec quelques restrictions pour des performances fiables. Le fichier HTML AMP le plus simple ressemble à ceci :

La plupart des balises dans AMP HTML sont des balises HTML normales, cependant, certaines balises HTML sont remplacées par des balises spécifiques à AMP. Ces balises personnalisées sont appelées composants HTML AMP et elles rendent les modèles de balises courants faciles à mettre en œuvre de manière performante. Les pages AMP sont découvertes par les moteurs de recherche et autres plateformes par la balise HTML.

Vous pouvez choisir d'avoir une version non-AMP et une version AMP de votre page, ou simplement une version AMP.

AMP JavaScript (JS)

La bibliothèque AMP JS assure le rendu rapide des pages HTML AMP. La bibliothèque JS implémente toutes les meilleures pratiques de performances de l'AMP telles que le CSS en ligne et le déclenchement de polices, cela gère le chargement des ressources et vous donne les balises HTML personnalisées pour assurer un rendu de page rapide.

L'AMP JS rend tout à partir des ressources externes asynchrone, de sorte que rien sur la page ne puisse empêcher quoi que ce soit de rendre le rendu. Le JS utilise également d'autres techniques de performances telles que le sandboxing de tous les iframes, le pré-calcul de la mise en page de chaque élément de page avant le chargement des ressources et la désactivation des sélecteurs CSS lents.

Cache AMP

Le cache Google AMP est utilisé pour diffuser les pages HTML AMP mises en cache. Le cache AMP est un réseau de diffusion de contenu basé sur un proxy utilisé pour diffuser tous les documents AMP valides. Le cache récupère les pages HTML AMP, les met en cache et améliore automatiquement les performances des pages.

Pour maintenir une efficacité maximale, AMP Cache charge le document, les fichiers JS et toutes les images de la même origine qui utilise HTTP 2.0.

AMP Cache est livré avec un système de validation intégré qui confirme qu'une page est garantie de fonctionner et qu'elle ne dépend pas de forces externes qui pourraient ralentir la page. Le système de validation fonctionne sur une série d'assertions qui confirment que le balisage de la page répond aux spécifications AMP HTML.

Une version supplémentaire du système de validation est disponible à côté de chaque page AMP. Cette version est capable d'enregistrer les erreurs de validation directement dans la console du navigateur lorsque la page est rendue, vous permettant de voir les changements complexes dans votre code qui peuvent avoir un impact sur les performances et l'expérience utilisateur.

Les trois composants de base d'AMP fonctionnent à l'unisson pour permettre aux pages de se charger rapidement. La section suivante mettra en évidence les sept techniques d'optimisation qui se combinent pour rendre les pages AMP si rapides.

Tout le JavaScript AMP est exécuté de manière asynchrone

JavaScript peut modifier tous les aspects de la page, il a le pouvoir de bloquer la construction du DOM et de retarder le rendu de la page - les deux facteurs entraînent un chargement lent de la page. Pour garantir que JavaScript ne retarde pas le rendu des pages, AMP n'autorise que le JavaScript asynchrone.

Les pages AMP n'incluent aucun code JavaScript écrit par l'auteur, mais toutes les fonctionnalités de la page interactive sont gérées par des éléments AMP personnalisés. Ces éléments AMP personnalisés peuvent inclure du JavaScript, mais ils sont soigneusement conçus pour garantir qu'ils n'entraînent aucune dégradation des performances.

AMP utilise du JavaScript tiers dans les iframes, mais il ne peut pas bloquer le rendu des pages.

Toutes les ressources sont dimensionnées de manière statique

Toutes les ressources externes telles que les images, les iframes et les annonces doivent indiquer leur taille HTML afin qu'AMP puisse déterminer la taille et la position de chaque élément avant le téléchargement des ressources de la page. AMP charge la mise en page de la page sans attendre le téléchargement des ressources.

AMP a la capacité de séparer la mise en page du document de la mise en page de la taille, une seule requête HTTP est requise pour mettre en page l'intégralité du document. Parce qu'AMP est optimisé pour éviter les mises en page de style coûteuses et les recalculs dans le navigateur, il n'y a pas de nouvelle mise en page lorsque les ressources de la page se chargent.

Les mécanismes d'extension ne bloquent pas le rendu

AMP n'autorise pas les mécanismes d'extension à bloquer le rendu des pages, il prend en charge les extensions pour des éléments tels que les lightbox et les intégrations de médias sociaux, et bien que ceux-ci nécessitent des requêtes HTTP supplémentaires, ils ne bloquent pas la mise en page et le rendu.

Si une page utilise un script personnalisé, elle doit indiquer au système AMP qu'elle aura éventuellement une balise personnalisée, AMP crée ensuite la balise requise afin que la page ne ralentisse pas. Par exemple, si la balise amp-iframe indique à AMP qu'il y aura une balise amp-iframe, AMP crée alors la boîte iframe avant de savoir ce qu'elle inclura.

Tout JavaScript tiers est maintenu hors du chemin critique

JavaScript tiers utilise un chargement JS synchrone, ce qui a tendance à ralentir votre temps de chargement. Les pages AMP autorisent le JavaScript tiers mais uniquement dans les iframes en bac à sable, ce faisant, le chargement de JavaScript ne peut pas bloquer l'exécution de la page principale. Même si le JavaScript iframe en bac à sable déclenche plusieurs recalculs de style, leurs minuscules iframes ont très peu de DOM.

Les recalculs iframe sont exécutés très rapidement par rapport au recalcul des styles et de la mise en page de la page.

CSS doit être en ligne et lié à la taille

CSS bloque le rendu, il bloque également tout chargement de page et a tendance à provoquer des ballonnements. AMP HTML n'autorise que les styles en ligne, cela supprime une ou plusieurs requêtes HTTP du chemin de rendu critique vers la plupart des pages Web.

La feuille de style en ligne doit avoir une taille maximale de 75 Ko, bien que cela soit assez grand pour des pages très sophistiquées, cela nécessite toujours que l'auteur de la page pratique une bonne hygiène CSS.

Le déclenchement des polices est efficace

L'optimisation des polices Web est essentielle pour un chargement rapide, car les polices Web sont généralement de grande taille. Sur une page typique qui inclut quelques scripts de synchronisation et quelques feuilles de style externes, le navigateur attend de télécharger les polices jusqu'à ce que tous les scripts soient chargés.

Le framework AMP ne déclare aucune requête HTTP jusqu'à ce que toutes les polices commencent à se télécharger. Cela n'est rendu possible que parce que tout le JavaScript dans AMP a l'attribut async et que seules les feuilles en ligne sont autorisées, aucune requête HTTP n'empêche le navigateur de télécharger les polices.

Les recalculs de style sont minimisés

Dans les pages AMP, toutes les lectures DOM ont lieu avant toutes les écritures, ce qui garantit qu'il n'y a qu'un seul recalcul des styles par image – il n'y a donc aucun effet négatif sur les performances de rendu des pages.

Exécuter uniquement des animations accélérées par GPU

Pour exécuter des optimisations rapides, vous devez les exécuter sur GPU. Le GPU fonctionne en couches, il sait comment effectuer certaines choses sur ces couches – les couches peuvent être déplacées et estompées. Cependant, lorsque le GPU ne peut pas mettre à jour la mise en page, il confie cette tâche au navigateur et ce n'est pas bon pour le temps de chargement de la page.

Les règles CSS relatives à l'animation garantissent que l'animation peut être accélérée par GPU, cela signifie qu'AMP n'autorise que l'animation et la transition sur la transformation et l'opacité afin que la mise en page ne soit pas requise.

Le chargement des ressources est prioritaire

AMP contrôle tout le chargement des ressources, il priorise le chargement des ressources et il ne charge que ce qui est nécessaire et pré-extrait toutes les ressources chargées paresseux.

Lorsque AMP télécharge des ressources, il optimise les téléchargements afin que les ressources les plus importantes soient téléchargées en premier. Toutes les images et publicités ne sont téléchargées que si elles sont susceptibles d'être vues par l'utilisateur, si elles sont au-dessus de la ligne de flottaison, ou si le visiteur est susceptible de les faire défiler.

AMP a également la capacité de pré-extraire les ressources chargées paresseux, ces ressources sont chargées le plus tard possible, mais sont pré-extraites le plus tôt possible. De cette façon, les choses se chargent très rapidement, mais le processeur n'est utilisé que lorsque les ressources sont présentées aux utilisateurs.

Charger instantanément les pages

La nouvelle API de pré-connexion AMP est largement utilisée pour garantir que les requêtes HTTP sont aussi rapides que possible dès qu'elles sont effectuées. Pour cette raison, la page est rendue avant que l'utilisateur n'indique explicitement qu'il souhaite y accéder, la page peut être disponible au moment où l'utilisateur la voit réellement, ce qui fait que la page se charge instantanément.

AMP est optimisé pour ne pas utiliser beaucoup de bande passante et de CPU lors du pré-rendu du contenu Web. Lorsque les documents AMP sont pré-rendus pour un chargement instantané, les ressources au-dessus du pli sont réellement téléchargées et les ressources qui peuvent utiliser beaucoup de CPU, telles que les iframes tiers, ne sont pas téléchargées.

Vous pouvez également utiliser la vidéo suivante pour découvrir les « 7 façons dont AMP rend vos pages rapides » :

Maintenant que nous savons comment fonctionne AMP, voyons comment AMP se compare aux articles instantanés, à la conception Web réactive et aux applications Web progressives de Facebook.

AMP contre les articles instantanés de Facebook

Facebook a lancé les articles instantanés en 2015 pour aider les éditeurs à offrir une expérience de lecture incroyablement rapide et immersive aux utilisateurs de Facebook. Les articles instantanés de Facebook sont :

• 10 fois plus rapide que les articles Web mobiles standard
• 20 % d'articles instantanés en plus sont lus en moyenne
• 70% des lecteurs sont moins susceptibles d'abandonner un article instantané

Instant Articles aide les éditeurs à créer des articles rapides et interactifs sur Facebook. Ils vous offrent les avantages suivants :

• Rapide et réactif : les articles instantanés se chargent instantanément, quelle que soit la connexion ou l'appareil sur lequel se trouve l'utilisateur. Les articles sont faciles à utiliser car ils se transforment en une expérience de narration mobile.
• Interactif et engageant : l' expérience immersive des articles les rend plus interactifs, c'est pourquoi les articles instantanés sont partagés 30 % plus souvent que les articles Web mobiles. L'aide amplifie la portée de vos histoires dans le fil d'actualité.
• Monétisation simple et flexible : la monétisation fait partie intégrante des articles instantanés. Pour développer votre entreprise avec les articles, vous pouvez étendre les publicités vendues directement et remplir l'inventaire publicitaire disponible avec le réseau d'audience de Facebook, et même créer du contenu de marque natif.

Les pages AMP et les articles instantanés offrent tous deux aux utilisateurs un temps de chargement rapide, ce qui permet de réduire le taux de rebond des pages et d'augmenter l'engagement. En fait, les articles instantanés de Facebook se chargent encore plus rapidement que les pages AMP :

Cependant, le taux d'adoption des pages AMP est beaucoup plus élevé que celui des articles instantanés, en grande partie parce que Facebook privilégie de plus en plus la vidéo par rapport aux articles textuels dans son fil d'actualité. Cela a conduit plusieurs éditeurs à cesser d'utiliser les articles instantanés, notamment le New York Times et The Guardian.

Selon Parsley, Google a dépassé Facebook en tant que principale source de trafic externe pour les éditeurs. Avec Google qui représente désormais 42 % du trafic externe des éditeurs :

Lorsque Facebook a lancé les articles instantanés, Google a dépassé Google en tant que source dominante de trafic vers les sites Web de médias et de contenu, cependant, avec le lancement et le succès d'AMP, Google est de nouveau en tête.

Le succès du projet AMP réside dans le fait qu'il s'agit d'une initiative open source et non d'un partenariat commercial. Au lieu de garder les utilisateurs confinés à une application particulière, comme Facebook l'a fait avec les articles instantanés, le projet AMP vise à changer la façon dont les éditeurs créent des pages Web mobiles.

AMP vs Responsive Web Design (RWD)

La création de sites Web adaptés aux mobiles est une priorité pour les spécialistes du marketing depuis que Google a lancé Mobilegeddon au début de 2015. La conception Web réactive visant à aider à créer des pages Web axées sur la flexibilité. Une page Web réactive fonctionnait sur n'importe quel appareil ou écran, offrant une expérience Web mobile meilleure et plus engagée.

À la base, AMP et Responsive Web Design utilisent tous les deux presque les mêmes blocs de construction de base pour créer une page mobile, c'est-à-dire HTML et JavaScript. Cependant, ils ont leur ensemble de différences qui les distinguent, telles que:

1. RWD se concentre sur la flexibilité : la conception Web réactive ajoute de la flexibilité à votre site Web. Vous pouvez créer une page qui répond automatiquement à la taille d'écran d'un visiteur, ce qui permet à votre page d'avoir la portée et la capacité d'offrir aux utilisateurs une bonne expérience mobile sur une large gamme de tailles d'écran. La conception Web réactive n'est pas uniquement axée sur le mobile, mais fonctionne pour tous les appareils et toutes les expériences utilisateur.

2. AMP se concentre sur la vitesse : le framework open source AMP se concentre sur la vitesse, en particulier la vitesse des pages mobiles. AMP a introduit le rendu instantané pour le contenu Web mobile. En utilisant des feuilles de style en ligne, un chargement paresseux, des ressources de préchargement et d'autres techniques d'optimisation, le framework est capable de charger des pages mobiles instantanément.

3. AMP fonctionne avec une page Web, RWD remplace une page Web : bien qu'il soit possible d'utiliser AMP exclusivement sur vos pages, AMP peut également être ajouté à un site Web existant non réactif ou réactif, sans refonte du site Web. Cependant, pour rendre une page Web responsive, vous devez repenser la page.

4. AMP offre une meilleure expérience utilisateur : il y a deux facteurs principaux qui déterminent l'expérience utilisateur mobile, c'est-à-dire que les éléments de la page sont conviviaux et rapides. Bien que Responsive Web Design réussisse bien à mettre à l'échelle les éléments de la page pour qu'ils correspondent à l'écran de l'utilisateur, il échoue horriblement à la vitesse par rapport aux pages AMP.

5. AMP a des restrictions JavaScript : la conception Web réactive favorise tous les scripts et médiathèques tiers, il n'en va pas de même pour les pages AMP. Pour accélérer le chargement des pages, le framework AMP dispose de fonctionnalités JavaScript et CSS très limitées.

AMP fonctionne bien pour les pages statiques - les pages qui ne comportent pas beaucoup de contenu dynamique, tandis que RWD peut être utilisé pour tout type de page. Cependant, les pages Web réactives prennent un peu trop de temps à charger, ce qui fait que les visiteurs rebondissent, probablement pour ne plus jamais revenir. Si vous cherchez à offrir aux utilisateurs une expérience mobile rapide et réactive, vous devriez envisager d'utiliser des pages AMP.

AMP vs. Progressive Web Apps (PWA)

Progressive Web Apps est une application Web mobile fournie via le Web, elle se comporte comme une application native, la principale différence entre PWA et les applications natives est que PWA n'a pas besoin d'être téléchargé depuis Google ou App Store.

Les applications Web progressives fonctionnent à l'intérieur du navigateur Web, ce qui permet de le charger instantanément, même si votre connexion Internet n'est pas très puissante. PWA utilise la mise en cache préalable pour s'assurer que l'application reste à jour, afin que l'utilisateur ne puisse voir que la dernière version.

Le besoin d'applications Web progressives est né du fait que les 1 000 premiers sites Web mobiles touchent 4 fois plus de personnes que les 1 000 premières applications natives. Cependant, ces sites Web engagent les utilisateurs pendant 20 fois moins de minutes, en moyenne, que les applications mobiles.

Ce qui signifie essentiellement que les sites Web mobiles sont susceptibles d'attirer des visiteurs mais pas de les engager.

Les PWA sont conçues pour ressembler, ressentir et fonctionner comme le font les applications mobiles natives. Les utilisateurs les rencontrent dans un navigateur comme ils le feraient sur n'importe quel site Web mobile. Après avoir consulté ce site, l'utilisateur est invité à installer l'application Web sur son appareil. S'ils choisissent de l'installer, l'application se télécharge sur leur appareil de la même manière qu'une application native.

Les PWA sont :

• Fiable - Ils se chargent instantanément, même dans des conditions de réseau faibles.
• Rapide – Répondez rapidement aux interactions des utilisateurs avec des animations fluides et sans défilement saccadé.
• Engageant - Ils se sentent comme une application native sur l'appareil, offrant une expérience utilisateur immersive.

Lorsqu'une application Web mobile répond aux exigences requises définies par Google, l'application Web mobile peut être proposée en tant que téléchargeable aux utilisateurs.

Voici les principales différences entre AMP et PWA :

Vous pouvez choisir d'utiliser AMP uniquement pour créer une expérience rapide mais simple. Vous pouvez compter sur une application Web progressive pour créer une expérience utilisateur dynamique mais plus lente. Ou, vous pouvez commencer rapidement et rester rapide en incorporant les deux dans votre conception Web.

Aujourd'hui, les utilisations d'AMP avec des applications Web progressives sont de plus en plus répandues, les développeurs exploitant les deux de trois manières.

1. AMP en tant qu'application Web progressive

Si votre contenu est principalement statique et que vous pouvez vous contenter des fonctionnalités limitées d'AMP, cette option vous permet de créer des expériences ultra-rapides en tant qu'application Web progressive. AMP par exemple, est construit comme ceci - une application Web progressive entièrement chargée en AMP. Il dispose d'un service worker, qui permet un accès hors ligne, ainsi que d'un manifeste, qui affiche la bannière « Ajouter à l'écran d'accueil ».

2. AMP vers une application Web progressive

Une autre façon d'utiliser AMP et une application Web progressive consiste à considérer votre page AMP comme le point d'ancrage de votre site Web. Il attrape l'utilisateur avec une charge instantanée, puis l'enroule dans votre application Web progressive. Cela vous permet de combiner les pages AMP à chargement rapide avec une PWA plus dynamique que la première option.

3. AMP dans une application Web progressive

Comme c'était le cas avec AMP contre PWA, il n'est pas nécessaire que ce soit tout ou rien. Vous n'avez pas besoin de créer toutes vos pages avec AMP ; vous n'avez pas non plus besoin de séparer les AMP et les PWA en tant que crochet et tige. Désormais, vous ne pouvez AMP qu'une petite sous-section d'une seule page, réduisant ainsi sa taille et son temps de chargement sans le compromis complet des fonctionnalités dynamiques.

Cela implique l'utilisation d'une autre forme d'AMP appelée "Shadow AMP", qui permet à l'AMP de s'imbriquer dans une zone d'une page Web. Le résultat est AMP dans le shell d'une application Web progressive.

Le Washington Post présente un exemple idéal de PWA et AMP travaillant ensemble pour apporter un meilleur engagement et des temps de chargement plus rapides. Lorsque le Washington Post a initialement rendu son site Web réactif, sa vitesse était de 3 500 ms. Lorsqu'ils ont adopté AMP, le temps de chargement de la page a été réduit à 1200 ms, il a ensuite été réduit à 400 ms à l'aide de la technologie AMP CDN.

Après avoir adopté PWA pour réduire la charge du site Web, les utilisateurs ont pu profiter de vitesses de chargement de page ultra-rapides sans aucune interruption et d'une meilleure expérience utilisateur.

Le projet Accelerated Mobile Pages vous permet de créer des pages mobiles qui se chargent instantanément, aidant les visiteurs à mieux interagir avec la page au lieu de rebondir. Les techniques d'optimisation impliquées dans la création de pages AMP accélèrent non seulement le temps de chargement de la page, mais offrent également aux visiteurs une bonne expérience utilisateur.

La section suivante se concentrera sur les avantages exacts que vous obtenez lorsque vous utilisez le framework AMP sur vos pages.

SECTION 3 : Avantages et restrictions CHA

AMP garantit que les pages Web se chargent plus rapidement, ce qui améliore l'expérience utilisateur et permet aux visiteurs de rester plus longtemps sur la page. AMP utilise le HTML AMP qui aide les pages mobiles à se charger plus rapidement. En fait, selon Gary Illayes de Google, le temps de chargement médian des pages AMP est de 1 seconde, ce qui est 4 fois plus rapide que la page HTML standard moyenne.

Nous avons déjà discuté du lien entre le taux de rebond de la page et la vitesse de la page, et nous avons vu un compte rendu détaillé du fonctionnement de l'AMP et de sa comparaison avec PWA, RWD et les articles instantanés de Facebook.

Cette section du guide se concentrera sur les avantages et les restrictions d'AMP, vous aidant à obtenir un compte rendu détaillé de ce que vous réservez lorsque vous créez des pages AMP.

Avantages de l'AMP

Lorsque votre page Web mobile se charge plus rapidement, vous améliorez automatiquement l'expérience utilisateur et vos KPI. Grâce au chargement instantané des pages AMP, vous êtes en mesure d'offrir une expérience Web toujours rapide à vos utilisateurs sur tous les appareils et plateformes tels que Google, LinkedIn et Bing.

AMP offre les avantages suivants à vos pages mobiles.

Engage le public

Le temps de chargement médian des pages AMP est inférieur à une seconde, ce qui signifie que lorsqu'un utilisateur accède à une page AMP, il obtient instantanément ce qu'il recherche. Étant donné que la page se charge instantanément, ils interagissent plus longtemps avec la page et sont plus disposés à en savoir plus sur votre offre, ce qui la rend plus susceptible d'effectuer l'action que vous vouliez qu'ils prennent.

Maximise les revenus

Chaque seconde supplémentaire que prend votre page pour charger vos conversions chute de 12%. Cela signifie que si vous souhaitez engager le public et augmenter votre retour sur investissement, vous devez vous assurer que votre page mobile répond aux attentes de vitesse de vos visiteurs.

Le framework AMP vous permet d'offrir aux utilisateurs une expérience plus rapide partout, y compris les annonces, les pages de destination post-clic et les sites Web.

Maintenir la flexibilité et le contrôle

Lorsque vous adoptez le format AMP, vous avez la possibilité de conserver votre propre image de marque tout en tirant parti des composants Web optimisés pour les AMP. Vous pouvez utiliser CSS pour personnaliser le style de votre page Web et utiliser du contenu dynamique pour récupérer les données si nécessaire.

Vous pouvez également utiliser les tests A/B pour tester et créer la meilleure expérience utilisateur mobile possible pour vos clients.

Réduisez la complexité de vos opérations

Le processus de création de pages AMP est assez simple et direct. Vous avez la possibilité de convertir l'intégralité de votre archive, surtout si vous utilisez des CMS, y compris Drupal et WordPress.

Vous n'avez besoin d'aucune compétence particulière pour optimiser le code de chaque page AMP, le format AMP est entièrement portable et les pages AMP sont toujours rapides, quelle que soit la façon dont l'utilisateur y accède.

Maximisez votre ROI

Une fois créées, les pages AMP peuvent être distribuées simultanément sur une grande variété de plates-formes de distribution. Cela vous permet de diffuser vos annonces sur des pages AMP et non-AMP, ce qui signifie que vous pouvez créer vos annonces une seule fois et offrir une expérience de marque mémorable partout.

Créer un avenir durable

Le projet AMP est une initiative open source qui protège l'avenir du Web en aidant chacun à offrir une expérience utilisateur mobile meilleure et plus rapide. Vous pouvez rejoindre le projet AMP et construire un avenir durable pour votre entreprise sur un Web ouvert et plus rapide en rejoignant le projet AMP.

Offrir une meilleure expérience utilisateur

Bien sûr, l'avantage le plus évident de l'utilisation de pages de destination post-clic mobiles accélérées est qu'elles fourniront une satisfaction beaucoup plus élevée aux utilisateurs. Lorsqu'une personne sur deux ne se donne pas la peine d'attendre seulement 10 secondes pour qu'un site Web se charge, accélérer le processus de 15 à 85 % peut avoir un impact considérable sur le bonheur des visiteurs.

Obtenez un coup de pouce SEO

L'algorithme de Google prend en compte la vitesse de la page et la réactivité mobile. Plus votre page se charge rapidement sur mobile, plus elle sera classée haut sur les pages de résultats des moteurs de recherche.

Toutes les pages compatibles AMP apparaîtront dans un format carrousel, même au-dessus des annonces payantes dans les résultats de recherche, un éclair vert se trouve sous le titre.

Bien que l'utilisation des pages AMP vous offre de nombreux avantages, l'AMP présente également certains inconvénients.

Pas de JavaScript tiers

Étant donné que vous n'avez pas la possibilité d'utiliser du JavaScript tiers, vous devez dire adieu aux capacités d'analyse et de suivi qui vous permettent de proposer des expériences publicitaires très ciblées.

Non seulement cela, mais avec la version allégée de JavaScript de Google, les éléments de page qui nécessitent le transfert de données ne peuvent pas être utilisés sur les pages AMP.

Pas de suivi Google Analytics

Google utilise une version mise en cache des pages AMP pour les utilisateurs au lieu d'accéder à vos serveurs, c'est l'une des raisons pour lesquelles les pages AMP se chargent si rapidement. Bien que le cache permette à vos pages de se charger plus rapidement, Google Analytics ne suit pas les visites des utilisateurs, sauf si vous effectuez des configurations sur GA et appliquez des codes de suivi distincts à vos pages AMP.

Voici comment vous pouvez suivre les pages AMP dans Google Analytics avec Google Tag Manager.

Les pages AMP ont leurs avantages et leurs inconvénients, cependant, si vous cherchez à offrir à vos visiteurs une expérience mobile rapide et optimisée, les avantages AMP l'emportent certainement sur les inconvénients.

La section suivante mettra en évidence des études de cas d'entreprises qui ont utilisé AMP pour atteindre les KPI et augmenter le retour sur investissement.

SECTION 4 : Témoignages de réussite de la PGA

Lorsque nous parlons de pages Web mobiles, la vitesse équivaut à des revenus. Les recherches de SOASTA montrent que même un retard de 100 ms dans le temps de chargement de la page peut entraîner une baisse des conversions :

Pour mettre en évidence l'impact qu'AMP peut avoir sur les pages Web mobiles, Google a demandé à Forrester Consulting de mener une étude d'impact économique total sur les éditeurs et les sites Web de commerce électronique utilisant AMP.

La recherche met en évidence 4 sociétés Web qui utilisent le format AMP. En examinant les résultats des 4 entreprises, Forrester a créé un modèle pour prévoir le rendement attendu de la mise en œuvre de l'AMP sur une période de trois ans.

En utilisant ce modèle, un site Web avec un nombre de visites mensuelles de 4 millions et une marge bénéficiaire de 10 % pourrait s'attendre à récupérer les coûts d'implantation de pages AMP et commencer à constater des gains positifs sur une période de moins de 6 mois :

Voici les principaux résultats glanés de l'étude :

• Augmentation de 20% du taux de conversion des ventes. Les tests A/B menés par les deux sites de commerce électronique interrogés pour cette étude ont démontré une augmentation de 20 % du taux de conversion sur leurs pages AMP, ce qui générerait plus de 200 000 $ de profit annuel, selon le modèle Forrester.
• Augmentation de 10 % d'une année sur l'autre du trafic du site AMP. Une augmentation du trafic sur le site entraîne des ventes et des vues d'annonces supplémentaires, ce qui générerait plus de 75 000 $ de bénéfices annuels pour un site la première année, selon le modèle.
• Augmentation de 60% du nombre de pages par visite. Les pages AMP ont eu des résultats positifs pour les éditeurs de commerce électronique et d'actualités qui ont tous deux déclaré qu'il y avait une augmentation de 60 % du nombre de personnes venant sur le site et que ces personnes ont passé deux fois plus de temps sur le site avec une légère augmentation du nombre de visiteurs de retour de 0,3 %.

L'AMP est un format relativement nouveau et, de toute évidence, vous devez engager des frais pour son adoption. Cependant, les avantages de la mise en œuvre du format AMP l'emportent sur le coût initial.

Gizmodo utilise les pages AMP pour devenir 3 fois plus rapide sur mobile

Gizmodo se concentre sur l'expérience utilisateur, avec la moitié de son trafic provenant de son site Web mobile, s'assurer que le site Web est rapide et clair était essentiel s'ils voulaient que les lecteurs interagissent avec leur contenu sur mobile.

The blog implemented a number of optimization techniques in order to increase their mobile engagement, such as improving page load times, removing unnecessary page scripts, lazy loading for below the fold page elements, and setting a fallback font for web fonts. Still Gizmodo team thought something more could be done to improve user experience for mobile users.

Head of Gizmodo's Data Analytics, Josh Laurito felt this was their main challenge:

We delivered the same (large) JavaScript & CSS payloads to users on mobile and desktop, making it difficult to improve one experience without degrading the other.

Gizmodo found the solution to their problem by implementing the AMP framework in May 2016, and is currently publishing all their posts on AMP pages, they are even creating AMP versions of their previous posts.

Gizmodo has now published over 24,000 AMP pages and is receiving 100k visits to these pages daily:

AMP has helped make Gizmodo mobile pages 3x faster than the regular mobile website, and over 80% of Gizmodo's traffic from AMP pages is new traffic compared to under 50% of all mobile sessions. Plus, the blog has a 50% increase in impressions per page view on AMP.

TransUnion increases conversions with AMP

TransUnion had a problem of slow loading mobile pages that were causing higher bounce rates and lower mobile conversion rates compared to desktop conversion rates. The credit reporting agency wanted to create a best-in-class mobile website on their CMS, HP TeamSite to improve user experience and get the high return on investment.

TransUnion started using AMP with the hope of increasing mobile conversions at an efficient cost per order. As their website was already mobile friendly, TransUnion didn't need to redesign the content – they went online with AMP pages in a week.

The AMP pages loaded in 1.6 seconds on a 3G connection compared the non-AMP pages that loaded in 7.1 seconds. TransUnion's AMP pages quickly starting bringing 3% more conversions, bounce rate was lowered by 26% and users spent 2.5x more amount of time on the website:

Implementing AMP pages provides users with a faster mobile experience which leads to a decrease in bounce rates and an increase in conversions.

When engaging mobile visitors, creating AMP pages gives you the highest probability of engagement and conversions.

The next section will highlight the importance of AMP post-click landing pages, and how connecting optimized AMP ad post-click landing pages leads to better post-click landing page.

SECTION 5: Why you should create AMP post-click landing pages

The stats have spoken – fast loading pages lead to a lower bounce rate and higher conversions. The best way to create lightning-fast pages is with the AMP framework.

Though the AMP framework was first developed for news stories and articles, it has since then evolved to include AMP Ad post-click landing pages as well.

To ensure that mobile users experience doesn't stay restricted to websites, the AMP framework has introduced AMP Ad post-click landing pages – pages created in AMP HTML that load incredibly fast, in less than one second.

The Accelerated post-click landing page or (ALP) loads fast because of the following optimization techniques:

1. Pre-connect to post-click landing page: Typical ads don't know the URL of the actual post-click landing page. However, ads connected with ALPs always know the URL, this initiates a pre-connect request to the respective post-click landing page, and the page loads instantly.
2. Pre-fetch post-click landing pages: The non-CPU intensive resources that are visible on the first viewport of the post-click landing page are downloaded before the user clicks the ad, so the page loads instantly.
3. Using Google Cache URL: when you input a canonical destination URL for a creative, the ad server can switch it to the AMP version of the URL (with trafficker consent) using the AMP URL API. The ad server can also embed code required by the creative to pre-fetch and pre-connect to the post-click landing page. Ad servers like DoubleClick for Publishers (DFP) are integrating such features over the next couple of quarters to make trafficking of AMP post-click landing pages easy.
4. No redirects: AMP eliminates redirects to the ad server, AMP only initiates redirect requests once the user has landed on the post-click landing page. The format supports the amp-pixel component for third-party tracking redirects which can be performed on the post-click landing page.

Les pages de destination post-clic construites au format AMP sont conçues avec le cadre pour continuer l'expérience mobile rationalisée que les utilisateurs initient lorsqu'ils cliquent sur une annonce AMP mobile.

Here's how AMP Ad post-click landing pages compare to regular ad post-click landing pages:

This is how fast an ALP loads once the ad is clicked, not only that but the user can easily go back to the content they were reading before the clicked the ad:

Accelerated post-click landing pages give a better post-click landing page to visitors because:

• Users will be more willing to click on ads when they know their ad expectations will be met.
• Marketers will benefit from increased user engagement, lower bounce rate and higher conversions.
• Marketers will benefit from boosted revenue with better ads while allowing their readers a way back to their content.

Creating ALPs seems like a no-brainer when you consider the fact that Google looks at post-click landing page experience as one factor to determine ad rank, which ultimately contributes to your click-through rate.

And while publishers have embraced frameworks like AMP to speed up web content delivery on mobile devices, the marketing industry has not yet caught up. As more consumers and B2B buyers spend more time on mobile, marketers and advertisers are forced to adapt with mobile-optimized campaigns.

Businesses that are using AMP pages are already seeing massive ROI, so what's holding you back from creating Accelerated post-click landing pages?

How to create AMP pages with Instapage

In February 2018 we announced our partnership with Google to develop Accelerated Mobile Pages (AMP) functionality in the Instapage platform. They invited us to speak at their global AMP Conference where we discussed How to Balance AMP Limitations with Optimization Features.

Fast forward to May 2018 and Instapage now empowers marketers with the ability to create post-click landing pages using the AMP framework. The AMP framework allows for faster page load speeds on mobile devices, enabling you to provide a better user experience for mobile browsing.

With this new Instapage capability, digital marketers can create AMP post-click landing pages directly from our platform in a matter of minutes just by following these steps.

Step 1: Create a new page

Select AMP Page from the modal:

The next screen prompts you to name the page. This is different than the standard builder where it asks which template you wish to use (or build from scratch). AMP pages are built from scratch, so no template options are available.

Step 2: Add elements to the page

The second difference you will see is that Timer and HTML widgets are absent from the toolbar, but you still have the remaining widgets:

AMP does not support HTML/CSS or JavaScript so you won't find those settings in the Instapage AMP builder. You will, however, still see these options:

Note: Collaboration (“Comment”) and Instablocks™ are both functional within the AMP builder. Unfortunately, heatmaps and Global Blocks are not applicable.

AMP post-click landing pages have a 75KB limit, and each widget in the Instapage AMP builder is weighted. As you build a page, a validator operates in the background so that your page doesn't exceed the 75KB limit. If you reach 80% of the limit, this warning indicator appears near the bottom of the screen:

Step 3: Create a variation to A/B test

Click “Create an A/B Test” and add a new variation or import one of your own:

With the new variation, you can either duplicate, pause, rename, transfer, or delete it at any time:

Step 4: Validate the page

As you continue building and approach the 75KB limit, another indicator appears requesting you validate the page to confirm it is within acceptable limits:

Should the page pass validation, you will see this on-screen message:

Après avoir terminé et cliqué sur Publier, vous serez averti si vous dépassez la limite de 75 Ko :

Une fois validée, votre page est prête à être publiée.

Étape 5 : Publier

WordPress et les domaines personnalisés peuvent publier des pages de destination post-clic AMP dans Instapage. Vous pouvez sélectionner l'une ou l'autre méthode après avoir cliqué sur le bouton bleu de publication :

Pour WordPress, installez et connectez-vous au plugin Instapage sur votre site Web et publiez votre nouvelle page de destination post-clic AMP sur WordPress :

Sinon, saisissez votre domaine et sous-domaine :

Dès que la page est en ligne, vous verrez le logo AMP à côté de la page dans le tableau de bord :

Si vos pages mobiles connaissent des taux de rebond élevés et un faible engagement des visiteurs en raison de la lenteur de la vitesse de chargement des pages, la création de pages AMP est une excellente solution.

Le framework AMP déploie des techniques d'optimisation qui contribuent non seulement à la vitesse des pages, mais offrent aux utilisateurs une expérience mobile agréable. La création de pages de destination post-clic pour les annonces AMP vous aide à fournir à vos visiteurs des pages de destination post-clic optimisées, rapides et pertinentes.

Instapage est actuellement la seule plate-forme de page de destination post-clic qui vous permet de créer des pages de destination post-clic optimisées pour les mobiles à l'aide du framework AMP de Google. Les pages de destination post-clic créées avec AMP ont un chargement quasi instantané et un défilement fluide.

Commencez dès aujourd'hui à créer des pages AMP avec Instapage pour créer une meilleure expérience de navigation mobile, améliorer vos scores de qualité et générer plus de conversions.