Menu Fermer

Installer/Configurer le module Google PageSpeed pour optimiser vos sites WEB

Dernière modification : 9 juillet 2021

Pour atteindre le score de 100 sur Google PageSpeed Insights, de nombreuses optimisations sont à effectuer sur votre site WEB.
Pour vous y aider, Google propose un module pour Apache (Mod_PageSpeed) ou Nginx (ngx_pagespeed) afin d’automatiser un grand nombre d’opérations.
Mod_PageSpeed effectuer les tâches suivantes côté serveur :

  • Minimise HTML, CSS et JavaScript
  • Optimise la mise en cache des fichiers
  • Combine les fichiers JavaScript externes et les optimise
  • Optimise le chargement des fichiers en donnant la priorité aux CSS importants et en différant JavaScript
  • Optimise les images via la compression, la conversion de PNG en JPG (si aucune transparence), le redimensionnement des images et la conversion en WebP (pour les navigateurs prenant en charge WebP)

Ainsi, votre site délivre une page optimisée en respectant les conceptions de structures et de code.
Au final, le module permet de gagner en vitesse de chargement des pages, faire baisser les indicateurs FCP, LCP, TBT, CLS pour améliorer score google pagespeed insights.

Dans ce tutoriel, je vous montre comment installer le Module Google PageSpeed de Google et comment le configurer sur Nginx.

Installer/Configurer le module Google PageSpeed pour optimiser vos sites WEB

Installer le Module Google PageSpeed

Pour installer le module Google PageSpeed dans Nginx, deux méthodes depuis les sources ou via les paquets de votre distribution Linux.

Depuis les sources

Pour installer depuis les sources pour Debian, Ubuntu, CentOS ou Fedora, suivez le tutoriel officiel : Installer ngx_pagespeed depuis les sources

  • Installez les paquets, libraires et paquets essentiels (make, gcc) pour compiler depuis des sources
sudo apt-get install build-essential zlib1g-dev libpcre3 libpcre3-dev unzip uuid-dev
  • Puis passez les commandes suivantes pour configurer puis compiler le module pagespeed-ngx depuis les sources.
  • Modifiez la variable de version présente sur la première ligne. Les versions sont présentes sur la page de téléchargement.
NPS_VERSION=1.13.35.2-stable
cd
wget -O- https://github.com/apache/incubator-pagespeed-ngx/archive/v${NPS_VERSION}.tar.gz | tar -xz
nps_dir=$(find . -name "*pagespeed-ngx-${NPS_VERSION}" -type d)
cd "$nps_dir"
NPS_RELEASE_NUMBER=${NPS_VERSION/beta/}
NPS_RELEASE_NUMBER=${NPS_VERSION/stable/}
psol_url=https://dl.google.com/dl/page-speed/psol/${NPS_RELEASE_NUMBER}.tar.gz
[ -e scripts/format_binary_url.sh ] && psol_url=$(scripts/format_binary_url.sh PSOL_BINARY_URL)
wget -O- ${psol_url} | tar -xz  # extracts to psol/
  • Ensuite on peut passer à la compilation de Nginx. Là aussi il faut choisir la version à installer en suivant celles disponibles sur la page de téléchargement.
  • Si vous souhaitez plutôt construire ngx_pagespeed en tant que module dynamique, utilisez –add-dynamic-module= au lieu de –add-module=.
NGINX_VERSION=1.18.0
cd
wget -O- http://nginx.org/download/nginx-${NGINX_VERSION}.tar.gz | tar -xz
cd nginx-${NGINX_VERSION}/
./configure --add-module=$HOME/$nps_dir ${PS_NGX_EXTRA_FLAGS}
make
sudo make install

Depuis APT

Suivez les instructions de cette page pour installer sur Debian, Ubuntu, CentOS ou Fedora : Installer depuis les paquets par APT

Au moment où sont écrites ces lignes, Debian est en version 10 (Buster).
nginx est en version 1.14 qui est trop ancienne pour accueillir pagespeed depuis les paquets.
Il faut mettre à jour nginx vers une version plus récente :

  • Ajoutez la ligne suivante dans /etc/apt/sources.list :
deb https://nginx.org/packages/debian/buster nginx
  • Installez la clé GPG du dépôt :
wget https://nginx.org/keys/nginx_signing.key
sudo apt-key ajouter nginx_signing.key

Mettez à jour l’index du package puis installe le paquet nginx :

sudo apt-get update
udo apt-get install nginx
  • Installez le paquet pagespeed depuis le lien donné précédemment

Configurer le Module Google PageSpeed

Exemple de configuration

Voici un exemple de configuration complète pour charger le module ngx_pagespeed dans Nginx.

  • La directive http se trouve dans /etc/nginx/nginx.conf où y charge le module et on active l’emplacement du cache.
  • Puis on configure les chemins
  • Ensuite on active pagespeed avec pagespeed on;
  • Au besoin on ajoute un en-tête HTTP
  • Ensuite on configure le cache
  • Puis la configuration des statistiques pour la page d’administration
  • Autoriser les domaines avec la directive pagespeed Domain
load_module modules/ngx_pagespeed.so;

  http {
    pagespeed On;
    pagespeed FileCachePath "/var/cache/ngx_pagespeed/";
    pagespeed SslCertDirectory /etc/pki/tls/certs;
    pagespeed SslCertFile /etc/pki/tls/cert.pem;

    # Enables pagespeed for each website:
    pagespeed on;

    pagespeed XHeaderValue                   "Powered By ngx_pagespeed";

    ## PageSpeed Cache Purge
    pagespeed EnableCachePurge               on;
    pagespeed PurgeMethod                    PURGE;
    pagespeed DownstreamCacheRewrittenPercentageThreshold 95;
 
    # Cache
    pagespeed MaxCacheableContentLength      -1;
    pagespeed FileCacheSizeKb                102400;
    pagespeed FileCacheCleanIntervalMs       3600000;
    pagespeed FileCacheInodeLimit            500000;
    pagespeed LRUCacheKbPerProcess           1024;
    pagespeed LRUCacheByteLimit              16384;

    ## Enable these if you want to see the admin console
    pagespeed LogDir /var/log/pagespeed;
    pagespeed Statistics on;
    pagespeed StatisticsLogging on;

    ## PageSpeed admin pages configuration
    pagespeed UsePerVhostStatistics on;
    pagespeed StatisticsLoggingIntervalMs 60000;
    pagespeed StatisticsLoggingMaxFileSizeKb 1024;
    pagespeed MessageBufferSize 100000;
    pagespeed StatisticsPath /monitor/ngx_pagespeed_statistics;
    pagespeed GlobalStatisticsPath /monitor/ngx_pagespeed_global_statistics;
    pagespeed MessagesPath /monitor/ngx_pagespeed_message;
    pagespeed ConsolePath /monitor/pagespeed_console;
    pagespeed AdminPath /monitor/pagespeed_admin;
    pagespeed GlobalAdminPath /monitor/pagespeed_global_admin;

    #Autoriser les domaines
    pagespeed Domain *.malekal.com;

    ## Enable these if you want to see the admin console
    pagespeed LogDir /var/log/pagespeed;
    pagespeed Statistics on;
    pagespeed StatisticsLogging on;
}
  • Puis voici un exemple de configuration de vhost. Pagespeed on/off pour désactiver le module sur un site ou global
server {
    listen 80;
    server_name www.example1.com;
    root /www/example1;
    pagespeed MapRewriteDomain cdn.example1.com *example.com;
  }

  server {
    listen 80;
    server_name www.example2.org;
    root /www/example2;
    pagespeed MapRewriteDomain cdn.example2.org *example.org;
    # Don't want combine_css here
    pagespeed DisableFilters combine_css;
  }

  server {
    listen 80;
    server_name www.example3.org;
    root /www/example3;

    # mod_pagespeed off for this virtual host
    pagespeed off;
  }
}

Activer les filtres

Le module Google PageSpeed fonctionne avec des filtres à activer.
Comme cela peut casser des sites, il faut y aller petit à petit.
Sachez que vous pouvez activer un ensemble de filtres.

PageSpeed propose trois « niveaux » pour simplifier la configuration : PassThrough, CoreFilters et OptimizeForBandwidth.
L’ensemble CoreFilters contient des filtres qui, selon l’équipe de PageSpeed, sont sans danger pour la plupart des sites Web.

  • En utilisant l’ensemble CoreFilters, à mesure que PageSpeed est mis à jour avec de nouveaux filtres, votre site deviendra plus rapide
  • Le paramètre OptimizeForBandwidth offre une garantie de sécurité renforcée et convient comme paramètre par défaut à utiliser avec des sites qui ne connaissent pas PageSpeed
pagespeed RewriteLevel PassThrough;

Ensuite on active les manuellement filtres souhaités.
Pour Nginx, il faut utiliser la directive pagespeed EnableFilter.
On peut les séparer par des virgules.

pagespeed EnableFilters combine_css,combine_javascript;

Ou utiliser plusieurs fois la directive.

pagespeed EnableFilters rewrite_css;
pagespeed EnableFilters collapse_whitespace,remove_comments;
pagespeed EnableFilters flatten_css_imports;

Pour harmoniser les server, créez un fichier pagespeed_filters.conf
Puis appelez le dans chaque server par include :

include pagespeed_filters.conf;

La liste dese filtres

Le module PageSpeed de Google propose énormes de filtres.
La liste complète est disponible dans sur ce lien et les modules pagespeed

Nom du FiltreDescription
responsive_imagesRend les images réactives en ajoutant srcset avec des images optimisées pour différentes résolutions.
outline_cssExternalisez de gros blocs de CSS dans un fichier pouvant être mis en cache.
outline_javascriptExternalisez de gros blocs de JS dans un fichier pouvant être mis en cache.
combine_cssCombine plusieurs éléments CSS en un seul.
rewrite_css
rewrite_javascript_inline		Réécrit les fichiers CSS ou JavaScript pour supprimer les espaces et les commentaires en excès et, si activé, réécrit ou étend le cache des images référencées dans les fichiers CSS. En mode OptimizeForBandwidth, la minification se produit sur place sans modifier les URL.

Réécrit les fichiers JavaScript pour supprimer les espaces et les commentaires en excès. En mode OptimizeForBandwidth, la minification se produit sur place sans modifier les URL.
make_google_analytics_asyncConvertir l’utilisation synchrone de l’API Google Analytics en asynchrone
rewrite_javascript_inlineRéécrit les blocs JavaScript en ligne pour supprimer les espaces blancs et les commentaires en excès.
inline_css
inline_google_font_css
inline_javascript		Injecter le code CSS ou Javascript dans le document HTML.
rewrite_imagesOptimise les images, les réencode, supprime les pixels en excès et inline les petites images. En mode OptimizeForBandwidth, la minification se produit sur place sans modifier les URL.
convert_jpeg_to_progressive
convert_png_to_jpeg
oonvert_gif_to_png
convert_jpeg_to_webp
convert_to_webp_animated
convert_to_webp_lossless		Conversion de formats d’images pour alléger leurs poids.
insert_image_dimensionsAjoute des attributs de largeur et de hauteur aux balises qui en manquent.
resize_images
resize_mobile_images		Redimensionnez les images pour alléger leurs poids
recompress_jpeg
recompress_png
recompress_webp		Supprimer les métadonnées en excès.
Les filtres de pagespeed

Enfin pour désactiver tous les filtres, ce sera comme ceci :

pagespeed ForbidAllDisabledFilters true;

Modifier la configuration des filtres

Certains filtres accueillent des réglages.
Par exemple pour les redimensionnement ou compression, il faut établir des seuils.
Voici les réglages par défaut avec les noms de filtres.

CssFlattenMaxBytes                       102400 (was 2048 prior to 1.9.32.1)
CssImageInlineMaxBytes                        0
CssInlineMaxBytes                          2048
CssOutlineMinBytes                         3000
ImageInlineMaxBytes                        3072
ImageJpegNumProgressiveScans                 -1
ImageJpegNumProgressiveScansForSmallScreens  -1
ImageLimitOptimizedPercent                  100
ImageLimitResizeAreaPercent                 100
ImageRecompressionQuality                    85
ImageResolutionLimitBytes              32000000
JpegRecompressionQuality                     -1
JpegRecompressionQualityForSmallScreens      70
WebpRecompressionQuality                     80
WebpAnimatedRecompressionQuality             70
WebpRecompressionQualityForSmallScreens      70
JsInlineMaxBytes                           2048
JsOutlineMinBytes                          3000
MaxInlinedPreviewImagesIndex                 -1
MinImageSizeLowResolutionBytes             3072
RetainComment                             "[WILDCARD PATTERN]"
RewriteRandomDropPercentage                   0

Voir cette page : Image Filter and Option Reference

Mappage LoadFromFile

Par défaut, PageSpeed charge les sous-ressources via une récupération HTTP ce qui peut surcharger le serveur WEB.
Aussi, Il est plus rapide de charger les sous-ressources directement à partir du système de fichiers, mais cela peut ne pas être sûr car les sous-ressources peuvent être générées dynamiquement ou les sous-ressources peuvent ne pas être stockées sur le même serveur.

Cependant, vous pouvez explicitement indiquer à PageSpeed de charger des sous-ressources statiques à partir du disque en utilisant la directive LoadFromFile.
Une mappage configurée avec LoadFromFile permet le chargement du système de fichiers pour tout ce qui correspond. Si vous avez des répertoires ou des types de fichiers qui ne peuvent pas être chargés directement à partir du système de fichiers, LoadFromFileRule vous permet d’ajouter des règles précises pour contrôler quels fichiers chargés directement et arriveront au processus standard, via HTTP.

pagespeed LoadFromFile "https://forum.malekal.com" "/data/www/forum.malekal.com";

PageSpeed et memcached

Par défaut, la localisation du cache se trouve sur le disque mais on peut aussi utiliser memcached pour bénéficier d’un cache en mémoire.
Voici un exemple de configuration :

## Speed up PageSpeed by storing it in memcached
pagespeed MemcachedThreads               1;
pagespeed MemcachedServers               "localhost:11211";

Page d’administration et statistique

Le module propose aussi une page d’administration WEB pour chaque domaine.
Pour l’activer :

  • Créez un fichier pagespeed_monitoring.conf avec ce contenu :
location ~ "\.pagespeed\.([a-z]\.)?[a-z]{2}\.[^.]{10}\.[^.]+" { add_header "" ""; }
location ~ "^/pagespeed_static/" { }
location ~ "^/ngx_pagespeed_beacon$" { }
location /ngx_pagespeed_statistics { allow 127.0.0.1; deny all; }
location /ngx_pagespeed_global_statistics { allow 127.0.0.1; deny all; }
location /ngx_pagespeed_message { allow 127.0.0.1; deny all; }
location /pagespeed_console { allow 127.0.0.1; deny all; }
location ~ ^/pagespeed_admin { allow 127.0.0.1; deny all; }
location ~ ^/pagespeed_global_admin { allow 127.0.0.1; deny all; }
  • Allow protège l’accès aux ressources et permet de restreindre les adresses IP à consulter la page, sinon vous aurez une erreur 403 access denied.
  • Faites un include de la page dans la directive server de chaque site :
include pagespeed_monitoring.conf;
  • On peut alors visualiser des graphiques qui montrent le % de mise en cache, les erreurs de réécritures des images, etc.
La page d'administration et statistique du module Pagespeed
  • La page d’administration de Pagespeed donne aussi la configuration.
  • Enfin on peut aussi vider le cache depuis l’interface.
La page d'administration et statistique du module Pagespeed

Liens

Tagged