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.

Seo camp'us 2018 - Tips pour améliorer et suivre vos temps de chargement pour Mobile First - Mathieu Chapon - Emilie Badoual

6,606 views

Published on

Intervenants : Mathieu Chapon, Co-fondateur de Search Foresight et Emilie Badoual, consultante SEO.

Published in: Internet
  • Be the first to comment

Seo camp'us 2018 - Tips pour améliorer et suivre vos temps de chargement pour Mobile First - Mathieu Chapon - Emilie Badoual

  1. 1. 1#seocamp@Mathieujava @Emilie_bd Tips pour améliorer vos perfs Sur Mobile
  2. 2. 2#seocamp@Mathieujava @Emilie_bdAgence conseil en stratégie digitale | SEO • SEM • CRO • Inbound Marketing • Analytics CHAPON Mathieu BADOUAL Emilie CoFondateur de Search Foresight 10 ans d’expérience sur des problématiques SEO Grands Comptes & E-commerce. Former des équipes Charger des outils R&D Faire évoluer les méthodes Accompagne les clients stratégiques Consultante SEO 10 ans d’expérience en marketing Dont 4 en SEO Piloter les missions de refontes Piloter les missions webperf Optimisations sémantiques Contributrice à la Newsletter
  3. 3. 3#seocamp@Mathieujava @Emilie_bd Search-Foresight.com Innovante, Pragmatique, Utile  60EXPERTS EN SEO / SEA +200CLIENTS SATISFAITS  1CENTRE DE FORMATION SF UNIVERSITY Stratégie Technique Assistance
  4. 4. 4#seocamp@Mathieujava @Emilie_bd Sommaire 1. État de l’usage du mobile en France 2. Les réactions de Google face au mobile 3. Quels KPIs prendre en compte ? 4. Les outils pour auditer votre site? 5. Les recommandations les plus simples 6. Les recommandations avancées 7. Stratégie de lancement de site mobile 8. Conclusion
  5. 5. 5#seocamp@Mathieujava @Emilie_bd LES ENJEUX DE LA PERFORMANCE
  6. 6. 6#seocamp@Mathieujava @Emilie_bd Index mobile First LES ENJEUX DE LA PERFORMANCE En 2018, le temps de chargement est votre priorité Facteur de classement Business Notoriété Crawl *Etude fasterize
  7. 7. 7#seocamp@Mathieujava @Emilie_bd L’usage du mobile Chiffres 2017 - 2018
  8. 8. 8#seocamp@Mathieujava @Emilie_bd + de 50%  Les Français font plus de recherches Google sur mobile que sur ordinateur 2017 marque un tournant En France http://www.credoc.fr/
  9. 9. 9#seocamp@Mathieujava @Emilie_bd Accès à internet via mobile 65% http://www.credoc.fr/ En France
  10. 10. 10#seocamp@Mathieujava @Emilie_bd L’essor des smartphones http://www.credoc.fr/ Navigation Web Utilisation d’applications La navigation et le téléchargement d’applis sont les usages les plus répandus 64% 60% 55% Consultation des e-mails En France
  11. 11. 11#seocamp@Mathieujava @Emilie_bd Les conditions de vos tests La 3G représente la connexion moyenne en France 91% 60% Couverture du réseau sur le territoire en France en juillet 2017 https://www.arcep.fr/index.php?id=13711 35 millions d’abonnés
  12. 12. 12#seocamp@Mathieujava @Emilie_bd PDM des navigateurs mobiles en France 1er trimestre 2018 gs.statcounter.com Autres 3% Android 1% Samsung Internet 8% Safari 37% Chrome 51%
  13. 13. 13#seocamp@Mathieujava @Emilie_bd L’usage de la messagerie instantanée http://www.credoc.fr/ 48%
  14. 14. 14#seocamp@Mathieujava @Emilie_bd L’usage de la vidéo mobile http://www.credoc.fr/ 46%
  15. 15. 15#seocamp@Mathieujava @Emilie_bd Temps moyen passé sur smartphone Les Français et leur smartphone Une relation fusionnelle Connexions quotidiennes 1h42 23 X https://www2.deloitte.com
  16. 16. 16#seocamp@Mathieujava @Emilie_bd Les Français et leur smartphone Les moments Consultation au réveil 20% En multitâche Dans les transports 84% 49% https://www2.deloitte.com
  17. 17. 17#seocamp@Mathieujava @Emilie_bd Les Français et leur smartphone Les moments https://www2.deloitte.com
  18. 18. 18#seocamp@Mathieujava @Emilie_bd Les réactions de Google face au mobile
  19. 19. 19#seocamp@Mathieujava @Emilie_bd SLOW TO LOAD 2015 MOBILE FIRST INDEXING To be continued 2016 Les grandes étapes webmasters.googleblog.com RED SLOW LABEL 2015 PROJET AMP 2015 MOBILE GEDDON 2015 USING SPEED IN SEARCH RANKING 2010 SPEED UPDATE Juillet 2018
  20. 20. 20#seocamp@Mathieujava @Emilie_bd L’impact en termes de CA Chiffres 2017 - 2018
  21. 21. 21#seocamp@Mathieujava @Emilie_bd Les attentes des Français En matière d’usage Vitesse de chargementLes mobinautes s’attendent à ce qu’une page web se charge au moins aussi rapidement sur mobile que sur ordinateur 41% Moins de 5 secondes Une page web doit se charger en moins de 5 secondes sur un mobile 60% Moins de 3 secondes Les plus exigeants ne souhaitent pas attendre plus de 3 secondes de chargement sous peine d’abandon. 74% www.fasterize.com
  22. 22. 22#seocamp@Mathieujava @Emilie_bd www.fasterize.com – www.retailmenot.com Les e-commerçants sans offre mobile
  23. 23. 23#seocamp@Mathieujava @Emilie_bd www.fasterize.com Les e-commerçants qui ont dit OUI au mobile
  24. 24. 24#seocamp@Mathieujava @Emilie_bd Image de marque 81% des internautes français réfléchiraient à 2 fois avant d’acheter sur un site lent. Les impacts sur le mobinaute www.fasterize.com
  25. 25. 25#seocamp@Mathieujava @Emilie_bd Abandon de panier 20% des utilisateurs abandonneraient leur panier Les impacts sur le mobinaute www.fasterize.com
  26. 26. 26#seocamp@Mathieujava @Emilie_bd Fidélisation des clients Après 3 secondes d’attente, 57% des internautes quittent un site 80 % d’entre eux n’y reviendront jamais. Les impacts sur le mobinaute www.fasterize.com
  27. 27. 27#seocamp@Mathieujava @Emilie_bd Quels KPIs prendre en compte ?
  28. 28. 28#seocamp@Mathieujava @Emilie_bd Les KPIs les plus communs Temps de réponse du serveur (TTFB) Le temps qui s’écoule entre le moment où l’utilisateur “appelle” une page et le moment où le serveur renvoie les premiers octets de la page HTML à son navigateurwww.fasterize.com
  29. 29. 29#seocamp@Mathieujava @Emilie_bd Les KPIs les plus communs Le start render Cette métrique mesure la première fois que le navigateur affiche autre chose qu'une page vierge. www.fasterize.com
  30. 30. 30#seocamp@Mathieujava @Emilie_bd Les KPIs les plus communs Le speed index Délai moyen nécessaire à l'affichage des pixels au-dessus de la ligne de flottaison. www.fasterize.com
  31. 31. 31#seocamp@Mathieujava @Emilie_bd Les KPIs les plus communs Time to interact Moment où le contenu principal est affiché et pour lequel l’utilisateur peut commencer à s’engager de façon significative www.fasterize.com
  32. 32. 32#seocamp@Mathieujava @Emilie_bd Start render First Contentfull Pain  La mesure du Start Render se base sur une vidéo enregistrée, ce qui est particulièrement fiable.  Le FCP quant à lui, est une mesure prise par le navigateur qui indique le moment où le premier élément de contenu est visible. www.fasterize.com
  33. 33. 33#seocamp@Mathieujava @Emilie_bd 89 Ko (images, scripts compris) 2,6 Mo (images, scripts compris) 2000 2018 www.fasterize.com Des pages web de plus en plus lourdes X30
  34. 34. 34#seocamp@Mathieujava @Emilie_bd Thank you FIXEZ-VOUS LES BONS OBJECTIFS
  35. 35. 35#seocamp@Mathieujava @Emilie_bd Fixer vous des objectifs : 4 KPIS de chargement Un site rapide, c’est + de SEO, + d’usage et + de business Time to First Byte < 200ms Temps de téléchargement html < 500ms Temps du début d’affichage < 1 seconde Temps de rendition < 2 secondes Source : https://developers.google.com/speed/docs/insights/mobile https://support.google.com/partners/answer/7335657?hl=fr&ref_topic=7327984
  36. 36. 36#seocamp@Mathieujava @Emilie_bd L’objectif de 100 appels externes Un site rapide, c’est + de SEO, + d’usage et + de business Source : https://developers.google.com/speed/docs/insights/mobile https://support.google.com/partners/answer/7335657?hl=fr&ref_topic=7327984
  37. 37. 37#seocamp@Mathieujava @Emilie_bd L’objectif du poids d’une page Un site rapide, c’est + de SEO, + d’usage et + de business Poids d’une page Poids d’une image < 1mo < 60 Ko Nous recommandons:
  38. 38. 38#seocamp@Mathieujava @Emilie_bd Thank you AUDITER VOTRE SITE
  39. 39. 39#seocamp@Mathieujava @Emilie_bd Les outils pour l’audit Du gratuit au payant Page Speed Insight Google Webmaster tools Dareboost LIGHTHOUSE KeyCDN Website Speed Test Sondes
  40. 40. 40#seocamp@Mathieujava @Emilie_bd Page Speed Insight • Le score de vitesse, • Le score d’optimisation • La répartition du temps de chargement sur une page • Les statistiques de la page • Les suggestions d’optimisation. L’outil Performance de Google
  41. 41. 41#seocamp@Mathieujava @Emilie_bd Nouvel outil de benchmark Google Se comparer aux autres et simuler son manque à gagner https://www.thinkwithgoogle.com/feature/mobile/
  42. 42. 42#seocamp@Mathieujava @Emilie_bd Dareboost Outil français (des Bretons ), l’outil vous propose une évaluation de plusieurs indicateurs de performance, mais pas que: • SEO • Sécurité • W3C • … Ainsi que les bonnes pratiques associées Mesure les KPIS et recommande
  43. 43. 43#seocamp@Mathieujava @Emilie_bd GSC (GWT) Temps de chargement de tous les types de contenus que Google télécharge, à savoir les pages, les fichiers CSS, JavaScript, Flash et PDF, ainsi que les images Mesurer le crawl de Google
  44. 44. 44#seocamp@Mathieujava @Emilie_bd Avec l’Index Mobile First, ce temps de chargement devrait évoluer
  45. 45. 45#seocamp@Mathieujava @Emilie_bd LIGHTHOUSE Plugin Chrome de Google
  46. 46. 46#seocamp@Mathieujava @Emilie_bd KeyCDN Tester votre site depuis plusieurs localités en particulier si vous couvrez plusieurs territoires avec votre activité Tester votre site à l’international
  47. 47. 47#seocamp@Mathieujava @Emilie_bd Les sondes Tester votre site en profondeur Les sondes Site WEB
  48. 48. 48#seocamp@Mathieujava @Emilie_bd Les premières recommandations
  49. 49. 49#seocamp@Mathieujava @Emilie_bd Les images Source : AKAMAI
  50. 50. 50#seocamp@Mathieujava @Emilie_bd Pire encore… Charger les images sans les afficher
  51. 51. 51#seocamp@Mathieujava @Emilie_bd Ou alors… Charger les images en grand format pour les retailler par CSS
  52. 52. 52#seocamp@Mathieujava @Emilie_bd Les optimisations classiques Les images sont régulièrement trop lourdes. Vous pouvez: Dimensionner vos images à la bonne taille Réduire leur poids sans perdre la qualité https://imagify.io Compresser en GZIP (sauf les PNG) Héberger vos images sur un sous-domaine différent http://image.domaine.com Utiliser le lazy loading Utiliser les sprites CSS pour les images récurrentes sur vos templates (pictos, logos) Utiliser le JPEG Progressive Les images > 50 ko
  53. 53. 53#seocamp@Mathieujava @Emilie_bd JPEG Normal  JPEG Progressive 8s 2s
  54. 54. 54#seocamp@Mathieujava @Emilie_bd Réduire vos images sans perte de qualité Quelques techniques peu utilisées Utiliser JCE pour retirer les données EXIF de vos images La compression "Lossless" de vos images (ImageRecycle) Encoder les petites images en base64: base64-image.de Rallonger le cache navigateur Les images > 50 ko
  55. 55. 55#seocamp@Mathieujava @Emilie_bd Les optimisations classiques Ces fichiers sont une cause d’un lent chargement visuel de la page: Regrouper vos fichiers CSS et JS en quelques fichiers (en protocole HTTP1) Minifier vos fichiers https://www.minifier.org/ Compresser vos fichiers Utiliser un sous-domaine dédié pour ces ressources http://static.domaine.com Utiliser des méthodes asynchrones ou Deferred Rallonger le cache navigateur de ces ressources qui évoluent rarement Optimiser votre cache serveur pour éviter les purges inutiles Traiter vos fichiers CSS et JS
  56. 56. 56#seocamp@Mathieujava @Emilie_bd Les optimisations classiques Votre code source: au-delà de 1000 lignes, attention ! Un code optimisé est un code bien indenté et sans caractères inutiles en fin de lignes. Ce qu’il faut retenir : 1 caractère ASCII = 7 bits = 1 octet Soit : 1 espace = 7 bits = 1 octet : 1 tabulation = 7 bits = 1 octet : 1 retour à la ligne = 7 bits = 1 octet
  57. 57. 57#seocamp@Mathieujava @Emilie_bd Le Parser - Tolérance 0 Si on compare le code source de cette page avant/après la suppression des lignes vides 57 234 ko 88 ko - 69% du poids total Sur cette page qui faisait à la base 10825 lignes, nous en avons supprimé 8670 qui étaient vides, soit 149,1 Ko supprimés de cette page
  58. 58. 58#seocamp@Mathieujava @Emilie_bd Les recommandations avancées
  59. 59. 59#seocamp@Mathieujava @Emilie_bd Les attributs <srcset> et <size> Le navigateur vient faire son marché L’attribut <size> indique la largeur finale de l’image  Aide à la « prise de décision » du navigateur. 59
  60. 60. 60#seocamp@Mathieujava @Emilie_bd L’attribut <picture> <picture> permet de déclarer plusieurs images en fonction des media queries. 60 <picture id="seo-camp"> <source media="(max-width: 633px)" srcset="pix/respimg320w.png"> <source media="(max-width: 833px)" srcset="pix/respimg480w.png"> <source media="(max-width: 1033px)" srcset="pix/respimg640w.png"> <source media="(max-width: 1133px)" srcset="pix/respimg800w.png"> <source media="(min-width: 1134px)" srcset="pix/respimg960w.png"> <img src="pix/default.gif"> </picture>
  61. 61. 61#seocamp@Mathieujava @Emilie_bd Techniques adaptées aux nouveaux navigateurs
  62. 62. 62#seocamp@Mathieujava @Emilie_bd Le Pre-load Cela permet d’ordonnancer le chargement de vos ressources Prioriser le chargement de vos fichiers externes
  63. 63. 63#seocamp@Mathieujava @Emilie_bd Le Prefetch Récupère les ressources en arrière-plan nécessaire plus tard et stocker dans le cache du navigateur Exemple: présentation, slideshow, slides, résultats de recherche paginés... Anticipe le chargement de certains fichiers W3C (HTML5 Links
  64. 64. 64#seocamp@Mathieujava @Emilie_bd Le DNS Prefetch Effectuer des recherches de DNS sur des liens externes en arrière-plan Votre chrome le fait déjà à votre insu sur la base de votre historique sur les 10 derniers sites visités avant fermeture Permets d’effacer les effets négatifs de la latence des réseaux
  65. 65. 65#seocamp@Mathieujava @Emilie_bd Faites la commande : chrome://dns/
  66. 66. 66#seocamp@Mathieujava @Emilie_bd Les inconvénients de ces 3 techniques Ces optimisations sont gourmandes à plusieurs niveaux Batterie Logs Ressources Navigateurs
  67. 67. 67#seocamp@Mathieujava @Emilie_bd Les optimisations plus « compliquées » Quand on vous parle de cache, vous devez savoir de quoi on parle: Cache serveur Cache du CMS Cache Varnish Cache AKAMAI Reverse proxy Load Balancing CDN … 67 Le cache: Ce que vous devez savoir! ARHHH HHHHH HHHHH!! !!
  68. 68. 68#seocamp@Mathieujava @Emilie_bd S'il y a une chose à retenir 68 Qu’est-ce que le cache?
  69. 69. 69#seocamp@Mathieujava @Emilie_bd S’il y a une chose à retenir Exemple sur la durée du cache 69 Avoir du cache ne veut rien dire Pourquoi un cache si court? Comment est régénéré le cache? 15 minutes pour les « listes produit » 20 minutes pour les « fiches produit » 1 fois par jour pour la « home » Tous les 7 jours pour les « images, css, JS,… »
  70. 70. 70#seocamp@Mathieujava @Emilie_bd S'il y a une chose à retenir Nous avons 3 leviers pour rendre le système plus efficace :  La fréquence de rafraîchissement : A-t-on besoin de régénérer le cache de toutes mes pages  Les éléments à cacher dans la page : Certains éléments de la page ne bougent jamais : le Header ou le footer par exemple  La création du cache : Où/qui génère le cache de la page ? Côté serveur ou côté client? 70 Gérer la durée du cache
  71. 71. 71#seocamp@Mathieujava @Emilie_bd Le protocole HTTP2
  72. 72. 72#seocamp@Mathieujava @Emilie_bd Avantages du HTTP/2: Un enjeu de Performance Le protocole HTTP/2 permet d’améliorer la vitesse des échanges des données sur le web via 3 grands axes : • Le multiplexing : parallélisé les appels • Le push: prioriser les chargements • La compression des en-têtes HTTP
  73. 73. 73#seocamp@Mathieujava @Emilie_bd Le multiplexing Le certificat SSL devient un prérequis pour pouvoir bénéficier du protocole HTTP/2. Certaines pratiques d’optimisation des temps de chargement efficaces en HTTP/1 deviennent obsolètes : • Concaténation de fichiers CSS ou JS • Externalisation des ressources • Domaines Cookie-less • Domain Sharding
  74. 74. 74#seocamp@Mathieujava @Emilie_bd Google ne crawle pas le HTTP2 Un test a été effectué par Bartosz Góralewicz en ne proposant un site qu’en HTTP2 et en désactivant l’HTTP1. Le site répondait en erreur!!!
  75. 75. 75#seocamp@Mathieujava @Emilie_bd Stratégie de lancement de site mobile
  76. 76. 76#seocamp@Mathieujava @Emilie_bd Un site mobile allégé
  77. 77. 77#seocamp@Mathieujava @Emilie_bd Si vous avez déjà fait de l’AMP… Desktop Mobile AMP 195 ko 40 pubs 4,5s 87 ko 33 pubs 4s 78 ko 7 pubs 2s
  78. 78. 78#seocamp@Mathieujava @Emilie_bd Conclusion
  79. 79. 79#seocamp@Mathieujava @Emilie_bd Stratégie « Above-the-fold »
  80. 80. 80#seocamp@Mathieujava @Emilie_bd Faites passer la certification « Sites mobiles » Google propose un guide de révisons afin de passer la certification Sites mobiles dont les modules sous- entendent les points forts d’un site mobile efficace… … et certainement des futurs critères de classement Lancée en avril 2017
  81. 81. 81#seocamp@Mathieujava @Emilie_bd La certification « Sites mobiles » UX Perf AMP, PWA, Conversion
  82. 82. 82#seocamp@Mathieujava @Emilie_bd Faites-vous partie de l’Index First Mobile? GoogleBot Smartphone dans vos logs
  83. 83. 83#seocamp@Mathieujava @Emilie_bd Merci de votre écoute
  84. 84. 84#seocamp@Mathieujava @Emilie_bd Question Mug
  85. 85. 85#seocamp@Mathieujava @Emilie_bd MERCI AUX SPONSORS

×