Introduction

À mesure que vos sites Drupal se développent, intégrant des fonctionnalités avancées et traitant un volume croissant de contenu et d’interactions utilisateurs, la nécessité d’optimiser les performances devient primordiale.

Dans ce chapitre, nous aborderons d’abord les mécanismes de compression et de cache du navigateur, essentiels pour réduire les temps de chargement des pages et améliorer l’expérience utilisateur.

Ensuite, nous plongerons dans la gestion du cache de Drupal elle-même, en explorant les différents modules de cache disponibles et en détaillant leur pertinence en fonction du type de site que vous gérez.

Nous aborderons également le concept des tags et contextes de cache, qui sont fondamentaux pour une invalidation efficace du cache, assurant que vos utilisateurs reçoivent toujours les données les plus à jour sans sacrifier la performance.

Enfin, le chapitre se conclura avec une section dédiée aux styles d’image dans Drupal. Vous apprendrez pourquoi il est important d’utiliser des styles d’image pour contrôler la manière dont les images sont affichées sur votre site.

Compression et Cache Navigateur

La compression des ressources web et la mise en place d’une stratégie de Cache Navigateur réduisent la quantité de données transférées entre le serveur et les navigateurs des utilisateurs, ce qui diminue les temps de réponse et accélère le chargement des pages.

1. Activer les compressions

Drupal permet l’activation de la compression des fichiers CSS et JavaScript via son interface d’administration, un processus que chaque développeur devrait implémenter comme une pratique standard particulièrement sur les environnements de production.

Voici les étapes à suivre pour activer la compression Drupal :

Depuis le menu d’administration, naviguez vers Configuration - Development - Performance.

Activez les options pour agréger les fichiers CSS et JavaScript (Aggregate).

Sauvegardez la configuration en cliquant sur le bouton Save configuration pour que les modifications prennent effet.

Lorsque vous activez ces options, Drupal minimise les fichiers CSS et JavaScript en réduisant leur taille. Cela est réalisé en éliminant les espaces inutiles, les retours à la ligne, les commentaires, et en simplifiant le code là où c’est possible sans altérer sa fonctionnalité.

De plus Drupal scanne et identifie tous les fichiers CSS et JavaScript locaux que votre site utilise. Au lieu de charger chaque fichier individuellement, Drupal les combine en un nombre réduit de fichiers plus grands ; c’est ce qu’on appelle l’agrégation.

Cette opération réduit significativement la quantité de données que le serveur doit envoyer aux navigateurs des utilisateurs lors du chargement d’une page, ce qui accélère le temps de réponse du serveur et diminue le temps de chargement des pages sur le navigateur de l’utilisateur.

Il est important de comprendre que l’agrégation des fichiers CSS et JavaScript...

Gérer le cache Drupal

Drupal offre plusieurs outils et modules pour personnaliser la gestion du cache selon les besoins spécifiques de chaque site. Cette section détaillera les principaux modules de cache de Drupal, ainsi que des fonctionnalités avancées telles que les contextes de cache et les tags de cache.

1. Modules de cache

Drupal intègre deux modules principaux de cache conçus pour répondre à des besoins variés, en fonction de la complexité et du type de contenu du site : Internal Page Cache et Internal Dynamic Page Cache.

a. Internal Page Cache

Ce module activé par défaut est idéal pour les sites vitrine qui servent majoritairement du contenu statique aux utilisateurs anonymes.

Il stocke des copies complètes de pages web générées dans le cache. Lorsqu’un utilisateur anonyme demande une page déjà mise en cache, Drupal peut la servir directement depuis le cache sans nécessiter de retraitement, réduisant ainsi de manière significative le temps de chargement.

b. Internal Dynamic Page Cache

Activé par défaut, le module Internal Dynamic Page Cache est spécialement conçu pour les sites dynamiques et interactifs où le contenu change fréquemment et où les utilisateurs se connectent avec des profils personnalisés.

Ce module gère de manière efficace le cache des éléments de la page qui restent constants, même quand d’autres parties de la page sont personnalisées en fonction de l’utilisateur ou du contexte. Cette approche permet d’accélérer le chargement des composants statiques tout en assurant que les sections personnalisées restent dynamiques et à jour.

Bien que le module Internal Page Cache soit très performant pour mettre intégralement en cache les pages destinées aux utilisateurs anonymes sur des sites à contenu statique, comme les sites vitrine, il n’est pas adapté aux sites nécessitant une personnalisation poussée. Sur des plateformes comme les forums, les sites e-commerce ou les communautés en ligne, où le contenu doit s’adapter en fonction du rôle de l’utilisateur ou de son contexte, l’usage d’Internal Page Cache peut en fait...

Les styles d’image

Les styles d’image dans Drupal sont des configurations prédéfinies qui permettent de manipuler et de formater les images téléchargées sur votre site. Cela inclut le redimensionnement, le recadrage, la rotation et la conversion des formats d’image pour répondre aux besoins spécifiques du site web.

Lorsque vous utilisez des styles d’image dans Drupal, l’image originale reste inchangée et sert de base pour créer différentes versions ou aspects de cette image. Chaque style appliqué génère une nouvelle image dérivée de l’originale. Cette transformation s’effectue au moment de l’affichage de l’image, si celle-ci n’a pas encore été générée ou si elle est devenue obsolète suite à une modification du style.

Utiliser les styles d’image présente plusieurs avantages :

Optimisation de la performance : les styles d’image réduisent la taille des fichiers en ajustant les dimensions de l’image, ce qui diminue le temps de chargement des pages et améliore l’expérience utilisateur.
Amélioration de l’expérience utilisateur : adapter les images aux dimensions requises assure qu’elles s’affichent correctement sur tous les dispositifs, contribuant à une apparence cohérente et professionnelle du site.
Gestion efficace des ressources : en normalisant les manipulations des images à travers des styles prédéfinis, Drupal réduit la nécessité de manipulations manuelles et permet une gestion centralisée et automatisée des ressources média.

1. Créer un style d’image

Pour créer un nouveau style d’image, suivez ces étapes :

Depuis le menu d’administration, cliquez sur Configuration.

Naviguez ensuite vers Media - Image styles.

Vous accédez ainsi à la page qui liste tous les styles d’image existants, y compris ceux fournis par défaut.

Cliquez sur le bouton Add image style.

Nommez votre nouveau style, par exemple « Card », puis cliquez sur le bouton Create new style.

Vous êtes redirigé vers une page où vous pourrez appliquer divers effets à...

Performance et cache