Sommaire

“L’optimisation des images est indispensable, mais ça ne suffit pas pour la vitesse de chargement !”

Vous pensez que l’optimisation des images va vous permettre d’améliorer vos Core Web Vitals et votre score PageSpeed Insights ? Vous croyez que la compression des images suffit pour accélérer le chargement de vos pages ? 

Eh bien contrairement à ce que vous avez peut-être déjà entendu, c’est en très grande partie faux ! Stéphane Rios, CEO de Fasterize, anciennement CTO de Rue du Commerce, et fort de plus de 10 années d’observation attentive de l’évolution du marché et des bonnes pratiques, déconstruit les idées reçues.

Quel est l’impact de l’optimisation des images sur la vitesse de chargement par rapport aux autres techniques webperf ?

Stéphane Rios : Pour répondre de façon objective à cette question, nous avons réalisé un test sur un site e-commerce du secteur de la grande distribution.
Les résultats sont sans appel : certes, optimiser les images est indispensable, mais ça ne suffit pas pour améliorer au maximum la vitesse de chargement.
Même si l’optimisation des images fait une partie du travail, c’est l’activation de tous les leviers qui permet de booster significativement les performances !

On remarque qu’avec l’optimisation des images seules, le LCP est amélioré, le poids des images aussi, mais l’évolution du score PageSpeed Insights et des autres métriques n’est pas flagrante.

Comparatif des performances pour un site optimisé à 100% vs. optimisation des imagesTableau comparatif des performances entre une page web non optimisée,
avec seulement les images optimisée,

et avec 100% des ressources optimisées par Fasterize

Optimiser les images ne serait qu’une bonne pratique parmi d’autres pour la vitesse de chargement ?

S. R. : Eh oui ! Concrètement, l’optimisation des images impacte 15 à 20% des performances d’un site. Or, en toute logique, pour optimiser 100% des performances, il faut appliquer… 100% des techniques webperf

Et il faut pouvoir tout articuler pour que ce soit efficace, se tenir à jour sur l’évolution des bonnes pratiques, des techniques et des formats, maintenir les optimisations dans le temps… D’où l’intérêt de tout automatiser.

En pratique, la webperf est un domaine vaste et complexe qui touche à l’ensemble des aspects techniques d’un site web : le code HTML, JavaScript, les CSS, les fonts, les scripts tiers, le temps de réponse serveur, la gestion du cache

Et il faut aussi savoir hiérarchiser le chargement du contenu sur une page pour renforcer l’impression de vitesse, pouvoir gérer les pics de charge…

Impact sur la vitesse de chargement pour un site avec toutes les bonnes pratiques webperf automatisées

Les images ne représentent qu’une partie des nombreux leviers d’optimisation webperf.
C’est le fait de tous les activer et de les articuler intelligemment
qui a un impact réel sur la vitesse de chargement

Les images représentent 40 à 50% du poids des pages, donc réduire leur poids est un levier indiscutable pour améliorer les temps de chargement. C’est d’ailleurs l’une des recommandations de PageSpeed Insights.

Mais quand on voit la longue liste de conseils et tout ce qu’il y a à faire pour accélérer le chargement des pages, on comprend que compresser les images et les rendre responsive, c’est l’un des moyens d’optimiser sa webperf, mais ce n’est pas l’alpha et l’omega. La web performance, ce n’est pas seulement l’optimisation des images, c’est l’optimisation de tout le code et de toutes les ressources. 

Autrement dit, une solution d’optimisation des images ne peut pas à elle seule pousser les scores de performance au maximum. En réalité, optimiser les images, c’est une commodité au même titre qu’un Content Delivery Network (CDN), par exemple.

Recommandations d'optimisations webperf de PageSpeed Insights de Google : les images

Extrait de la liste de recommandations de PageSpeed Insights
pour l’optimisation de la vitesse de chargement.
L’optimisation des images fait partie des conseils… parmi beaucoup d’autres

Mais alors, quid de l’impact de l’optimisation des images sur les Core Web Vitals et sur le score PageSpeed Insights ?

S. R. : Compresser et redimensionner les images n’améliore pas tous les Core Web Vitals. C’est peut-être décevant, mais c’est une réalité technique.
Comme je viens de le souligner, compresser les images ne va pas améliorer au maximum toutes les métriques de performance web.
Ça n’aura même aucun impact sur certaines métriques, notamment le CLS et le FID.

Compresser les images n’améliore pas le CLS ?

S. R. : La compression des images ne permet pas d’obtenir un bon score Cumulative Layout Shift (CLS), la métrique Core Web Vitals qui évalue la stabilité visuelle d’une page.

Pourquoi ? Parce qu’optimiser le CLS nécessite entre autres de réserver un espace aux bonnes dimensions pour les images, afin que le contenu reste stable sur la page pendant le chargement. La compression réduit le poids des fichiers, le redimensionnement permet d’adapter les images aux différentes tailles d’écran, mais vous l’aurez compris, ça ne traite pas la question de la stabilité visuelle !

Et l’optimisation des images n’améliore pas non plus le FID ?

S. R. : Non plus ! Le First Input Delay (FID), fait aussi partie des Core Web Vitals, et il évalue la réactivité des pages. Et le responsable de la mauvaise réactivité des pages, c’est… JavaScript, et non les images !

Vous pouvez compresser vos images aux meilleurs formats, ça peut avoir un effet sur le FID, mais ça reste vraiment très minime par rapport à ce qu’apporte l’optimisation des scripts.

En somme, optimiser seulement une partie des ressources (par exemple, les images), c’est prendre le risque d’améliorer seulement partiellement les Core Web Vitals et le SEO, et surtout, c’est passer à côté du potentiel business de son site !

Dans ce cas, comment s’outiller pour optimiser 100% de ses ressources ?

S. R. : Des plugins ou des solutions existent pour la mise en cache des pages statiques, le chargement asynchrone des JavaScripts, l’optimisation des images… Ces outils optimisent un aspect de la webperf, au mieux ils adressent une sélection de leviers.

En plus, une solution qui n’optimise qu’une partie des ressources peut contraindre à accumuler les outils ou les plugins pour rendre un site vraiment rapide. 

C’est potentiellement le début d’une spirale contre-productive, car accumuler les outils pour couvrir tous les besoins implique de les paramétrer individuellement, et de vérifier que toutes les optimisations fonctionnent et s’articulent correctement. Pour finir, comme chaque outil a un prix, les multiplier fait gonfler le budget.

A l’inverse, une solution complète comme le CDN Next-Gen de Fasterize couvre 100% des besoins pour optimiser durablement toutes les pages d’un site, rationalise les coûts, et centralise la gestion de toutes les optimisations avec un outil unique, pour les articuler automatiquement afin de maximiser leur efficacité.

Alors, la promesse d’activer une optimisation en un seul clic, c’est bien beau. Mais activer en une fois toutes les techniques pour pousser au maximum la qualité de l’expérience utilisateur, le SEO et les conversions, c’est bien mieux !

Concrètement, quels sont les avantages de Fasterize par rapport à une solution d’optimisation des images ?

S. R. : Fasterize est une véritable boîte à outils webperf qui applique automatiquement toutes les optimisations nécessaires pour un site rapide, des plus basiques au plus avancées.

En outre, elle simplifie l’accès à toutes les techniques et aux formats dernière génération, non seulement pour optimiser les images à la volée, mais aussi l’ensemble des ressources.

Pour un site qui serait déjà optimisé, et pour lequel il ne resterait que les images à traiter, il faut savoir que Fasterize :

  • donne accès aux meilleurs formats de compression – dont WebP qui est recommandé par Google -, mais aussi AVIF, plus récent et encore plus performant, et qui n’est pas proposé par toutes les solutions d’optimisation d’images ;
  • propose évidemment des options de compression aux formats classiques (JPEG, Progressive JPEG, GIF, PNG, SVG) ;
  • assure le redimensionnement automatique et un recadrage intelligent ;
  • applique le lazyloading correctement pour optimiser le Largest Contentful Paint (LCP) ;
  • améliore la stabilité visuelle des pages (CLS) ;
  • analyse le contexte de navigation des utilisateurs pour un choix automatique de la meilleure version d’image (format de compression et dimensions) ;
  • assure la mise en cache et un rôle de CDN ;
  • et garantit un support ultra-réactif et accompagnement expert pour répondre aux enjeux métier et techniques les plus complexes

en plus de l’optimisation de tout le code, pour booster tous les Core Web Vitals, le score PageSpeed, et l’ensemble des KPI métier et techniques !

Testez gratuitement l’impact de l’optimisation
des images et de toutes vos ressources avec notre solution SaaS :

Demandez une démo

Sommaire
Partagez !
Recevoir la newsletter

Publié par

Partagez !

Découvrez d’autres articles…

Mais restez informé !

S’inscrire !

Chaque mois, pas plus, recevez :

🆕 Les dernières publications sur notre blog : évolutions de la plateforme, nouvelles fonctionnalités, événements, conseils techniques, analyses…

💡 Une sélection d’articles de veille : actualités techniques, tips, tutos, et autres trouvailles sur la webperf…

Solutions