Face à un web mobile extrêmement lent, Google a lancé fin 2015 l’initiative open-source AMP, acronyme d’Accelerated Mobile Pages. Fédérant autour de lieu Wordpress, Pinterest ou bien encore Twitter, Google entend bien imposer son standard en proposant une version allégée d’HTML. Faites le test par vous-même, les pages AMP se chargent avec une rapidité déconcertante ! Contre-offensive aux « walled gardens » de Facebook (Instant Articles) et d’Apple (News), AMP n’est désormais plus en mode test. En effet, depuis fin février, Google fait remonter des pages AMP dans ses pages de résultats mobile. Au programme de cette présentation > Le point sur le projet AMP : comment ça marche, les enjeux techniques, à qui ça s’adresse vraiment, les avantages SEO et les évolutions à venir. Yann SAUVAGEON Directeur de l'Expertise Synodiance Twitter : https://twitter.com/yahn

1. AMP
04/04/2016 > Synodiance / EBG

2. 40 experts
SEO / SEA
1999
Indépendant
Google
Partner

3. Sommaire
Contexte
Présentation AMP
Techniquement
Next ?
Conclusion

4. Contexte

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

7. 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

8. … 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.

9. 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

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

11. Vitesse Desktop et Mobile !
Mars 2011

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

13. 2012 ----> 2015

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

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

16. 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%

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

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

19. Mouchards / Scripts / Pubs > L’invasion

20. Mouchards / Scripts / Pubs > L’invasion

21. Mouchards / Scripts / Pubs > L’invasion

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

23. Speed = Un
enjeu majeur
pour Google

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

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

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

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

28. Présentation AMP

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

30. 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.»

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

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

33. 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

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

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

36. 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

37. AMP = La bataille pour un standard Mobile

40. 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.

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

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

43. Critical Rendering Path / Priorisation du
contenu

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

45. 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/#

46. WWW RWD WWW AMP

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

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

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

51. AMP-Only ?

52. AMP Boost ?

53. AMP Boost ?

54. Ce n’est pas (encore) parfait.

55. Inconvénients / Navigation / Tx de Rebond
AMP Mobile

56. Inconvénients / Navigation / Tx de Rebond
AMP Mobile
Navigation
Navigation

57. Qu’est-ce que GG va privilégier ?
AMP Vitesse

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

59. Les limites
Fin Janvier

60. Les limites
Gestion des PayWalls

61. Techniquement

62. 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/

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

64. AMP HTML / CANONICAL

65. WWW RWD WWW AMP

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

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

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

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

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

75. Apparaître dans le carrousel d’Actualités

76. Pas de validation = Pas de Carrousel

77. Trouble-shooting > Chrome DevTools console
AMP validation successful.
Ajoutez “#development=1” à l’URL AMP

78. Trouble-shooting > Search Console

79. Trouble-shooting > Structured Data Testing Tool

80. Next ?

82. Richard Gringas
Head, News + Social Products at Google

83. 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

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

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

86. AmpProject.org > Full AMP

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

88. Carrousel #AMP > 12 Pays
https://productforums.google.com/forum/#!msg/webmasters/gECaJ0KGxgQ/c3NhRn41CQAJ

89. Conclusion

90. 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 ?

91. MERCI !
Questions / Réponses