quoi de neuf dans la webperf ?
TRANSCRIPT
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 ?
Quoi de neuf dans la #webperf ?
Jean-Pierre Vincent@theystolemynick
CHALLENGES
Le WWW a bientôt 30 ans : la prise de poids
De 1,6 Mo à 2,4 Mo – httparchive.orgJS +100%, avec 400Ko, CSS + 100%, images + 60% (1,6Mo)
Et le débit ?
Mais les latences se sont améliorées pour se stabiliser à 60 ms
L’ADSL stagne
Arcep, DegrouptTest, nPerf
⚡ Croire en la fibre ?⚡Proportion d’abonnés fibre :• 2013 : 8% • 2016 : 11%
• 2022 : 100% (officiellement…)
https://observatoire.francethd.fr/
Version mobile
En 1 an : de 1,7 Mo à 2,2 Mo – httparchive.orgJS, images, CSS : comme sur desktop
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€
HTTPS• 40% des sites• Techniques
d’optimisations particulières
• https://istlsfastyet.com/
SOLUTIONS
HTTP/2 : pas de miracleÀ travailler sérieusement pour en faire un sauveur.
Compression texte : brotliÉvolution de gzip/deflate10% - 30% de gainPrésent dans Woff2
Compression d’image• Compresseurs :
– mozJPEG– cjpeg-dssim (bourrin)
• WebP ?
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>
La nouvelle bataille : exécuter une page• DOM complexes • Scripts tiers, plugins
divers• Frameworks JS type
SPA
Les outils évoluentPour les pros• Sitespeed.io• Chrome dev tools• Yellow lab tools• ❤ L’increvable
WebPageTest ❤• …
Plus grand public• PageSpeed Insights• Lighthouse
La prise en compte de la performanceLa 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
Résumé des 3 dernières annéesChallenges• 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