Core web vitals pour unifier UX et SEO conférence présentée par Stephane Rios lors du SEO Camp'us paris 2020

1. Core Web Vitals, pour unifier UX & SEO
SEO Campus Paris 2020

2. Sommaire
● Qui suis-je ?
● Les Core Web Vitals dans la webperf
● Comment les mesurer ?
● Impacts SEO
● A retenir

3. Présentation
Business
Leader européen du FEO
(Front End Optimization)
Société
Éditeur SaaS français créé
en 2011, lancé en 2014
Fondateur
Stéphane Rios,
ex-CTO de Rueducommerce
Data
Plus d’un milliard de
pages traitées par mois
En cumulé...
31 ans économisés chaque
mois
Partenaires

4. CDN Next Gen
Une plateforme hautement tolérante aux pannes, architecture complètement
distribuée
Client web Serveur d’origine
2
4
1
3
Fasterize fonctionne comme un proxy dans le cloud, qui réécrit à la volée le code HTML.

5. CDN Next Gen
Une plateforme hautement tolérante aux pannes, architecture complètement
distribuée
Client web Serveur d’origine
2
4
1
3
Fasterize fonctionne comme un proxy dans le cloud, qui réécrit à la volée le code HTML.
FEO

6. CDN Next Gen
Une plateforme hautement tolérante aux pannes, architecture complètement
distribuée
Client web Serveur d’origine
2
4
1
3
Fasterize fonctionne comme un proxy dans le cloud, qui réécrit à la volée le code HTML.
FEO Conseil Webperf

7. CDN Next Gen
Une plateforme hautement tolérante aux pannes, architecture complètement
distribuée
Client web Serveur d’origine
2
4
1
3
Fasterize fonctionne comme un proxy dans le cloud, qui réécrit à la volée le code HTML.
FEO Conseil Webperf
Anti-DDOS / WAF

8. CDN Next Gen
Une plateforme hautement tolérante aux pannes, architecture complètement
distribuée
Client web Serveur d’origine
2
4
1
3
Fasterize fonctionne comme un proxy dans le cloud, qui réécrit à la volée le code HTML.
FEO Conseil Webperf
Anti-DDOS / WAF EdgeSEO

9. Webperf & SEO
Les fonctionnalités SEO
● Performance générale du site
● Cache spécifique pour les bots
● CDN
● Gestion des redirects HTTP ⇢ HTTPS
● Récupération des logs (⇢ OnCrawl /
Botify)
● URL Rewriting (in-page / proxy)
● Gestion du robots.txt

10. Qu’est-ce que les Core Web Vitals ?

11. Core Web Vitals

12. 2009 - 2010
Speed = (small) ranking factor

13. Google + 🚀 = ❤

14. Google + 🚀 = ❤

15. Google + 🚀 = ❤

16. C’est quoi
un site rapide ?

17. Métriques
0.2 s 1 s0.9 s0.7 s0.5 s0.3 s0 s 2 s 3 s 5 s

18. Métriques
0.2 s 1 s0.9 s0.7 s0.5 s0.3 s0 s 2 s 3 s 5 s
TTFB
DCL
# request
# noeuds DOM
poids
onload

19. Métriques
0.2 s 1 s0.9 s0.7 s0.5 s0.3 s0 s 2 s 3 s 5 s
TTFB
DCL
FCP SI
SR/FP LCP
# request
# noeuds DOM
poids
onload
VC
FMP
CLS

20. Métriques
0.2 s 1 s0.9 s0.7 s0.5 s0.3 s0 s 2 s 3 s 5 s
TTFB
DCL
FCP SI
SR/FP LCP FCI
FID TBT
CLS
TTI
# request
# noeuds DOM
poids
onload
VC
FMP

21. Métriques
0.2 s 1 s0.9 s0.7 s0.5 s0.3 s0 s 2 s 3 s 5 s
TTFB
DCL
FCP SI
SR/FP LCP FCI
FID TBT
CLS
TTI
# request
# noeuds DOM
poids
onload
VC
FMP
● custom metrics
○ fin d’affichage des Hero images / sliders
○ click sur le bouton « ajouter au panier »
○ choix d’un produit dans une liste
● notion fonctionnelle + technique

22. Métriques
0.2 s 1 s0.9 s0.7 s0.5 s0.3 s0 s 2 s 3 s
TTFB FCP SI
SR/FP LCP FCI
5 s
FID
DCL
TBT
CLS
TTI

23. PageSpeed Insights

24. PageSpeed Insights
Field
Lab

25. PageSpeed Insights
Field
Lab
RUM
Synthetic

26. Synthetic Monitoring

27. RHUM

28. la-métrique-webperf-que-je-mesure

29. moyenne
la-métrique-webperf-que-je-mesure

30. moyenne
9xème
percentile
médiane
(50ème
percentile)
la-métrique-webperf-que-je-mesure

31. moyenne
9xème
percentile
médiane
(50ème
percentile)
ceux qui vivent dans les
datacenters
la-métrique-webperf-que-je-mesure

32. la-métrique-webperf-que-je-mesure

33. la-métrique-webperf-que-je-mesure

34. Métriques
0.2 s 1 s0.9 s0.7 s0.5 s0.3 s0 s 2 s 3 s
TTFB FCP SI
SR/FP LCP FCI
5 s
FID
DCL
TBT
CLS
TTI

35. Core Web Vitals

36. Core Web Vitals

37. LCP
0 s 0.5 s 1 s 1.1 s 1.5 s
FCP LCP

38. Core Web Vitals

39. FID (TBT)
Script execution
Long Task
Requête
t
FCP
t0
TTI
(...5s …)
1 2 3
Main
Thread
FID1
FID2
FID3
TBT

40. FID (TBT)
t

41. FID (TBT)
Requête
t
t0

42. FID (TBT)
Script execution
Long Task
Requête
t
t0
Main
Thread

43. FID (TBT)
Script execution
Long Task
Requête
t
FCP
t0
Main
Thread

44. FID (TBT)
Script execution
Long Task
Requête
t
FCP
t0
1
FID1
Main
Thread

45. FID (TBT)
Script execution
Long Task
Requête
t
FCP
t0
1 2
Main
Thread
FID1
FID2

46. FID (TBT)
Script execution
Long Task
Requête
t
FCP
t0
1 2 3
Main
Thread
FID1
FID2
FID3

47. FID (TBT)
Script execution
Long Task
Requête
t
FCP
t0
TTI
(...5s …)
1 2 3
Main
Thread
FID1
FID2
FID3

48. FID (TBT)
Script execution
Long Task
Requête
t
FCP
t0
1 2 3
Main
Thread
FID1
FID2
FID3
TBT
TTI
(...5s …)

49. Core Web Vitals

50. CLS
PUB

51. CLS
∑layout shift score = ∑(impact fraction x distance fraction)
PUB

52. CLS
∑layout shift score = ∑(impact fraction x distance fraction)
PUB
impact fraction = 0.6

53. CLS
∑layout shift score = ∑(impact fraction x distance fraction)
PUB
distance fraction = 0.2

54. CLS
∑layout shift score = ∑(impact fraction x distance fraction)
PUB
LS = 0.6 x 0.2 = 0.12

55. Mesurer les Core Web Vitals

56. ● Chrome
● TestMySite
● Google Analytics
● Search Console
● PageSpeed Insights
● Lighthouse
● CrUX / BigQuery
Du moins technique au plus technique

57. Dans l’écosystème Webperf
Test Synthetic RUM

58. Les outils “classiques”

59. Les outils “classiques”

60. Les outils “classiques”

61. Field Data

62. Field Data

63. la-métrique-webperf-que-je-mesure

64. la-métrique-webperf-que-je-mesure
49%
12%
39%

65. Field Data
75ème percentile

66. la-métrique-webperf-que-je-mesure
75ème
percentile

67. Les autres outils
SQL
+

68. En quoi c’est nouveau ?
En quoi c’est important ?

69. Page Experience Update
The ranking changes described in this
post will not happen before next year,
and we will provide at least six months
notice before they’re rolled out.
We're providing the tools now to get you
started (and because site owners have
consistently requested to know about
ranking changes as early as possible),
but there is no immediate need to
take action.
https://webmasters.googleblog.com/2020/05/evaluating-page-experience.html

70. Résultat 2
Résultat 3
Résultat 4
Résultat 1
Requête concurrentielle
Résultat 2
(perf à améliorer)
Résultat 3
(mauvaise perf)
Résultat 4
(très bonne perf)
Résultat 1
(très bonne perf)
Requête concurrentielle
Impact SEO ?

71. Des changements

72. Google + 🚀 = ❤
THIS WAY

73. Les attentes de vos utilisateurs mobiles
75%
66%
61%
58%
24%
La vitesse de
chargement des
pages Web
La facilité à trouver
ce que je cherche
L’adaptation du
site à mon écran
La simplicité
d’utilisation du site
Le design du site

74. Conclusion

75. Quel futur ?
Vers plus de poids et de
granularité pour le critère en
2021 ?

76. A retenir
Des métriques parmi les autres
Au même titre que l’ensemble des indicateurs
WebPerf
Améliorer ses CWV est important
Ce sont bien les données RUM (CrUX) qui sont
utilisées pour le ranking
Mesurables par pleins d’outils
Mais attention aux biais et aux définitions !
Beaucoup de travail d’optimisation
Le mieux étant d’automatiser les optimisations
Impact sur l’UX
Mais aussi potentiellement sur le SEO
Suivre l’évolution
Dans les outils, les définitions et les
usages

77. https://info.fasterize.com/lb-core-web-vitals
Dossier Core Web Vitals