- L'importance du sujet de la performance web - Métriques et KPI - Outils de mesure de la performance - Approche organisationnelle - Budget de performance - Automatisation

1. #seocamp 1@LoukilAymen
Performance Web
Optez pour une approche qui marche
Aymen Loukil
Consultant SEO International

2. #seocamp 2@LoukilAymen
Le web appartient aux
utilisateurs et non pas
aux éditeurs..

3. #seocamp 3@LoukilAymen
Le performance web impacte
drastiquement l’expérience
utilisateur #UX

4. #seocamp 4@LoukilAymen
50% des sites web
mettent 13s à se charger
STRESS

5. #seocamp 5@LoukilAymen

6. #seocamp 6@LoukilAymen
source :newsroom.cisco.com
Mauvaise performance, facteur d’exclusion

7. #seocamp 7@LoukilAymen
Être là peu importe le contexte de vos clients
North Carolina - source : people.com

8. #seocamp 8@LoukilAymen

9. #seocamp 9@LoukilAymen
Les sites rapides, sont mieux
appréciés* par Google #SEO
*moins coûteux à crawler

10. #seocamp 10@LoukilAymen
Satisfaction clients
Notoriété marque
CA €€
Nb de sessions
Bounce rate
Crawl rate
Coût infrastructure
Forfait internet
Impact

11. #seocamp 11@LoukilAymen
Mauvaise
compréhension du
sujet

12. #seocamp 12@LoukilAymen
“On a pas de métriques de performance suivies dans le temps, mais lorsqu’on teste notre
site depuis les locaux ou même depuis chez nous, il semble
très rapide… En plus, on a jamais eu de
réclamations de nos utilisateurs comme quoi c’est lent !”
- Une entreprise Digitalement Transformée..

13. #seocamp 13@LoukilAymen
Fonctionnalité 1 Fonctionnalité 2 Fonctionnalité n Audit
performance
Développer rapidement un code lent..

14. #seocamp 14@LoukilAymen
La
Performance
est un sujet
culturel

15. #seocamp 15@LoukilAymen
- Vision stratégique
- Management
- Maturité technique
- Choix frameworks
- Design / UI / UX
- Outils et culture de la qualité

16. #seocamp 16
L’approche qui marche

17. #seocamp 17@LoukilAymen
Une équipe de performance dédiée
- Durée de vie : 3 mois*
- Objectifs :
- Faire le point!
- Eduquer / Insuffler
- Définition des process
- Mise en place de
tooling
- Définir les KPIs
A terme, dans chaque équipe la performance devient un critère
d’acceptance et de qualité.

18. #seocamp 18@LoukilAymen
- Se donner le temps pour apprendre
- Tester des choses
- S'inspirer des autres réussites
- Ne parlez pas trop, montrez
- Se faire accompagner
Éduquer et insuffler la culture de performance

19. #seocamp 19@LoukilAymen

20. #seocamp 20@LoukilAymen
Métriques quantitatives Métriques visuelles
Métriques d'interactivité
Nombre de requêtes
Taille de la page
PageSpeed score
Lighthouse perf Score
First Contentful Paint
First Meaningful Paint
Speed Index
Visually Complete
Time To Interactive
First Input Delay
First CPU Idle
Métriques customs
?

21. #seocamp 21@LoukilAymen
Priorisez le haut

22. #seocamp 22@LoukilAymen
Métriques customs
Time To Hero Image
Time To Hero Text
Time To First Tweet

23. #seocamp 23@LoukilAymen
Corréler les métriques de performance avec les métriques business

24. #seocamp 24@LoukilAymen
Tooling

25. #seocamp 25@LoukilAymen
Outils performance web
Outils synthétiques
Outils terrain - RUM
● Chez nous
● Tester sur un environnement
maîtrisé
● Débugger en développement
(QA)
● Comparer dans le temps
● Chez les utilisateurs
● Voir comment ça se comporte
dans la vraie vie
● Se mettre à l’épreuve de
différents contextes utilisateurs
(localisation, connexion et
latence, type support)

26. #seocamp 26@LoukilAymen
Outils performance web
Outils synthétiques
Outils terrain - RUM

27. #seocamp 27@LoukilAymen
Budget de performance

28. #seocamp 28@LoukilAymen
Budget Global
IMAGES
CSS
JavaScript
Nombre de requêtes
600Kb max, 35 requêtes, 300kb de JS
FMP

29. #seocamp 29@LoukilAymen
Fonctionnalité
1
Fonctionnalité
2
Fonctionnalité
n
Audit
performance
? ? ?
● charge plusieurs scripts ?
● augmente le nombre de requêtes BDD/page ?
● fait des appels à des APIs externes ?
● fait des opérations complexes ?
● explose notre budget de performance ? On serait à combien ?
1-Se poser les bonnes questions en amont
?

30. #seocamp 30@LoukilAymen
Tout n’a pas la même importance en contenu
Contenu Core
Améliorations
Le reste
HTML et CSS essentiels, expérience sans JavaScript
Images, polices, CSS plus beau, JavaScript, Widgets, Animation
Analytics, publicité, AB testing, 3rd party scripts..
Indispensable
Moins important
Faible importance

31. #seocamp 31@LoukilAymen
Fonctionnalité
1
Tester la
performance
(OS)
Corriger
2- Prendre le temps pour développer un code rapide
?

32. #seocamp 32@LoukilAymen
Home
Listing
ProductResult
pass / fail
Write code
CI
If passes
Go LIVE !!
Automatiser, pérenniser

33. #seocamp 33@LoukilAymen
Intégrer la mesure dans l’intégration continue (CI)
https://github.com/ebidel/lighthouse-ci

34. #seocamp 34@LoukilAymen

35. #seocamp 35@LoukilAymen
Empêcher la livraison si on dépasse le budget

36. #seocamp 36@LoukilAymen
Customiser Lighthouse avec vos propres audits !
aymen-loukil.com/blog/creer-des-custom-audits-avec-lighthouse

37. #seocamp 37@LoukilAymen
Fonctionnalité
1
Tester la
performance
(OS)
Corriger
Livrer et tester
(RUM)
3- Valider post livraison avec la RUM
?
1
2 3

38. #seocamp 38@LoukilAymen
Collecte des métriques RUM - CrUX
FCP Device Connection typeOnload

39. #seocamp 39@LoukilAymen
Comparer et benchmarker
https://www.aymen-loukil.com/blog/top-sites-ecommerce-performance-2018/

40. #seocamp 40@LoukilAymen
Dashboard Data Studio + CrUX

41. #seocamp 41@LoukilAymen
source: developer.google.com
3- Valider post livraison avec la RUM

42. #seocamp 42@LoukilAymen
Tips pratiques webperf
https://www.slideshare.net/aymenloukil/

43. Aymen Loukil
#TechnicalSEO #webperf #speaker #entrepreneur #ex-dev
Consultant SEO International
https://www.aymen-loukil.com @LoukilAymen