Drupal 7 : Obtenir une note proche de 100/100 sur Google PageSpeed Insights

Je vous présente un tutoriel étape par étape qui vous permettra d’atteindre une note proche de 100/100 sur Google PageSpeed Insights grâce au module Advanced CSS/JS Aggregation pour Drupal 7. Cela vous sera très utile si vous travaillez votre SEO.

Cet article a été traduit et agrémenté à partir du tuto présent sur le site drupal.org : https://groups.drupal.org/node/517292

La plupart des sites utilisant le module AdvAgg en version 7.x-2.3x peuvent parfaitement atteindre une note de 100/100 sur Google PageSpeed Insights. Voici comment procéder, étape par étape

Avant de commencer :

Assurez-vous entre chaque section que l’activation de chaque sous-module ne vous a pas mis le bazar dans votre Drupal et que votre site est en parfait état de marche.

 Étape 1 : Advances CSS/JS Aggregation

Allez dans admin/config/development/performance/advagg

Selectionnez “Use recommended (optimized) settings”

Étape 2 : AdvAgg Compress Javascript

Installez AdvAgg Compress Javascript et allez dans admin/config/development/performance/advagg/js-compress

  • Sélectionnez JSMin si il est disponible, sinon sélectionnez JSMin+
  • Sélectionnez “Strip everything (smallest files)
  • Enregistrez vos changements
  • Cliquez sur le lien “Batch Compress” en haut de la page

Étape 3 : AdvAgg Font Loader

Installez Adv Async Font Loader si ce n’est pas déjà fait, puis allez dans admin/config/development/performance/advagg/font

  • Sélectionnez Local file included in aggregate (version: X.X.X). Si cette option n’est pas disponible, suivez les instructions juste en dessous pour savoir comment l’installer.
  • Gardez les 2 checkbox cochées

Étape 4 : AdvAgg Bundler

Installez AdvAgg Bundler si ce n’est pas déjà fait, et allez sur admin/config/development/performance/advagg/bundler

Si votre server supporte le HTTP 2, alors sélectionnez “Use HTTP 2.0 settings”. Sinon, restez sur “Use HTTP 1.1 settings”.

Étape 5 : AdvAgg Relocate

Installez AdvAgg Relocate si ce n’est pas déjà fait, et allez sur admin/config/development/performance/advagg/relocate

  • Sélectionnez “Use recommanded (optimized) settings”

Étape 6 : AdvAgg Modifier

Installez AdvAgg Modifier si ce n’est pas déjà fait, puis allez sur admin/config/development/performance/advagg/mod

  • Sélectionnez “Use recommanded (optimized) settings”

Étape 7 : AdvAgg Critical CSS

Installez AdvAgg Critical CSS si ce n’est pas déjà fait et allez dans admin/config/development/performance/advagg/critical-css

Ceci concerne la page d’accueil du site, mais peut être fait aussi pour les principales pages d’atterrissage de votre site (regardez Google Analytics pour les trouver).

  • Sélectionnez le thème principal de votre site
  • Le type d’utilisateur (User type) devrait être sur “Anonymous”
  • Type of lookup : Sélectionnez une URL
  • Value to lookup : Saisir “<front>”
  • Rendez-vous ensuite sur le site “https://www.sitelocity.com/critical-path-css-generator
  • Saisir votre URL
  • Copier/coller le “Critical Path CSS” dans la zone “Critical CSS”

Ce tutotiel est terminé ! Vous devriez maintenant vous approcher de 100/100 sur Google PageSpeed Insights.

N’hésitez pas à vérifier les excellentes de note que j’ai obtenues avec mon site www.pierreprat.com

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *