Comment optimiser les images WordPress et rendre votre site plus rapide

Si vous souhaitez offrir une excellente expérience utilisateur à votre visiteur, vous devez vous assurer que votre site Web se charge plus rapidement, afin de ne pas le frustrer. En fait, la vitesse de votre site Web peut faire ou défaire votre activité en ligne. Vous DEVEZ optimiser les images WordPress pour rendre votre site plus rapide - car les images sont généralement la partie la plus lourde de votre contenu,

Walmart a trouvé un Augmentation de 2% de leur taux de conversion chaque fois qu'ils amélioraient la vitesse d'une seconde.

et Amazon a constaté une augmentation de ses revenus de 1% toutes les 100 millisecondes d'amélioration de la vitesse de leur site. Ces statistiques indiquent que rendre votre site Web rapide est essentiel pour votre site Web. Un moyen simple de rendre votre site Web plus rapide consiste à optimiser toutes les images de votre site Web WordPress.

Contenu[Afficher]
 

optimiser les images wordpress pour de meilleurs taux de conversion

Si vous n'avez pas encore considéré la vitesse de votre site Web WordPress comme un élément essentiel de votre entreprise, vous devrez réfléchir à nouveau et commencer à prendre des mesures pour améliorer la vitesse de votre site Web WordPress.

Recommander la lecture: Comment obtenir un site Web WordPress rapide - un guide complet [25 actions]

Il existe de nombreuses façons de rendre votre site Web plus rapide. Certains d'entre eux sont énumérés ci-dessous.

  • Évitez d'utiliser trop de plugins WordPress
  • Utilisez les services WordPress CDN
  • Optimiser la diffusion CSS
  • Optimiser les images WordPress

Les images qui n'ont pas été optimisées pour le Web sont généralement volumineuses. Ces images prendront plus de temps à se charger. Il est important d'optimiser vos images en les rendant aussi petites que possible. Cependant, la plupart du temps, le processus d'optimisation des images pour WordPress et votre site Web est fastidieux ou empêche la production de contenu.

Dans cet article, nous vous expliquerons différentes manières d'optimiser vos images WordPress et ainsi accélérer le chargement de votre site.

Compressez les images ou enregistrez-les pour le Web

Il va sans dire que la taille de votre image peut influencer le temps de chargement de votre site Web WordPress. Étant donné que les images haute résolution auront une taille de fichier plus importante, il est toujours préférable de compresser les images avant le téléchargement.

Maintenant, vous pourriez avoir une question: qu'est-ce que la compression d'image WordPress et comment peut-elle réduire la taille sans affecter la qualité?

La compression est le processus consistant à réduire considérablement la taille de l'image en supprimant de manière algorithmique les informations d'image qu'un œil humain ne peut pas percevoir. C'est un moyen très efficace d'optimiser les images WordPress.

Bien que la compression d'image soit une méthode sûre pour réduire la taille de l'image, lorsqu'il s'agit de compresser des fichiers JPEG, le processus perd parfois le contenu réel des images au cours du processus. C'est le seul inconvénient de cette approche. N'oubliez pas de vérifier attentivement les résultats de la post-compression pour vous assurer que vous êtes satisfait des résultats de la compression.

WP Smush est un plugin WordPress populaire qui vous permet de réduire facilement la taille du fichier image en numérisant chaque image que vous téléchargez et en supprimant les informations de données inutiles. La version gratuite de ce plugin vous permet de compresser des images jusqu'à 1 Mo alors qu'avec la version pro, vous pouvez compresser des images jusqu'à 32 Mo.

Vous pouvez télécharger WP Smush ici.

wp smush pour optimiser les images wordpress

Veuillez également noter que ce plugin vous permet d'optimiser toutes les images nouvellement téléchargées sur votre site Web WordPress. Si vous souhaitez compresser les images existantes, vous pouvez utiliser le lien Bulk Smush.it sous l'onglet médiathèque pour optimiser les images WordPress existantes.

Chargement paresseux: optimisez le temps de chargement des images WordPress

[MISE À JOUR: WordPress 5.4 a un chargement paresseux intégré dans le noyau, vous n'avez donc besoin d'effectuer cette action que si votre version de WordPress est inférieure à cette version]

Nous savons tous que "une image vaut mille mots".

Mais utiliser trop d'images sur une seule page peut ralentir le chargement de votre site Web.

Un moyen simple d'améliorer votre temps de chargement consiste à supprimer les images inutiles et à ne conserver que ce qui est absolument nécessaire. Cependant, tout le monde ne souhaite pas réduire le nombre d'images utilisées sur une page Web, uniquement pour accélérer le chargement de la page.

Comment résoudre ce problème?

Vous l'avez peut-être déjà remarqué - les sites Web qui utilisent beaucoup d'images sur chaque page résolvent ce problème en ne chargeant l'image que lorsqu'elle est visible par l'utilisateur. Cette tactique réduit non seulement le temps de chargement de la page, mais elle économise également la bande passante du serveur. C'est ce qu'on appelle le chargement paresseux. Parce que l'image est "paresseuse", elle n'apparaît que lorsqu'elle est nécessaire.

Si vous êtes sur WordPress, il est plus facile de ne charger l'image que lorsqu'elle est visible. Tout ce que vous avez à faire est d'installer un plugin Lazy load. Encore une fois, c'est un excellent moyen d'optimiser les images WordPress pour une vitesse améliorée.

Vous pouvez télécharger le Plugin de chargement différé ici.

Optimiser les images wordpress avec lazy load

Ce plugin n'a pas besoin de configuration supplémentaire car il fonctionne prêt à l'emploi lors de l'installation et de l'activation.

Lire la suite: Divi contre Elementor

Utilisez le format d'image optimisé et correct

JPEG, PNG et GIF sont les formats d'image les plus populaires.

Connaître les différences entre chaque format d'image vous permet d'utiliser le bon format sur votre site Web, ce qui vous aide même en matière d'optimisation d'image.

Quel format est le meilleur pour les images de sites Web WordPress optimisés et quand devriez-vous l'utiliser? Voici quelques conseils:

  • GIF: Utilisez GIF lorsque votre image est trop petite et utilise un format relativement less nombre de couleurs. Par exemple, GIF est un bon choix pour les cliparts, les puces et les graphiques. D'un autre côté, les images complexes avec des améliorations telles que les ombres portées ne pouvaient pas être affichées correctement à l'aide de GIF.
  • JPEG / JPG: Il convient aux images complexes avec de nombreuses variations de couleurs ou s'il contient des images photographiques.
  • PNG: Le format PNG est le mieux adapté aux images transparentes.
  • WebP: c'est le meilleur format de nos jours, mais la création de ces images nécessite une prise en charge du serveur sur votre site Web

Veuillez noter que ce ne sont que des recommandations générales. Comme toutes les règles, il existe des exceptions, et certaines de ces règles sont censées être enfreintes.

Utiliser efficacement le cache du navigateur

Lorsque vous téléchargez des images sur une page Web, assurez-vous de les télécharger dans un seul répertoire. Le téléchargement de vos images dans un répertoire unique sur une page Web aidera le navigateur à charger facilement ces images en utilisant le cache du navigateur lors de visites répétées.

C'est bien si vous téléchargez des images via le téléchargeur d'images WordPress par défaut. Mais par exemple, si vous créez des pages de destination HTML sur WordPress, il y a de fortes chances que vous n'utilisiez pas le téléchargeur d'images WordPress par défaut. Dans ces cas, au lieu de télécharger les images d'une page Web dans différents répertoires, assurez-vous de les télécharger toutes dans un seul répertoire.

Si vous souhaitez en savoir plus sur la mise en cache du navigateur et comment en tirer parti, consultez notre article détaillé ici: Comment tirer parti de la mise en cache du navigateur dans WordPress avec ou sans plug-in [5 façons]

 

Utiliser la même image plusieurs fois

Une autre façon d'utiliser la mise en cache du navigateur pour réduire la bande passante de l'image consiste à utiliser les mêmes images plusieurs fois sur le site.

Par exemple, lorsque vous utilisez des logos ou des éléments de menu à partir d'une page, assurez-vous d'appeler les mêmes images sur tout le site, afin que les utilisateurs n'aient pas besoin de les télécharger plusieurs fois mais une fois et que les navigateurs puissent afficher les images à partir du navigateur. cache.

Lorsque vous utilisez un arrière-plan texturé, assurez-vous d'utiliser des images plus petites à plusieurs reprises au lieu d'utiliser une seule grande image. Cela peut également aider à réduire le temps de chargement.

Par défaut, lorsque vous téléchargez des images à l'aide du téléchargeur multimédia sur le tableau de bord WordPress, elles vont dans le dossier en fonction du moment où vous les téléchargez. Cela signifie que toutes les images téléchargées dans un mois seront situées dans un seul répertoire.

Par exemple, si vous téléchargez une image en janvier 2021, elle se trouvera dans ce répertoire: wp-content / uploads / 2021/01.

Examinons les avantages du téléchargement via le téléchargeur multimédia, puis nous vous dirons ce que vous devez considérer lorsque vous ne téléchargez pas sur votre outil de téléchargement multimédia pour accélérer votre site Web.

L'outil de téléchargement de médias accélère le chargement de l'image: Le chargement sera plus rapide si les images sont stockées dans le même dossier lors de la navigation sur une page Web. Lorsque les images sont appelées à plusieurs reprises, le navigateur peut facilement les récupérer à partir du cache du navigateur si elles se trouvent dans un seul dossier.

Souvent, cependant, les blogueurs WordPress n'utilisent pas le téléchargeur multimédia par défaut, en particulier lorsqu'ils travaillent sur une page de destination personnalisée. Par souci de facilité, ils téléchargent des images dans un répertoire séparé.

Dans de tels cas, assurez-vous de télécharger toutes les images de cette page dans un seul répertoire au lieu de les télécharger dans plusieurs répertoires. Cette tactique peut améliorer le temps de chargement car la mise en cache des fichiers sera plus facile lors de visites répétées.

Utilisez CSS au lieu d'images

Savez-vous que vous pouvez améliorer le temps de chargement en n'utilisant aucune image du tout?

Par exemple, il est tout à fait possible de générer certaines formes en utilisant du CSS simple au lieu d'images telles que des rectangles arrondis, des dégradés, des ombres portées et des images transparentes. Cela étant dit, assurez-vous de garder un œil sur la vérification de la compatibilité du navigateur chaque fois que vous remplacez une image par du CSS, car tous les navigateurs ne sont pas en mesure de prendre en charge ces techniques.

A propos de l'auteur
Shahzad Saïd
Auteur: Shahzad SaïdSite Web : http://shahzadsaeed.com/
Shahzaad Saaed a été présenté dans un grand nombre de sites Web d'autorité, en tant qu'expert WordPress. Il se spécialise dans le marketing de contenu pour aider les entreprises à accroître leur trafic.

Encore une chose ... Saviez-vous que les personnes qui partagent des informations utiles comme cet article ont l'air géniales aussi? ;-)
Si vous voulez, vous pouvez laisser un incontournable commentez vos pensées, puis partagez-les sur votre ou vos groupes Facebook qui trouveraient cela utile et récoltons ensemble les avantages. Merci d'avoir partagé et d'être gentil!

Divulgation: Cette page peut contenir des liens vers des sites externes pour des produits que nous aimons et que nous recommandons sans réserve. Si vous achetez des produits que nous suggérons, nous pouvons percevoir des frais de parrainage. Ces frais n'influencent pas nos recommandations et nous n'acceptons pas les paiements pour les avis positifs.

Auteur (s) présenté sur:  Logo du magazine Inc   Logo Sitepoint   Logo CSS Tricks    logo webdesignerdepot   Logo WPMU DEV   et beaucoup plus ...