Les Papis du Web #6 - La Performance Web (WebPerf)

Dans Les Papis du Web Épisode #6, retrouvez notre web série sur l’actualité du web à 360° analysée par nos Papis du Web. Actualité et veille techno sur les sujets digitaux qui vous concernent, vues par nos experts… Le tout, en toute indépendance.

Avec un dossier sur la performance Web (WebPerf) :

La Web performance est un élément clé de l’expérience utilisateur. Plus un site est rapide, mieux il répond à la demande/satisfaction des utilisateurs, il accroît le taux de conversion et permet un meilleur positionnement sur Google.

Les sites Web sont de plus en plus lourds : images qui ne sont pas optimisées, augmentation du volume de JavaScrip, de trackers et de publicités, etc.

Les principaux conseils que nous pouvons vous donner sont de :

Mesurer les performances de votre site Web. Il est possible de faire ces mesures :
en local (outils de développement des navigateurs, Lighthouse, etc.)
par l’intermédiaire d’outils à distance : outils de mesure synthétique (ex : Dareboost, PageSpeed Insights)
en condition d’utilisation réelle : Real User Monitoring
Il faut être prudent sur les valeurs utilisées, et prendre en compte le contexte, afin de ne pas être biaisé sur le résultat de l’analyse.
Optimiser les formats et dimensions des images, limiter le poids des ressources, éviter les redirections, mettre en cache, limiter les usages de services tiers, etc. Ces bonnes pratiques sont rassemblées dans des ouvrages de références ou des référentiels comme Opquast.
Répéter ces bonnes pratiques, remettre les performances en question, trouver les nouvelles pistes d’optimisation, les appliquer, mesurer l’impact, etc.

Ces points sont essentiels car ils permettent de réduire le taux de rebond et de faciliter l’acte d’achat.

Transcript

1. 1 La performance un élément clef de l’UX Performance Web
2. 2 La performance un élément clef de l’UX
3. 3 Une mauvaise performance fait fuire Source : https://www.soasta.com/wp-content/uploads/2017/04/State-of-Online-Retail-Performance-Spring-2017.pdf
4. 4 Une mauvaise performance fait fuire Source : https://www.thinkwithgoogle.com/marketing-resources/data-measurement/mobile-page-speed-new-industry-benchmarks/ think with Google — février 2018
5. 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
6. 6 Pourquoi les sites sont-ils lents ?
7. 7 Ils sont de plus en plus lourds Source : https://httparchive.org/reports/state-of-the-web
8. 8 Ils sont de plus en plus lourds +1000 % Source : https://httparchive.org/reports/state-of-the-web
9. 9 Ils sont saturés de JavaScript
10. 10 Ils sont saturés de JavaScript +586 %
11. 11 Le JavaScript est la ressource la plus impactante
12. 12 Le JavaScript est la ressource la plus impactante Source : https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4
13. 13 Les services tiers nous plombent
14. 14 Les services tiers nous plombent
15. 15 Feu d’artifice sur Request Map : mauvais signe Source : https://requestmap.webperf.tools/ 208 Cookies • 54 first-party • 154 third-party 533 third-party requests 170 unique hosts
16. 16 Mais alors, comment faire ?
17. 17 1. Mesurer
18. 18 Mesurer en local Lighthouse Browser devtools Etc.
19. 19 Outils de mesure synthétique Mesurer ponctuellement à distance Etc.
20. 20 Dareboost
21. 21 Google PageSpeed Insights
22. 22 Real User Monitoring Mesurer en conditions d’utilisation réelle Etc. mPulse
23. 23 Google Analytics
24. 24 SpeedCurve
25. 25 Akamai mPulse
26. 26 Corrélation entre performance et conversion Source : https://web.dev/value-of-speed
27. 27 Différentes métriques à surveiller Source : https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4
28. 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/
29. 29 2. Optimiser
30. 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.
31. 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
32. 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)
33. 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
34. 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
35. 35 Exploiter les Service Worker et l’API Cache L’Offline First : facile techniquement, compliqué côté UX Source : https://jakearchibald.com/2014/offline-cookbook/
36. 36 3. Répéter Comme le zéro défaut, la performance ultime n’est jamais atteinte…