Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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.

9aa2aa68144b2781ac025a29c83bbdd4?s=128

Nicolas Hoizey

July 25, 2019
Tweet

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…
  37. 37