Télécharger en tant que PDF, PPTX
Téléchargé parPeak Ace
L'AMP pour les sites e-commerce - 22 février - Lille
Les pages AMP (Accelerated Mobile Pages) visent à améliorer la rapidité et l'expérience utilisateur sur mobile en proposant un format simplifié et allégé, conçu pour réduire les temps de chargement. Bien que leur utilisation entraîne un boost de performances et un impact positif sur la conversion, elles représentent aussi des limitations en matière de fonctionnalités et de dépendance à l'écosystème Google. L'avenir des AMP semble prometteur, mais pose des questions sur la nécessité de maintenir plusieurs standards et sur leur adoption croissante par les sites e-commerce.
Contenu connexe
Similaire à L'AMP pour les sites e-commerce - 22 février - Lille
L'AMP pour les sites e-commerce - 22 février - Lille
- 1. Accelerated Mobile Pages (PagesAMP) et ecommerce 14 / 12 / 2017
- 2. Programme de laconférence 45mn : 30 mn de presentation – 15 mn de questions 2 Présentation de l’agence Les Pages AMP qu’est ce que c’est ? Quel est l’intérêt des pages AMP ? Comment ça marche ? L’adoption Quel avenir pour les pages AMP #S4sight2017 @s4sight Vos questions
- 3. Agence conseil enstratégie digitale | SEO • SEM • CRO • Inbound Marketing • Analytics Les pages AMP qu’est-ce que c’est ? 3
- 4. Le contexte :des pages mobiles trop lentes Le poids des pages mobiles ne cesse d’augmenter La faute : A des pages RWD mal conçues A des pages mobiles conçues avec des frameworks et des standards conçus… pour le desktop
- 5. Et pour lessites éditoriaux, c’est pire Le problème : Les scripts de tracking Les mouchards publicitaires Les gestionnaires de bannières La monétisation implique l’emploi de scripts javascripts nombreux, lourds et lents Par ailleurs, ces sites présentent : Pages avec beaucoup de contenus Des images et des videos 5
- 6. Une lenteur quifait fuir les internautes A partir d’un load time de 2 sec, on perd un internaute sur deux Bref, le web mobile est partiellement inutilisable, car le chargement des pages est trop lent ! Et ce n’est pas qu’un problème de bande passante, de 3G vs 4G 6
- 7. Une réponse àFacebook Instant Articles Facebook a lancé en mai-juin 2015 un nouveau format de pages pour accélérer l’affichage de pages de contenu en usage mobile C’est un projet « fermé » : il s’agit de pages qui ne peuvent s’afficher que dans l’écosystème Facebook La monétisation est contrôlée par Facebook, qui prend 30% de taux de régie pour les pubs vendues par sa régie
- 8. Une initiative opensource très téléguidée… Accelerated Mobile Pages : une initiative Open Source pour • Promouvoir un standard pour construire des pages allégées, optimisées pour le mobile • Mettre à disposition un CDN dédié pour accélérer encore l’accès à ces contenus • Et proposer une diffusion large de ces contenus par des acteurs majeurs du web Un projet initié par Google et Twitter, présenté officiellement le 8 octobre 2015 AMP est d’ores et déjà implémenté par un groupe d’acteurs majeurs
- 9. Pour en savoirplus : http://www.ampproject.org 9
- 10. Agence conseil enstratégie digitale | SEO • SEM • CRO • Inbound Marketing • Analytics Les pages AMP : comment ça marche ? 10
- 11. Les principes Gains de perfomance X10 Code allégé Miseen cache Pré rendition / préchargement chez Google
- 12. Un code sérieusementallégé 12 Une page AMP contient 5 fois moins de trackers en moyenne qu’une page « normale », et un code 6 foix plus léger. Comment ? Des balises HTML « lourdes » interdites Une librairie javascript « couteau suisse » unique et allégée
- 13. A quoi ressemblece code ? AMP c’est du HTML5 Mais un « sous ensemble » du HTML5 A droite : le code d’une page AMP ultra simple 13
- 14. Les prérequis techniques Lesdocuments codés en AMP HTML doivent : Débuter par la balise doctype <!doctype html>. Contenir une balise top-level <html ⚡> (<html amp> est également valide). Contenir forcément au moins une balise <head> et <body> (C’est optionnel en HTML classique). Contenir une balise <link rel="canonical" href="$SOME_URL" /> dans la zone head qui pointe vers la page HTML classique équivalente, ou vers la même page s’il n’existe pas de version normale. Contenir une balise <meta charset="utf-8"> dans la zone head. Contenir une balise <meta name="viewport" content="width=device-width,minimum-scale=1"> dans la zone head. Il est recommandé d’inclure la valeur d’attribute “initial-scale=1”. Contenir une balise <script async src="https://cdn.ampproject.org/v0.js"></script> en tant que dernier élément de la zone head. Contenir <style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript> dans la zone head. 14
- 15. Un CDN dédié UnCDN (content delivery network) est un ensemble de serveurs : • Conservant une version « en cache » de la page • Et répartis partout dans le monde, près des utilisateurs Google fournit le CDN dédié aux pages AMP Remarque : la mise en cache systématique rend la création de pages AMP entièrement dynamiques « server side » impossible Par contre, on peut créer des pages partiellement dynamiques 15
- 16. SEO : attentionaux doublons La page AMP est un doublon quasi parfait du contenu de la page « normale » Il faut donc « canonicaliser » la page AMP Lien link rel=canonical pointant vers le contenu d’origine Au départ, Google recommandait de pointer vers la version desktop Avec le mobile first index : la recommandation reste la même ! Pourquoi ? Pour les autres moteurs ! 16
- 17. Peut-on faire despages AMP sa version mobile ? Si vous déclarez l’AMP comme votre version mobile via les rel=alternate, alors les pages AMP seront votre version mobile Sinon : vous n’avez pas de version mobile ! Pour le mobile first index, si vous n’avez pas de version mobile déclarée, c’est la version desktop qui sera indexée, pas la version AMP ! Tout à fait, mais attention aux balises rel=alternate 17
- 18. Tester ses pagesAMP Dans les pages de google 18
- 19. Tester ses pagesAMP https://search.google.com/test/amp Dans l’outil de test 19
- 20. Tester ses pagesAMP https://validator.ampproject.org/ Dans l’outil de validation 20
- 21. Le rapport dela search console Il y’a aussi un rapport d’améliorations dans la nouvelle Search Console 21
- 22. Agence conseil enstratégie digitale | SEO • SEM • CRO • Inbound Marketing • Analytics Les pages AMP : Pourquoi les utiliser
- 23. Adopter l’AMP :parce que c’est plus rapide Test fait en 2016 sur les pages responsive du Guardian, comparé avec la version AMP Le score Google pagespeed passe de 57% à 94% ! L’amélioration de l’UX est réelle et spectaculaire
- 24. C’est VRAIMENT plusrapide Source : Rannaa Zhou de Google, SMX West 2017 24
- 25. Et l’impact, c’estplus de conversions 25
- 26. VRAIMENT plus deconversions Etude Wompmobile 2017 26
- 27. Et parce qu’ily’a un ranking boost ! Et donc un traffic boost parfois 27 Sur mobile, les carrousels AMP pour les news sont placés en tête des résultats (position zéro) Pour être présent dans ce carrousel, il n’est pas nécessaire d’être indexé dans google news, il faut juste le balisage schema.org ad hoc et des pages AMP Evidemment, cela met en valeur les pages AMP vs les pages « normales » Le gain maximal est atteint si on est dans la première case du carrousel
- 28. Indirectement, il y’aparfois un ranking boost Deux exemples Impact avec des cas de sites mobiles AMP Cause : probablement le speed boost Un code plus SEO friendly ? Mais avoir des pages AMP n’est pas un ranking factor 28
- 29. Il y’a aussile « label » AMP sur les résultats Question : quelle est la proportion d’utilisateurs qui ont compris que les résultats avec ce label s’affichaient plus vite Pas d’étude sérieuse, mais ils sont visiblement minoritaires Notons que l’affichage du label n’est pas stable, il y’a eu beaucoup de test and learn depuis fin 2015 Test label bleu « instant » en oct 2017 29
- 30. Et c’est vraià l’international Les carrousels AMP envahissent les versions internationales de google 30
- 31. De plus enplus de diffuseurs exploitent l’amp Les principales plateformes qui exploitent l’AMP en dehors de Google : Pinterest, LinkedIn, et Twitter 31
- 32. Quels sont leslimitations de l’AMP ? L’AMP est rapide car il n’embarque qu’un certain nombre limité de fonctionnalités, certaines balises, scripts ou façon de codées sont volontairement interdites Conclusion : tout n’est pas supporté en AMP Au début : beaucoup de choses utiles voire indispensables n’étaient pas disponibles Mais aujourd’hui, toutes les briques utiles sont dispo en AMP ! Possibilité de faire 100% d’un site éditorial ou ecommerce en AMP Mais au prix de certaines concessions Changement d’outils de trackings, d’ad servers, de régies, de systèmes de paiement, ou de méthodes de conception Il y’en a, de moins en moins gênantes, et plus vraiment bloquantes 32
- 33. Agence conseil enstratégie digitale | SEO • SEM • CRO • Inbound Marketing • Analytics Où en sommes nous de l’adoption du standard ?
- 34. Le nombre desites AMP a explosé 4 milliards de pages AMP, 25 millions de domaines
- 35. International : Baidusupporte l’AMP ! Son format MIP est devenu AMP compatible depuis le printemps 2017
- 36. Beaucoup de mediasont adopté l’AMP
- 37. Evolution du traficdu top 9 des éditeurs AMP 37
- 38. La part dutrafic AMP est très variable 38
- 39. Et les sitesecommerce s’y mettent Le « traffic boost » est moins net que pour le site media Le « conversion boost » est néanmoins intéressant 39
- 40. En théorie, onpeut construire un site marchand complet en AMP Il faut faire de nombreuses concessions pour que le parcours utilisateur soit compatible AMP Tous les services de tracking ne sont pas forcément compatibles, ni tous les Tag Managers Les urls amp ne sont pas dans le domaine => pb de cookies, d’attribution, de privacy etc. Contournement possible attendu pour dans quelques mois (mais pas complètement satisfaisant) Il faut repenser le site de A à Z Si les problèmes de mise en cache ne sont pas résolus, l’architecture logicielle ne permettra pas une bascule vers l’AMP complète et aisée En pratique, ce n’est pas si simple 40
- 41. Agence conseil enstratégie digitale | SEO • SEM • CRO • Inbound Marketing • Analytics Quel avenir pour l’AMP
- 42. D’après Google etle consortium, AMP a un avenir brillant devant lui
- 43. La réalité :une rustine malcommode C’est une version de plus à maintenir C’est un standard théoriquement ouvert, en réalité on est dépendant de fait de l’écosystème Google Le précédent Android fait réfléchir C’est plus une approche « tactique » que stratégique L’avenir, c’est un vrai standard pour fabriquer des pages légères et un web performant FBIA AN Mobile
- 44. Une fonctionnalitée déjàdétournée Certains créent des pages AMP dont le seul objectif est de détourner l’audience vers des pages normales ! Motif : c’est plus facile, et on a le traffic boost 44
- 45. Une pénalité pourpages AMP détournées Si vous affichez ces « teasers » Amp, vous pourrez recevoir une pénalité manuelle Impact : les pages AMP seront ignorées, et vous n’aurez plus accès aux zones réservées aux pages AMP https://webmasters.googleblog.com/2017/11/engaging- users-through-high-quality-amp.html En place dès le 1er février 2018 : vous êtes prévenus ! 45
- 46. Quelle évolution attendre? Les progressive web apps sont des pages web mobiles dont les fonctionnalités web sont enrichies de fonctionnalités normalement réservées aux apps Rend l’indexation des apps obsolètes Résistance d’Apple : support incomplet sur iOS On peut créer des PWA utilisant du code AMP https://www.ampproject.org/docs/guides/pwa- amp Vers un nouveau standard pour la conception de page webs ? La fusion avec un autre projet mieux né : le PWA … 46
- 47. Agence conseil enstratégie digitale | SEO • SEM • CRO • Inbound Marketing • Analytics Conclusion 47
- 48. Conclusion : testezl’AMP ! Pour un site éditorial, nous recommandons de créer une version AMP Pour un site ecommerce, nous recommandons de réaliser un POC pour voir quelles difficultés techniques résoudre et comment les résoudre La bascule vers l’AMP pourra se faire rapidement dès que le traffic boost sera majeur Si vous avez une âme d’ « early adopter » => n’hésitez pas à vous lancer Monitorez la conversion AB testing obligatoire Autre alternative Appliquez les bonnes pratiques introduites en AMP Exploitez les possibilités du PWA Gagnez en expérience utilisateur et en conversions sans les contraintes de l’AMP !
- 49. Ce que l’onpeut faire pour vous 49 Modules de formation Optimisation RWD Optimisation de sites mobiles Pages AMP Progressive web apps Audits, recommandation, optimisation Architecture, code, performances mobile Stratégie sur usages mobiles ASO
- 50. Merci ! Et maintenant,vos questions… 50
- 51. Prochains évènements SF 51 Petitdéjeuner – Matinée de conférences Paris 18 janvier Luxembourg 25 janvier Webconf 11 janvier – optimiser son site pour la position zéro
- 52. Contact [email protected] +33 1 7418 29 40 Slideshare.net/S4sight @S4sight Philippe YONNET | CEO www.search-foresight.com 52