synodiance > amp - ebg - 04/04/2016

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