- WordPress
L’impact des images sur la web performance
Les images sont une composante essentielle de tout site web. Elles ajoutent de la couleur, du contexte et de la profondeur à votre contenu. Cependant, elles ont un impact significatif sur la performance de votre site. Une utilisation inappropriée ou excessive d’images peut en effet ralentir le temps de chargement, ce qui peut nuire à l’expérience utilisateur et au référencement du site. Dans cet article, nous allons explorer l’impact des images sur la web performance et partager des stratégies pour optimiser efficacement les images sur WordPress.
Comment les images fonctionnent sur WordPress ?
Lorsque vous téléchargez une image sur WordPress, le système crée plusieurs versions de cette image dans différentes tailles. Ces tailles sont définies par défaut, mais vous pouvez les modifier en fonction de vos besoins.
| Slug | Largeur | Hauteur |
| Thumbnail | 150px | 150px |
| Medium | 300px | 300px |
| Medium_large | 768px | 0 |
| Large | 1024px | 1024px |
| 1536×1536 | 1536px | 1536px |
| 2048×2048 | 2048px | 2048px |
| Full | largeur d’origine | hauteur d’origine |
Ce fonctionnement vous permet d’avoir à disposition des images avec des tailles adaptées en fonction de l’emplacement où elles sont affichées sur votre site. Cela peut aider à améliorer la performance en évitant de charger une image plus grande que nécessaire.
Cette fonctionnalité peut être étendue grâce à l’utilisation d’extensions d’optimisation d’images, qui permettent de servir des médias plus compressés sans perte de qualité. Comme par exemple Imagify ou Optimus.
Guide pour suivre l’impact des images tout au long d’un projet
Étape 1 : les maquettes
Optimiser vos images sur WordPress est une question de performance, pas seulement d’esthétique.
Chez Be API, il y a un travail collaboratif entre les UX & UI designers et développeurs lors de la conception des maquettes pour statuer sur les bonnes pratiques suivantes :
- Homogénéisation des proportions d’images pour assurer la cohérence et l’efficacité du chargement de votre site. Cela signifie que toutes les images qui sont destinées à être utilisées aux mêmes endroits doivent avoir la même ratio largeur / hauteur. Cela garantit que les images seront chargées de manière efficace et rapide.
- Suppression des images superflues : Lors de la conception de maquettes, il peut être tentant d’ajouter autant d’images que possible pour rendre le site visuellement attrayant. Cependant, chaque image ajoutée augmente le temps de chargement de la page. Il est donc important de n’utiliser que les images nécessaires et d’éliminer toute image superflue. Cela peut également aider à garder l’attention de l’utilisateur sur le contenu le plus important.
- Emplacements stratégiques : L’emplacement des images sur votre site peut également avoir un impact sur la performance. Placer des images de manière stratégique peut aider à améliorer la vitesse de chargement de la page. Par exemple, les images qui ne sont pas immédiatement visibles lors du chargement initial de la page (c’est-à-dire en dessous de la ligne de flottaison) peuvent être chargées en retard (lazy loading), ce qui permet à la partie visible de la page de se charger plus rapidement.
Étape 2 : Le développement
Une image vaut mille mots, mais une image optimisée vaut mille visites.
Qu’est-ce que le LCP et comment l’optimiser?
LCP, ou Largest Contentful Paint, est une mesure de performance qui indique le temps qu’il faut pour afficher le plus grand élément visible dans la fenêtre de visualisation lors du chargement initial d’une page. En général, cet élément est souvent une image ou une vidéo.
Pour optimiser le LCP, nous devons nous assurer que notre plus grand élément se charge aussi rapidement que possible. Pour cela, nous pouvons utiliser des techniques comme le préchargement ou bien la priorité de chargement de l’image.
Pré-chargement de l’image dans l’entête de la page
<!-- Pré-chargez l'image LCP avec une priorité de chargement élevée afin qu'elle commence à se charger avec la feuille de style. -->
<link rel="preload" fetchpriority="high" as="image" href="/path/to/hero-image.jpg" type="image/jpeg">Pré-chargement de l’image dans l’entête de la page
<img fetchpriority="high" src="/path/to/hero-image.jpg">Chargement en différé des images non visibles
Le chargement différé des images, également connu sous le nom de « lazy loading », est une technique qui permet de charger les images seulement lorsqu’elles sont visibles dans la fenêtre de visualisation. Cela signifie que si une image est en bas de la page et que l’utilisateur n’a pas encore fait défiler la page pour la voir, l’image ne sera pas chargée. Cela peut améliorer considérablement les performances de votre site, en particulier pour les pages contenant de nombreuses images.
Il existe deux principales méthodes pour mettre en œuvre le lazy loading sur votre site WordPress : le lazy loading natif et le lazy loading via une librairie JavaScript.
Le chargement différé natif
Le chargement différé natif est une fonctionnalité qui est maintenant intégrée dans la plupart des navigateurs modernes. Pour l’utiliser, il suffit d’ajouter l’attribut suivant à vos balises d’image :
loading="lazy"<img src="image.jpg" alt="Description de l'image" loading="lazy">Avec cet attribut, le navigateur chargera l’image seulement lorsqu’elle sera sur le point d’entrer dans la fenêtre de visualisation. C’est une manière simple et efficace d’implémenter le lazy loading, sans avoir besoin d’ajouter des scripts supplémentaires.
À noter que depuis la version 6.3 de WordPress, ce dernier ajoute automatiquement cet attribut pour les 3 premières images de la page.
C’est une fonctionnalité supporté sur les navigateurs modernes mais si vous souhaitez avoir plus de contrôle sur les paramètres du lazy loading, il peut être nécessaire d’utiliser une solution JavaScript, comme lazySizes.
Le plugin WP Rocket qui fournit un ensemble de fonctionnalités liées à la performance web propose aussi cette option de lazy loading sur les images.
Le chargement différé via lazySizes
lazySizes est une bibliothèque JavaScript populaire qui permet d’implémenter le lazy loading sur votre site. Contrairement au lazy loading natif, lazySizes fonctionne sur tous les navigateurs, y compris ceux qui ne prennent pas en charge le chargement différé natif. Le second avantage, c’est que cette méthode laisse le contrôle aux développeurs afin de rendre le lazy loading plus ou moins aggressif.
Pour utiliser lazySizes, vous devez d’abord ajouter la bibliothèque à votre site. Ensuite, vous pouvez ajouter la classe lazyload à vos balises d’image et utiliser l’attribut data-src au lieu de src :
<img data-src="image.jpg" alt="Description de l'image" class="lazyload">Lorsque la page est chargée, lazySizes modifie automatiquement ces balises pour charger les images de manière différée.En conclusion, le lazy loading est une technique essentielle pour optimiser les images sur votre site WordPress. Que vous choisissiez d’utiliser le lazy loading natif ou lazySizes, cette technique peut aider à améliorer la vitesse de chargement de votre site, l’expérience utilisateur, et finalement, le classement de votre site dans les moteurs de recherche.
Qu’est-ce que le CLS et comment l’optimiser ?
CLS, ou Cumulative Layout Shift, est une autre mesure de performance qui indique la stabilité visuelle d’une page. Un CLS élevé signifie que les éléments de la page ont tendance à se déplacer pendant le chargement, ce qui peut être dérangeant pour les utilisateurs.
Pour optimiser le CLS, nous devons nous assurer que les dimensions de nos images sont spécifiées dans le code HTML de la page, ce qui évite que la mise en page ne change lorsque les images sont chargées. On peut aussi définir les dimensions depuis le CSS avec des propriétés width , height ou aspect-radio.
Optimisation des images avec des extensions
Nous pouvons également utiliser des plugins pour optimiser nos images. Ces plugins peuvent automatiquement compresser nos images, convertir nos images dans des formats plus efficaces comme WebP ou AVIF qui sont de plus en plus supportés sur les navigateurs modernes, et même servir ces images de manière transparente à nos utilisateurs.
⚠️ AVIF offre une meilleure compression que le WebP et est de plus en plus pris en charge par les navigateurs modernes, mais il pose une limite sur le SEO. Actuellement, Google Search ne prend pas en charge le format AVIF selon leur documentation. Il faut l’utiliser comme format optimisé généré. En contribution, on privilégiera les formats classiques comme JPG et PNG.
L’extension que nous utilisons la plupart du temps sont Imagify et Optimus. Cela évite aux contributeur de téléverser des images au format WebP ou AVIF mais de simplement utiliser des formats standards comme le JPG ou le PNG de laisser le plugin faire le reste.
Étape 3 : L’architecture & l’infrastructure
Utilisation d’un service dédié
Le mécanisme de WordPress n’est pas exempt de tout défaut, loin de là.
Notre CMS préféré a notamment la fâcheuse pratique de générer des miniatures pour l’ensemble des tailles déclarées dans votre projet, que l’image soit utilisée ou non.
Il existe des approches type “extension” pour essayer de générer ces miniatures à la volée, mais nous privilégions une méthode plus robuste, qui consiste à s’appuyer sur un service de génération d’image à la volée. Il existe notamment le projet ImgProxy qui propose une version gratuite et open-source et qui s’acquitte de cette tâche avec brio !
Ainsi, dans un projet avec ce type de fonctionnement, il convient de désactiver la génération des miniatures du CMS et déporter ce travail à un service dédiée, et de facto plus performant.
C’est une approche que nous privilégions notamment pour les projets d’usine à sites avec mutualisation de contenus.
Adoption d’un CDN pour améliorer la performance des images
Un CDN, ou Content Delivery Network, est un réseau de serveurs situés dans différents endroits du monde, conçu pour fournir le contenu web le plus rapidement possible à l’utilisateur. L’utilisation d’un CDN peut grandement améliorer la performance de votre site WordPress, en particulier en ce qui concerne la distribution des images.
Lorsque vous utilisez un CDN, vos images sont stockées sur plusieurs serveurs dans le monde entier. Lorsqu’un utilisateur accède à votre site, le CDN livre l’image à partir du serveur le plus proche de l’emplacement de l’utilisateur. Cela peut réduire le temps de latence et permettre à l’image de se charger plus rapidement.
En plus de la livraison plus rapide, certains CDN offrent également des fonctionnalités d’optimisation d’image (ex: Cloudinary). Par exemple, ils peuvent automatiquement redimensionner les images en fonction des dimensions de l’écran de l’utilisateur, convertir les images dans des formats plus efficaces tels que WebP, et même optimiser la compression des images pour un équilibre idéal entre qualité et performance.
L’utilisation d’un CDN peut être particulièrement bénéfique pour les sites WordPress qui utilisent de nombreuses images dans différentes tailles. Avec un CDN, vous pouvez facilement gérer et optimiser ces images pour une performance maximale.
Deux exemples maison sont les sites du Secours Populaire Français et Unaf-Udaf. Pour ces clients, nous avons mis en place un système imgProxy qui synchronise automatiquement les médias du site sur un CDN distant. Ainsi, nous maintenons une expérience utilisateur de WordPress à 100%, tout en offrant de meilleures performances.
Étape 4 : la contribution
Une mauvaise contribution d’images peut nuire à cette performance. Par exemple, l’utilisation d’images trop petites peut entraîner une perte de qualité et une mauvaise expérience utilisateur. À l’inverse, l’utilisation d’images trop grandes peut ralentir le temps de chargement de votre site. Il est donc essentiel de veiller à utiliser des images de la taille appropriée pour optimiser la performance de votre site web.
Il est important de surveiller le poids total de la page. Une bonne pratique consiste à se fixer un budget poids d’image et à vérifier que l’on reste dans cette limite.
Si votre page fait 6 Mo, il se peut que vous deviez supprimer quelques images ou que vous ayez choisi une taille trop grande pour un emplacement plus petit. Une bonne pratique générale est de viser un poids de page total inférieur à 2 Mo pour maintenir de bonnes performances.
Par ailleurs, assurez-vous de téléverser des images optimisées pour le web. Choisissez des images ayant un espace colorimétrique RGB (Rouge, Vert, Bleu) avec une résolution de 72dpi. Pour la photographie, le format JPG est recommandé, tandis que pour les images comportant de la transparence, le format PNG-24 est plus adapté. Il est préférable d’éviter le format PNG-8.
Étape 5 : après la mise en ligne de votre site
Il existe de nombreux outils pour suivre la performance web de manière ponctuelle ou continue. L’outil le plus populaire est probablement Lighthouse et PageSpeed Insights, mais il y en a beaucoup d’autres qui fournissent plus de détails sur les optimisations à effectuer.
WebPageTest.org est un outil favori pour analyser les performances des sites web. Il offre un audit détaillé de la vitesse de chargement d’une page, de la taille des ressources, du temps de réponse du serveur, entre autres. Ce qui le distingue, c’est qu’il permet également de simuler des optimisations. Par exemple, vous pouvez l’utiliser pour voir comment votre site se comporte comme si vous compressiez vos images ou si vous mettiez en œuvre le chargement différé. Cela vous donne une idée précise des améliorations que vous pourriez apporter à votre site pour augmenter sa performance.Par exemple, sur la capture ci-dessous, on peut tester une page en appliquant des attributs width et height sur nos éléments images.
L’outil qui nous permet d’avoir un suivi dans le temps des différentes métriques de performance que nous utilisons chez Be API est Calibre. L’interface nous propose des histogrammes dans le temps des différentes métriques de performance par rapport à plusieurs type de supports numériques ce qui permet d’identifier si une mise en ligne a un impact régressif ou progressif sur la performance web.
Conclusion
Optimiser les images sur votre site WordPress est un aspect crucial de la performance web. En appliquant des techniques comme l’homogénéisation des tailles d’images, l’élimination des images superflues, le positionnement stratégique des images, et l’utilisation d’outils comme les plugins d’optimisation d’images et les CDN, vous pouvez grandement améliorer la vitesse de chargement de votre site, l’expérience utilisateur, et le référencement de votre site.
N’oubliez pas que l’optimisation des images est un processus continu qui nécessite une surveillance et des ajustements réguliers.
