Optimisez vos images et ne perdez plus de temps

Selon HTTPArchive, la taille moyenne des sites Web a presque doublé en 5 ans, passant de 1 Mo en 2014 à 2 Mo en 2019. Bien sûr, l'accès à Internet est plus rapide que jamais, mais pourquoi les sites Web sont-ils si grands maintenant ? La réponse réside en partie dans les actifs multimédias en général et les images en particulier.

Cela fait longtemps que les sites Web ne sont plus de simples pages de texte. Ils sont maintenant dynamiques, pleins d'images, de vidéos, de GIF… et nous voulons que tous ces éléments soient beaux et croustillants sur des écrans avec d'énormes résolutions.

Si votre site Web se charge très lentement et que vous n'avez jamais optimisé vos images, j'ai une bonne nouvelle : aujourd'hui, vous apprendrez ce que vous pouvez faire pour accélérer votre WordPress. Voyons les outils que vous pouvez utiliser pour améliorer les performances de votre site Web et empêcher les images de gêner l'expérience de vos utilisateurs.

Pourquoi l'optimisation des images est importante

Avant de vous expliquer les différentes méthodes disponibles pour optimiser les actifs d'image et accélérer votre site Web, j'aimerais prendre quelques minutes pour vous convaincre de l'importance de le faire.

Les images ont un impact énorme sur la taille globale d'une page Web

Comme je le disais au début, le poids des images sur un site web représente un pourcentage important du total. Par exemple, considérez cet article de blog : DevTips – Comment empêcher WordPress de deviner les URL. Il s'agit d'un article assez court, avec moins de 400 mots, qui offre une solution rapide à un problème clair.

Selon GTMetrix, le chargement de ce message utilise 850 Ko de données. Mais pourquoi un article aussi court utilise-t-il autant de données ? Eh bien, les images sont en partie responsables de ce problème : l'image vedette du post pèse à elle seule plus de 200 Ko, ce qui représente 25 % du total.

Trafic mobile

Selon les données trouvées dans statcounter, 52 % du trafic Web provient d'appareils mobiles et 45 % d'ordinateurs de bureau. C'est pourquoi aujourd'hui, l'accent est mis sur l'utilisation de conceptions réactives qui fonctionnent bien sur les petits écrans.

Comme vous en avez sûrement vous-même fait l'expérience, la connexion Internet sur mobile n'est pas toujours excellente (surtout si vous êtes en déplacement ou dans le métro). Selon Statistia, en 2019, la vitesse moyenne est d'environ 14 Mbps. Par conséquent, si nous voulons accélérer nos sites Web sur mobile, nous devons réduire au maximum leur poids, y compris celui de leurs images.

Coûts de stockage et de transfert de données

Une autre raison pour laquelle vous devriez vous soucier de l'utilisation d'images aux dimensions appropriées est l'argent. Les critères selon lesquels les hébergeurs proposent leurs forfaits incluent la quantité d'espace disque utilisée par votre site Web et la quantité de données que vous envoyez de leurs serveurs à vos visiteurs. Plus vous utilisez d'espace disque et plus vous envoyez de données, plus vous payez.

En réduisant la taille de vos images, vous réduirez ces deux facteurs et vous économiserez de l'argent chaque mois ?

Actions d'optimisation d'image

Maintenant que vous savez pourquoi vous devriez vous soucier de l'optimisation de vos images, voyons ce que vous pouvez faire pour accélérer votre site WordPress.

#1 Télécharger des images correctement mises à l'échelle

Le nombre de personnes qui téléchargent des photos extraites directement de leur tout nouvel appareil photo reflex numérique est surprenant. Le problème est que toute photo prise avec un appareil photo reflex numérique est probablement trop grande et trop lourde pour un site Web.

La première chose que vous devez faire est de réduire les images à une taille raisonnable avant de les télécharger sur votre site Web. Par exemple, sur notre site Web, les plus grandes images que nous téléchargeons habituellement sont les images vedettes de nos publications. Nous avons décidé de limiter ces images à seulement 1200x800px. Dans cet autre article, j'ai expliqué une méthode pour redimensionner et compresser rapidement les images avant de les télécharger.

#2 Ajustez votre thème pour générer des vignettes appropriées

Lorsque vous téléchargez une image sur WordPress, WordPress génère plusieurs vignettes. Ces vignettes sont définies par votre thème, car c'est votre thème qui sait quand il a besoin d'une version plus grande ou plus petite d'une image.

Par exemple, nos images en vedette font 1200x800px. Ces dimensions fonctionnent très bien lorsque vous visualisez le message lui-même :

ce qui est clairement trop pour quelque chose comme ça :

C'est pourquoi, pour ce cas particulier, notre thème enregistre une nouvelle taille de vignette qui n'est que de 480x320px et qui est utilisée dans l'écran de la liste des messages.

Si vous pensez que votre thème ne génère pas de vignettes appropriées, je vous recommande de lire la documentation de WordPress pour savoir comment définir la taille d'une vignette avec set_post_thumbnail_size ou encore comment définir des vignettes supplémentaires avec add_image_size .

Et, comme toujours, si vous avez besoin d'aide, faites-le moi savoir dans la section des commentaires ci-dessous et je serai heureux de vous aider (ou même d'écrire un article à ce sujet ?)

#3 Utilisez intelligemment les tailles d'image

WordPress génère plusieurs vignettes des images que vous avez dans votre médiathèque afin que votre thème puisse utiliser la meilleure image dans chaque scénario possible. Mais voici la partie intéressante : vous pouvez également utiliser des vignettes lors de l'insertion d'images dans vos pages et publications.

Lorsque vous insérez une image dans un message, jetez un œil à la barre latérale et choisissez la taille qui correspond le mieux à vos besoins :

Par exemple, si vous allez mettre une image étroite et petite comme celle-ci, alors une petite image (300x200px) pourrait être parfaite :

mais utiliser cette même vignette pour une image plus grande donne des résultats horribles :

Mieux vaut utiliser une version avec plus de résolution :

#4 Utilisez le format d'image approprié

Il existe différents formats d'image, chacun avec ses forces et ses faiblesses pour compresser les images. Les formats les plus utilisés sont :

• PNG. Excellent format d'image pour partager des captures d'écran qui ne contiennent aucune image, comme, par exemple, une capture d'écran de l'éditeur WordPress.
• JPG. Un des formats les plus répandus au monde. Il fonctionne très bien avec pratiquement n'importe quel type de photographie, permettant des taux de compression très élevés. Cependant, ce n'est pas parfait : si la photo a des bords très nets (par exemple, s'il y a du texte ou des dessins), vous devrez utiliser des taux de compression plus faibles ou risquer que l'image ait des artefacts laids.
• GIF. Roi d'Internet (et des plateformes de médias sociaux). C'est un type de format qui permet les animations. Pour être honnête, je pense que tous les « GIF » que nous utilisons maintenant sont en fait des vidéos (courtes), qui offrent de meilleurs taux de compression et une meilleure qualité…

#5 Supprimer les images inutilisées

Au fil du temps, il est facile de conserver de nombreuses images héritées dans votre site WordPress que personne n'utilise nulle part. Si vous souhaitez les supprimer rapidement, dans cet article, Toni vous explique comment.

#6 Activer le chargement paresseux

Alors, les images ralentissent vos sites Web, n'est-ce pas ? Pourquoi ne disons-nous pas simplement aux sites Web de ne pas charger d'images à moins que ce ne soit absolument nécessaire ? Cela accélérerait les choses, n'est-ce pas ? Entrez le chargement paresseux.

Le Lazy Loading est une idée assez simple : une image ne sera pas chargée tant qu'elle n'est pas censée être visible dans le navigateur du visiteur. Par exemple, si notre site Web a une certaine image dans le pied de page, pourquoi devons-nous nous embêter à la charger avant que l'utilisateur ait atteint la fin de notre site Web ? Attendez qu'ils y arrivent et, une fois qu'ils le font, chargez l'image (et s'ils ne le font pas, enregistrez un chargement d'image !)

Il existe de nombreux plugins Lazy Loading pour WordPress. Certains hébergeurs comme SiteGround event incluent cette option dans leurs installations. Recherchez simplement l'option dans votre tableau de bord et activez-la.

J'espère que le message d'aujourd'hui vous aidera à améliorer un peu la vitesse de chargement de votre site Web. Il y a peu de choses qui sont aussi faciles à réparer et qui donnent d'aussi bons résultats. Bravo et bonne chance !

Image en vedette de l'équipe Icons8 sur Unsplash.