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

Slide 1

Slide 1 text

1 La performance un élément clef de l’UX Performance Web

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

3 Une mauvaise performance fait fuire Source : https://www.soasta.com/wp-content/uploads/2017/04/State-of-Online-Retail-Performance-Spring-2017.pdf

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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 text

6 Pourquoi les sites sont-ils lents ?

Slide 7

Slide 7 text

7 Ils sont de plus en plus lourds Source : https://httparchive.org/reports/state-of-the-web

Slide 8

Slide 8 text

8 Ils sont de plus en plus lourds +1000 % Source : https://httparchive.org/reports/state-of-the-web

Slide 9

Slide 9 text

9 Ils sont saturés de JavaScript

Slide 10

Slide 10 text

10 Ils sont saturés de JavaScript +586 %

Slide 11

Slide 11 text

11 Le JavaScript est la ressource la plus impactante

Slide 12

Slide 12 text

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 text

13 Les services tiers nous plombent

Slide 14

Slide 14 text

14 Les services tiers nous plombent

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

16 Mais alors, comment faire ?

Slide 17

Slide 17 text

17 1. Mesurer

Slide 18

Slide 18 text

18 Mesurer en local Lighthouse Browser devtools Etc.

Slide 19

Slide 19 text

19 Outils de mesure synthétique Mesurer ponctuellement à distance Etc.

Slide 20

Slide 20 text

20 Dareboost

Slide 21

Slide 21 text

21 Google PageSpeed Insights

Slide 22

Slide 22 text

22 Real User Monitoring Mesurer en conditions d’utilisation réelle Etc. mPulse

Slide 23

Slide 23 text

23 Google Analytics

Slide 24

Slide 24 text

24 SpeedCurve

Slide 25

Slide 25 text

25 Akamai mPulse

Slide 26

Slide 26 text

26 Corrélation entre performance et conversion Source : https://web.dev/value-of-speed

Slide 27

Slide 27 text

27 Différentes métriques à surveiller Source : https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4

Slide 28

Slide 28 text

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 text

29 2. Optimiser

Slide 30

Slide 30 text

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 text

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 text

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 text

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 text

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 text

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 text

36 3. Répéter Comme le zéro défaut, la performance ultime n’est jamais atteinte…