Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Synodiance > AMP - EBG - 04/04/2016

1,293 views

Published on

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

Published in: Technology
  • Be the first to comment

Synodiance > AMP - EBG - 04/04/2016

  1. 1. AMP 04/04/2016 > Synodiance / EBG
  2. 2. 40 experts SEO / SEA 1999 Indépendant Google Partner
  3. 3. Sommaire Contexte Présentation AMP Techniquement Next ? Conclusion
  4. 4. Contexte
  5. 5. L’histoire débute en 2009… Source : https://googleblog.blogspot.fr/2009/06/lets-make-web-faster.html
  6. 6. 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
  7. 7. … 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.
  8. 8. 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
  9. 9. Et ça marche ! Source : Use the Google PageSpeed Module to Dramatically Increase the Speed of Your Website – Moz.com
  10. 10. Vitesse Desktop et Mobile ! Mars 2011
  11. 11. Mobile > + de 10 secondes en moyenne 2012 Source : http://analytics.blogspot.fr/2012/04/global-site-speed-overview-how-fast-are.html
  12. 12. 2012 ----> 2015
  13. 13. Poids des pages mobile Source : http://www.webperformancetoday.com/2015/01/14/mobile-page-growth/ - Etude Radware Janvier 2015 > +110%
  14. 14. Source : http://www.webperformancetoday.com/2015/01/14/mobile-page-growth/ - Etude Radware Janvier 2015 Images et Scripts au cœur du problème
  15. 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 > +145%
  16. 16. Les sites de News particulièrement impactés Cocktail explosif Mobile + Contenu + Monétisation
  17. 17. Source : http://www.nytimes.com/interactive/2015/10/01/business/cost-of-mobile-ads.html?_r=0
  18. 18. Mouchards / Scripts / Pubs > L’invasion
  19. 19. Mouchards / Scripts / Pubs > L’invasion
  20. 20. Mouchards / Scripts / Pubs > L’invasion
  21. 21. Avec Scripts (Pubs, Analytics..) Sans Scripts (Pubs, Analytics..)
  22. 22. Speed = Un enjeu majeur pour Google
  23. 23. 2 sec.49% des internautes attendant qu’un site se charge en 2 secondes ou moins !
  24. 24. Tps de chargement Mobile Vs Tx de conversion Source : https://www.soasta.com/blog/mobile-web-performance-monitoring-conversion-rate/ - Septembre 2015
  25. 25. Tps de chargement Mobile Vs Tx de Rebond Source : https://www.soasta.com/blog/mobile-web-performance-monitoring-conversion-rate/ - Septembre 2015
  26. 26. Le Web Mobile a un problème : sa lenteur. Google veut le réparer !
  27. 27. Présentation AMP
  28. 28. Test Label « Slow » – Février 2015 Google Mobile > Tps de chargement Test Label « Slow to load » – 29 Juin 2015
  29. 29. 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.»
  30. 30. AMP = Accelerated Mobile Pages Un standard « Open Source » pour rendre le web mobile plus rapide
  31. 31. AMP Accelerated Mobile Pages / Octobre 2015 https://www.ampproject.org
  32. 32. 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
  33. 33. AMP Objectif = Instantanéité « Instant. Everywhere. »
  34. 34. Let’s make the web faster Avec un standard open- source
  35. 35. 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
  36. 36. AMP = La bataille pour un standard Mobile
  37. 37. 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.
  38. 38. Critical Rendering Path Source : https://varvy.com/pagespeed/critical-render-path.html
  39. 39. Critical Rendering Path / Chargement Asynchrone <script async src="https://cdn.ampproject.org/v0.js"> </script>
  40. 40. Critical Rendering Path / Priorisation du contenu
  41. 41. Critical Rendering Path / Mise en cache Source : https://www.youtube.com/watch?v=5oBSPNzGsM0#t=800
  42. 42. 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/#
  43. 43. WWW RWD WWW AMP
  44. 44. Google Page Speed – Score « Vitesse Mobile » WWW RWD 57 / 100 WWW AMP 94 / 100 +65%
  45. 45. Test Temps de Chargement (via WebPageTest.org) WWW RWD 11.146s First View WWW AMP 1.918s First View -9,22 s
  46. 46. Impact SEO Source : http://searchengineland.com/google-amp-coming-rank-fast-238046 • Carrousel “AMP-Only” • Label AMP Le coup du « Ranking boost »
  47. 47. AMP-Only ?
  48. 48. AMP Boost ?
  49. 49. AMP Boost ?
  50. 50. Ce n’est pas (encore) parfait.
  51. 51. Inconvénients / Navigation / Tx de Rebond AMP Mobile
  52. 52. Inconvénients / Navigation / Tx de Rebond AMP Mobile Navigation Navigation
  53. 53. Qu’est-ce que GG va privilégier ? AMP Vitesse
  54. 54. Les limites Scripts : Analytics, Pubs, Players, Embeds… Un standard pour les contenus statiques (News, Articles) Un Work-In-Progress
  55. 55. Les limites Fin Janvier
  56. 56. Les limites Gestion des PayWalls
  57. 57. Techniquement
  58. 58. 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/
  59. 59. Sur la page HTML « Classique » <link rel="amphtml" href="URL/amp" /> Sur la page HTML « AMP » <link rel="canonical" href= "URL" />
  60. 60. AMP HTML / CANONICAL
  61. 61. WWW RWD WWW AMP
  62. 62. Ads et Analytics Source : https://www.ampproject.org/who//
  63. 63. Analytics et AMP > AT INTERNET Source : http://developers.atinternet-solutions.com/javascript-fr/fonctionnalites-avancees-javascript-fr/accelerated-mobile-pages-amp-javascript-fr/
  64. 64. Analytics et AMP > GA Source : https://developers.google.com/analytics/devguides/collection/amp-analytics/#supported_user_interactions_for_google_analytics/
  65. 65. Apparaître dans le carrousel d’Actualités + L’intégration dans GG News n’est pas un pré-requis.
  66. 66. • NewsArticle • BlogPost Article VideoObject Apparaître dans le carrousel d’Actualités https://developers.google.com/structured- data/carousels/top-stories#markup_specification
  67. 67. Apparaître dans le carrousel d’Actualités
  68. 68. Pas de validation = Pas de Carrousel
  69. 69. Trouble-shooting > Chrome DevTools console AMP validation successful. Ajoutez “#development=1” à l’URL AMP
  70. 70. Trouble-shooting > Search Console
  71. 71. Trouble-shooting > Structured Data Testing Tool
  72. 72. Next ?
  73. 73. Richard Gringas Head, News + Social Products at Google
  74. 74. 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
  75. 75. Un projet ambitieux pour GG Sites d’actus Contenus informationnels (Blogs, Conseils, …) E-Commerce ? Priorité à court terme Contenus statiques
  76. 76. Un projet ambitieux pour GG Mobile Tablettes ? Desktop ? Priorité à court terme Le Mobile
  77. 77. AmpProject.org > Full AMP
  78. 78. Twitter « Moments » > AMP > 11/03 US, Australie, UK et Brésil.
  79. 79. Carrousel #AMP > 12 Pays https://productforums.google.com/forum/#!msg/webmasters/gECaJ0KGxgQ/c3NhRn41CQAJ
  80. 80. Conclusion
  81. 81. 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 ?
  82. 82. MERCI ! Questions / Réponses

×