Comment accélérer un site Web sur Drupal ? Module de chargement paresseux et ses possibilités

La vitesse de chargement du site web est un aspect très important dans la perception de l'utilisateur du portail. Alors, comment pouvez-vous accélérer le chargement d'un site web qui contient beaucoup de médias ou d'iframes ? Une des meilleures solutions est de tirer parti du chargement différé. La façon la plus simple d'utiliser cette méthode dans Drupal est d'utiliser le module Lazy-load.

Qu'est-ce que la vitesse de chargement du site web ?

C'est le temps nécessaire pour afficher un site web à un utilisateur, calculé à partir du moment où le lien est cliqué. Cela dépend de la quantité de texte, des éléments intégrés (comme les iframes), des scripts et des médias (images, vidéos), où la taille a également son importance. Souvent, les médias et les éléments intégrés prennent le plus de temps à charger. Sur les grands sites web, de nombreux éléments sont invisibles pour les utilisateurs jusqu'à ce qu'ils déroulent le site, et pourtant ils sont chargés avant que la partie qui s'affiche soit montrée.

Google a introduit des directives SEO dans lesquelles la vitesse de chargement est prise en compte lors du positionnement d'un site web. Il vaut donc la peine de s'occuper de l'affichage fluide des pages web. Deux métriques significatives en termes de vitesse de chargement du site web sont TBT (Temps Total de Blocage) et LCP (Peinture de Contenu la Plus Grande). TBT indique le temps nécessaire pour terminer les longues tâches, tandis que LCP détermine après combien de temps le contenu d'un site web est susceptible d'être utilisable. Les deux métriques sont largement influencées par le nombre et la taille des éléments chargés.

Chargement du site web sur Drupal - Module Lazy-load

Les versions plus récentes de Drupal (v9.1.0 et au-dessus), ainsi que les navigateurs couramment utilisés (Chrome à partir de v76, Firefox à partir de v75), supportent le chargement différé immédiatement après l'installation. Cependant, vous devez tenir compte du fait que de nombreux sites web utilisent des versions plus anciennes de Drupal. Le plus souvent, ce sont des sites qui ont été développés pendant des années et qui ont donc souvent beaucoup de données (y compris des médias et des éléments intégrés), dont le long chargement altère la perception du portail. Dans de tels cas, il vaut la peine de vérifier si le chargement différé peut être utilisé pour réduire le temps de chargement du site web et le transfert nécessaire pour charger les éléments visibles.

Publié le 10 avril 2018, le module Drupal Lazy-load vous permet de limiter le chargement des éléments susmentionnés à ceux uniquement requis à un moment donné. Cela réduit le temps de chargement du site web et, surtout, réduit la consommation de transmission. En raison de son utilité, le module est utilisé par plus de 10 mille sites web. Il a des versions pour Drupal 8+ (dernière version 8.x-3.11 au 31 janvier 2022) et Drupal 7 (dernière version 7.x-1.4 au 22 avril 2019).

Il est louable que Osman Gormus soit le seul mainteneur du projet, et pourtant le module n'a pas perdu de soutien depuis sa création.

Pour illustrer l'efficacité du module Lazy-load, voici les résultats d'un test sur un site contenant 36 iframes (dont 6 sont visibles dans la zone chargée) et 116 images qui ne sont pas visibles.

Dans l'exemple ci-dessus, l'utilisateur est capable de voir le site web presque cinquante pour cent plus rapidement en utilisant le module. De plus, les économies de lien dépassent 98 %. Bien sûr, les résultats pour chaque site web dépendront fortement de la taille et du nombre d'éléments en dehors de la zone de chargement. Bien que l'exemple soit grotesque (nous sommes peu susceptibles de rencontrer un site web avec un si grand nombre d'images ou d'éléments intégrés), il est destiné à illustrer l'importance de l'utilisation d'une stratégie de chargement différé dans la perception d'un site web.

Installation

Le module utilise des bibliothèques supplémentaires, donc l'installation nécessite de les prendre en compte. La façon la plus simple et la plus rapide est d'utiliser le fichier composer.json pour cela. En quelques étapes, nous pouvons effectuer une installation complète du module, y compris les dépendances.

1. Dans la section repositories, nous ajoutons ce qui suit:

   { 
     "type": "composer", "url": "https://asset-packagist.org"
   }

2. Ensuite, nous devons exécuter la commande (nous ajoutons l'option -W à la fin si nécessaire):

   composer require drupal/lazy:^3.0 bower-asset/lazysizes:^5.1 oomphinc/composer-installers-extender:^2.0 --no-update

3. Nous devons modifier la section extra dans composer.json pour inclure ce qui suit:

   "installer-types": ["bower-asset", "npm-asset"],
   "installer-paths": {
     …
     "web/libraries/{$name}": ["type:drupal-library", "type:bower-asset", "type:npm-asset"],
     …
   }

4. Maintenant, nous pouvons exécuter la commande composer update.

Les instructions complètes peuvent être trouvées dans la documentation officielle.

Dans le cas où vous auriez besoin d'une installation manuelle, téléchargez les fichiers du module depuis son site sur Drupal.org et la bibliothèque disponible sur GitHub et extrayez-les un par un dans les dossiers de modules/contrib/lazy et libraries/lazysizes. Des instructions complètes peuvent être trouvées sur le site du module.

Comment utiliser le module Lazy-load ?

Important: Le module a sa propre configuration située sous le chemin de admin/config/content/lazy. Elle est divisée en 3 onglets.

1. Paramètres généraux

1. Préférer le chargement différé natif - cocher cette option forcera l'utilisation du chargement différé intégré dans le navigateur.
2. skipClass - les éléments ayant la classe saisie n'utiliseront pas le chargement différé.
3. URL de l'image de remplacement - image insérée à la place des objets chargés.
4. Activer l'effet CSS par défaut - activer les transitions par défaut lors du chargement des objets, en utilisant le CSS avec les classes appropriées.
5. Utiliser les versions minimisées - cocher cette option entraînera l'utilisation des versions minimisées des scripts.
6. Chemin ou URL de la bibliothèque Lazysizes - chemin ou adresse pointant vers la bibliothèque Lazysizes (requise par le module).

2. Visibilité

1. Pages - les chemins des sites web pour utiliser ou désactiver le chargement différé, selon la case à cocher du point 2.
2. Activer le chargement différé UNIQUEMENT sur les pages spécifiées - option déterminant si les chemins saisis au point 1 doivent avoir le chargement différé désactivé (option non cochée) ou s'il doit être actif uniquement sur les sites web indiqués (option cochée).
3. Désactiver le chargement différé pour les pages d'administration - bloque l'exécution du script du module sur les sites web administratifs.

3. Configuration de Lazysizes

1. lazyClass - une classe désignant les éléments qui devraient être envisagés pour le chargement différé.
2. loadedClass - une classe attribuée lorsque l'élément est chargé.
3. loadingClass - une classe attribuée lorsque l'élément est en cours de chargement.
4. preloadClass - une classe désignant les éléments qui devraient être chargés après "onload".
5. errorClass - une classe attribuée aux éléments dont le chargement a échoué.
6. autosizesClass - une classe désignant les éléments qui seront mis à l'échelle automatiquement.
7. srcAttr - l'attribut de src
8. srcsetAttr - l'attribut de srcset
9. sizesAttr - l'attribut de sizes
10. minSize - à utiliser avec data-sizes=”auto”. La taille minimale de l'image pour calculer l'attribut de sizes.
11. customMedia - un objet qui est un alias pour mapper différentes requêtes média. Cela peut être utilisé pour séparer/centraliser l'implémentation (mise en page) de plusieurs requêtes média spécifiques de l'attribut de source[media] (contenu/structure) par la création de requêtes média étiquetées.
12. init - détermine l'initialisation de la bibliothèque Lazysizes. Dans certains cas, il peut être nécessaire de désactiver l'initialisation automatique. Une initialisation manuelle est alors requise en utilisant lazySizes.init();.
13. expFactor - un facteur indiquant combien d'actifs doivent être chargés en l'absence d'action valide.
14. hFac - un facteur analogue à expFactor, mais en orientation horizontale.
15. loadMode - mode de chargement. 0 - pas de chargement, 1 - chargement d'éléments visibles uniquement, 2 - chargement d'éléments visibles et proches, 3 - chargement d'éléments visibles, proches et capturant des éléments dans la plage d'expansion par expFactor. Pendant onload, l'option est automatiquement définie sur 3.
16. loadHidden - détermine si les éléments cachés doivent également être chargés. LazySizes charge ces éléments avec un délai.
17. rlcTimeout - option de délai pour requestIdleCallback.
18. throttleDelay - délai utilisé pour listeners.
19. Plugins - sélection des plugins qui devraient être attachés. La spécification complète et la description des plugins peuvent être trouvées sur Github.

Afin d'attacher le chargement différé, l'édition de l'affichage des champs pour lesquels son utilisation est nécessaire est requise. Par exemple, vous souhaitez activer l'ajout d'images qui supportent le chargement différé sur les sites web de type page. Pour ce faire, vous devez effectuer les étapes suivantes :

1. Sélectionner Structure -> Types de contenu -> Page de contenu -> Gérer les champs dans le panneau d'administration (admin/structure/types/manage/page/fields).

2. Ajouter un nouveau champ (par exemple de type Image).

3. Aller à la gestion de l'affichage. 

4. Développez les options du champ (cliquez sur le symbole d'engrenage sur la droite).

5. Dans les paramètres développés, cochez la case Activer le chargement différé.

À partir de maintenant, toutes les images ajoutées dans ce champ utiliseront le chargement différé. De plus, des classes seront ajoutées, définies dans la configuration du module (admin/config/content/lazy) dans l'onglet configuration de Lazysizes, discuté précédemment dans la section de configuration de Lazysizes.

Avec les paramètres ci-dessus, nous pouvons ajouter des effets aux éléments avec chargement différé, en fonction de leur statut, en utilisant le style dans les fichiers CSS (comme flouter les images encore en cours de chargement ou ajouter une bordure rouge aux éléments dont le chargement a échoué). Ci-dessous un exemple avec deux images - une entièrement chargée (en haut) et une en cours de chargement (en bas):

Pour le contenu intégré, ajouté dans le contenu, assurez-vous d'ajouter l'attribut de loading=”lazy”, comme dans le cas de l'iframe :

<iframe loading="lazy" src="exemple-page">

Hook

Le module ajoute le hook de hook_lazy_field_formatters_alter, qui permet d'ajouter des formateurs, non encore supportés, aux champs basés sur des images.

Exemple :

function hook_lazy_field_formatters_alter(array &$formatters) {
  $formatters[] = 'xyz_module_field_formatter';

  return $formatters;
}

Module Drupal Lazy-load - résumé

L'utilisation du module Drupal Lazy-load réduit significativement le temps de chargement des sites web ayant de nombreux médias, qui sont hors de la zone visible, immédiatement après qu'ils soient chargés, et réduit la transmission de données utilisateur. Lazy-load est utile pour les anciennes versions de Drupal, car les versions plus récentes ont un support natif de chargement différé intégré. Cependant, même pour eux, ce module est remarquable pour son style configurable d'éléments, en fonction de leur statut de chargement actuel.

Vous vous demandez si le module Lazy-load est adapté à votre site web ? Nous maintenons et développons beaucoup de sites web sur Drupal, alors en appliquant notre expérience, nous serons heureux de vous recommander quelle solution sera la meilleure pour votre site web.