L’essor des usages mobiles change la donne du Web, entraînant une nouvel intérêt pour l’optimisation de l’expérience utilisateur, à commencer par la Performance Web. Google multiplie les expérimentations sur ce sujet-clé pour l’entreprise, au risque de souffler un vent de panique sur le marché. Mais pour appréhender la performance d’un site web, encore faut-il savoir quels indicateurs collecter, comment les interpréter et surtout comment les améliorer. Nous verrons également ensemble comment cette petite révolution va nécessiter, comme dans le reste de l’activité SEO, de l’agilité, de la veille, et une vraie volonté d’expérimentation. En route pour un Web plus rapide !

1. 1#seocamp
Performance Web :
vers la Speed Update,
un pas après l’autre

2. 2#seocamp
Boris Schapira

3. 3#seocamp
Google et la
Performance Web

4. 4#seocamp
Google et la performance
Quelques dates pour se situer
2009 2010 … 2014 2015 2016 2017 2018
PageSpeed
Ranking WebPerf
Mobilegedon
Labels « Red Slow » & « Slow to load »
Mobile-First
CrUX dans PageSpeed
AMP
CrUX Report
Speed Update

5. 5#seocamp
▪ « Ne jamais livrer une fonctionnalité qui nous ralentit »
▪ Toujours un sujet fondamental de communication,
même une fois Chrome en position de leadership
▪ De l’investissement sur la performance: outils,
frameworks, protocoles, services de conseils…
Une question de valeurs
La performance Web a toujours été au cœur des actions de Google

6. 6#seocamp
« Speed isn’t just a feature,
it’s the feature »
« The Google Gospel of Speed », Urs Hoelzle, 2012

7. 7#seocamp
▪ Des optimisations qui mènent à :
 Une réduction des coûts d’exploitation
 Une augmentation des gains publicitaires
▪ Évolution des usages, design de l’expérience mobile
▪ Essor des plateformes de contenus
▪ Capture des marchés émergents
▪ Croissance interne forte
Une question de business
La performance comme un impératif fondamental de fonctionnement

8. 8#seocamp
Comment se mesure
la performance web ?

9. 9#seocamp
« Qualité Web », Élie Sloïm et Laurent Denis
Chaque site propose une expérience différente

10. 10#seocamp
Une variété d’indicateurs
Chaque projet doit trouver le jeu d’indicateurs qui lui convient
▪ Indicateurs collectés côté navigateur principalement
▪ Issus du navigateur ou basés sur l’analyse vidéo
▪ Collectés auprès de vrais utilisateurs, ou dans un
environnement synthétique
▪ Indicateurs d’affichage, d’interactivité
▪ Indicateurs techniques ou créés par le métier
▪ Temps de chargement

11. 11#seocamp
▪ Time To First Byte (TTFB) : « temps de réponse serveur »
+ latence × 2
▪ Start Render : la page n’est plus « blanche »
▪ Visually Complete : partie visible de la page est
entièrement rendue
▪ Dom Content Loaded (DCL) : fin du chargement
principal (y compris les scripts)
Les indispensables « chargement »
Les indicateurs à connaître absolument

12. 12#seocamp
Speed Index
Mesure la progressivité de l’affichage
100 %90 %80 %60 %
60 % 60 % 60 % 100 %
400 ms 800 ms 1200 ms 1600 ms 2000 ms
0 %
0 %

13. 13#seocamp
Speed Index
Mesure la progressivité de l’affichage
0
10
20
30
40
50
60
70
80
90
100
Exemple A Exemple B

14. 14#seocamp
Speed Index
Mesure la progressivité de l’affichage
100 %90 %75 %60 %
60 % 60 % 60 % 100 %
400 ms 800 ms 1200 ms 1600 ms 2000 ms
0 %
0 %
Speed Index : 1100
Speed Index : 1280

15. 15#seocamp
▪ Nombre de requêtes : impact sur la latence HTTP
▪ Poids total : consommation de données et de CPU*
▪ Métriques personnalisées : répondent à la fois à une
problématique de mesure de contenus et de temps.
Exemple : « affichage du contenu principal »
* Attention au poids du JavaScript !
Les métriques de contenu
Les indicateurs à connaître absolument

16. 16#seocamp
Moment auquel est rendu le
premier élément de contenu du
DOM : texte, image ou élément
<canvas>.
Mesuré via Google Chrome
First Contentful
Paint
La métrique au cœur de PageSpeed Insights

17. 17#seocamp
Base de données anonymes collectées via Google Chrome
Chrome UX Report (CrUX)

18. 18#seocamp
▪ Clé en main : vision RUM sans avoir à déployer quoi
que ce soit sur son site… ou celui de ses concurrents
▪ Pointu : nécessite des bases en statistiques et
manipulation de données complexes mais à partir
de là, pas mal de choses sont possibles.
Forces du CrUX
Une base de données géante !

19. 19#seocamp
En RUM, toujours considérer la distribution dans son ensemble.
Attention, ici les données sont ramenées à 100 % par form factor. Requête Big Query

20. 20#seocamp
▪ Exhaustivité : peu de sites concernés par pays
▪ Agrégations : par défaut, par pays, et sur des périodes
de temps non-contrôlées
▪ Modèle de données : limité en portée et en historique,
mais Big Query donne aussi accès aux données HTTP
Archive depuis 2010
Limitations du CrUX
Tout n’est pas rose au pays du Chrome UX Report

21. 21#seocamp
« Vidéo : optimisez vos MP4 pour de meilleures performances », Boris Schapira

22. 22#seocamp
Performance Web :
commencez dès lundi

23. 23#seocamp
• Éviter l’indicateur de « Page Load Time »
(lui préférer le « Document Content Loaded Time » ou un Custom Timing)
• Échantillonner à 100% en dessous de 20k PV/jour
• Segmenter pour analyser : matériel, navigateur, FAI…
Du RUM avec Google Analytics
Pas besoin d’être un expert JS pour mettre en place du monitoring

24. 24#seocamp

25. 25#seocamp
Chaque localisation est un portefeuille de contextes différents

26. 26#seocamp
• Contextes limités mais maitrisés
• Permettent de créer un contexte reproductible de
mesure permettant de valider des hypothèses
• Stabilité suffisante pour permettre la levée d’alertes
• Vision concurrentielle, en parcours
• Dareboost, mais pas que…
Attention : no free launch
Du synthétique pour faire levier
Contrôler, influer, proposer, tester, valider

27. 27#seocamp
Expérimentez
Procédez par élimination, par
blocage, testez vos scripts tiers,
soyez curieux·ses !

28. 28#seocamp
• Impliquez l’ensemble des équipes dans les
problématiques abordées
• Valorisez une culture de l’itération : certaines
optimisations ne feront sens que dans un tout
• Soyez patient·e·s et ne croyez pas aux formules
magiques !
Transverses et agiles
Une problématique complexe qui nécessite l’implication de tou·te·s

29. 29#seocamp
Merci.

30. 30#seocamp
● Un format vidéo l’a emporté sur les
autres il y a quelques années. Vous
devriez toujours l’utiliser plutôt que
d’avoir recourt à des GIF animés.
Question mug !
On ne va pas se quitter comme ça…

31. 31#seocamp
● Un format vidéo l’a emporté sur les
autres il y a quelques années. Vous
devriez toujours l’utiliser plutôt que
d’avoir recourt à des GIF animés.
● Mais vu que le sujet est ici la
performance… quel est le troisième
mot de ce paragraphe ?
Question mug !
On ne va pas se quitter comme ça…

32. 32#seocamp
MERCI AUX SPONSORS