Optimiser les images est indispensable, mais ça ne suffit pas pour la vitesse de chargement

L'optimisation des images fait partie des bonnes pratiques pour la vitesse de chargement... parmi beaucoup d'autres. Pour un site 100% rapide, il faut optimiser 100% des ressources.

L’optimisation des images permet-elle d’optimiser les Core Web Vitals et le score PageSpeed de Google ? La compression est-elle suffisante pour améliorer les temps de chargement ? Déconstruisons les idées reçues, et voyons pourquoi certaines croyances autour de l’impact de l’optimisation des images sont en grande partie fausses.

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

Les images représentent 40 à 50% du poids des pages. Ainsi, 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.

Cela dit, même si l’optimisation des images est une bonne pratique indispensable qui fait une certaine partie du travail, c’est l’activation de tous les leviers qui permet de booster significativement la performance web.

En pratique, 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. 

D’après les tests menés sur un site e-commerce du secteur de la grande distribution, on voit que le LCP et le poids des images s’améliorent avec l’optimisation des images, mais l’évolution des autres métriques n’est pas flagrante. C’est l’optimisation de toutes les ressources qui permet d’augmenter réellement la vitesse de chargement, et notamment le score PageSpeed.

Optimiser les images est une bonne pratique parmi d’autres pour la vitesse de chargement

La webperf est un sujet vaste et complexe qui touche à l’ensemble des aspects techniques d’un site : code HTML, JavaScript, CSS, fonts, scripts tiers, temps de réponse serveur, gestion du cache…

Il faut également pouvoir coordonner l’ensemble des optimisations pour qu’elles soient efficaces, se tenir à jour sur l’évolution des bonnes pratiques, des techniques et des formats, maintenir les optimisations dans le temps… 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… D’où l’intérêt de tout automatiser. En effet, l’automatisation évite de perdre du temps à gérer de la maintenance, et le risque de voir les performances se dégrader à chaque mise à jour ou évolution du site. 

Enfin, appliquer automatiquement toutes les optimisations nécessaires au front-end de toutes les pages d’un site, c’est aussi l’assurance de profiter de leur impact sur l’ensemble des Core Web Vitals et sur le score PageSpeed.

Quid de l’impact de l’optimisation des images sur les Core Web Vitals et sur le score PageSpeed Insights ?

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 seulement l’un des moyens d’optimiser sa webperf, mais ce n’est pas le bout du chemin.

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.

Il faut aussi avoir en tête que 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. Ça n'aura même pas d’impact sur certaines métriques comme le CLS et le FID.

Pourquoi compresser les images n'améliore pas le CLS 

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 ça ne traite pas la question de la stabilité visuelle.

Pourquoi compresser les images n'améliore pas le FID

Le First Input Delay (FID) fait aussi partie des Core Web Vitals. Il évalue la réactivité des pages. Et le responsable de la mauvaise réactivité des pages, c’est JavaScript, et non les images.

Toutefois, compresser les images peut avoir un effet sur le FID, mais même avec les meilleurs formats, l’impact 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 d’un site avec des pages réellement rapides !

Quels sont les outils pour optimiser 100% des ressources d’un site web

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 adressent un aspect de la webperf, au mieux une sélection de leviers.

Néanmoins, une solution qui n'optimise qu’une partie des ressources peut contraindre à accumuler les outils pour couvrir tous les périmètres requis pour améliorer les temps de chargement.

C’est potentiellement le début d’une spirale contre-productive, car multiplier les solutions pour répondre à 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 accumuler fait gonfler le budget.

Grâce à une solution complète ou un CDN Next-Gen qui optimise tout le front-end, 100% des besoins sont couverts pour optimiser durablement toutes les pages, les coûts sont rationalisés, et la gestion de toutes les optimisations est centralisée pour les articuler afin de maximiser leur efficacité.

La promesse d’activer une optimisation en un seul clic semble alléchante, mais activer en une fois toutes les techniques pour pousser au maximum la qualité de l’expérience utilisateur, le SEO et les conversions, est bien plus intéressant et payant sur le long terme. C’est l’assurance de profiter :

• des formats de compression nouvelle génération (WebP et AVIF), 
• des fonctionnalités de recadrage et de redimensionnement automatiques,
• des techniques de lazyloading appliquées correctement pour optimiser le LCP,
• d’une stabilité visuelle des pages améliorés (CLS),
• d’une mise en cache et du choix intelligent du meilleur format / dimensions d’image selon le contexte de navigation des utilisateurs.

… 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, business, et techniques !