Dimensionnez correctement les images
Cela doit être considéré comme une optimisation hautement prioritaire. Elle aura un impact significatif sur la performance globale, en particulier lorsque les économies potentielles de KB sont élevées. Elle ne peut être corrigée par WP Rocket, mais avec d'autres outils.
Les images sont une partie importante de nombreux sites web, mais vous devez avoir un bon équilibre entre vos images et les performances du site.
Lorsque PageSpeed signale cette opportunité pour votre site web, cela signifie que les images de votre site sont téléversées à une taille supérieure à celle à laquelle elles sont affichées dans le navigateur.
Lorsque nous utilisons une image très grande mais qui est affichée sur le site dans une taille beaucoup plus petite, le navigateur doit consacrer du temps et des ressources pour redimensionner l'image. Cette opération est inefficace et ralentit le chargement de la page.
PageSpeed compare la taille de l'image telle qu'elle est affichée sur votre site, avec la taille réelle de l'image. Si une économie de 4 KB ou plus est réalisée en raison d'une taille incorrecte, l'image sera signalée.
Dans la vidéo ci-dessous, vous pouvez voir l'impact sur l'expérience utilisateur du fait de téléverser des images d'une taille appropriée sur notre site web :
Pouvez-vous voir la différence sur le temps de chargement de ces images ? Comme vous pouvez le voir, l'image de droite se charge plus rapidement.
Comment cela se fait-il s'ils paraissent être la même image ? Regardons ça de plus près.
Si nous inspectons la première image, vous verrez ceci :
L'image n'occupe que 300x200 pixels dans le navigateur, mais la taille réelle de cette image est de 2050x1364 pixels.
Si nous faisons la même chose avec la deuxième image, vous verrez ceci :
Cette image occupe 300x200 pixels dans le navigateur et sa taille est exactement la même.
Et si vous vérifiez la taille du fichier de chaque image, vous verrez qu'il y a une énorme différence :
Comme vous pouvez le voir, le fait de bien dimensionner les images peut également réduire la taille du site web.
Voyons comment PageSpeed déclenche cette opportunité lorsqu'il teste cette URL :
Comme vous pouvez le voir, seule l'image qui est redimensionnée dans le navigateur est répertoriée par PageSpeed. Et il y a un potentiel d'économie considérable de 3 441,7KiB (3,4MB). Le redimensionnement correct de cette image aura un impact non négligeable sur les performances du site.
Comment dimensionner correctement vos images
Il existe de nombreux outils qui peuvent être utilisés pour mettre les images à l'échelle à une taille appropriée. Vous pouvez obtenir de plus amples informations en cliquant sur les liens suivants :