Papis du Web épisode #6 - Performance Web

La performance, un élément clef de l’UX

Une mauvaise performance fait fuir

Source : https://www.soasta.com/wp-content/uploads/2017/04/State-of-Online-Retail-Performance-Spring-2017.pdf

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/

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

Pourquoi les sites sont-ils lents ?

Ils sont de plus en plus lourds

Source : https://httparchive.org/reports/state-of-the-web

Ils sont de plus en plus lourds

+1000 % 😱

Source : https://httparchive.org/reports/state-of-the-web

Ils sont saturés de JavaScript

+586 % 😲

Le JavaScript est la ressource la plus impactante

Source : https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4

Les services tiers nous plombent

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/

Mais alors, comment faire ?

1. Mesurer

Mesurer en local

Lighthouse
Browser devtools
Etc.

Mesurer ponctuellement à distance

Outils de mesure synthétique

WebPagetest
Dareboost
Google PageSpeed Insights
SpeedCurve
Etc.

Dareboost

Google PageSpeed Insights

Mesurer en conditions d’utilisation réelle

Real User Monitoring

Google Analytics
Akamai mPulse
SpeedCurve
Etc.

Google Analytics

SpeedCurve

Akamai mPulse

Corrélation entre performance et conversion

Source : https://web.dev/value-of-speed

Différentes métriques à surveiller

Source : https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4

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/

2. Optimiser

Comment faire des sites performants ?

Des bonnes pratiques WebPerf connues depuis plus de 10 ans, toujours pas appliquées par la plupart des sites.

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

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)

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

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

Exploiter les Service Worker et l’API Cache

L’Offline First : facile techniquement, compliqué côté UX

Source : https://jakearchibald.com/2014/offline-cookbook/

3. Répéter

Comme le zéro défaut, la performance ultime n’est jamais atteinte…

Where we're going, we need perf…