Si votre page web ne se charge pas , vous n'avez que deux secondes avant que vos lecteurs ne quittent votre site.

Cela vous paraît irréaliste ? Bon, attendez trois secondes, mais là vous prenez un risque : environ 40 % des utilisateurs vont quitter la plateforme , et ensuite, ce ne sera qu'une question de temps.

L’abandon de page est un véritable fléau pour les éditeurs : il augmente le taux de rebond, diminue les revenus publicitaires et, de manière générale, anéantit tous leurs efforts.

Le géant de la technologie publicitaire Google a décidé de remédier à cette situation en lançant AMP.

Qu'est-ce que cela signifie pour vous? Comment pouvez-vous l'implémenter sur votre site Web? Et plus important encore, devriez-vous? Lisez la suite pour le découvrir dans notre guide sur Google AMP.

AMP est un projet open source basé sur AMP HTML, un cadre ouvert construit à partir de technologies Web existantes, qui permet aux sites Web de créer des pages Web légères.

L'objectif principal du projet est d'accélérer la diffusion de contenu sur tous les appareils mobiles en supprimant tout ce qui n'est pas essentiel.

Aujourd'hui, après des discussions avec des éditeurs et des entreprises technologiques du monde entier, nous annonçons une nouvelle initiative open source appelée Accelerated Mobile Pages, qui vise à améliorer considérablement les performances du Web mobile. Nous voulons que les pages Web avec un contenu riche comme la vidéo, les animations et les graphiques fonctionnent avec les publicités intelligentes et se chargent instantanément. Nous souhaitons également que le même code fonctionne sur plusieurs plates-formes et appareils afin que le contenu puisse apparaître partout en un instant, quel que soit le type de téléphone, de tablette ou d'appareil mobile que vous utilisez.

Blog officiel de Google

Le trafic mobile dépassant désormais celui des ordinateurs de bureau, les éditeurs, les annonceurs et les développeurs ne peuvent plus se permettre de détourner le regard pendant que les utilisateurs rebondissent d'une page à l'autre par frustration. En ce qui concerne Google, la vitesse compte bien plus que les fonctionnalités.

Certaines grandes publications d'actualités telles que Time, The Atlantic, Vox, BBC et The Huffington Post et plusieurs sociétés technologiques comme WordPress, Twitter, Adobe Analytics, Chartbeat, LinkedIn et Pinterest ont déjà rejoint AMP.

Le principal argument de vente de Google AMP est peut-être qu'il est open-source, et donc tout éditeur peut s'inscrire et commencer à l'utiliser, contrairement à d'autres projets plus étroitement contrôlés tels que les articles instantanés de Facebook et Apple News.

Oui, tout à fait

Jon Parise de Pinterest affirme : « Les pages mobiles accélérées se chargent quatre fois plus vite et utilisent huit fois moins de données que les pages optimisées pour mobile traditionnelles. »

Hé, pourquoi ne pas essayer toi-même ? Ouvre Google sur ton téléphone et tape n'importe quel sujet d'actualité. Par exemple, tapons « Cardi B », parce qu'elle est cool et qu'elle fait toujours parler d'elle.

Juste au-dessus des résultats de la recherche, vous verrez une pile de cartes à défilement horizontal étiquetées "AMP". Cliquer sur une carte chargera cet article.

Vous remarquerez instantanément la différence en ouvrant un article AMP : pas de décalage, pas d’attente pour le chargement des éléments individuels, pas de mouvements saccadés sur la page ; tout le contenu de la page est affiché en un seul mouvement fluide et semble bien loin des pages Web classiques sur le Web mobile.

L'article de Copyblogger sur AMP explique cela en chiffres :

La version AMP a atteint "domContentLoaded - un point clé dans le chargement d'une page Web où le HTML est entièrement téléchargé et certaines analyses importantes ont été effectuées" en 0.857 seconde.

Un clin d'œil dure environ 0.33 seconde.

En d'autres termes, clignez des yeux deux fois et vous, notre navetteur de métro, pourrez commencer à lire la partie utile du contenu presque instantanément, grâce à AMP.

C'est la vitesse.

À quand remonte la dernière fois qu'une page s'est chargée sur votre mobile avant même que vous ne cligniez des yeux deux fois ?

Alors que JavaScript est la baguette magique que la plupart des développeurs front-end ont pour faire n'importe quoi avec leurs pages Web, il peut également ralentir le rendu d'une page.

Avec AMP, les pages web bloquent le code JavaScript inutile (seul le JavaScript asynchrone est autorisé) afin d'accélérer le chargement. Bien que le JavaScript personnalisé soit autorisé dans amp-script et le JavaScript tiers dans les iframes , il ne peut pas bloquer l'affichage.

Toutes les ressources sont dimensionnées statiquement

AMP prend la taille de toutes les ressources - telles que les images, les publicités et les iframes - pour les positionner avant le téléchargement. Cela commence par charger la mise en page sans attendre le téléchargement des ressources.

Ne permet pas aux extensions de ralentir le téléchargement

AMP prend en charge les extensions telles que les lightboxes, les intégrations, les tweets, etc. Celles-ci nécessitent des requêtes HTTP supplémentaires, mais ne bloquent pas le chargement de la page. Les pages utilisant des scripts personnalisés doivent indiquer au système AMP qu'il y aura une balise amp-iframe, exemple :

<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>

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

CSS bloque tout rendu et a tendance à être gonflé. Dans les pages AMP HTML, seuls les styles intégrés sont autorisés. Cela supprime un grand nombre de requêtes HTTP du chemin de rendu critique par rapport à la plupart des pages Web.

De plus, la feuille de style en ligne a une taille maximale de 50 kilo-octets. Bien que cette taille soit suffisamment grande pour des pages très sophistiquées, elle nécessite toujours que l'auteur de la page pratique une bonne hygiène CSS.

Prioriser le chargement des images en conséquence

AMP se concentre sur les éléments nécessaires au moment où l'utilisateur accède à une partie spécifique de la page. Autrement dit, il utilise la technologie de chargement différé pour télécharger et charger les ressources présentes ou sur le point d'être visibles pendant que l'utilisateur fait défiler la page.

La recherche Google est le plus grand moteur de recherche et AMP est conçu par Google, donc les utiliser ensemble aidera certainement avec les classements de recherche, n'est-ce pas ?

FAUX!

AMP n'est pas un facteur de classement pour un moteur de recherche - y compris Google - pour classer une page. C'est la raison pour laquelle de nombreuses pages non AMP peuvent apparaître au-dessus des pages AMP sur les appareils mobiles.

Bien que l'AMP lui-même ne soit pas un facteur de classement, la vitesse est un facteur de classement pour la recherche Google. La recherche Google applique la même norme à toutes les pages, quelle que soit la technologie utilisée pour créer la page.

En dehors de cela, l'activation de l'AMP peut permettre à votre page Web de figurer sur la recherche mobile dans le cadre de résultats riches et de carrousels. Ceux-ci peuvent être :

Temps de chargement réduit : comme son nom l’indique, AMP est principalement conçu pour réduire la vitesse de chargement sur les appareils mobiles, et il y parvient parfaitement en ramenant le temps de chargement à seulement 2 ou 3 secondes.

Faibles taux de rebond : la lenteur des pages est la principale cause d’abandon . Grâce à une réduction significative du temps de chargement, les éditeurs devraient constater un faible taux de rebond.

Un meilleur référencement : comme mentionné précédemment, le temps de chargement est un facteur de classement pour la plupart des moteurs de recherche. En réduisant la vitesse de chargement des pages, vous devriez constater une amélioration de leur positionnement. De plus, les pages AMP augmentent les chances d'apparaître dans le carrousel Google et d'autres fonctionnalités des SERP.

Augmentation du trafic web : Un meilleur référencement (SEO) devrait générer un trafic accru sur votre site. L’utilisation d’AMP peut améliorer votre SEO, et un temps de chargement rapide contribue à réduire le taux de rebond. Si votre contenu est exceptionnel, vous pouvez ainsi obtenir un bon nombre de sessions utilisateur.

Compatible avec tous les navigateurs : comme AMP supprime tous les fichiers JS et CSS inutiles, les navigateurs reçoivent un code HTML propre à interpréter et à afficher à l’écran.

Consommation de données optimisée : la suppression des fichiers JS et CSS inutiles permet également aux pages d’utiliser moins de ressources du navigateur et de l’ordinateur. Par exemple, AMP réduit la taille des images pour un chargement rapide, ce qui diminue la taille des fichiers téléchargés et, par conséquent, la consommation de données.

Je suis sûr que tout cela semble trop beau pour être vrai jusqu'à présent, alors quel est le compromis ? Qu'est-ce que tous ces trucs supplémentaires qui sont "supprimés" pour accélérer le chargement de la page de toute façon ?

Eh bien, voici ce que AMP supprime : les plugins de médias sociaux, les fenêtres contextuelles, les carrousels d'images, les vidéos, les logiciels d'analyse, les scripts de suivi et bien d'autres choses qui sont demandées en arrière-plan lors du chargement d'une page.

Il ne prend pas non plus en charge Javascript tiers. C'est le secret de sa rapidité. Alors évidemment, l'implémenter pour votre contenu signifie perdre les fonctionnalités liées aux éléments mentionnés ci-dessus.

Certains disent que AMP ne fonctionne bien que pour les grands éditeurs qui ont déjà un public prêt. Les petits éditeurs ne pourront pas effectuer des opérations de base telles que la collecte d'e-mails, car les formulaires peuvent ne pas être pris en charge par AMP. De telles préoccupations peuvent très bien s'avérer être un facteur décisif pour certains éditeurs.

Cependant, ces préoccupations peuvent être prises en compte dans une certaine mesure si vous travaillez avec un développeur qui maîtrise AMP. Pour la monétisation AMP, nous vous conseillons de penser à un partenaire spécialisé dans la tech (comme AdPushup).

Pour créer une page AMP, vous devez maîtriser le balisage HTML. Nous vous recommandons de consulter le tutoriel officiel AMP et les guides associés. Si vous n'avez jamais utilisé HTML, vous pouvez faire appel à un développeur ou demander de l'aide à un ami ou collègue féru d'informatique pour comprendre le fonctionnement.

Avec un peu d'effort, vous pourrez :

1. Créez une page AMP à l'aide du code passe-partout.
2. Mettez-le en scène.
3. Assurez la conformité AMP en utilisant le validateur de Google.
4. Publier et diffuser.

Si votre site est publié sur WordPress, vous avez de la chance ! Vous pouvez utiliser une extension WordPress pour AMP qui convertit automatiquement toutes vos pages d'articles en versions compatibles AMP. C'est extrêmement pratique car cela vous épargne tout le travail manuel. Il vous suffit d'activer l'extension une seule fois et tous vos articles sont instantanément compatibles AMP.

C'est une question cruciale pour les éditeurs. Bonne nouvelle : AMP prend bien en charge la publicité ; du moins pour Google, c'est un peu le but recherché.

Les publicités permettent de financer des services et du contenu gratuits sur le Web. Avec Accelerated Mobile Pages, nous souhaitons prendre en charge une gamme complète de formats publicitaires, de réseaux publicitaires et de technologies. Tous les sites utilisant AMP HTML conserveront leur choix de réseaux publicitaires, ainsi que tous les formats qui ne nuisent pas à l'expérience utilisateur. C'est également un objectif central du projet de prendre en charge les abonnements et les paywalls. Nous travaillerons avec les éditeurs et les acteurs du secteur pour aider à définir les paramètres d'une expérience publicitaire qui offre toujours la vitesse que nous recherchons avec AMP.

Blog officiel de Google

En fait, non seulement AdSense prend en charge AMP, mais les réseaux publicitaires suivants sont également pris en charge : Criteo, OpenX, Smart Ad Server, TripleLift, Teads, etc.

Les éditeurs devraient constater une amélioration des performances publicitaires et, par conséquent, des revenus publicitaires, car les quelque 40 % d'utilisateurs qui rebondissaient auparavant sur la page resteront maintenant pour voir les publicités.

Voici comment AMP a évolué pour aider les éditeurs Web à atteindre leurs objectifs de revenus publicitaires :

Annonces AMP HTML pour toutes les pages

Les annonces AMP HTML sont plus rapides, plus légères et plus sécurisées que les annonces standards. Ils sont construits à l'aide d'AMP-HTML et utilisent de nombreux composants intelligents qui rendent les pages AMP rapides.

Les annonces AMP HTML sont conçues pour fonctionner à la fois sur les pages Web AMP et non AMP, sur n'importe quel appareil, dans une variété de formats standards et créatifs (tels que carrousel, parallaxe, lightbox).

Élément de consentement intégré

En avril et début mai 2018, le projet AMP a publié deux mises à jour permettant aux éditeurs de créer des contrôles utilisateur et de gérer les choix via un nouveau composant AMP appelé <amp-consent>.

Cela permet aux éditeurs de capturer la décision de consentement de l'utilisateur et rend le paramètre de l'utilisateur disponible pour les éléments de la page AMP afin de modifier le comportement de la page.

De plus, les éléments peuvent être personnalisés davantage par les fournisseurs pour avoir des comportements plus sophistiqués qui dépendent des paramètres de l'utilisateur.

Prise en charge de DFP/AdX et AdSense les éditeurs peuvent choisir de diffuser des annonces non personnalisées aux utilisateurs, ou ils peuvent choisir de diffuser des annonces de manière sélective en fonction du consentement.

Annonces vidéo sur les pages AMP

Les vidéos sont connues pour prendre un certain temps à se charger sur le navigateur, grâce à la taille importante du fichier. L'utilisation d'annonces vidéo avec AMP semblait impossible au début.

Cependant, avec l'essor de la publicité vidéo , AMP a mis au point une solution permettant de diffuser des publicités vidéo sur les pages AMP.

AMP prend en charge les publicités vidéo in-stream et outstream . Les publicités vidéo in-stream peuvent être affichées à l'aide de l'extension <amp-ima-video>. Celle-ci intègre toutes les fonctionnalités de base, notamment la lecture automatique, l'ancrage au défilement et les analyses.

AMP est rapide. C'est la meilleure chose qui soit arrivée aux sites mobiles de l'éditeur. Cependant, si vous gérez votre inventaire AMP de la même manière que vous gérez le reste de votre inventaire, les résultats peuvent être décevants. 

Compte tenu du score de visibilité élevé des pages AMP, les eCPM sont susceptibles d'augmenter. Mais ces avantages sont dilués sous les carences technologiques des éditeurs.

D'autre part, si vous traitez AMP comme un inventaire premium, vous devez comprendre qu'il ne fonctionne que pour les appareils mobiles. Cela signifie que vous devez trouver des annonceurs qui recherchent spécifiquement l'inventaire mobile AMP.

Voici comment tirer le meilleur parti de votre inventaire AMP :

Vente aux enchères d'inventaire AMP via Enchère d'en-tête

Oui, vous avez bien lu : l’inventaire AMP peut être vendu via le header bidding . En fait, il existe deux façons de procéder :

• Configuration en temps réel (RTC) : RTC est une fonctionnalité AMP native, il y a moins de risques d'erreurs et donc peu ou pas de débogage impliqué. Il a aussi quelques inconvénients. L'éditeur ne peut pas avoir plus de 5 partenaires demandeurs, et bien que le délai d'attente puisse être configuré pour être inférieur à 1 seconde, il ne peut pas le dépasser. En outre, il manque les personnalisations offertes par les enchères d'en-tête traditionnelles.
• Enchères d'en-tête basées sur wrapper : En utilisant la configuration des enchères d'en-tête côté serveur, vous pouvez également vendre l'inventaire AMP. Les enchères d'en-tête basées sur un wrapper contournent la limite des 5 partenaires de demande en acheminant les offres via un seul emplacement RTC. Cela signifie que vous pouvez ajouter autant de partenaires de demande que vous le souhaitez. Les wrappers fourniront également aux éditeurs des données de rapport et d'analyse, ce pour quoi RTC n'a actuellement aucun support.

Activer votre élément de campagne Google Ad Manager avec les annonces AMP

Les éditeurs Google Ad Manager peuvent simplement activer la fonctionnalité d'annonce AMP HTML pour rendre leurs annonces compatibles AMP. Vous pouvez mettre à jour vos tags d'emplacement publicitaire existants ou en créer de nouveaux pour signaler aux acheteurs (réseaux) qu'il s'agit d'un inventaire AMP.

Impliquer un partenaire tiers pour la demande AMP

Lorsque vous ajoutez différents canaux pour vendre un inventaire AMP, vous aurez besoin de plus de demande pour chaque canal. Faire appel à un partenaire tiers pour gérer les partenariats de demande peut vous permettre de vous concentrer sur d'autres aspects importants de votre activité d'édition.

AMP comprend un élément qui permet de mesurer les interactions des utilisateurs, et il a un support intégré pour Google Analytics.

Pour l'utiliser avec Google Analytics, vous pouvez copier ce code et le remplacer avec l'ID de propriété que vous souhaitez utiliser :

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<GA_MEASUREMENT_ID>",
    "config" : {
      "<GA_MEASUREMENT_ID>": { "groups": "default" }
    }
  }
}
</script>
</amp-analytics>

AMP vous demande de divulguer comment vous collectez des données pour utiliser la fonctionnalité. Voici les points de données que vous pouvez collecter :

• Données de la page : domaine, chemin, titre de la page
• Données utilisateur : ID client, fuseau horaire
• Données de navigation : référent, identifiant unique de page vue
• Données du navigateur : hauteur de l'écran, largeur de l'écran, agent utilisateur
• Données d'interaction : hauteur et largeur de page

Voici le guide complet pour ajouter des outils d'analyse aux pages AMP.

AMP est puissant - rend votre site vraiment adapté aux mobiles.

Avec de nouvelles avancées, telles que les annonces AMP, la configuration en temps réel et les fonctionnalités permettant d'obtenir le consentement de l'utilisateur, assurez-vous qu'il a un avenir dans le secteur de l'édition numérique. De même, le taux d'adoption s'accélère, en particulier dans la communauté des médias.

Utilisez-vous AMP pour votre site ? Comment se présentent vos revenus publicitaires ? Pas si bon? Laissez-nous vous aider – réservez une consultation gratuite de 30 minutes.