synodiance > amp - ebg - 04/04/2016
TRANSCRIPT
AMP04/04/2016 > Synodiance / EBG
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 ranking09 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’explorationhttps://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 > + de 10 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 = AcceleratedMobile Pages
Un standard « Open Source » pour rendre le web mobile plus rapide
AMPAccelerated 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 / CreativeCommons
Avec des partenaires
de poids
Suivi d’un lobbying
auprès des webmasters
HOA / Messages
SearchConsole
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 asyncsrc="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/2016/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 AMPPré-chargée / Serveur à proximité
Si chargé directement dans le navigateurRedirect 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 RWD57 / 100
WWW AMP94 / 100
+65%
Test Temps de Chargement (via WebPageTest.org)
WWW RWD11.146sFirst View
WWW AMP1.918sFirst 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
Inconvénients / Navigation / Tx de Rebond
AMP Mobile
Navigation
Navigation
Qu’est-ce que GG va privilégier ?
AMP Vitesse
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.
Ajoutez “#development=1” à l’URL AMP
Trouble-shooting > Search Console
Trouble-shooting > Structured Data Testing Tool
Next ?
Richard GringasHead, 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’actusContenus
informationnels (Blogs, Conseils, …)
E-Commerce ?
Priorité à court termeContenus statiques
Un projet ambitieux pour GG
Mobile Tablettes ? Desktop ?
Priorité à court termeLe Mobile
AmpProject.org > Full AMP
Twitter « Moments » > AMP > 11/03
US, Australie, UK et Brésil.
Carrousel #AMP > 12 Pays
https://productforums.google.com/forum/#!msg/webmasters/gECaJ0KGxgQ/c3NhRn41CQAJ
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 ?
MERCI !
Questions / Réponses