Se connecter | Créer un compte
Optimiser les images : un enjeu de taille pour la performance web

Optimiser les images : un enjeu de taille pour la performance web

by | 23 Mar 2022 | Performances

Les images sont omniprésentes sur le web et pèsent lourd sur la performance des sites web. Autant dire que les bonnes pratiques concernant les formats, le dimensionnement et l’implémentation des images revêtent une importance critique lorsque l’on souhaite optimiser la vitesse d’affichage de ses pages web. Suivez le guide ! Introduction Voilà maintenant 30 ans que la première image a été insérée sur une page web (en 1992). Depuis, l’utilisation du contenu multimédia ne cesse de s’accroître, et accélère encore depuis ces dernières années. Selon une étude établie en 2021, 95% des pages web contiennent au moins une image significative. Et 99% des pages contiennent au moins une image quelconque (arrière-plan, logo, icône, …). Quant aux sites web mobiles, l’image constitue le LCP (Largest Contentful Paint ou élément visible le plus large) de 70% des pages. On peut voir sur la figure suivante l’évolution du poids des images au fil des années pour finalement atteindre la valeur médiane de 1 Mo (typiquement 50% du total des données transférées). (source : https://httparchive.org/) Malgré les efforts et les optimisations des technologies et des infrastructures, les images occupent de plus en plus de place dans le trafic web, dégradant ainsi le temps de chargement des pages. Et dans certains cas cela peut impacter très fortement l’expérience utilisateur, et les conversions. Quel format d’image choisir ? Les formats les plus courants aujourd’hui sont le format PNG, et le format JPEG. PNG (Portable Network Graphics) et JPEG (Joint Photographic Experts Group) sont deux formats qui offrent une compression importante au niveau de la taille de l’image, sans perte de qualité, ce qui justifie la...
Compression HTTP : Brotli ou Gzip ?

Compression HTTP : Brotli ou Gzip ?

by | 15 Avr 2019 | Performances, Web acceleration

On ne le répétera jamais assez, chaque octet compte quand il s’agit de web performance. Plus les ressources échangées entre le serveur et le client sont volumineuses plus ces échanges seront longs. Ce qui impactera l’expérience utilisateur de vos internautes. La compression HTTP est une technique qui consiste à compresser les fichiers avant de les envoyer, réduisant ainsi leur taille. Son activation est une best-practice récurrente dans les projets d’optimisation de performance web. En ce qui concerne les algorithmes de compression, Gzip règne en maître depuis son introduction. De nombreuses tentatives ont échoué à surpasser son excellent compromis taux/vitesse de compression. Brotli, l’algorithme de compression publié par Google en 2016, est un sérieux candidat à la couronne. Comment utilise-t-on Brotli ? En prérequis, pour échanger des données compressées entre client et serveur HTTP, il faut que le serveur (Apache, Nginx, etc.) et le client (votre navigateur) soient compatibles avec Brotli. Support de Brotli par les navigateurs : compatibilité Les dernières versions des principaux navigateurs sont compatibles avec Brotli depuis fin 2017. Le site caniuse estime la couverture à 89,66% des utilisateurs. Support de Brotli par les navigateurs d’après caniuse (vert=supporté, rouge=non supporté, la taille des cases pour chaque navigateur est proportionnelle au nombre d’utilisateurs). Support de Brotli par les serveurs HTTP Les 3 serveurs web majeurs : Microsoft IIS, Apache et Nginx proposent un module permettant d’intégrer Brotli. Apache : le module mod_brotli permet d’ajouter le support de Brotli, module disponible à partir de la version 2.4.26 d’Apache Nginx : le module ngx_brotli (fourni par Google) est disponible Microsoft IIS : il existe une extension développée par la communauté, IIS...