AMP
18/03/2016 > Synodiance / SEMRush

40 experts
SEO / SEA
1999
Indépendant
Google
Partner

Sommaire
Contexte
Présentation AMP
Techniquement
Next ?
Conclusion

Contexte

L’histoire débute en 2009…
Source : https://googleblog.blogspot.fr/2009/06/lets-make-web-faster.html

Let’s make the web faster.
2009
"(…) By collaborating to update protocols
such as HTML (…)
we can create a better web experience for everyone. ”
Source : http://googleresearch.blogspot.fr/2009/06/speed-matters.html

… et se confirme en 2010.
Using site speed in web search ranking
09 Avril 2010
(…) at Google we're obsessed with
speed, in our products and on the web.

Speed everywhere.
https://developers.google.com/speed/
Outil de
test
Solutions
Monitoring
Page Speed Insights
https://developers.google.com/speed/pagespeed/insights/
Page Speed Modules (Apache / Nginx)
https://developers.google.com/speed/pagespeed/insights/
Google Search Console > Stats d’exploration
https://www.google.com/webmasters/tools/crawl-stats

Et ça marche !
Source : Use the Google PageSpeed Module to Dramatically Increase the Speed of Your Website – Moz.com

Vitesse Desktop et Mobile !
Mars 2011

Mobile > 7 secondes en moyenne
2012
Source : http://analytics.blogspot.fr/2012/04/global-site-speed-overview-how-fast-are.html

2012 ----> 2015

Poids des pages mobile
Source : http://www.webperformancetoday.com/2015/01/14/mobile-page-growth/ - Etude Radware Janvier 2015
> +110%

Source : http://www.webperformancetoday.com/2015/01/14/mobile-page-growth/ - Etude Radware Janvier 2015
Images et Scripts
au cœur du
problème

Source : http://www.webperformancetoday.com/2015/01/14/mobile-page-growth/ - Etude Radware Janvier 2015
Images et Scripts
au cœur du
problème
> +145%

Les sites de News particulièrement impactés
Cocktail explosif
Mobile + Contenu + Monétisation

Source : http://www.nytimes.com/interactive/2015/10/01/business/cost-of-mobile-ads.html?_r=0

Mouchards / Scripts / Pubs > L’invasion

Mouchards / Scripts / Pubs > L’invasion

Mouchards / Scripts / Pubs > L’invasion

Avec Scripts (Pubs, Analytics..) Sans Scripts (Pubs, Analytics..)

Speed = Un
enjeu majeur
pour Google

2 sec.49% des internautes attendant qu’un site se charge en 2 secondes ou moins !

Tps de chargement Mobile Vs Tx de conversion
Source : https://www.soasta.com/blog/mobile-web-performance-monitoring-conversion-rate/ - Septembre 2015

Tps de chargement Mobile Vs Tx de Rebond
Source : https://www.soasta.com/blog/mobile-web-performance-monitoring-conversion-rate/ - Septembre 2015

Le Web Mobile a un
problème : sa lenteur.
Google veut le réparer !

Présentation AMP

Test Label « Slow » –
Février 2015
Google Mobile > Tps de chargement
Test Label « Slow to
load » – 29 Juin 2015

2016 > Mobile Speed
John Mueller / Google – A propos de 2016
« […] je pense que l’année prochaine, vous entendrez
probablement beaucoup parler, de notre part, à propos du
projet AMP, du mobile-friendly, sur lesquels nous travaillons
depuis des années.»

AMP = Accelerated
Mobile Pages
Un standard « Open Source » pour rendre le web mobile plus rapide

AMP
Accelerated Mobile Pages / Octobre 2015
https://www.ampproject.org

AMP = La bataille pour un standard Mobile
Source : https://medium.com/adventures-in-consumer-technology/the-instant-articles-battle-facebook-google-apple-bca0391df89d#.r0gbssr32
APP APP WEB

AMP
Objectif = Instantanéité
« Instant. Everywhere. »

Let’s make the
web faster
Avec un
standard open-
source

L’histoire se répète / La méthode Google
Création
d’un
nouveau
standard
Open-Source
/ Creative
Commons
Avec des
partenaires
de poids
Suivi d’un
lobbying
auprès des
webmasters
HOA /
Messages
Search
Console
Schema.org / The Physical Web /
AMP / Android

AMP = La bataille pour un standard Mobile

AMP = 2 piliers
AMP HTML
AMP HTML = une version « light »
d’HTML / Sous-ensemble d’HTML 5
Allégement des pages (requête HTTP,
layout chargé une seule fois, JS, CSS,
iframes…)
Pages en Cache
Construit pour être mis en cache
dans le cloud par des tiers (=Google)
ou par les éditeurs eux-mêmes
Google met à disposition son
système de cache gratuitement.

Critical Rendering Path
Source : https://varvy.com/pagespeed/critical-render-path.html

Critical Rendering Path / Chargement
Asynchrone
<script async
src="https://cdn.ampproject.org/v0.js">
</script>

Critical Rendering Path / Priorisation du
contenu

Critical Rendering Path / Mise en cache
Source : https://www.youtube.com/watch?v=5oBSPNzGsM0#t=800

https://www.google.com/amp/nypost.com/20
16/03/17/the-kremlin-is-already-pissed-at-
donald-trump/amp/#
Mise en cache par Google (gratuitement)
URL https://www.google.com/amp/ + {path}
Copie optimisée de la page AMP
Pré-chargée / Serveur à proximité
Si chargé directement dans le navigateur
Redirect 301 >
http://nypost.com/2016/03/17/the-kremlin-is-
already-pissed-at-donald-trump/amp/#

WWW RWD WWW AMP

Google Page Speed – Score « Vitesse Mobile »
WWW RWD
57 / 100
WWW AMP
94 / 100
+65%

Test Temps de Chargement (via WebPageTest.org)
WWW RWD
11.146s
First View
WWW AMP
1.918s
First View
-9,22 s

Impact SEO
Source : http://searchengineland.com/google-amp-coming-rank-fast-238046
• Carrousel “AMP-Only”
• Label AMP
Le coup du « Ranking boost »

AMP-Only ?

AMP Boost ?

AMP Boost ?

Ce n’est pas (encore) parfait.

Inconvénients / Navigation / Tx de Rebond
AMP Mobile

Les limites
Scripts : Analytics,
Pubs, Players,
Embeds…
Un standard pour
les contenus
statiques (News,
Articles)
Un Work-In-Progress

Les limites
Fin Janvier

Les limites
Gestion des PayWalls

Techniquement

Techniquement
CMS > Plugins déjà dispos
› Wordpress : https://wordpress.org/plugins/amp/
› Wordpress (GG/FB) : https://wordpress.org/plugins/pagefrog/screenshots/
› Joomla : https://weeblr.com/joomla-accelerated-mobile-pages/wbamp
› Drupal : https://www.drupal.org/project/amp
Autres CMS / CMS Propriétaires
› Développement spécifique de nouveaux templates HTML
› https://ampbyexample.com/

Sur la page HTML « Classique »
<link rel="amphtml" href="URL/amp" />
Sur la page HTML « AMP »
<link rel="canonical" href= "URL" />

AMP HTML / CANONICAL

WWW RWD WWW AMP

Ads et Analytics
Source : https://www.ampproject.org/who//

Analytics et AMP > AT INTERNET
Source : http://developers.atinternet-solutions.com/javascript-fr/fonctionnalites-avancees-javascript-fr/accelerated-mobile-pages-amp-javascript-fr/

Analytics et AMP > GA
Source : https://developers.google.com/analytics/devguides/collection/amp-analytics/#supported_user_interactions_for_google_analytics/

Apparaître dans le carrousel d’Actualités
+
L’intégration dans GG News n’est pas un pré-requis.

• NewsArticle
• BlogPost
Article
VideoObject
Apparaître dans le carrousel d’Actualités
https://developers.google.com/structured-
data/carousels/top-stories#markup_specification

Apparaître dans le carrousel d’Actualités

Pas de validation = Pas de Carrousel

Trouble-shooting > Chrome DevTools console
AMP validation successful.

Trouble-shooting > Search Console

Trouble-shooting > Structured Data Testing Tool

Next ?

Richard Gringas
Head, News + Social Products at Google

Are you planning to begin inviting e-commerce
sites to deploy the AMP code?
“Oh, absolutely, there’s nothing about the AMP
format that doesn’t enable its use for all kinds of
things. You could build an entire website out of it.”
Source : Recode.net – 24/02

Un projet ambitieux pour GG
Sites d’actus
Contenus
informationnels
(Blogs, Conseils, …)
E-Commerce ?
Priorité à court terme
Contenus statiques

Un projet ambitieux pour GG
Mobile Tablettes ? Desktop ?
Priorité à court terme
Le Mobile

AmpProject.org > Full AMP

Twitter « Moments » > AMP > 11/03
US, Australie, UK et Brésil.

Conclusion

Conclusion AMP
La vitesse de votre site mobile quelque soit sa version (RWD, Site mobile
dédié, …) doit être une préoccupation 2016.
Indispensable sur le secteur « News », AMP est une bonne solution pour
tous les contenus statiques (Articles, Blogs).
L’AMP n’est pas encore adapté pour les sites dynamiques et le e-
commerce.
AMP aura-t-il un rôle dans le Mobilegeddon de Mai 2016 ?

Questions / Réponses
MERCI !
Un projet ?
contact@synodiance.com
Suivez-nous sur Twitter : @Synodiance