Deux secondes c'est tout ce que tu as avant que vos lecteurs ne commencent à rebondir si votre page Web ne se charge pas.

Cela semble irréaliste? Très bien, donnez-lui trois secondes, mais maintenant vous jouez—environ 40 % des utilisateurs quitteront, puis ça ne fait que descendre à partir de là.

L'abandon de page est un incident terrible pour les éditeurs : Cela augmente le taux de rebond, diminue les revenus publicitaires et jette généralement une serviette mouillée sur tout leur travail acharné.

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 dit, "Les pages mobiles accélérées se chargent quatre fois plus vite et utilisent huit fois moins de données que les pages traditionnelles optimisées pour les mobiles."

Hé, pourquoi ne pas essayer par vous-même ? Ouvrez simplement Google sur votre appareil mobile et saisissez tout ce qui fait l'actualité en ce moment. Par exemple, tapons "Cardi B", eh bien, parce qu'elle est cool et fait toujours l'actualité.

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 la différence instantanément lorsque vous ouvrirez un article AMP- il n'y a pas de décalage, pas d'attente pour le chargement d'éléments individuels, pas de mouvements saccadés sur la page - l'intégralité du contenu de la page est diffusée en un seul mouvement fluide et semble bien loin des pages Web habituelles sur le Web mobile.

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 les codes JS inutiles (seul le JS asynchrone est autorisé) pour accélérer le chargement. Alors que JS personnalisé est autorisé dans ampli-script, et JS tiers est autorisé dans iframes, il ne peut pas bloquer le rendu.

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 requis au fur et à mesure que les utilisateurs apparaissent sur cette partie de la page. Cela signifie qu'il utilise technologie de chargement paresseux pour télécharger et charger des ressources qui sont dans la fenêtre ou sur le point d'être dans la fenêtre pendant que les utilisateurs font 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 : Le nom parle de lui-même, AMP est principalement conçu pour réduire la vitesse de chargement des appareils mobiles et il fait de même à juste titre en réduisant le temps de chargement à 2-3 secondes.

Taux de rebond faibles : Une page lente est la principale raison de les utilisateurs à rebondir. Compte tenu d'une forte diminution du temps de chargement, les éditeurs devraient connaître un faible taux de rebond.

Meilleur référencement : Déjà indiqué que le temps de chargement est un facteur de classement pour la plupart des moteurs de recherche et avec la vitesse de chargement réduite des pages, vous devriez voir une amélioration du classement de vos pages. N'oubliez pas que les pages AMP augmentent également les chances d'être présentées sur le carrousel Google et d'autres fonctionnalités SERP.

Augmentation du trafic Web : Avec un meilleur référencement, vous devriez vous attendre à un meilleur trafic sur le site. Étant donné que AMP peut améliorer votre référencement et qu'une faible vitesse de chargement vous aiderait à réduire le taux de rebond si votre contenu est également exceptionnel, vous pouvez obtenir de bons numéros de session des utilisateurs apparaissant sur le site.

Pris en charge par tous les navigateurs : Étant donné que AMP supprime tous les JS et CSS inutiles, les navigateurs obtiennent un code HTML propre à interpréter et à afficher à l'écran.

Consommation de données optimisée : La suppression des JS et CSS inutiles signifie également que les pages utiliseront moins de ressources de navigateur et de calcul. Par exemple, AMP réduit la taille de l'image à la bonne taille pour que le navigateur se charge rapidement, cela signifie également que le navigateur téléchargera une taille de fichier réduite - une nette réduction de l'utilisation des 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).

Vous devez être familiarisé avec le balisage pour pouvoir configurer une page AMP. Nous vous recommandons de prendre un peu de temps et de parcourir les tutoriel AMP officiel et guides associés une fois - si vous n'avez jamais travaillé avec HTML auparavant - c'est là que vous embauchez un développeur OU demandez à votre ami ou collègue féru de technologie de vous aider un peu à comprendre comment cela fonctionne.

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.

Au cas où vous seriez publié sur WordPress, vous avez de la chance. Vous pouvez utiliser Plugin WordPress pour AMP qui convertit dynamiquement toutes vos pages de publication en versions compatibles AMP. Ceci est extrêmement utile car cela vous évite toutes les démarches. Tout ce que vous avez à faire est d'activer le plugin une fois et tous vos messages sont instantanément AMP-ifiés.

C'est une grande question pour les éditeurs. Vous seriez heureux de savoir que AMP prend effectivement en charge la publicité; au moins pour Google, c'est un peu le but de cet exercice de toute façon.

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, AMP Project a publié deux mises à jour qui permettent aux éditeurs de créer des contrôles utilisateur et de gérer les choix via un nouveau composant AMP appelé .

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 la montée de publicité vidéo, AMP a proposé la solution pour diffuser des publicités vidéo sur les pages AMP.

AMP permet à la fois le streaming et annonces vidéo outstream. Les annonces vidéo InStream peuvent être rendues à l'aide de extension. Il possède toutes les fonctionnalités de base, y compris la lecture automatique, l'ancrage sur un défilement et l'analyse.

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 vous pouvez 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 une enchère d'en-tête. En fait, il y a deux manières 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 analyses 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.