Optimisation d'image dans WordPress

Un site Web lent est l’affaire de tous. Non seulement cela chasse les visiteurs, mais cela affecte également votre référencement. Tenter de le garder «en forme» est donc l’un des éléments principaux à cocher lorsque vous exploitez une entreprise ou même un site personnel.

Il existe de nombreuses façons d’accélérer votre site WordPress, l’un complétant l’autre. Il n'y a pas de méthode universelle. Améliorer la vitesse de votre site est en réalité la somme de plusieurs de ces méthodes combinées. L’un d’eux est l’optimisation d’image, que nous aborderons de manière approfondie dans cet article.

Alors, lisez plus loin pour apprendre à optimiser manuellement et automatiquement toutes les images de votre site WordPress. Ceci est un guide pas à pas sur l'optimisation des images qui rendra votre site léger et plus rapide.

Importance de l'optimisation des images

D'après Snipcart les trois principales raisons pour lesquelles les images affectent votre site WordPress sont:

• Ils sont trop grands. Utilisez des tailles plus petites. J'en reparlerai plus tard dans l'article.
• Ils sont trop nombreux ce qui nécessite autant de requêtes HTTP. L'utilisation d'un CDN aidera.
• Ils contribuent au chargement synchrone d'éléments ainsi que HTML, CSS et JavaScript. Cela aboutit à une augmentation du temps de rendu. L'affichage progressif de vos images (via le chargement différé) empêchera vos images de se charger en même temps avec les autres éléments, ce qui accélérera le chargement de la page.

L'optimisation de vos images est donc essentielle. pratique pour rendre votre site plus léger. Mais avant tout, vous devez découvrir ce qui ralentit le chargement de votre site. C’est ici que les tests de vitesse interviennent.

Comment tester la vitesse de votre site WordPress

Il existe de nombreux outils pour tester la vitesse de votre site Web. La méthode la plus simple est Pingdom.

Pingdom est un outil populaire, utilisé à la fois par les utilisateurs occasionnels et les développeurs. Tout ce que vous avez à faire est d’ouvrir Pingdom et d’insérer l’URL de votre site WordPress, de choisir l’emplacement le plus proche de celui du centre de données de votre hébergement (en fonction des serveurs de votre hébergement) et de lancer le test. Si vous avez un CDN installé sur votre site, l’emplacement compte beaucoup. Mais plus à ce sujet plus tard .

Ce qui est bien avec cet outil, c'est que, quelle que soit sa simplicité d'interface, il affiche des informations avancées sur le fonctionnement d'un site Web, qui est une musique pure à l'oreille des développeurs.

À partir de ces statistiques, vous saurez si votre site se porte bien ou s'il doit être amélioré (ou les deux). C’est agréable, car il vous fournit une foule de données et de conseils sur les pages, les demandes, et d’autres types d’analyses de performances et d’analyses de performances.

Sur la même page, GTmetrix est un autre outil intéressant, similaire à Pingdom, qui analysera en profondeur la vitesse et les performances de votre site.

] Note : GTmetrix affiche généralement un site Web WordPress un peu plus lent que Pingdom; voici comment l'outil calcule les métriques. GTmetrix mesure le temps de chargement complet, contrairement à Pingdom qui ne compte que le temps de chargement.

Le temps de chargement calcule le temps de traitement après le traitement complet d'une page. le téléchargement de tous les fichiers de cette page est terminé. C'est pourquoi le temps de chargement sera toujours plus rapide que le temps de chargement complet.

Le temps de chargement complet intervient après le processus de chargement lorsqu'une page recommence à transférer des données, ce qui signifie que GTmetrix inclut les temps de chargement. quand il calcule la vitesse d'une page. Il mesure essentiellement le cycle complet des réponses et des transferts qu’il reçoit de la page en question. D'où les temps plus lents.

Google PageSpeed ​​Insights est un autre outil populaire permettant de tester la vitesse de votre site. Contrairement aux deux premiers outils qui affichent uniquement les performances de votre site sur les ordinateurs de bureau, l'outil de test officiel de Google permet également de mesurer la vitesse de la version mobile de votre site Web.

Hormis cela, Google vous donnera également ses meilleures recommandations sur les besoins. améliorer votre site pour des temps de chargement plus courts.

En général, avec l'un de ces trois outils, vous pouvez détecter l'impact de vos images sur la vitesse de votre site.

Comment accélérer votre site Web WordPress

Bien sûr, puisque cet article traite de l'optimisation des images, vous avez bien deviné qu'il s'agit là d'une des méthodes. Mais avant d’entrer dans les détails de l’optimisation d’image en soi, parlons brièvement d’autres moyens qui vous aideront si vous avez chargé des tas d’images sur votre site.

Caching

Caching is the action de stocker temporairement les données dans une mémoire cache de sorte que, si un utilisateur accède fréquemment à votre site, les données seront automatiquement livrées sans avoir à reprendre le processus de chargement initial (ce qui a lieu lorsque les fichiers du site sont demandés pour la première fois). Un cache est une sorte de mémoire qui collecte les données demandées à plusieurs reprises à partir de la même fenêtre et est utilisée pour augmenter la vitesse de traitement de ces données.

La mise en cache est en réalité très simple. Peu importe si vous le faites manuellement ou en installant un plugin, il peut être implémenté sur votre site assez rapidement. Certains des meilleurs plugins sont W3 Total Cache et WP Super Cache – ils sont gratuits et les mieux notés dans le référentiel officiel WordPress.org.

Réseaux de distribution de contenu

Un CDN demandera le contenu de votre site à partir de l'emplacement du serveur le plus proche du point d'accès de vos lecteurs. Cela signifie qu'il conserve une copie de votre site dans de nombreux centres de données situés à différents endroits dans le monde. Une fois qu'un visiteur a accédé à votre site via son domicile, le serveur le plus proche demandera votre contenu, ce qui se traduira par des temps de chargement plus rapides. Cloudflare et MaxCDN (maintenant StackPath) sont les solutions les plus courantes pour WordPress.

Compression GZIP

Cette méthode permet de compresser les fichiers de votre site en les réduisant. Cela réduira la bande passante de votre site et transférera plus rapidement les fichiers correspondants vers le navigateur.

WP Super Cache et W3 Total Cache sont livrés avec la fonctionnalité de compression GZIP que vous pouvez activer après l'installation. En outre, de nombreux fournisseurs d’hébergement WordPress populaires ont déjà cette fonctionnalité activée via leurs packages standard. Pour savoir si la compression GZIP est activée sur votre site, utilisez cet outil pour une inspection rapide.

D'autre part, le format PNG est le bon format si vous utilisez de nombreuses captures d'écran, graphismes, logos ou images transparentes – en général, les images avec très peu de couleurs ou les images contenant des couleurs de bloc (par exemple, des transitions entre des fonds clairs et sombres). Le format PNG est sans perte et peut souvent donner lieu à de très petites tailles après compression, qui pourraient autrement être plus grandes que JPG. Enregistrer ce type d’images au format JPG peut les rendre de mauvaise qualité et plus floues.

Faisons un autre test. J'ai enregistré une capture d'écran de mon tableau de bord WordPress au format JPG et PNG. Ensuite, j'ai utilisé le même ImageResize.org pour compresser chaque format. Il est intéressant de noter que le fichier PNG a été enregistré au départ dans une taille nettement plus petite que celle du fichier JPG.

Il s'agit de l'image:

Les résultats après compression:

Découvrez la taille d'affichage maximale de vos images

Si vous êtes amateur Pour optimiser les images vous-même, vous devez d’abord déterminer quelle est leur taille d’affichage maximale. Étant donné que votre site est réactif, toutes les images que vous téléchargez seront diffusées à différentes résolutions, en fonction de la fenêtre de l'utilisateur (l'appareil à partir duquel elles parcourent votre site).

toutes les fenêtres et tous les écrans potentiels pouvant y accéder.

Comment vérifier la taille d'affichage maximale d'une image?

Ouvrez tout d'abord une page ou une publication contenant l'image que vous souhaitez vérifier. Vous devez redimensionner votre navigateur manuellement (en le réduisant progressivement en faisant glisser ses bords) jusqu'au point où l'image passe à la plus grande dimension. Ce point s'appelle un «point d'arrêt», car la taille de l'image est brusquement brisée.

Après le passage de l'image à la grande dimension, appuyez sur le bouton droit de la souris -> Inspecter (si votre navigateur est Chrome). Survolez l'URL de l'image dans le coin supérieur droit de l'écran pour voir à la fois les dimensions auxquelles elle est exposée et ses dimensions d'origine (intrinsèques). Ce dernier est ce que les utilisateurs téléchargeront, tandis que les anciens représentent la taille d'affichage maximale de l'image sur cette page.

En gardant ces informations à l'esprit, vous pouvez maintenant redimensionner et rogner votre image afin qu'elle corresponde aux dimensions données. De cette façon, vous vous assurerez de l'optimiser efficacement de manière à ce qu'il ait toujours une belle apparence à l'écran et, en même temps, ne pèse pas lourd sur votre site.

Par exemple, si vous voulez que vos images soient de la rétine respectueux de l'environnement, éditez-les en utilisant deux fois la taille maximale d'affichage pour une meilleure qualité. L'image dans la capture d'écran a 428 x 321 pixels, donc 856 x 642 pixels pour une meilleure qualité de rétine.

Redimensionnement et recadrage des images

Lorsque vous traitez avec des fichiers dont les dimensions sont beaucoup plus grandes que celles que vous avez normalement besoin de présenter. votre site, vous pouvez simplement les redimensionner ou les rogner et les télécharger ensuite seulement sur votre site. Vous économiserez de l'espace disque et allégerez votre site.

Bien sûr, si vous avez un portefeuille de photographies et qu'il est important pour vous que les visiteurs voient vos œuvres sous leur forme originale, alors oui, vous avez un réel motif pour les présenter. À leur meilleur.

Vous pouvez également rogner vos images à tout moment si vous souhaitez montrer un seul détail aux personnes et qu'il n'y a aucune raison de télécharger la grande image complète si le reste du contenu est redondant. [19659060] Compresser les images

Tous les éditeurs de photo ont cette option où ils vous demandent quelle qualité vous souhaitez enregistrer votre image modifiée. Vous optez généralement pour une qualité de 100% (pour des raisons évidentes), mais vous pouvez la réduire un peu à, par exemple, 70-80%. Vous ne remarquerez pas de grande différence si l’image a déjà une résolution énorme. Dans ce cas, sa taille sera plus petite.

Une fois que vous avez défini un pourcentage de qualité inférieur et enregistré l'image, vous pouvez approfondir l'optimisation de la même image en utilisant un outil en ligne pour réduire encore plus sa taille. .

Les optimiseurs JPEG et JPEG.io ont un pourcentage de réduction d’environ 60%, tandis que TinyPNG (si vous choisissez de travailler avec des fichiers PNG) d’environ 70%. Kraken convient aux deux formats et renvoie des fichiers 70% plus petits via une compression avec perte.

Les utilisateurs de Mac peuvent essayer ImageOptim qui compresse les formats JPG et PNG jusqu'à 50%. .

Définir l'optimisation des images sur le pilote automatique

Pour automatiser le processus d'optimisation des images sur votre site, vous avez besoin d'outils (également nommés plugins WordPress). Cela signifie qu'ils feront tout ce dont nous avons parlé plus tôt, mais en pilote automatique.

Il existe plusieurs solutions WordPress automatiques pour l'optimisation de l'image, mais, dans cet article, je ne vous présenterai que celles qui viennent avec des fonctionnalités solides pouvant mettez sur la table l'ensemble complet pour une optimisation complète de l'image.

Je vais également vous montrer les tests que j'ai effectués avec chacun des trois prochains outils afin que vous puissiez tout observer en détail.

Nous allons comparer Optimole, ShortPixel et Smush.

Optimole

Optimole est probablement le plus complexe d'entre eux car il contient tout. les fonctionnalités dont on pourrait avoir besoin pour une optimisation d'image efficace. Ainsi, si vous recherchez une optimisation intelligente des images sous tous ses aspects, vous aimerez peut-être Optimole.

Optimole transfère vos images sur un nuage où elles sont optimisées. Ensuite, les images optimisées sont triées sur un CDN, ce qui les rend rapides à charger. Le plug-in remplace l’URL de chaque image par une URL personnalisée.

L’adaptation des images à la taille de l’écran de chaque utilisateur est une autre caractéristique clé d’Optimole. Cela signifie qu'il optimise automatiquement vos images à la bonne dimension en fonction de la fenêtre de l'utilisateur. Ainsi, si vous visualisez l'image à partir d'une tablette, elle offrira la taille et la qualité parfaites pour un standard de tablette. Ces transformations sont effectuées rapidement, sans consommer d'espace supplémentaire sur votre site.

Optimole est une autre approche intelligente que vous apprécierez avec Optimole: son sens de la détection lorsqu'un utilisateur a une connexion plus lente. Lorsqu'il reconnaît une connexion lente, le plug-in compresse les images de votre site à un taux plus élevé, afin que le temps de chargement des pages de vos visiteurs ne soit pas affecté.

Si vous souhaitez un chargement paresseux, le plug-in vous permet également de l'utiliser. sur votre site. Vous ne cochez qu'une case et Optimole fait le travail à votre place.

Un autre aspect intéressant d’Optimole est qu’il n’optimise pas automatiquement toutes les images de votre médiathèque WordPress. Il optimise uniquement les images demandées par les internautes en entrant une page sur votre site. Donc, ne paniquez pas si vous installez le plugin et que rien ne se passe. Une fois qu'une image est demandée par un utilisateur, le plugin fera ce que j'ai déjà expliqué ci-dessus. C'est un gain de place considérable, car ce plugin utilise une seule image, qu'il transforme dans le cloud en fonction des requêtes et des périphériques des utilisateurs.

Ce que j'aime de ce plugin, c'est qu'il est intelligent, efficace et qu'il ne fait jamais inutile. travail ou conversions. Nous l'utilisons sur trois de nos sites: ThemeIsle CodeinWP et JustFreeThemes . Vous pouvez les vérifier sous forme de démos.

ShortPixel

ShortPixel est un plugin WordPress populaire, génial en optimisation. vos images en vrac. Le plugin fonctionne sur le pilote automatique et optimise par défaut toutes les images que vous téléchargez dans votre bibliothèque multimédia. Vous pouvez toutefois désactiver cette option si vous n'en avez pas besoin.

Le plug-in offre une compression avec perte, brillante et sans perte, que vous pouvez appliquer même aux vignettes. Toutes les images modifiées sont enregistrées dans un dossier séparé sur votre site où vous pouvez toujours aller et venir pour annuler / rétablir une optimisation. Par exemple, reconvertissez vos fichiers sans perte en fichiers inversés et inversement, ou restaurez simplement les fichiers d'origine.

De plus, si vous accédez à la médiathèque de WordPress et sélectionnez la vue Liste plutôt que la vue grille fournie par défaut, vous remarquerez que la dernière colonne vous tient au courant de l'état de la compression. De cette façon, vous pouvez parcourir manuellement toutes les images et compresser / décompresser celles dont vous avez besoin. Vous verrez le pourcentage de compression compressé pour chaque image.

Si vous souhaitez les optimiser en une seule fois, sélectionnez Actions en bloc -> Optimiser avec ShortPixel (ou l’un de ses sous-éléments), puis cliquez sur Appliquer. Vos images seront compressées dans quelques instants.

De plus, ShortPixel vous permet de convertir automatiquement le format PNG en JPG, de créer des versions WebP de vos images et d’optimiser les fichiers PDF. Il fournit également une conversion CMJN vers RVB. Il fonctionne avec le service CDN Cloudflare pour télécharger les images optimisées sur un serveur cloud.

Smush

. Dans l’espace du plugin WordPress, Smush est un outil convivial qui optimise vos images lors de vos déplacements. Smush est livré avec un beau tableau de bord de suivi dans lequel il vous tient au courant des économies totales de votre site Web, du nombre d'éléments qui n'ont pas encore été optimisés, du nombre déjà optimisé et des méthodes utilisées pour cela.

Il dispose également d'une compression en bloc. , chargement paresseux, intégration automatique de PNG à JPG et intégration CDN. Comme ShortPixel, Smush ajoute également le statut de compression à chaque image de votre médiathèque, afin que vous puissiez les gérer individuellement ou en bloc.

Smush utilise la compression sans perte par défaut, en veillant à conserver les images aussi proches de leur version d'origine. comme possible. L’inconvénient de ce plugin est qu’il n’offre pas le même nombre de fonctionnalités dans la version gratuite, comme le font les plugins susmentionnés. Certaines fonctionnalités de base sont à votre charge.

Test des trois plugins d'optimisation d'image

J'ai pris l'image suivante de 904 KB de MyStock.photos et je l'ai exécutée.

Voici comment les plugins ont fonctionné:

• Optimole: 555 KB (312 KB si vous choisissez le niveau de compression élevé)
• ShortPixel: 197.87 KB
• Smush: 894 KB

* Optimole et ShortPixel utilisent Compression avec perte, alors que Smush utilise la compression sans perte.

La prochaine approche est encore plus intéressante.

J'ai téléchargé cette image sur mon site WordPress et je l'ai utilisée dans un article de blog par la suite. Optimole et ShortPixel ont tous deux réduit automatiquement sa taille pour l'adapter à la résolution de mon écran et à la présentation de son message. Ainsi, au lieu d’utiliser une image de près de 1 Mo, réduite au format souhaité, j’utilise maintenant la même image réduite à sa taille maximale d'affichage . Les plugins ont trouvé la bonne taille et les bonnes dimensions nécessaires dans mon billet de blog et ont modifié l'image en conséquence.

Et voici les dimensions réduites pour chaque plugin:

• Optimole: 158 Ko, 524×394 pixels
• ShortPixel: 71.7 ko, 768×577 pixels
• Smush: n'a pas optimisé cette demande spécifique

Cela étant dit, il est important de noter deux choses:

1. ShortPixel a renvoyé la meilleure taille de compression mais en des dimensions plus grandes; dans l’ensemble, un bon résultat seulement, il a perdu un peu de la qualité originale de l’image.



2. Optimole (que j’ai défini sur Compression automatique ceci temps) est revenu à une taille supérieure, mais avec des dimensions plus petites et une meilleure qualité, comme on le voit à l’œil nu. Optimole a en quelque sorte trouvé un bon mélange entre taille et dimensions afin que la qualité ne perde pas beaucoup de terrain ici.

Voici comment il est supposé regarder sur le site web en direct:

Si vous me demandez, Optimole s’adapte mieux à cette demande et à celle de l'utilisateur fenêtre d'affichage (dans ce cas, l'écran de mon ordinateur portable).

Voyons maintenant comment ces plugins s'adaptent aux écrans mobiles :

J'ai suivi la même procédure. J'ai activé un plugin à la fois et demandé la même page de site Web via mon mobile (Android). Les résultats:

Smush : n'a pas optimisé l'image pour le portable.

Mon écran de démonstration sur mobile:

Comme dans le premier exemple, Optimole a renvoyé une version plus grande et davantage axée sur la qualité, alors que ShortPixel a converti l'image en une taille supérieure, mais avec une légère perte de qualité.

I initialement utilisé une image de 6 Mo pour le test de l'ordinateur principal, mais, Smush n'autorisant pas les fichiers de plus de 1 Mo dans sa version gratuite (les autres le permettent), je devais choisir une image de moins de 1 Mo.

I Je vais quand même faire ce test avec Optimole et ShortPixel uniquement.

Alors, faisons le quatrième test, cette fois sur une image principale.

L’image originale a 6,23 Mo .

Les tailles optimisées sont :

• Optimole : 798 Ko avec niveau de compression automatique, 480 Ko avec niveau de compression élevé
• ShortPixel : 400,58 Ko

Il y a aussi EWWW Image Optimizer plugin qui est similaire pour Smush, n'utilise que la compression sans perte et ne réduit que très peu les images.

Les conclusions après les quatre tests:

• ShortPixel fournit les meilleurs taux d'optimisation (environ 70-80%), tandis qu'Optimole se situe quelque part à 40% au niveau de la compression automatique et à 70% au niveau de compression élevé.
• Optimole adapte le contenu au mieux à la vue des utilisateurs et à la connexion Internet. Si vous le définissez sur Auto, il saura à la fois réduire la taille de manière cohérente et conserver une excellente qualité. J'aime le fait qu'il sache jongler avec toutes ces variables, de sorte qu'il contribue à améliorer le temps de chargement de votre site et à afficher des images de haute qualité pour vos visiteurs.

Si je devais rassembler non seulement les résultats des tests, mais également les autres fonctionnalités des plugins (alias simplicité et convivialité), je voudrais aller avec Optimole. Mais ShortPixel est également un excellent candidat que je recommande chaudement. Smush est également une option décente si vous êtes prêt à payer pour cela ou si vous êtes un photographe qui souhaite que ses images soient aussi peu traitées que possible.

Wraping Up

Ne sous-estimez pas l'impact de l'optimisation de l'image. Les images sont toujours l'une des principales raisons d'un site Web lent. Google n'aime pas les sites Web lents, ni vos visiteurs ni vos clients. Surtout si vous recherchez une monétisation via votre site WordPress. Un site non optimisé va influencer votre référencement, vous ralentir dans les SERP, augmenter votre taux de rebond et vous faire perdre de l'argent.

Peu importe si vous préférez effectuer l'optimisation d'image manuellement ou choisir un plugin pour l'automatiser, vous voyez les bons résultats plutôt tôt que tard.

Quelles autres méthodes utilisez-vous pour conserver les images en échec sur votre site WordPress?

(dm, yk, il)