Slide 1
Slide 2
La performance, un élément clef de l’UX
Slide 3
Une mauvaise performance fait fuir
Source : https://www.soasta.com/wp-content/uploads/2017/04/State-of-Online-Retail-Performance-Spring-2017.pdf
Slide 4
Une mauvaise performance fait fuir
think with Google — février 2018 Source : https://www.thinkwithgoogle.com/marketing-resources/data-measurement/mobile-page-speed-new-industry-benchmarks/
Slide 5
Avec un site plus rapide…
- La satisfaction des utilisateur est améliorée
- Ils reviennent plus volontiers
- Ils regardent plus de pages à chaque visite
- Le taux de conversion et le CA augmentent
- Des économies d’infrastructure sont possibles
- Un meilleur positionnement chez Google
Slide 6
Pourquoi les sites sont-ils lents ?
Slide 7
Ils sont de plus en plus lourds
Slide 8
Slide 9
Ils sont saturés de JavaScript
Slide 10
Ils sont saturés de JavaScript
+586 % 😲
Slide 11
Le JavaScript est la ressource la plus impactante
Slide 12
Le JavaScript est la ressource la plus impactante
Source : https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4
Slide 13
Les services tiers nous plombent
Slide 14
Les services tiers nous plombent
Slide 15
Feu d’artifice sur Request Map : mauvais signe
208 Cookies
- 54 first-party
- 154 third-party
533 third-party requests 170 unique hosts
Source : https://requestmap.webperf.tools/
Slide 16
Mais alors, comment faire ?
Slide 17
1. Mesurer
Slide 18
Mesurer en local
- Lighthouse
- Browser devtools
- Etc.
Slide 19
Mesurer ponctuellement à distance
Outils de mesure synthétique
- WebPagetest
- Dareboost
- Google PageSpeed Insights
- SpeedCurve
- Etc.
Slide 20
Dareboost
Slide 21
Google PageSpeed Insights
Slide 22
Mesurer en conditions d’utilisation réelle
Real User Monitoring
- Google Analytics
- Akamai mPulse
- SpeedCurve
- Etc.
Slide 23
Google Analytics
Slide 24
SpeedCurve
Slide 25
Akamai mPulse
Slide 26
Corrélation entre performance et conversion
Source : https://web.dev/value-of-speed
Slide 27
Différentes métriques à surveiller
Source : https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4
Slide 28
Commencez par le Speed Index
Mesure de l’UX via la séquence de rendu du haut de page
Source : https://blog.dareboost.com/fr/2018/02/speed-index-performance-web/
Slide 29
2. Optimiser
Slide 30
Comment faire des sites performants ?
Des bonnes pratiques WebPerf connues depuis plus de 10 ans, toujours pas appliquées par la plupart des sites.
Slide 31
La requête la plus rapide est celle que l’on ne fait pas
Éviter les redirections
Ne pas faire charger des ressources non utilisées
- Polyfills JavaScript
- Images inutiles (en responsive notamment)
Utiliser les bons en-têtes HTTP de mise en cache
Limiter l’usage de services tiers
Slide 32
Réduire la latence et les temps de connexion
(DNS + connexion TCP + handshake TLS) × distance
Rapprocher la ressource de l’utilisateur avec des CDN
Limiter le nombre de domaines
Réduire le nombre de requêtes
- Bundles de CSS et JavaScript (mais pas trop)
- Sprites d’images (ou SVG inline)
Slide 33
Optimiser le poids des ressources
Minifier et compresser les assets textuels
- JavaScript et CSS systématiquement
- HTML, SVG éventuellement
Optimiser les images
- Utiliser les bonnes dimensions selon les mises en page
- Adopter les bons formats : WebP, JPEG-XR, etc.
- Limiter les méta données
Slide 34
Optimiser l’ordre de chargement des ressources
CSS et JavaScript critiques peuvent être inline
CSS et JavaScript non critiques peuvent être asynchrones
Seules les images visibles au dessus de la ligne de flottaison doivent être chargées rapidement
Profiter de la gestion des priorités de HTTP/2
Slide 35
Exploiter les Service Worker et l’API Cache
L’Offline First : facile techniquement, compliqué côté UX
Slide 36
3. Répéter
Comme le zéro défaut, la performance ultime n’est jamais atteinte…
Slide 37
