Améliorer les performances web avec PageSpeed Module

Booster votre référencement avec PageSpeed Module ?

On aimerais bien être le premier résultat affiché par Google, et ce Graal peut s’obtenir en optimisant tous les aspects du SEO de votre site. Un paramètre du SEO que PageSpeed Module permet d’améliorer est la performance de vos pages web.

PageSpeed Module, c’est quoi ?

PageSpeed vous dit sûrement quelque chose si vous vous intéressé à l’optimisation du temps de chargement de vos pages, vous avez certainement du lancer des rapports PageSpeed Insights depuis la Google Search Console ou depuis Lighthouse la console de chrome. Ces rapports vous permettent d’avoir des conseils pour optimiser différents facteurs influant sur votre SEO, c’est Google lui-même qui va vous dire ce qu’il attend pour mettre en avant page sur son moteur de recherche. Avec PageSpeed Module, vous allez pouvoir soigner votre score de performances, le module directement branché sur votre serveur web va appliquer les bonnes pratiques d’optimisation de performance afin de booster votre score de performance. Bien évidemment en plus de booster ce score, il va réellement améliorer le temps de réponse de vos pages web, ce qui plaira forcément à vos utilisateurs.

Si vous avez un score très inférieur à 100, vous devrez vous retrouver avec des suggestions d’amélioration qui pourrait faire grimper votre score. Pour mettre en place ces améliorations, suivant votre site internet, vous pouvez modifier le contenu de votre site, améliorer votre code ou encore si vous êtes sur WordPress rajouter des plugins (souvent payant). Mais il se peut que PageSpeed Module soit la meilleure réponse à vos problèmes du fait que ce soit Google lui-même qui l’ai créé.

Comment configurer PageSpeed Module sur son serveur web ?

Google à créé des modules open-source pour vos serveurs web utilisant Apache ou Nginx qui applique les bonnes pratiques d’optimisation fourni par les rapports PageSpeed Insigths. L’installation du module PageSpeed est relativement simple, elle s’effectue en quelque ligne de commande pour un résultat immédiat et relativement puissant. Dans la suite de cet article, je vais vous guider sur l’installation du module sur un serveur web Nginx (environnement Ubuntu 20.04).

Étape 1 : Installer la dernière version de Nginx

Nous allons installer la dernière version de Nginx en utilisant la version ondrej/nginx-mainline qui permet l’utilisation de module dynamique, ce qui permettra d’ajouter le module PageSpeed sans avoir à recompiler Nginx.

sudo add-apt-repository ppa:ondrej/nginx-mainline -y
sudo apt update
sudo apt install nginx-core nginx-common nginx nginx-full

Si vous avez déjà Nginx d’installé, vous devrais avoir un message vous proposant de garder votre version actuelle, vous pouvez évidemment la garder en appuyant sur n.

Nous allons aussi devoir télécharger le code source de nginx afin de compiler notre module pour le brancher sur notre serveur web Nginx.

sudo nano /etc/apt/sources.list.d/ondrej-ubuntu-nginx-mainline-*.list

Il va falloir décommenter la ligne suivante en supprimer le #.

# deb-src http://ppa.launchpad.net/ondrej/nginx-mainline/ubuntu/ focal main

Une fois la ligne décommenter vous pouvez enregistrer les modifications et fermer le fichier. Puis faire une mise à jour pour que le système prenne en compte nos modifications.

sudo apt update

Étape 2 : Télécharger le code source de nginx

On va créer un dossier nginx dans /usr/local/src/ pour y stocker le code source de Nginx et le retrouver plus facilement. Il faut donc exécuter les commandes suivantes en remplacent username:group par vos propres informations.

sudo chown username:group /usr/local/src/ -R 
mkdir -p /usr/local/src/nginx

Puis nous allons télécharger le code source de Nginx.

cd /usr/local/src/nginx/
sudo apt install dpkg-dev
sudo apt source nginx

W: Download is performed unsandboxed as root as file 'nginx_1.19.5-0ubuntu1.dsc' 
couldn't be accessed by user '_apt'. - pkgAcquire::Run (13: Permission denied)

Étape 3 : Télécharger le code source de ngx_pagespeed

Afin de compiler le module ngx_pagespeed nous devons récupérer l’incubateur qui nous permettra de compiler le module ngx_pagespeed. Nous allons utiliser git et cloner le repo github de l’incubateur pagespeed.

cd /usr/local/src
sudo apt install git
git clone https://github.com/apache/incubator-pagespeed-ngx.git
cd incubator-pagespeed-ngx/

Nous allons utiliser la branche actuellement stable.

git checkout latest-stable

Dans le dossier, vous trouverez un fichier PSOL_BINARY_URL, celui-ci comporte l’url qui vous permettra de télécharger la librairie d’optimisation de pagespeed (PSOL: PageSpeed Optimization Libraries). Attention, vous aurez peut-être une autre version que 1.13.35.2, il faudra bien penser à changer la version dans les commandes suivantes.

cat PSOL_BINARY_URL
# https://dl.google.com/dl/page-speed/psol/1.13.35.2-$BIT_SIZE_NAME.tar.gz 
# l'url a récupérer

Il faudra télécharger la librairie et ensuite l’extraire, vous devriez vous retrouver avec un dossier psol dans votre dossier incubator-pagespeed-ngx.

wget https://dl.google.com/dl/page-speed/psol/1.13.35.2-x64.tar.gz
tar xvf 1.13.35.2-x64.tar.gz

Étape 4 : Compiler le module ngx_pagespeed

Pour compiler notre module, il faut installer les dépendances nécessaires. Il faudra changer la version de Nginx 1.19.5 qui pourrait être différente pour vous.

cd /usr/local/src/nginx/nginx-1.19.5
sudo apt build-dep nginx
sudo apt install uuid-dev

Une fois les dépendances installées, nous allons créer notre module et le copier dans le dossier etc/nginx/.

./configure --with-compat --add-dynamic-module=/usr/local/src/incubator-pagespeed-ngx
make modules
sudo cp objs/ngx_pagespeed.so /etc/nginx/modules/

Étape 5 : Mettre en place le module ngx_pagespeed sur votre serveur Nginx

Maintenant, nous allons demander à Nginx d’utiliser notre module, pour cela, nous allons modifier le fichier de configuration.

sudo nano /etc/nginx/nginx.conf

Il vous suffit d’ajouter cette ligne au tout début de votre fichier nginx.conf.

load_module modules/ngx_pagespeed.so;

Une fois les modifications du fichier de configuration terminé et enregistré, on va s’assurer que notre Nginx est pas cassé avec cette configuration.

sudo nginx -t

Si votre configuration est bonne, vous pouvez relancer votre serveur web qui maintenant aura le module ngx_pagespeed de disponible. Dans le cas où votre configuration ne serait pas bonne, bonne chance 🤡.

sudo systemctl reload nginx

Étape 6 : Configurer les filtres du module ngx_pagespeed

Pour l’utilisation de certains filtres du module ngx_pagespeed, il faut installer de package comme par exemple ffmpeg et imagemagick qui sont nécessaire aux filtres qui permettent de convertir les images de n’importe quel format vers le format webp.

sudo apt install imagemagick php7.4-imagick ffmpeg

Pour mettre en cache les différents fichiers et pages que le module pagespeed aura optimiser, on va créer un dossier qui accueillera toutes les données mises en cache.

sudo mkdir -p /var/cache/ngx_pagespeed
sudo chown -R www-data:www-data /var/cache/ngx_pagespeed

Vous avez tout ce qui faut pour utiliser les filtres, il va falloir dire à Nginx quelle filtre vous voulez appliquer sur votre serveur web. Pour cela, il va falloir modifier le fichier de configuration Nginx (suivant l’organisation de votre Nginx, cela peut varier), pour moi, il s’agit du fichier /etc/nginx/sites-availables/site-name. Dans ce fichier de configuration, il va falloir ajouter dans la partie server que vous voulez activer pagespeed ainsi que les filtres et configurations que vous voulez.

sudo nano /etc/nginx/sites-availables/site-name

# exemple de ce q'on peut mettre dans le block server
pagespeed on;
pagespeed FileCachePath "/var/cache/ngx_pagespeed/";
pagespeed RewriteLevel OptimizeForBandwidth;
pagespeed EnableFilters collapse_whitespace;
pagespeed EnableFilters inline_css;
pagespeed EnableFilters inline_images;
pagespeed EnableFilters recompress_images;
pagespeed EnableFilters convert_to_webp_lossless;
pagespeed EnableFilters convert_jpeg_to_webp;
pagespeed EnableFilters insert_dns_prefetch;
pagespeed EnableFilters prioritize_critical_css;
pagespeed EnableFilters combine_css;
pagespeed EnableFilters combine_javascript;

location ~ ".pagespeed.([a-z].)?[a-z]{2}.[^.]{10}.[^.]+" {
      add_header "" "";
}

location ~ "^/pagespeed_static/" { }
location ~ "^/ngx_pagespeed_beacon$" { }

Vous trouverez ici un exemple avec la configuration que j’utilise.

https://gist.github.com/ag7-alexis/1aeedee4031c9bb6c39e728caf8b9028

sudo nginx -t # vous pouvez vérifier que votre config est correct et si c'est le cas relancer votre serveur
sudo systemctl reload nginx

curl -I -p votre-url.com
## vous devriez trouver quelque chose comme ça dans votre les headers de réponse
# x-page-speed: 1.13.35.2-0