L’un des facteurs susceptibles de ralentir votre site Web est l’utilisation de grandes photos non optimisées pour le Web.
Parfois, lorsque les gens tentent de publier quelque chose rapidement, ils téléchargent des photos directement depuis leur appareil photo, en très haute résolution, des images pesant jusqu'à 4 à 5 Mo.
Une image optimisée contient moins de kilo-octets sans aucune perte de qualité visible, et vous devez toujours optimiser les images sans perte de qualité avant ou pendant leur téléchargement sur votre site.
Peu importe si votre site est WordPress ou une autre plate-forme, vous pouvez optimiser les images pour le Web et accélérer le chargement de votre site Web.
L’un des avantages de l’utilisation de WordPress est que vous disposez de plugins qui peuvent optimiser les images lorsque vous les téléchargez sur votre site et également optimiser en masse les images existantes.
Alors, quelles sont les bonnes pratiques concernant les photos ?
Ne perdez pas de qualité
Suivez les objectifs de votre site Web. N'optimisez pas aveuglément simplement parce qu'un outil vous a donné un mauvais score. Les outils ne connaissent pas les objectifs de votre site.
Si j'avais un blog de mode ou une boutique, je montrerais de belles images ; Peu m'importe ce que YSlow ou Pagespeed Insights m'ont noté.
Ne vous attardez pas sur les notes et les scores, faites ce qu'il y a de mieux pour vous et vos visiteurs. Il est préférable de dépenser plus en CDN pour proposer des images plus grandes et de meilleure qualité, plutôt que de sur-optimiser les images et d'avoir un site Web moche.
Cela pourrait vous coûter des visiteurs et de l'argent.
Ne téléchargez pas d'images plus grandes que nécessaire
Si la largeur de votre contenu est de 620 px, vous devez redimensionner vos images à une largeur de 620 px avant de les télécharger sur votre site Web.
Si vous souhaitez que les visiteurs voient une image plus grande lorsqu'ils cliquent dessus, vous pouvez utiliser une largeur de 1 024 px. Définissez l’une des vignettes WordPress sur une largeur de 620 px, utilisez cette vignette sur votre page et liez-la à l’image plus grande.
Vous n'avez probablement pas besoin d'images supérieures à 1024 pixels (cela devrait suffire pour la plupart des blogs), mais que se passe-t-il si vous en avez besoin ?
Dans ce cas, vous pouvez envisager de télécharger des images à des résolutions plus grandes et d'utiliser un CDN.
Nous entrerons plus en détail sur CDN dans une minute.
Optimisez les images avant de les télécharger
Vous pouvez optimiser vos images sur votre ordinateur avec Photoshop. Certaines personnes vous recommandent de rendre votre image un peu plus nette avec Smart Sharpen, Unsharp Mask, High Pass Filter ou tout autre outil de votre choix ; Photoshop propose plusieurs options.
Je n'ai pas vu beaucoup de différence (en Ko) après la netteté, mais je ne suis pas un maître de Photoshop.
Redimensionnez la photo à la résolution dont vous avez besoin sur votre site Web, utilisez Enregistrer pour le Web, choisissez JPG, Qualité entre 60 et 80 %, cochez Progressive puis Enregistrer.
Je vous recommande d'utiliser JPG, sauf si vous avez besoin de transparence et que vous devez utiliser PNG.
Si vous n'avez pas Photoshop, vous pouvez utiliser ces outils pour optimiser :
- Émeute (Windows)
- Imageoptim (Mac)
- Jpegmini (en ligne, Mac et Windows)
- Kraken (en ligne)
- Compresseur.io (en ligne)
J'utilise moi-même Jpegmini ; Je peux encore gagner 5 à 10 % supplémentaires, même après avoir d'abord optimisé avec Photoshop.
Ou optimiser pendant le téléchargement
Je ne pense pas qu'il existe une seule façon d'optimiser les images. Si vous ne voulez pas passer du temps à optimiser vos photos sur votre ordinateur avant de les télécharger, vous pouvez choisir de laisser un plugin WordPress faire tout le travail. pour toi.
Il existe de nombreux plugins WordPress que vous pouvez utiliser :
- WP Smush – Optimisation des images
- Optimiseur d'image ShortPixel
- Kraken.io Optimiseur d'image
- Optimus - Optimiseur d'image WordPress
- EWWW Image Optimiseur Cloud
- Imagify Optimiseur d'image
Avec ces plugins, vous pouvez optimiser les images lors du téléchargement, ainsi que celles que vous avez déjà téléchargées.
Je ne les ai pas tous utilisés, seulement WP Smush et ShortPixel, et j'ai trouvé ShortPixel excellent. Il peut réduire de quelques Ko même pour les images préalablement optimisées avec Photoshop et Jpegmini.
Un autre plugin utile est Imsanity .
Si vous avez un site multi-auteurs, vous devez contrôler les images que les gens téléchargent. Définissez une largeur, une hauteur et une qualité maximales. Lorsqu'un utilisateur télécharge une image plus grande, le plugin la réduira automatiquement à la taille configurée.
WP Smush Pro fait également cela.
Affichage des images
Maintenant que vous avez optimisé les images, vous pouvez également améliorer la façon dont vous présentez ces images sur votre site Web.
Si vous avez beaucoup de photos sur une page, comme sur un blog de mode par exemple, vous pouvez profiter du chargement paresseux.
Cela signifie que vos images ne se chargeront que lorsqu'elles seront visibles, lorsque le visiteur fera défiler vers le bas.
Vous pouvez utiliser l’un des plugins WordPress suivants pour cela :
- Charge paresseuse
- BJ Charge Paresseuse
- Charge paresseuse de fusée
- Chargement paresseux de l'image
- Chargement paresseux WPParse
Je ne peux pas vous dire quel plugin est le meilleur. Il faut tester car il pourrait y avoir des incompatibilités avec votre thème. Par exemple, le chargement paresseux ne fonctionne pas pour les images sélectionnées si vous disposez d'un thème Genesis Framework.
De plus, alors que je testais le chargement différé, cela semblait bizarre sur mobile. Il y avait des espaces vides là où les photos auraient dû se trouver, car les images ne se chargeaient pas aussi rapidement que sur le bureau.
Une autre chose que vous pouvez faire pour accélérer le temps de chargement est de diffuser des images à partir d'un sous-domaine, comme images.domain.com.
Vous devez créer un sous-domaine à partir de cPanel ou de tout autre panneau de contrôle proposé par votre société d'hébergement, puis configurer WordPress pour charger les médias à partir de ce sous-domaine à l'aide du WP Original Media Path .
Je peux écrire un article de blog détaillé pour les personnes qui souhaitent le faire (si quelqu'un le demande), mais ma recommandation est d'utiliser plutôt un CDN. C'est une solution beaucoup plus simple.
Utiliser un CDN
Cloudflare est super simple et gratuit. Il vous suffit de changer vos serveurs de noms de domaine en Cloudflare et de les activer (vérifiez le cloud orange pour les entrées DNS), et c'est tout. Vos fichiers statiques (images, CSS, JS) seront chargés depuis le CDN Cloudflare.
Il existe d'autres sociétés CDN que vous pouvez utiliser, répertoriées ci-dessous. Mais je pense que Cloudflare est le plus simple à mettre en œuvre :
Nettoyez après vous
Chaque fois que vous changez de thème, vous laissez derrière vous une traînée de vignettes inutilisées et d'entrées de base de données liées à ces images.
Lorsque vous changez de thème, vous pouvez utiliser le AJAX Thumbnail Rebuild pour reconstruire les vignettes en fonction de votre nouveau thème.
Les anciennes vignettes peuvent être supprimées du serveur à l'aide de l'un des plugins suivants :
Je recommande Thumbnail Cleaner car il est rapide. Mais cela supprime toutes vos vignettes, pas seulement celles inutilisées. Après la suppression, vous devez utiliser le AJAX Thumbnail Rebuild pour reconstruire les vignettes dont vous avez besoin.
Les vignettes inutilisées n'affectent pas les performances de votre site Web. Ils occupent simplement de l'espace sur votre serveur. Mais il existe des entrées de base de données liées à ces vignettes, et c'est une bonne pratique de garder votre base de données aussi propre que possible.
C'est ce que nous ferons à l'étape suivante : nettoyer la base de données WordPress.
Laisser un commentaire