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.

Webperf : par où commencer ? - SEOGoodVibes

782 views

Published on

Quelques outils pour débuter l'analyse de la webperformance :
- comment comparer son site aux concurrents ?
- comment cibler les pages les plus problématiques ?
- comment détecter ce qui pose problème sur ces pages ?
- quels outils et indicateurs utiliser ?

Published in: Data & Analytics
  • Be the first to comment

  • Be the first to like this

Webperf : par où commencer ? - SEOGoodVibes

  1. 1. Web Perf : par où commencer ? Madeline Pinthon – #SEOGoodVibes – 30/05/2020
  2. 2. Madeline Pinthon • Consultante SEO chez iProspect depuis 2015 • SEO et sur twitter depuis 2009 : @razbithume • http://www.canyouseome.com
  3. 3. La web perf… un sujet : - technique - UX - SEO
  4. 4. Un lot d’annonces en 2018 1 2 3 https://webmasters.googleblog.com/search/label/speed
  5. 5. Des nouveautés côté chrome “Our plan to identify sites that are fast or slow will take place in gradual steps, based on increasingly stringent criteria. Our long-term goal is to define badging for high- quality experiences, which may include signals beyond just speed. We are building out speed badging in close collaboration with other teams exploring labelling the quality of experiences at Google. We believe this will ensure that if you are optimizing your site to be fast, your site will not be inconsistently badged from one surface to another.” https://blog.chromium.org/search/label/faster%20web
  6. 6. Un poids plus importants pour le ranking en 2021 ? “ By adding page experience to the hundreds of signals that Google considers when ranking search results, we aim to help people more easily access the information and web pages they’re looking for, and support site owners in providing an experience users enjoy.” https://webmasters.googleblog.com/2020/05/evaluati ng-page-experience.html https://blog.chromium.org/2020/05/the-science- behind-web-vitals.html
  7. 7. Une multitude d’outils et une multitude d’indicateurs
  8. 8. Quelques comptes à suivre
  9. 9. Revoir : Web2Day 2018 Comment mesurer la vitesse des sites ? https://www.slideshare.net/MadelinePinthon/comment-mesurer-la-vitesse-des-sites-web2day-2018-nantes
  10. 10. Comment comparer votre site aux concurrents ?
  11. 11. Comment comparer plusieurs sites ? https://www.dareboost.com/fr/compare
  12. 12. Comment comparer plusieurs sites ? http://www.webpagetest.org/video/
  13. 13. Comment comparer plusieurs sites ?
  14. 14. Comment comparer plusieurs sites ? http://www.webpagetest.org/video/
  15. 15. Les outils, c’est bien… les utilisateurs, c’est mieux.
  16. 16. Page Speed insights : données lab + utilisateurs Mon site n’est pas assez connu, pas de donnée disponible  Est-ce vraiment sûr ?
  17. 17. Comment comparer votre client aux concurrents ? https://www.thinkwithgoogle.com/intl/fr-fr/feature/testmysite/
  18. 18. Comment comparer votre client aux concurrents ?
  19. 19. De nouvelles données dans un nouveau connecteur https://twitter.com/ChromeUXReport/status/1265852602299842564
  20. 20. Comment comparer votre client aux concurrents ? http://www.canyouseome.com/surveiller-levolution-de-la-vitesse-dun-site-et-de-concurrents-avec-bigquery/
  21. 21. Bon, il y a du boulot. Mais par où commencer ?
  22. 22. Comment se charge une page web ? BACK END FRONT END Connection/réseau Serveur Navigateur L’optimisation peut donc se faire à différents niveaux !
  23. 23. Chargement et affichage… https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4
  24. 24. Chargement et affichage…et UX https://web.dev/vitals-tools/
  25. 25. Chargement et affichage… https://boris.schapira.dev/2020/05/core-web-vitals-qu-en-penser/
  26. 26. Identifier les problèmes : Google Analytics Le principal problème : GA n’a pas beaucoup de données
  27. 27. Qu’en est-il des visiteurs ?
  28. 28. Comment améliorer le temps de réponse du serveur ?
  29. 29. Performance Indicators Server Response Time Page Download Time Page Load Time Desktop Mobile All devices 1 400 160 4 340 3 060 120 6 110 1 570 150 4 520 Selon Google, le temps de réponse du serveur ne doit pas dépasser 200 ms.
  30. 30. Quelles sont les recommandations pour le serveur ? En 2018 : https://developers.google.com/speed/docs/insights/Server “The first step to uncovering why server response time is high is to measure. Then, with data in hand, consult the appropriate guides for how to address the problem.”
  31. 31. Quelles sont les recommandations pour le serveur ? Est-ce le serveur ? - Ajouter de la ram - Ajouter de l’espace disque - Mettre à jour PHP, etc. Est-ce la gestion du CMS ? Est-ce la base de données ?
  32. 32. Et concrètement, quelle page je dois travailler ?
  33. 33. Et concrètement, quelle page je dois travailler ?
  34. 34. Un nouveau rapport dans Google Search Console
  35. 35. Google Search Console : les pages concernées
  36. 36. Comment auditer certaines pages ?
  37. 37. Choisir ses outils Lighthouse Dareboost Chrome Dev Tools Web Page Test …
  38. 38. Explorons rapidement webpage test
  39. 39. Demo rapide : webpageTest
  40. 40. Exemple : l’express
  41. 41. Exemple : l’express
  42. 42. Exemple : l’express
  43. 43. Exemple : l’express
  44. 44. Exemple : l’express
  45. 45. Exemple : l’express Le site fait beaucoup d’appels pour des images : - Les images sont-elles compressées ? - Sont-elles à la bonne dimension ?
  46. 46. Exemple : l’express Le JavaScript représente beaucoup de poids : - sont-ils tous utilisés ?
  47. 47. Exemple : l’express On ouvre la console chrome… On utilise le Coverage.
  48. 48. Exemple : l’express On ouvre la console chrome… On utilise le Coverage. 49% est inutilisé !
  49. 49. Exemple : l’express On ouvre la console chrome… On utilise le Coverage. 49% est inutilisé ! On peut lister les scripts à nettoyer (surtout ceux hébergés chez eux).
  50. 50. Le JavaScript a un coût
  51. 51. Le JavaScript doit être parsé, compilé, executé et chargé https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4
  52. 52. Exemple pour CNN : il faut 4 secondes sur un iphone 8 pour parser/compiler le JS… Il en faut 13 pour un motorola G4 !
  53. 53. Et au fait, qu’en est-il des visiteurs ?
  54. 54. Qu’en est-il des visiteurs ?
  55. 55. L’utilisation du cache
  56. 56. Du cache à tous les niveaux… https://fr.slideshare.net/AymericBouillat/la-mise-en-cache-et-ses-secrets
  57. 57. Le cache serveur Reverse Proxy Code Base de données Ressources CMS
  58. 58. Le cache navigateur • Expires • Cache-control • Last-Modified + If- modified-since • Etag + If-None-Match A gérer dans les en-têtes http
  59. 59. Les règles du cache control https://developers.google.com/web/fundamen tals/performance/optimizing-content- efficiency/http-caching
  60. 60. Aller encore plus loin
  61. 61. Le Prebrowsing • Prédire le comportement des utilisateurs pour charger ce qu’ils auront besoin. • Une technique complémentaire au cache • https://wp-rocket.me/blog/preload-prefetch- preconnect-speed-site-browser-resource-hints/
  62. 62. Le Prebrowsing (vous en faites sans le savoir) Pour une pagination, si vous recommandez l’usage des balises link rel next (et prev) : <link rel=“next” href=“/page2.html”>  Anticiper la page 2  Précharge la page 2
  63. 63. Anticiper la navigation
  64. 64. Prédire la navigation https://github.com/guess-js/guess
  65. 65. Merci !
  66. 66. Des questions ? #SEOGoodVibes Pour les questions très techniques, il y a des spécialistes :

×