Un des critères qui a le plus d'influence sur la performance votre site Web est la gestion des images.
Pour optimiser les images dans Drupal, plusieurs techniques et modules permettent de réduire le poids des images, d'améliorer les performances du site et d'assurer une expérience utilisateur optimale, notamment pour le SEO et la compatibilité avec différents appareils.
Voici les principales approches basées sur les bonnes pratiques et les outils disponibles :
Utilisation des styles d'image (Image Styles)
Drupal permet de créer des styles d'image pour redimensionner et recadrer automatiquement les images en fonction des besoins d'affichage
- Penser à appliquer des effets comme le redimensionnement, le recadrage, ou la compression pour réduire la taille des fichiers tout en maintenant une qualité acceptable.
- Astuce : Assurez-vous que les images originales ne sont pas affichées directement, mais passent par ces styles pour éviter de charger des fichiers trop lourds.
Images adaptatives (Responsive Images)
Le module Responsive Image (inclus dans le cœur de Drupal) permet de servir des images adaptées à la taille de l'écran et à la résolution
- Créer les styles d'images en fonction des breakpoints que vous avez définis pour le responsive (Desktop, Mobile, Tablette...)
- Avantage : Réduit la bande passante en chargeant uniquement l'image adaptée à l'appareil de l'utilisateur.
Lazy Loading natif
Drupal intègre le lazy loading nativement, ce qui retarde le chargement des images non visibles à l'écran, améliorant ainsi le temps de chargement initial et les métriques Core Web Vitals
- Exception pour LCP : Pour les images critiques (comme les bannières ou logos en haut de page), désactivez le lazy loading en surchargeant le template image.html.twig pour supprimer l'attribut loading="lazy". Exemple :
- Avantage : Réduit la charge initiale du navigateur et améliore les performances
Compression des images
La compression réduit la taille des fichiers sans compromettre la qualité visuelle :
- Modules recommandés :
- Image Optimize : Permet de créer des pipelines d'optimisation pour compresser automatiquement les images JPEG et PNG lors de leur chargement ou lors de la génération des styles d'image.
- ImageAPI Optimize WebP : Convertit les images au format WebP, plus léger que JPEG ou PNG, tout en maintenant une bonne qualité.
Utilisation du format WebP
Le format WebP offre une meilleure compression que JPEG et PNG, tout en supportant la transparence :
- Module : Installez WebP et activez-le avec Responsive Image et Blazy pour gérer le lazy loading et la conversion automatique.
Mise en cache et CDN
- Mise en cache : Activez la mise en cache des images via Configuration > Développement > Performance (/admin/config/development/performance) pour réduire les requêtes serveur. Utilisez des en-têtes HTTP "Expires" pour stocker les images dans le cache du navigateur
- CDN : Intégrez un réseau de diffusion de contenu (CDN) comme Cloudflare ou AWS CloudFront pour servir les images depuis des serveurs proches des utilisateurs.
Autres bonnes pratiques
- Utiliser des noms d'image optimisées pour le SEO avec le descriptifs.
- Éviter les images surdimensionnées en évitant d'uploader une image de 4000px
- Mettre à jour Drupal et les modules : Assurez-vous d'utiliser la dernière version de Drupal et des modules pour bénéficier des améliorations de performance
Vérification de l'optimisation des images
Pour vérifier l'optimisation des images, utilisé Lighthouse (intégré à Chrome DevTools) qui va vérifier le format des images, leur optimisation, leur chargement différé ... et vous indiquer quand des optimisations sont possibles.
Chez LabSoft, nos experts Drupal configurent des workflows sur mesure pour optimiser vos sites.
Contactez-nous pour améliorer les performances de votre site !