Performance Web

A presentation at Les Papis du Web (Clever Age) in July 2019 in Paris, France by Nicolas Hoizey

Slide 1

Slide 1

Papis du Web épisode #6 - Performance Web

Slide 2

Slide 2

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

Slide 3

Slide 4

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

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

Slide 6

Pourquoi les sites sont-ils lents ?

Slide 7

Slide 7

Ils sont de plus en plus lourds

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

Slide 8

Slide 8

Ils sont de plus en plus lourds

+1000 % 😱

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

Slide 9

Slide 9

Ils sont saturés de JavaScript

Slide 10

Slide 10

Ils sont saturés de JavaScript

+586 % 😲

Slide 11

Slide 11

Le JavaScript est la ressource la plus impactante

Slide 12

Slide 12

Le JavaScript est la ressource la plus impactante

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

Slide 13

Slide 13

Les services tiers nous plombent

Slide 14

Slide 14

Les services tiers nous plombent

Slide 15

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

Slide 16

Mais alors, comment faire ?

Slide 17

Slide 17

1. Mesurer

Slide 18

Slide 18

Mesurer en local

  • Lighthouse
  • Browser devtools
  • Etc.

Slide 19

Slide 19

Mesurer ponctuellement à distance

Outils de mesure synthétique

  • WebPagetest
  • Dareboost
  • Google PageSpeed Insights
  • SpeedCurve
  • Etc.

Slide 20

Slide 20

Dareboost

Slide 21

Slide 21

Google PageSpeed Insights

Slide 22

Slide 22

Mesurer en conditions d’utilisation réelle

Real User Monitoring

  • Google Analytics
  • Akamai mPulse
  • SpeedCurve
  • Etc.

Slide 23

Slide 23

Google Analytics

Slide 24

Slide 24

SpeedCurve

Slide 25

Slide 25

Akamai mPulse

Slide 26

Slide 26

Corrélation entre performance et conversion

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

Slide 27

Slide 28

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

Slide 29

2. Optimiser

Slide 30

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

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

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

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

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

Slide 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/

Slide 36

Slide 36

3. Répéter

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

Slide 37

Slide 37

Where we're going, we need perf…