1.
1#seocampSEO CAMP Day LYON 2019
Comment transformer la performance web
en croissance et conversion utilisateur
Alexandre Thuriot

2.
2#seocampSEO CAMP Day LYON 2019

3.
3#seocampSEO CAMP Day LYON 2019

4.
4#seocampSEO CAMP Day LYON 2019
https://blog.resoneo.com/2019/04/webperf-les-cles-dun-site-beaucoup-rapide-seo-campus/

5.
5#seocampSEO CAMP Day LYON 2019
Tout le monde en parle … Less is More !

6.
6#seocampSEO CAMP Day LYON 2019
Dareboost
Et ce ne sont pas les outils qui manquent
Lighthouse Page Speed Insight
WebPageTest Fasterize GTMetrix
avec des audits et recommandations toujours plus détaillés
Sans parler de plugins All In One … / WP Rocket ..

7.
7#seocampSEO CAMP Day LYON 2019
La culture de la performance web ?
Webperf = Fonctionnalité ?
La performance Web ne consiste pas seulement à comprendre ce qui fait qu'un site
est rapide. Il s'agit de sensibiliser les développeurs et les non-développeurs que c’est
essentiel pour le business.
La performance est une fonctionnalité et doit être priorisée en tant que telle !
= La webperf est priorisée quand quelqu’un arrive à démontrer que les concurrents sont meilleurs.

8.
8#seocampSEO CAMP Day LYON 2019
La priorisation de la webperf chez le client …
La priorisation doit être objective et basée sur des hypothèses mesurables !
Dans ces conditions la performance web est généralement laissée aux développeurs qui s’ils le souhaitent peuvent prendre cette
responsabilité. En pratique, les développeurs se concentrent sur la qualité et la delivrabilité des demandes.
La performance web n’est jamais priorisée car n’étant pas monitorée il est pour beaucoup trop complexe de déterminer son R.O.I

9.
9#seocampSEO CAMP Day LYON 2019
Comment créer une culture webperf ?
Comprendre, Auditer, Mesurer, Séduire, Améliorer, Evaluer
Expliquer le Pourquoi !

10.
10#seocampSEO CAMP Day LYON 2019
Qui doit assumer les optimisations ?
Travailler la webperf nécessite de travailler sur toutes les étapes de construction d’’une requête http : DNS Réseau / Hébergement / Cache / Développements / CDN / Images .
C’est pourquoi la mise en place d’une stratégie d’amélioration continue de la performance web doit inclure tous les métiers de l’entreprise qui interagissent avec le site
web. (Admin système / Devs / SEO / UX / Marketing / Sales …)
Périmètre de la performance web

11.
11#seocampSEO CAMP Day LYON 2019
Time To First Byte : 1er octet reçu par le
navigateur, c’est à dire la vitesse à
laquelle le serveur renvoi le premier
octet de donnée.
TTFB
Il s’agit de la spmmes des ressources
téléchargés par le navigateur du client
pour afficher la page (html, images, js,
css …)
Poids des pages
correspond au moment ou les premiers
éléments de la page apparaissent à l’écran
Start Render
Somme des ressources téléchargeés par
le navigateur pour executer le rendu et le
tracking de la page demandée.
Nombre de requêtes
Etape 1 : suivre des KPI
Les premiers éléments à suivre
Simple à suivre / simple à expliquer

12.
12#seocampSEO CAMP Day LYON 2019
Etape 2 : La perception de la performance
Auditer la cinématique de chargement des pages
Le Speed Index met en lumière le
rythme auquel les éléments au-
dessus de la ligne de flottaison
s’affichent. Cet indice de
performance de chargement de
page indique à quelle vitesse le
contenu d'une page commence à
être visible. Plus le score est proche
de zéro, mieux c'est.
Speed Index
> améliorer vos conversions

13.
13#seocampSEO CAMP Day LYON 2019
https://requestmap.webperf.tools/
Request Map Generator
On commence par quoi ?
= A faire sur son site / ses soncurrents !

14.
14#seocampSEO CAMP Day LYON 2019
Benchmark
Moyenne du Web
Poids moyen d’une page web en 2018
HTTP Archive
Répartition des ressources
Cumul du poids des ressources téléchargées par
un navigateur (après compressions)
Images 45%
Javascript 35%
Font 10%
CSS 5%
Selon Dareboost, une page web génère en moyenne 122 requêtes
= A faire sur son site / ses soncurrents !

15.
15#seocampSEO CAMP Day LYON 2019
CrUX : Chrome User Experience
https://web.dev/chrome-ux-report-data-studio-dashboard
= A faire sur son site / ses soncurrents !

16.
16#seocampSEO CAMP Day LYON 2019
Créer une matrice avec toutes vos données et appuyez sur les points en souffrance vs concurrence
Passer en mode
Quick Wins

17.
17#seocampSEO CAMP Day LYON 2019
Gestion des images : Lancer un audit
= permet d’avoir un score de la gestion des images ; mais surtout permet d’avoir un objectif chiffré

18.
18#seocampSEO CAMP Day LYON 2019
Les images
pour les nuls
▪ Optimisation de la compression
▪ Sélection du format d’image
▪ Taille optimale
▪ Support des navigateurs
▪ Privilégier WebP
▪ Téléchargement de l’image optimisée
en 1 clic

19.
19#seocampSEO CAMP Day LYON 2019
API CDN
• Les CDN d’images sont initialement utilisés pour
localiser les images au plus proche de
l’internaute.
• Depuis quelques temps, il est possible d’utiliser les
CDN comme un service d’optimisation et
traitement avec des fonctionnalités difficiles à
reproduire en interne.
• Pour quelques euros par mois, cela permet de
mettre ses ressources sur des fonctionnalités
coeur-business.
Content Delivery Network

20.
20#seocampSEO CAMP Day LYON 2019
Optimiser
Le chargement
▪ Suppression librairie Javascript
▪ <img src =‘’ dans la page (SEO)
▪ Fonctionne aussi sur les <iframe>
En fonction du device, de la taille de l’écran, du réseau et
de l’interraction utilisateur : le navigateur préchargera de
façon dynamique les images.

21.
21#seocampSEO CAMP Day LYON 2019
Javascript
Processing Time
57%
Third Party
Code
Influence du JS
100 KB de Javascript
augmente en moyenne le
Start To Render d’1 seconde.
= Limiter les ressources Javascript au strict minimum !

22.
22#seocampSEO CAMP Day LYON 2019
Centraliser la gestion de vos scripts
Utilisation d’un TMS (Tag Manager Service)
▪ Appels Asynchrones des librairies JS
▪ Configuration dynamique
▪ Ajout / Suppression / Planification des scripts
▪ Configuration à la page
▪ 0 devs

23.
23#seocampSEO CAMP Day LYON 2019
JS : Mise au régime !
▪ Code Coverage (Green / Red) via la console
du navigateur (F12)
▪ Segmenter l’appel aux ressources JS / CSS en
fonction du pattern des pages
▪ Limiter les librairies tierces
▪ Utiliser les dernièers versions des librairies
▪ Favoriser les développements natifs

24.
24#seocampSEO CAMP Day LYON 2019
Single Point Of Failure
La majorité des sites Internet exploitent les Polices héberées sur Google Fonts.
En cas de problème réseau cela peut impacter fortement le rendu de la page.
Le SPOF …

25.
25#seocampSEO CAMP Day LYON 2019
Perdre 20% de poids en 10min …
Utiliser la compression Brotli à la place de Gzip
> S’installe très simplement sur Apache / Ngnix. Faites la demande à votre admin système ou votre hébergeur.

26.
26#seocampSEO CAMP Day LYON 2019
… https – Keep-Alive et résolution DNS
Le fait de ne pas activer le
Keep-Alive en https est
catastrophique.
A chaque appel d’une
ressource sur le site le
navigateur revalide toutes la
chaîne SSL Negociation.
Cela ajoute entre 150 et 200
ms par fichiers au temps de
téléchargement global.
Lorsqu’il est activé, le Keep-
Alive permet au navigateur
de valider une seule fois le
protocole SSL.

27.
27#seocampSEO CAMP Day LYON 2019
… https - http/2 & Keep Alive
Avant
Après

28.
28#seocampSEO CAMP Day LYON 2019
Solution All in One :
AMP Instant Everywhere
▪ Format dédié mobile
▪ Priorisation chargement des
ressources pour le 1er écran
▪ Limitation Javascript
▪ Mécanisme de cache distribué
▪ Images Webp
▪ Compression Brotli
▪ …
> Migrer vers AMP peut être une solution pour améliorer sa webperf mobile !

29.
29#seocampSEO CAMP Day LYON 2019
Cela me rapporte
combien d’améliorer
ma webperf ?

30.
30#seocampSEO CAMP Day LYON 2019
Les gains statistiques
La performance web comme fonctionnalité améliore l’usage
Aller / Retour entre la SERP et la page de votr
site. Analyse de la pertinence du résultat par
l’analyse comportementale de l’internaute.
(Augmentation des analytics)
PogoSticking
La page se chargeant rapidement, la fonction de
la page est affichée et comprise plus rapidement
par l’internaute. Celui étant moins stressé, gagne
en confiance ett sera plus facile à séduire.
Taux de conversion
L’optimisation du site par la suppression de
l’inutile permet de simplifier son architecture
dans le but de garder uniquement l’essentiel.
Connaissance technique
Comportement de l’internaute sur votre site.
Fait-il une interaction supplémentaire ?
Taux de rebond métier
> Considérer toutes les fonctionnalités de votre site comme un ‘one click add to cart”
Utiliser ces indicateurs pour enclencher l’étape 2 et aller plus loin dans l’optimisation

31.
31#seocampSEO CAMP Day LYON 2019
https://medium.com/dev-channel/a-netflix-web-performance-case-study-c0bcde26a9d9

32.
32#seocampSEO CAMP Day LYON 2019
https://medium.com/dev-channel/a-pinterest-progressive-web-app-performance-case-study-3bd6ed2e6154

33.
33#seocampSEO CAMP Day LYON 2019
Migration AMP
https://www.thinkwithgoogle.com/intl/fr-fr/inspirations/success-stories/greenweez-booste-de-80-son-taux-de-conversion-mobile-avec-amp/

34.
34#seocampSEO CAMP Day LYON 2019
Maintenir les performances pour de
nombreux sites est tout aussi
difficile, sinon plus difficile que
d’être le plus rapide une fois
40% des grandes marques
régressent sur leurs performances
après 6 mois.
Katie Hempenius Addy Osmani
https://www.youtube.com/watch?v=YJGCZCaIZkQ

35.
35#seocampSEO CAMP Day LYON 2019
Comment éviter de chuter et
grossir à nouveau ?

36.
36#seocampSEO CAMP Day LYON 2019
Définition d’un budget de Performance

37.
37#seocampSEO CAMP Day LYON 2019
Intégration continue / build
Test de non regression du contrat de performance à intégrer dans le process de mise en production

38.
38#seocampSEO CAMP Day LYON 2019
MERCI AUX SPONSORS

39.
39#seocampSEO CAMP Day LYON 2019
Question Mug
● Quel paramètre faut-il déclarer au
moment de l’appel des Google Fonts
pour afficher son contenu 1s plus
rapidement ?