J’ai grandi dans une petite ville du Costa Rica où je n’avais que 6k/sec d’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 débrouille toujours pour que les sites se chargent aussi rapidement que possible. Je pense qu’à un moment donné, Themelocal.com avait un classement Google Page Speed 97-98. Bien sûr, maintenant avec les boutons de médias sociaux et les trucs que j’ai dû gérer.
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. Ces jours-ci, les thèmes WordPress sont extrêmement « lourds en images » et bien sûr, je porterai une partie du blâme parce que j’aime ajouter des images en vedette dans la mesure du 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 à poster 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 fichiers inférieures à celles des PNG
- Lorsque vous utilisez Photoshop, assurez-vous d’enregistrer votre image « pour le Web »
- N’utilisez pas les balises IMG largeur et hauteur pour redimensionner vos images, recadrez-les chaque fois que possible
- Assurez-vous de définir les attributs width et height afin 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 il supprimera les méta-déchets inutiles ou aplatira les png pour réduire leur taille de fichier. Vous pouvez visiter leur site pour optimiser vos images, mais mieux encore, ils proposent une API qui effectue l’optimisation (sauf pour la suppression des métadonnées JPEG).
Alex Dunae a créé le WP Smush.it plugin qui utilise l’API afin que vous puissiez écraser automatiquement les images sur votre site WordPress lors du téléchargement.
C’est l’un des meilleurs plugins d’optimisation d’image et vous voudrez l’avoir sur tous
de vos sites.
PunnyPNG
PunnyPNG est un autre service de compression d’images que je recommande aux développeurs de thèmes.
PunnyPNG va encore plus loin que smush.it pour optimiser davantage vos images et est idéal pour les images de vos fichiers de thème qui sont chargés sur toutes vos pages.
Utilisation d’un CDN (réseau de diffusion de contenu)
Le moyen le plus efficace d’augmenter le chargement d’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 qui fournira à vos visiteurs les données de l’emplacement le plus proche du visiteur. Cela peut aider à réduire considérablement le temps nécessaire au chargement des images sur votre site.
Tous les « top dogs » 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 beaucoup de trafic.
Pour les développeurs : utilisez l’image en vedette de WordPress Au lieu De Timpouce
D’autre part, en définissant des tailles d’image spécifiques pour les images en vedette, toutes vos images seront recadrées lors du téléchargement (ou lorsque vous exécutez 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é de l’image des vignettes JPEG
J’ai trouvé cette astuce super géniale 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. Alors que beaucoup de gens peuvent l’utiliser pour augmenter la qualité à 100 (comme il le suggère dans le message), 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 modifier la valeur (disons que nous voulons des images vraiment merdiques à 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 la vitesse de vos images utilisées sur votre blog ? Quelles autres mesures prenez-vous pour que votre site Web fonctionne rapidement et que Google et vos utilisateurs soient satisfaits ?
Noter: Des gens formidables laissent des commentaires 🙂