L'AMP pour les sites e-commerce - 22 février - Lille

Accelerated Mobile Pages
(Pages AMP)
et ecommerce
14 / 12 / 2017

Programme de la conférence
45mn : 30 mn de presentation – 15 mn de questions
2
Présentation de
l’agence
Les Pages AMP qu’est ce
que c’est ?
Quel est l’intérêt
des pages AMP ?
Comment ça marche ?
L’adoption
Quel avenir pour les
pages AMP
#S4sight2017 @s4sight
Vos questions

Agence conseil en stratégie digitale | SEO • SEM • CRO • Inbound Marketing • Analytics
Les pages AMP
qu’est-ce que c’est ?
3

Le contexte : des pages mobiles trop lentes
Le poids des pages mobiles ne cesse d’augmenter
La faute :
A des pages RWD mal conçues
A des pages mobiles conçues avec des frameworks et des standards conçus… pour le desktop

Et pour les sites éditoriaux, c’est pire
Le problème :
Les scripts de tracking
Les mouchards publicitaires
Les gestionnaires de bannières
La monétisation implique l’emploi
de scripts javascripts nombreux,
lourds et lents
Par ailleurs, ces sites présentent :
Pages avec beaucoup de contenus
Des images et des videos
5

Une lenteur qui fait fuir les internautes
A partir d’un load time de
2 sec, on perd un
internaute sur deux
Bref, le web mobile est
partiellement inutilisable,
car le chargement des
pages est trop lent !
Et ce n’est pas qu’un
problème de bande
passante, de 3G vs 4G
6

Une réponse à Facebook Instant Articles
Facebook a lancé en mai-juin 2015 un
nouveau format de pages pour accélérer
l’affichage de pages de contenu en usage
mobile
C’est un projet « fermé » : il s’agit de pages
qui ne peuvent s’afficher que dans
l’écosystème Facebook
La monétisation est contrôlée par Facebook,
qui prend 30% de taux de régie pour les
pubs vendues par sa régie

Une initiative open source très téléguidée…
Accelerated Mobile Pages : une initiative
Open Source pour
• Promouvoir un standard pour construire des pages allégées,
optimisées pour le mobile
• Mettre à disposition un CDN dédié pour accélérer encore l’accès
à ces contenus
• Et proposer une diffusion large de ces contenus par des acteurs
majeurs du web
Un projet initié par Google et Twitter,
présenté officiellement le 8 octobre 2015
AMP est d’ores et déjà implémenté par un
groupe d’acteurs majeurs

Pour en savoir plus :
http://www.ampproject.org
9

Les pages AMP :
comment ça marche ?
10

Les principes
Gains de
perfomance
X10
Code
allégé
Mise en cache
Pré rendition /
préchargement
chez Google

Un code sérieusement allégé
12
Une page AMP contient 5 fois moins de trackers en
moyenne qu’une page « normale », et un code 6 foix
plus léger.
Comment ?
Des balises HTML « lourdes » interdites
Une librairie javascript « couteau suisse » unique et
allégée

A quoi ressemble ce code ?
AMP c’est du HTML5
Mais un « sous ensemble » du HTML5
A droite : le code d’une page AMP ultra
simple
13

Les prérequis techniques
Les documents codés en AMP HTML doivent :
Débuter par la balise doctype <!doctype html>.
Contenir une balise top-level <html ⚡> (<html amp> est également valide).
Contenir forcément au moins une balise <head> et <body> (C’est optionnel en HTML classique).
Contenir une balise <link rel="canonical" href="$SOME_URL" /> dans la zone head qui pointe vers la
page HTML classique équivalente, ou vers la même page s’il n’existe pas de version normale.
Contenir une balise <meta charset="utf-8"> dans la zone head.
Contenir une balise <meta name="viewport" content="width=device-width,minimum-scale=1"> dans
la zone head. Il est recommandé d’inclure la valeur d’attribute “initial-scale=1”.
Contenir une balise <script async src="https://cdn.ampproject.org/v0.js"></script> en tant que dernier
élément de la zone head.
Contenir <style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript> dans
la zone head.
14

Un CDN dédié
Un CDN (content delivery network) est un
ensemble de serveurs :
• Conservant une version « en cache » de la page
• Et répartis partout dans le monde, près des utilisateurs
Google fournit le CDN dédié aux pages AMP
Remarque : la mise en cache systématique
rend la création de pages AMP entièrement
dynamiques « server side » impossible
Par contre, on peut créer des pages partiellement
dynamiques
15

SEO : attention aux doublons
La page AMP est un doublon quasi parfait du
contenu de la page « normale »
Il faut donc « canonicaliser » la page AMP
Lien link rel=canonical pointant vers le contenu
d’origine
Au départ, Google recommandait de pointer vers
la version desktop
Avec le mobile first index : la recommandation
reste la même !
Pourquoi ? Pour les autres moteurs !
16

Peut-on faire des pages AMP sa version mobile ?
Si vous déclarez l’AMP comme votre version
mobile via les rel=alternate, alors les pages
AMP seront votre version mobile
Sinon : vous n’avez pas de version mobile !
Pour le mobile first index, si vous n’avez pas de
version mobile déclarée, c’est la version desktop
qui sera indexée, pas la version AMP !
Tout à fait, mais attention aux balises rel=alternate
17

Tester ses pages AMP
Dans les pages de google
18

https://search.google.com/test/amp
Dans l’outil de test
19

https://validator.ampproject.org/
Dans l’outil de validation
20

Le rapport de la search console
Il y’a aussi un rapport d’améliorations dans la nouvelle Search Console
21

Les pages AMP :
Pourquoi les utiliser

Adopter l’AMP : parce que c’est plus rapide
Test fait en 2016 sur les pages
responsive du Guardian, comparé avec
la version AMP
Le score Google pagespeed passe de
57% à 94% !
L’amélioration de l’UX est réelle et spectaculaire

C’est VRAIMENT plus rapide
Source : Rannaa Zhou de Google, SMX West 2017
24

Et l’impact, c’est plus de conversions
25

VRAIMENT plus de conversions
Etude Wompmobile 2017
26

Et parce qu’il y’a un ranking boost !
Et donc un traffic boost parfois
27
Sur mobile, les carrousels AMP pour les news sont placés en
tête des résultats (position zéro)
Pour être présent dans ce carrousel, il n’est pas nécessaire d’être
indexé dans google news, il faut juste le balisage schema.org ad hoc et
des pages AMP
Evidemment, cela met en valeur les pages AMP vs les pages
« normales »
Le gain maximal est atteint si on est dans la première case du
carrousel

Indirectement, il y’a parfois un ranking boost
Deux exemples
Impact avec des cas de sites mobiles
AMP
Cause : probablement le speed boost
Un code plus SEO friendly ?
Mais avoir des pages AMP n’est pas un ranking factor
28

Il y’a aussi le « label » AMP sur les résultats
Question : quelle est la proportion
d’utilisateurs qui ont compris que les
résultats avec ce label s’affichaient plus vite
Pas d’étude sérieuse, mais ils sont visiblement
minoritaires
Notons que l’affichage du label n’est pas
stable, il y’a eu beaucoup de test and learn
depuis fin 2015
Test label bleu « instant »
en oct 2017
29

Et c’est vrai à l’international
Les carrousels AMP envahissent les versions internationales de google
30

De plus en plus de diffuseurs exploitent l’amp
Les principales plateformes qui exploitent l’AMP en dehors de Google :
Pinterest, LinkedIn, et Twitter
31

Quels sont les limitations de l’AMP ?
L’AMP est rapide car il n’embarque qu’un
certain nombre limité de fonctionnalités,
certaines balises, scripts ou façon de codées
sont volontairement interdites
Conclusion : tout n’est pas supporté en AMP
Au début : beaucoup de choses utiles voire
indispensables n’étaient pas disponibles
Mais aujourd’hui, toutes les briques utiles
sont dispo en AMP !
Possibilité de faire 100% d’un site éditorial ou
ecommerce en AMP
Mais au prix de certaines concessions
Changement d’outils de trackings, d’ad servers,
de régies, de systèmes de paiement, ou de
méthodes de conception
Il y’en a, de moins en moins gênantes, et plus vraiment bloquantes
32

Où en sommes nous de
l’adoption du standard ?

Le nombre de sites AMP a explosé
4 milliards de pages AMP, 25 millions de domaines

International : Baidu supporte l’AMP !
Son format MIP est devenu AMP compatible depuis le printemps 2017

Beaucoup de medias ont adopté l’AMP

Evolution du trafic du top 9 des éditeurs AMP
37

La part du trafic AMP est très variable
38

Et les sites ecommerce s’y mettent
Le « traffic boost » est moins net que pour le site media
Le « conversion boost » est néanmoins intéressant
39

En théorie, on peut construire un site marchand
complet en AMP
Il faut faire de nombreuses concessions pour que
le parcours utilisateur soit compatible AMP
Tous les services de tracking ne sont pas forcément
compatibles, ni tous les Tag Managers
Les urls amp ne sont pas dans le domaine => pb de
cookies, d’attribution, de privacy etc.
Contournement possible attendu pour dans
quelques mois (mais pas complètement satisfaisant)
Il faut repenser le site de A à Z
Si les problèmes de mise en cache ne sont pas
résolus, l’architecture logicielle ne permettra pas une
bascule vers l’AMP complète et aisée
En pratique, ce n’est pas si simple
40

Quel avenir pour l’AMP

D’après Google et le consortium, AMP a un
avenir brillant devant lui

La réalité : une rustine malcommode
C’est une version de plus à maintenir
C’est un standard théoriquement ouvert, en
réalité on est dépendant de fait de
l’écosystème Google
Le précédent Android fait réfléchir
C’est plus une approche « tactique » que
stratégique
L’avenir, c’est un vrai standard pour fabriquer
des pages légères et un web performant
FBIA
AN
Mobile

Une fonctionnalitée déjà détournée
Certains créent des pages AMP dont le seul
objectif est de détourner l’audience vers des
pages normales !
Motif : c’est plus facile, et on a le traffic boost
44

Une pénalité pour pages AMP détournées
Si vous affichez ces « teasers » Amp, vous pourrez recevoir
une pénalité manuelle
Impact : les pages AMP seront ignorées, et vous n’aurez plus accès
aux zones réservées aux pages AMP
https://webmasters.googleblog.com/2017/11/engaging-
users-through-high-quality-amp.html
En place dès le 1er février 2018 : vous êtes prévenus !
45

Quelle évolution attendre ?
Les progressive web apps sont des pages web
mobiles dont les fonctionnalités web sont
enrichies de fonctionnalités normalement
réservées aux apps
Rend l’indexation des apps obsolètes
Résistance d’Apple : support incomplet sur iOS
On peut créer des PWA utilisant du code
AMP
https://www.ampproject.org/docs/guides/pwa-
amp
Vers un nouveau standard pour la conception
de page webs ?
La fusion avec un autre projet mieux né : le PWA …
46

Conclusion
47

Conclusion : testez l’AMP !
Pour un site éditorial, nous recommandons de
créer une version AMP
Pour un site ecommerce, nous recommandons de
réaliser un POC pour voir quelles difficultés
techniques résoudre et comment les résoudre
La bascule vers l’AMP pourra se faire rapidement dès
que le traffic boost sera majeur
Si vous avez une âme d’ « early adopter » =>
n’hésitez pas à vous lancer
Monitorez la conversion
AB testing obligatoire
Autre alternative
Appliquez les bonnes pratiques introduites en AMP
Exploitez les possibilités du PWA
Gagnez en expérience utilisateur et en conversions
sans les contraintes de l’AMP !

Ce que l’on peut faire pour
vous
49
Modules de formation
Optimisation RWD
Optimisation de sites mobiles
Pages AMP
Progressive web apps
Audits, recommandation, optimisation
Architecture, code, performances mobile
Stratégie sur usages mobiles
ASO

Merci !
Et maintenant, vos
questions…
50

Prochains évènements SF
51
Petit déjeuner – Matinée de conférences
Paris 18 janvier
Luxembourg 25 janvier
Webconf
11 janvier – optimiser son site pour la position zéro

Contact
philippe.yonnet@search-foresight.com
+33 1 74 18 29 40
Slideshare.net/S4sight
@S4sight
Philippe YONNET | CEO
www.search-foresight.com
52

L'AMP pour les sites e-commerce - 22 février - Lille

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (19)

Similaire à L'AMP pour les sites e-commerce - 22 février - Lille

Similaire à L'AMP pour les sites e-commerce - 22 février - Lille (20)

Plus de Peak Ace

Plus de Peak Ace (20)

L'AMP pour les sites e-commerce - 22 février - Lille