Qu'est-ce qui a changé dans la Webperf depuis le dernier meetup ? (il y a déjà 3 ans)
 Présenté par Jean-Pierre Vincent

1. Les « soirées » #webperf reviennent
• Salle : Delicious Insights
• Sponsor logistique :
Fasterize
• Organisateurs :
– Aujourd’hui : JP et Émilie
– Demain : nous et qui veut
• Autre meetup : PerfUG
(performance backend)
Vous faites plus les soirées
?

2. Quoi de neuf dans la #webperf ?
Jean-Pierre Vincent
@theystolemynick

3. CHALLENGES

4. Le WWW a bientôt 30 ans : la prise de
poids
De 1,6 Mo à 2,4 Mo – httparchive.org
JS +100%, avec 400Ko, CSS + 100%, images + 60% (1,6Mo)

5. Et le débit ?
Mais les latences se sont améliorées pour se stabiliser à 60 ms
L’ADSL stagne
Arcep, DegrouptTest, nPerf

6. ⚡ Croire en la fibre ?⚡
Proportion d’abonnés fibre :
• 2013 : 8%
• 2016 : 11%
• 2022 : 100%
(officiellement…)
https://observatoire.francethd.fr/

7. Version mobile
En 1 an : de 1,7 Mo à 2,2 Mo – httparchive.org
JS, images, CSS : comme sur desktop

8. Est ce que les mobiles sont meilleurs ?
Oui
• À gamme équivalente, 3
ans après : vitesse X 4
• 3G / 4G FR efficaces
Non
> 400€ : 10%
Médiane : 100-150€

9. HTTPS
• 40% des sites
• Techniques
d’optimisations
particulières
• https://istlsfastyet.com/

10. SOLUTIONS

11. HTTP/2 : pas de miracle
À travailler sérieusement pour en faire un sauveur.

12. Compression texte : brotli
Évolution de gzip/deflate
10% - 30% de gain
Présent dans Woff2

13. Compression d’image
• Compresseurs :
– mozJPEG
– cjpeg-dssim (bourrin)
• WebP ?

14. Images responsive
• Standard <picture> + srcset
• Sans JS sur la plupart des
navigateurs !
• Fallback acceptable pour les autres
• iOS : srcset only
Ex:j des images retaillées différemment
en fonction de media queries :
<picture>
<source media="(max-width:
480px)" srcset="square.jpg">
<source media="(max-width:
1200px), print" srcset="4-
3.jpg">
<source media="(min-width:
1200px)" srcset="16-9.jpg">
<img src="4-3.jpg">
</picture>

15. La nouvelle bataille : exécuter une
page
• DOM complexes
• Scripts tiers, plugins
divers
• Frameworks JS type SPA

16. Les outils évoluent
Pour les pros
• Sitespeed.io
• Chrome dev tools
• Yellow lab tools
• ❤ L’increvable
WebPageTest ❤
• …
Plus grand public
• PageSpeed Insights
• Lighthouse

17. La prise en compte de la performance
La performance en général
• Articles (SEO, marketing,
décideurs…)
• Évangélistes Google
(SEO, Progressive Web
App)
• Conf de designers
Côté technique
• Enfin du monitoring !
• Outils de build et CMS
respectent les BP

18. Résumé des 3 dernières années
Challenges
• Maîtrise de beaucoup de
domaines
– Réseau, serveur
– Images
– Intégration
– JavaScript
• L’invasion des tiers
• Images HD, contenus nombreux
• Utilisateurs exigeants et avec
des devices peu puissants
La maturité de la Webperf
• Les non-techniques s’y
intéressent enfin !
• Pas de révolution
majeure
• Perfectionnement des
outils, des techniques,
des technos