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 ?
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
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 ?
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).
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
