Quoi de neuf dans la webperf ?

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