1. Web Perf : par où
commencer ?
Madeline Pinthon – #SEOGoodVibes – 30/05/2020

2. Madeline Pinthon
• Consultante SEO chez iProspect depuis 2015
• SEO et sur twitter depuis 2009 : @razbithume
• http://www.canyouseome.com

3. La web perf… un sujet :
- technique
- UX
- SEO

4. Un lot d’annonces en 2018
1
2
3
https://webmasters.googleblog.com/search/label/speed

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. 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. Une multitude d’outils et une multitude d’indicateurs

8. Quelques comptes à suivre

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. Comment comparer
votre site aux
concurrents ?

11. Comment comparer plusieurs sites ?
https://www.dareboost.com/fr/compare

12. Comment comparer plusieurs sites ?
http://www.webpagetest.org/video/

13. Comment comparer plusieurs sites ?

14. Comment comparer plusieurs sites ?
http://www.webpagetest.org/video/

15. Les outils, c’est bien… les
utilisateurs, c’est mieux.

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. Comment comparer votre client aux concurrents ?
https://www.thinkwithgoogle.com/intl/fr-fr/feature/testmysite/

18. Comment comparer votre client aux concurrents ?

19. De nouvelles données dans un nouveau connecteur
https://twitter.com/ChromeUXReport/status/1265852602299842564

20. Comment comparer votre client aux concurrents ?
http://www.canyouseome.com/surveiller-levolution-de-la-vitesse-dun-site-et-de-concurrents-avec-bigquery/

21. Bon, il y a du boulot.
Mais par où commencer ?

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. Chargement et affichage…
https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4

24. Chargement et affichage…et UX
https://web.dev/vitals-tools/

25. Chargement et affichage…
https://boris.schapira.dev/2020/05/core-web-vitals-qu-en-penser/

26. Identifier les problèmes : Google Analytics
Le principal problème : GA n’a pas beaucoup de données

27. Qu’en est-il des visiteurs ?

28. Comment améliorer le temps
de réponse du serveur ?

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. 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. 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. Et concrètement, quelle
page je dois travailler ?

33. Et concrètement, quelle page je dois travailler ?

34. Un nouveau rapport dans Google Search Console

35. Google Search Console : les pages concernées

36. Comment auditer certaines
pages ?

37. Choisir ses outils
Lighthouse
Dareboost
Chrome Dev Tools
Web Page Test
…

38. Explorons rapidement
webpage test

39. Demo rapide : webpageTest

40. Exemple : l’express

41. Exemple : l’express

42. Exemple : l’express

43. Exemple : l’express

44. Exemple : l’express

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. Exemple : l’express
Le JavaScript représente
beaucoup de poids :
- sont-ils tous utilisés ?

47. Exemple : l’express
On ouvre la console
chrome…
On utilise le Coverage.

48. Exemple : l’express
On ouvre la console chrome…
On utilise le Coverage.
49% est inutilisé !

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. Le JavaScript a un
coût

51. Le JavaScript doit être parsé, compilé, executé et chargé
https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4

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. Et au fait,
qu’en est-il des visiteurs ?

54. Qu’en est-il des visiteurs ?

55. L’utilisation du
cache

56. Du cache à tous les niveaux…
https://fr.slideshare.net/AymericBouillat/la-mise-en-cache-et-ses-secrets

57. Le cache serveur
Reverse Proxy
Code
Base de données
Ressources
CMS

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. Les règles du cache control
https://developers.google.com/web/fundamen
tals/performance/optimizing-content-
efficiency/http-caching

60. Aller encore plus
loin

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. 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. Anticiper la navigation

64. Prédire la navigation
https://github.com/guess-js/guess

65. Merci !

66. Des questions ? #SEOGoodVibes
Pour les questions très techniques, il y a des spécialistes :