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
« Speed isn’t just a feature,
it’s the feature »
« The Google Gospel of Speed », Urs Hoelzle, 2012

6.
6#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,
technologies, conseils…
Une question de valeurs
La performance Web a toujours été au cœur des actions de Google

7.
7#seocamp
▪ Réduction des coûts d’exploitation
▪ 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é serveur, et côté navigateur
▪ Indicateurs browser ou basés sur l’analyse vidéo
▪ Indicateurs collectés auprès de vrais utilisateurs, ou
dans un environnement contrôlé
▪ Indicateurs d’affichage, d’interactivité
▪ Indicateurs créés par le métier
▪ Temps de chargement

11.
11#seocamp
▪ Time To First Byte (TTFB) : « temps de réponse serveur »
+ latence × 2
▪ Début d’affichage (Start Render) : moment où la page
n’est plus « blanche »
▪ Dom Content Loaded (DCL) : fin du chargement
principal (y compris les scripts et CSS)
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
▪ 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é, 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
• Échantillonner à 100% en dessous de 20k PV/jour
• Éviter l’indicateur de « Page Load Time »
(lui préférer le « Document Content Loaded Time » ou un Custom Timing)
• Segmenter pour analyser : matériel, localisation,
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