Drupal – Optimisation générale

Cet article est optimisé pour Drupal 7

Drupal est un des systèmes de gestion de contenu les plus populaires. Moyennant quelques petites optimisations, il est capable de gérer des petits sites web comme des grands. Cet article vous aidera à préparer votre SGC à faire face à d’importantes quantités de trafic, sans faire de compromis au niveau de la vitesse.

La première partie de cet article vous montrera des techniques d’optimisation standards, applicables à n’importe quel hébergement, même si vous n’utilisez pas les options de mise en cache.

Ce n’est que lorsque vous aurez terminé l’optimisation générale que vous pourrez vous attaquer à la seconde partie de l’article, qui vous montre comment votre SGC peut tirer profit des outils de l’hébergement Performance.

Table des matières:

 

Utiliser le cache de Drupal

Activé par défaut pour Drupal 8

Activez-le dans le back-end de comme suit:

  1. Connectez-vous au panneau d’administration de DrupalConnectez-vous au panneau d’administration de Drupal
  2. Cliquez sur Configuration en haut de la barre d’administrationConfiguration
  3. Cliquez sur Performances dans la section DéveloppementDevelopment > performance
  4. Ici, cochez les éléments suivants:
    1. Mettre en cache les pages pour les utilisateurs anonymes
    2. Mettre en cache les blocs

    Caching

  5. Cliquez sur Enregistrer la configurationSave configuration

Activer APC

AVERTISSEMENT: N’activez pas APC si vous comptez utiliser l’add-on optionnel de mise en cache Redis !

(N’effectuez pas les modifications d’APC dans settings.php – faites cela dans le back-end).

  1. Activez APC dans votre panneau de contrôle.
    1. Connectez-vous à votre panneau de contrôle
    2. Allez dans Mes Produits >> Hébergement web >> Détails de l’hébergement
    3. Dans le panneau de gauche, allez dans les paramètres PHPles paramètres PHP
    4. Vous vous trouvez maintenant dans l’Aperçu. Vérifiez la version de PHP.
    5. Allez dans l’onglet On/Off.
    6. Activez APC.Activez APC
    7. Les modifications de PHP nécessitent du temps. Pour vérifier si vos modifications ont été correctement appliquées, allez dans l’onglet PHP.
      Cherchez la section APC. Si elle s’y trouve, cela signifie que vous avez correctement activé APC.
      la section APC
  2. Cliquez sur le lien pour télécharger Drupal APC et installez-le dans /sites/all/modules/.télécharger Drupal APC
    /sites/all/modules/
    /sites/all/modules/
  3. Activez APC depuis la section Modules de votre back-end.Modules
    Activez APC
  4. Maintenant, ajoutez le code suivant au fichier settings.php.

Ce fichier se trouve dans /sites/default/settings.php (depuis la racine de votre installation de Drupal).

 /**
Ajoutez le cache APC.
 */
 $conf['cache_backends'][] = 'sites/all/modules/apc/drupal_apc_cache.inc';
 $conf['cache_class_cache'] = 'DrupalAPCCache';
 $conf['cache_class_cache_bootstrap'] = 'DrupalAPCCache';
 //$conf['apc_show_debug'] = TRUE;  // Éliminez les barres obliques pour utiliser le mode de débogage.

/sites/default/settings.php
/sites/default/settings.php
/sites/default/settings.php

Vérifiez maintenant si le site fonctionne toujours. Si c’est le cas, passez à l’étape suivante.
Ajoutez le code suivant au fichier settings.php:

 $conf['page_cache_without_database'] = TRUE;
 $conf['page_cache_invoke_hooks'] = FALSE;

settings.php

Cela permet de s’assurer que la mise en cache des pages fait également appel à APC.

Revérifiez si le site fonctionne toujours.

Utiliser le module Boost

  1. Préparation
    1. Activez les URL simplifiées dans Configuration >> Recherche et métadonnées >> URL simplifiéesConfiguration
      Recherche et métadonnées
      URL simplifiées
    2. Assurez-vous que les tâches planifiées soient désactivées.
  2. Téléchargez le module Drupal Boost et installez-le dans votre dossier Drupal, dans sites/all/modules.Téléchargez le module Drupal Boost
    sites/all/modules
    sites/all/modules
  3. Activez le module depuis la section Modules de votre back-end.Modules
    Activez le module
  4. Allez dans Configuration >> Développement >> Performances et décochez Mettre en cache les pages pour les utilisateurs anonymes.Configuration
    Développement >> Performances
    Caching
    save configuration
  5. Assurez-vous que les permissions du répertoire du cache (dans Configuration > Système > Boost > Système de fichiers) soient réglées sur 755.Configuration
    Système > Boost
    Système de fichiers
    drupal/cache
  6. .htaccess
    1. Faites une sauvegarde de votre fichier .htaccess original..htaccess
    2. Copiez la règle .htaccess générée de façon personnalisée depuis Configuration > Système > Boost > .htaccess > génération de .htaccess et copiez-la dans votre fichier .htaccess. Veillez à coller le segment au bon endroit – suivez les instructions en dessous du texte généré.Configuration
      Système > Boost
      .htaccess > génération de .htaccess
      Generated rules
      fichier .htaccess.
    3. Vérifiez si le site fonctionne toujours. Dans le cas contraire, restaurez votre fichier .htaccess et réessayez.
  7. Félicitations, votre Drupal a été boosté. Si vous pensez avoir besoin de résoudre des problèmes relatifs à l’installation du module Boost, cliquez sur le lien.

Voici comment voir un flux que Drupal Boost ajoutera:

flux Drupal Boost

Optimisation du client

Le client peut travailler de manière proactive avec de multiples sous-domaines pour que les éléments multimédias soient chargés plus rapidement. Lorsqu’un client télécharge des données trop lentement, il peut être utile de voir ce qui doit être chargé grâce au plug-in de Firefox Firebug. S’il y a, par exemple, plus de 50 éléments distincts devant être chargés, il convient peut-être de souligner ce qui suit:

Connexions de navigateurs simultanées
  • IE7: 2 connexions simultanées
  • IE8: 6 connexions simultanées
  • Google Chrome: 6 connexions simultanées
  • Mozilla Firefox: 8 connexions simultanées

Cela signifie que lorsque 50 éléments doivent être chargés, cela rallongera le temps de chargement, vu que toutes les actions sont interrompues jusqu’à ce qu’une connexion soit disponible. Ce n’est qu’alors que le prochain élément de votre site sera chargé, et ainsi de suite jusqu’à ce que tous les éléments soient chargés. La vitesse dépend naturellement aussi de la taille.

Façons de l’accélérer :
  • Utiliser des sprites CSS
  • Charger les éléments via des (sous-) domaines individuels

Sprites CSS:

Un sprite CSS peut contrer cela, car il n’y a alors qu’un seul fichier image à charger, ce qui fait qu’un nombre moins élevé de connexions sont requises, et la taille globale peut souvent être réduite.

Cliquez sur le lien pour obtenir plus d’informations sur les sprites CSS

Utiliser des (sous-) domaines pour charger des éléments:

Une deuxième façon d’augmenter la vitesse de chargement dans votre code consiste p. ex. à utiliser plusieurs sous-domaines. Votre navigateur limite le nombre de connexions simultanées par domaine, mais le navigateur verra nomdedomaine.be, css.nomdedomaine.be, images.nomdedomaine.be et les considèrera tous comme des domaines distincts, ce qui vous donne un nombre plus élevé de connexions simultanées.

Par exemple, en ayant les images téléchargées en utilisant images.nomdedomaine.be et les fichiers CSS via css.nomdedomaine.be, vous pouvez augmenter la vitesse de chargement, du fait que les fichiers fonctionneront en même temps que les connexions, dépassant les limitations de votre navigateur. Cette méthode vous permet en fait de réaliser trois fois plus de connexions simultanées.

Installer Aggregate Cache

  1. Préparation
    • Les URL simplifiées doivent être activées.
      • Activez-les dans Recherche et métadonnées >> URL simplifiéesURL simplifiées
    • L’agrégation de CSS et JavaScript doit être activée.
      • Pour l’agrégation de CSS et JavaScript, allez dans Configuration >> Développement, dans Performances. Veillez à cocher les cases suivantes:
        1. Agrégez et compressez les fichiers CSS.
        2. Agrégez les fichiers JavaScript.Configuration
          Développement > Performances
          Bandwidth optimization
  2. Téléchargez et installez
    1. Téléchargez Aggregate Cache en cliquant sur le lien.Téléchargez Aggregate Cache
    2. Installez-le dans /sites/all/modules/sites/all/modules
      /sites/all/modules
    3. Activez le module depuis la section Modules dans votre back-end.modules
      Activez le module

Gérer les ressources empêchant l’affichage.

Apportez les modifications ci-dessous pour faire en sorte que le navigateur affiche les éléments plus rapidement et réduire la durée de chargement de manière significative.

Changer l’emplacement de JavaScript

Placez JavaScript dans le pied de page du site web, de manière à ce qu’il soit chargé plus tard dans le processus (après que la page soit en grande partie affichée).

Javascript

CSS inline

N’incluez que le code CSS le plus critique dans les fichiers des thèmes et laissez le reste charger de manière asynchrone via LoadCSS (référez-vous à https://github.com/filamentgroup/loadCSS).

CSS inline

Utiliser async/defer

Le module permet de mettre du code JavaScript critique inline.

  1. Téléchargez le module « Magic » en cliquant sur le lien.Téléchargez le module « Magic »
  2. Installez-le dans /sites/all/modules/sites/all/modules
    /sites/all/modules
  3. Activez le module depuis la section Modules de votre back-end.Modules
    Activez le module

D’autres petites améliorations peuvent être apportées:

  • Concaténation de fichiers (comme les fichiers CSS)
  • Mettez les essentiels (de js, css et autres) inline dans les fichiers PHP.
  • CSS Spriting
Mis à jour le 8 mars 2020

Cet article a-t-il été utile ?

Need support?
Can’t find the answer you’re looking for? Don’t worry we’re here to help!
Contact support

Avez-vous trouvé une solution ?

support_bottom_contact_alt

Nos spécialistes sont prêts à vous fournir une assistance gratuite 24 h/24 et 7 j/7. N’hésitez pas à contacter Joachim et ses collègues via e-mail ou téléphone.

support_bottom_contact_alt
Joachim Coessens Assistance fournie par des spécialistes