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
No Comments yet!