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.

Table des matières
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 Filtre | Description |
---|---|
responsive_images | Rend les images réactives en ajoutant srcset avec des images optimisées pour différentes résolutions. |
outline_css | Externalisez de gros blocs de CSS dans un fichier pouvant être mis en cache. |
outline_javascript | Externalisez de gros blocs de JS dans un fichier pouvant être mis en cache. |
combine_css | Combine 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_async | Convertir l’utilisation synchrone de l’API Google Analytics en asynchrone |
rewrite_javascript_inline | Réé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_images | Optimise 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_dimensions | Ajoute 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. |
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 de Pagespeed donne aussi la configuration.
- Enfin on peut aussi vider le cache depuis l’interface.
Liens
- Nginx : un serveur WEB rapide
- Protéger Nginx des attaques DoS et bruteforce
- Optimiser Nginx pour améliorer la vitesse des sites WEB
- Optimiser le cache de Nginx et fastcgi
- Configurer le cache FastCGI de Nginx
- Nginx : implémenter la mise en cache du navigateur avec le Cache Control
- Comment vider le cache Nginx
- Nginx : configurer un MicroCaching pour améliorer les performances
- Installer/Configurer le module Google PageSpeed pour optimiser vos sites WEB
- Optimiser PHP-FPM
- Comment accélérer et optimiser WordPress
- Cloudflare : comment protéger Nginx et WordPress des attaques DoS, piratages et bruteforce
- Comment fonctionne un serveur WEB