Les signaux web essentiels ou Web VItals, métriques d'expérience utilisateur proposées par Google pour mesurer et évaluer la qualité de l'expérience web.

1. Jeudi 3 juin 2021 | Événement en ligne
L’Événement Search Marketing
TECHNICAL SEO
1
RÉUSSIR LES SIGNAUX WEB
ESSENTIELS (WEB VITALS)
Aymen Loukil
@LOUKILAYMEN

2. @LoukilAymen
Le web grossit
2

3. @LoukilAymen
37% du code JavaScript
envoyé n’est pas utilisé!
Et parfois inutilement
3

4. @LoukilAymen
Lenteur = stress
4
EEG sur un site web EEG sur le même site web ralenti

5. @LoukilAymen
La responsabilité de qui?
5
Développeurs Product Owners Marketing Designers SEOs Webmasters Editeurs
Fournisseurs
d’hébergement
Web
Navigateur
Internet
Constructeurs de
smartphones
Experts juridiques CEOs Créateur de
frameworks
Moteur de
recherche
Régies
publicitaires
Fournisseurs
d’accès Internet
Testeurs (QA) Gouvernements ONG Consortiums Web VOUS!

6. @LoukilAymen
La webperf c’est compliqué
6

7. @LoukilAymen
Une tentative de simplification
7

8. @LoukilAymen
Les bénéfices de cette simplification
8
● Métriques cibles unifiées
● Conseils unifiés
● Même base d’évaluation
● Une représentation basique mais suffisante d’une expérience

9. @LoukilAymen
Comment mesurer les Web Vitals
9
Outils LAB Outils terrain

10. @LoukilAymen
Comment mesurer les Web Vitals
10
Lab tools Field tools
Adapté au debug et à la mesure
de performance sur des
environnements contrôlés.
Mais ne reflète pas ce que les
vrais utilisateurs/utilisatrices
vivent.
Excellent pour capturer la vraie
expérience des utilisateurs.
Confirme ou infirme les
tendances sur le lab.
Mais ne permet pas de débugger
les problèmes.

11. @LoukilAymen
Largest Contentful Paint - LCP
11
“Censé” mesurer, quand l’
élément le plus grand (plus
important) est affiché.
#chargement

12. @LoukilAymen
Quel élément est capturé comme LCP?
12

13. @LoukilAymen
Quel élément est capturé comme LCP?
13

14. @LoukilAymen
Et si c’était pas l’élément le plus important?
14

15. @LoukilAymen
Comment optimiser le LCP ?
15
● Optimiser le Time To First Byte (temps de réponse serveur)
○ Serveur lent = tout est lent!
● Réduire la taille des ressources envoyées
○ Supprimer ce qui n’est pas utilisé
○ Compresser
○ Minifier
○ Srcset pour les images reponsives
● Prioriser les ressources de l’élément candidat LCP
○ Image? preload la
○ Police? preload la
○ A besoin de CSS? Inline la partie critique

16. @LoukilAymen
First Input Delay - FID
16
Mesure l’éventuel délai*, qu’un
utilisateur rencontre en interagissant
avec la page pendant le chargement.
#Interactivité
* >50ms

17. @LoukilAymen
Le FID a besoin d’un binôme “LAB”
17
Interactivité LAB Intéractivité terrain
TBT
Total Blocking Time First Input Delay
GOOD POOR
300 ms
The sum of the extra times of all the long tasks
(>50 ms on the main thread)
The delay user got when interacting with the page
FID

18. @LoukilAymen
Les tâches longues, le coupable n°1
18
image credit Chenay Tsai, Demian Renzulli

19. @LoukilAymen
Identifiez les avec ChromeDevTools
19

20. @LoukilAymen
Comment optimiser le TBT/FID
20
● Supprimer le code JavaScript non utilisé
○ Librairies non utilisées/gourmandes
○ Remplacer avec du code natif
○ Envoyer un code par type de page
○ Envoyer de fichiers plus petits
● Différer le JavaScript secondaire
○ Chargez les au bon moment (livechat?)
● Libérer le processus principal de la page
○ Refactoriser le code
○ Mettre en place un Service Worker
● Attention aux scripts tiers!

21. @LoukilAymen
Cumulative Layout Shift - CLS
21
Évalue la stabilité visuelle de la
page Web pendant le chargement.
Les éléments sont chargés de
manière asynchrone, ceux qui
arrivent en retard font bouger les
précédents.
#stabilité

22. @LoukilAymen
Quels sont les éléments instables?
22

23. @LoukilAymen
Vidéo ou filmstrip pour mieux comprendre
23

24. @LoukilAymen
Comment optimiser le CLS?
24
● Spécifier les dimensions des éléments:
○ Images
○ Videos
○ Embeds/iframes
○ Ads et bannières
● Pré-réserver l’espace des éléments:
○ Propriété: CSS aspect-ratio
● Ne jamais injecter des éléments sans l’interaction de l’utilisateur
● Utiliser les transform pour les animations
● Assurez vous que les polices se chargent rapidement
○ Preload + font-display:optional

25. @LoukilAymen
Pattern classique
25

26. @LoukilAymen
Démarche d’optimisation Web Vitals
26
Audit LAB / Terrain
Identifier les
problèmes par type
de page
Lister les
optimisations par
type de page
Implémenter &
tester dans le LAB
Ecrire des User
Stories atomiques
et claires
Go production!
Observer l’impact
sur les données
terrain
Répéter et itérer!
Tools: Lighthouse, WPT, PSI, DevTools,
Search Console report
Lighthouse CI Dashboard:
g.co/chromeuxdash
Une optimisation à la
fois!
Incremental
improvements

27. @LoukilAymen
Notes de la fin
27
● Web Vitals sont des métriques centrés sur l’utilisateur
● Ce qui est bien pour l’utilisateur, l’est pour le SEO
● Ce n’est que le début, ça va évoluer
● Pas de panique, itérer les petis-gains dans le long terme
● Une bonne UX est vitale pour la santé d’un business

28. @LoukilAymen
Aymen Loukil
International SEO Consultant
#TechnicalSEO #webperf
https://www.aymen-loukil.com
@LoukilAymen