J’ai grandi dans une petite ville du Costa Rica où je n’avais que 6k / sec Internet (56k aurait été un rêve devenu réalité), donc quand il s’agit d’optimiser un site pour la vitesse, je suis très pointilleux. Je me rétrécis toujours pour que les sites se chargent aussi vite que possible. Je pense qu’à un moment donné, Themelocal.com avait un classement de 97-98 Google Page Speed. Bien sûr, maintenant, avec des boutons de médias sociaux et des choses que j’ai dû adapter.

Outre le codage général de votre thème WordPress, l’autre facteur qui a un effet énorme sur la rapidité de votre site sont les images. De nos jours, les thèmes WordPress sont extrêmement “lourds en images” et bien sûr, je vais en prendre une partie parce que j’aime ajouter des images en vedette chaque fois que possible 🙂

Ceci est juste un article rapide avec quelques conseils sur la façon dont vous pouvez aider à optimiser les images sur votre site pour augmenter les temps de chargement de votre site. Si vous êtes un utilisateur WordPress ou un développeur de thèmes, cet article peut vous aider un peu. N’hésitez pas à publier d’autres astuces dans les commentaires!

Conseils pour accélérer le temps de chargement des images

Vous trouverez ci-dessous quelques conseils généraux pour que vos images se chargent rapidement sur votre site. Rien d’extraordinaire, juste quelques suggestions:

  • Les JPG ont tendance à avoir des tailles de fichier inférieures à celles des PNG
  • Lorsque vous utilisez Photoshop, assurez-vous d’enregistrer votre image “pour le Web”
  • N’utilisez pas les balises IMG de largeur et de hauteur pour redimensionner vos images, recadrez-les autant que possible
  • Assurez-vous de définir les attributs de largeur et de hauteur pour que le navigateur n’ait pas à faire de travail

Plugins et services d’optimisation d’image

Vous trouverez ci-dessous plusieurs services et quelques plugins WordPress qui peuvent vous aider à optimiser vos images pour réduire leur taille de fichier et / ou accélérer le chargement des images sur votre site.

Smush it et le plugin WP Smush.it

Smush.it est un service génial créé par Yahoo qui vous permet de télécharger des images et de supprimer les méta-fichiers inutiles ou d’aplatir les png pour réduire la taille de leur fichier. Vous pouvez visiter leur site pour optimiser vos images, mais encore mieux, ils proposent une API qui effectue l’optimisation (sauf pour le décapage des métadonnées JPEG).

Alex Dunae a créé le WP Smush.it plugin qui utilise l’API afin que vous puissiez automatiquement écraser les images sur votre site WordPress propulsé lors du téléchargement.

C’est l’un des meilleurs plugins d’optimisation d’image sur le marché et vous voudrez l’avoir sur tous

de vos sites.

PunnyPNG

PunnyPNG est un autre vantard du service de compression d’images que je recommande aux développeurs de thèmes.

PunnyPNG va encore plus loin de smush.it pour optimiser davantage vos images et est idéal pour les images de vos fichiers de thème qui sont chargées sur toutes vos pages.

Utilisation d’un CDN (Content Delivery Network)

Réseau de diffusion de contenu

Le moyen le plus efficace pour augmenter le chargement des images sur votre site est probablement via CDN – Content Management System. Un CDN est essentiellement un réseau d’ordinateurs qui conservera des copies de vos données sur différents nœuds d’un réseau et il servira à vos visiteurs les données de l’emplacement le plus proche du visiteur. Cela peut aider à réduire considérablement le temps de chargement des images sur votre site.

Tous les «meilleurs chiens» utilisent les services CDN et cela peut faire une très grande différence dans les temps de chargement. Cela peut être assez cher, donc la plupart des blogueurs n’en utiliseront probablement pas, surtout s’ils n’ont pas un trafic important.

Pour les développeurs: utilisez l’image en vedette WordPress Au lieu De Timthumb

Images en vedette WordPressDe nombreux développeurs de thèmes (c’était moi à l’époque) utilisent le script TimThumb pour redimensionner automatiquement les images. Le problème avec ce script est qu’il s’exécute chaque fois que les pages sont chargées (tant que les images ne sont pas déjà mises en cache), donc il faut du temps pour exécuter le script et enregistrer l’image mise en cache. De plus, il s’agit d’un script gourmand en base de données, surtout si vous avez beaucoup de pages sur votre site et si vous êtes hébergé quelque part comme la grille MediaTemple, cela occupera une grande partie de votre utilisation mensuelle du GPU.

D’autre part, en définissant des tailles d’image spécifiques pour les images présentées, toutes vos images seront recadrées lors du téléchargement (ou lorsque vous exécuterez le plugin Regenerate Thumbnails) et vous n’aurez pas à exécuter de script simplement pour afficher une image sur le site. WordPress modifie également un peu la qualité des images redimensionnées, ce qui peut réduire un peu la taille du fichier.

Modification de la qualité d’image des miniatures JPEG

J’ai trouvé ce truc super génial de Glyin Mooney sur Skidoosh.co.uk pour changer la qualité JPEG dans WordPress…

En gros, vous pouvez ajouter une fonction simple à votre fichier functions.php pour définir la qualité JPEG par défaut de vos images. Bien que beaucoup de gens puissent l’utiliser pour augmenter la qualité à 100 (comme il le suggère dans l’article), vous pouvez également l’utiliser pour réduire la qualité et accélérer votre site.

La qualité JPEG actuelle pour les vignettes redimensionnées dans WordPress est de 90, ajoutez simplement ce qui suit pour changer la valeur (disons que nous voulons des images vraiment chouettes à 60% de la qualité d’origine)

add_filter('jpeg_quality', function($arg){return 60;});

Changez simplement la «valeur de retour» à la qualité que vous voulez que vos images soient. Et si vous obtenez une erreur “T_FUNCTION inattendue”, essayez plutôt la fonction suivante:

function jpeg_quality_callback($arg) { return (int)100; } add_filter('jpeg_quality', 'jpeg_quality_callback');

Comment gardez-vous votre chargement WordPress rapide?

Avez-vous d’autres bons conseils pour optimiser vos images utilisées sur votre blog pour la vitesse? Quelles autres mesures prenez-vous pour que votre site Web fonctionne rapidement et que Google et vos utilisateurs soient satisfaits?

Remarque: Des gens formidables laissent des commentaires 🙂

Share: