Performance Web
A presentation at Les Papis du Web (Clever Age) in in Paris, France by Nicolas Hoizey
Papis du Web épisode #6 - Performance Web
La performance, un élément clef de l’UX
Une mauvaise performance fait fuir
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
Ils sont de plus en plus lourds
+1000 % 😱
Ils sont saturés de JavaScript
Ils sont saturés de JavaScript
+586 % 😲
Le JavaScript est la ressource la plus impactante
Le JavaScript est la ressource la plus impactante
Les services tiers nous plombent
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
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
3. Répéter
Comme le zéro défaut, la performance ultime n’est jamais atteinte…
Where we're going, we need perf…
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.
Video
Resources
The following resources were mentioned during the presentation or are useful additional information.
-
Dareboost
-
Opquast : Bonnes pratiques WebPerf
Ouvertes, collaboratives et publiques, les check-lists Opquast pour un meilleur Web.
