Optimisez votre site web avec le module dynamique Google PageSpeed pour NGINX Plus

Liam CrillyDirecteur senior de la gestion des produits

Alors que la taille moyenne des pages web ne cesse d’augmenter, il devient de plus en plus important d’optimiser tous les aspects de la conception, du développement et de la diffusion de votre site web afin de garantir une expérience de qualité à vos utilisateurs, quel que soit l’appareil qu’ils utilisent. Il est bien établi que le temps de chargement des pages a une incidence sur l’expérience utilisateur et les revenus.

Google PageSpeed est une suite d’outils permettant de mesurer et d’optimiser les performances de votre site web. Elle est disponible depuis plusieurs années sous la forme d’un module tiers que vous pouvez compiler dans NGINX Open Source. Avec l’introduction des modules dynamiques dans NGINX Plus R11, les utilisateurs de NGINX Plus peuvent désormais eux aussi profiter de PageSpeed.

Lorsque vous chargez PageSpeed en tant que module dynamique dans NGINX Plus, il réécrit et optimise automatiquement les ressources de votre site Web. Dans cet article de blog, nous expliquons comment compiler et configurer le module dynamique. (Gardez à l’esprit qu’en tant que module tiers, PageSpeed n’est pas couvert par votre contrat de support NGINX Plus.)

Compiler et charger PageSpeed en tant que module dynamique pour NGINX Plus

Les instructions suivantes sont basées sur les instructions d’installation manuelle de Google, et ont été adaptées pour assurer la compatibilité binaire avec NGINX Plus. (Vous pouvez utiliser les instructions de Google telles quelles pour créer un module dynamique compatible avec NGINX Open Source.)

Étape 0 : préparation de l’environnement de compilation

Nous vous recommandons vivement de compiler les modules dynamiques sur un système distinct, que nous appelons ici l’« environnement de compilation ». Cette approche réduit les risques et la complexité du système sur lequel vous prévoyez d’exécuter NGINX Plus avec le module PageSpeed (que nous appelons l’« environnement de production »). L’environnement de compilation doit utiliser le même système d’exploitation et la même version que l’environnement de production ; en outre, les composants suivants doivent être installés :

• Utilitaire UnZip
• Compilateur et utilitaire make
• Bibliothèque d’expressions régulières compatibles avec Perl (fichiers de développement)
• Bibliothèques de compression Zlib (fichiers de développement)

Pour vous assurer que ces prérequis sont installés dans votre environnement de compilation, exécutez la commande suivante.

• Pour Ubuntu/Debian :

$ sudo apt-get install unzip gcc make libpcre3-dev zlib1g-dev

• Pour CentOS/RHEL/Oracle Linux :

$ sudo yum install unzip gcc make pcre-devel zlib-devel

Étape 1 : Obtention de NGINX Open Source

1. Dans l’environnement de production, exécutez la commande suivante pour identifier la version de NGINX Open Source correspondant à la version de NGINX Plus en cours d’exécution. Elle apparaît en orange dans cette sortie : NGINX 1.11.5, qui correspond à NGINX Plus R11.

$ nginx -vnginx version: nginx/1.11.5 (nginx-plus-r11)

1. Dans l’environnement de compilation, téléchargez les sources de la version appropriée de NGINX Open Source.

$ wget -qO - http://nginx.org/download/nginx-1.11.5.tar.gz | tar zxfv -

Étape 2 : téléchargement et préparation des sources de PageSpeed

Effectuez ces étapes dans l’environnement de compilation.

1. Recherchez le numéro de la dernière version du module PageSpeed dans les notes de version, ou en exécutant cette commande.

$ curl -sS https://modpagespeed.com/doc/release_notes | grep release_ | head -1 | sed -e "s/^.*release_([0-9.]*)-beta.*/1/"

1. Le numéro de version de PageSpeed est utilisé plusieurs fois dans les commandes de compilation. Définissez-le donc comme variable d’environnement, « NPS_VERSION ». Incluez uniquement la partie numérique de la chaîne de version, sans le suffixe « ‑stable » ou « ‑beta ».

$ NPS_VERSION=numeric-part-of-version-string

1. Téléchargez et extrayez les sources comme suit. Notez que ces commandes doivent être exécutées dans l’ordre, comme un script.

wget https://github.com/pagespeed/ngx_pagespeed/archive/v${NPS_VERSION}-beta.zip unzip v${NPS_VERSION}-beta.zip cd ngx_pagespeed-${NPS_VERSION}-beta/ psol_url=https://dl.google.com/dl/page-speed/psol/${NPS_VERSION}.tar.gz [ -e scripts/format_binary_url.sh ] && psol_url=$(scripts/format_binary_url.sh PSOL_BINARY_URL) wget ${psol_url} tar -xzvf $(basename ${psol_url}) # extracts to psol/

Étape 3 : compilation du module dynamique PageSpeed

1. Dans l’environnement de compilation, compilez le module dynamique PageSpeed en exécutant d’abord le script configure de NGINX avec l’argument --with-compat afin de rendre le module dynamique compatible au niveau binaire avec NGINX Plus. Exécutez ensuite make modules pour compiler uniquement le module.

$ cd ../nginx-1.11.5$ ./configure --add-dynamic-module=../ngx_pagespeed-${NPS_VERSION}-beta --with-compat
$ make modules

1. Le processus de compilation génère le module dynamique sous le nom objs/ngx_pagespeed.so. Copiez le fichier .so de l’environnement de compilation vers le répertoire des modules, /etc/nginx/modules, dans l’environnement de production. Nous vous recommandons de renommer le fichier lors de sa copie afin d’inclure le numéro de version de NGINX Open Source (et l’étape suivante part du principe que vous l’avez fait), par exemple ngx_pagespeed_1.11.5.so.
2. Dans l’environnement de production, créez un lien symbolique entre le nom de fichier comportant le numéro de version et le nom de fichier générique (d’origine).

$ cd /etc/nginx/modules$ sudo ln -s ngx_pagespeed_1.11.5.so ngx_pagespeed.so
$ ls -gG
-rw-r--r-- 1 11924784 Feb  6 11:52 ngx_pagespeed_1.11.5.so
lrwxrwxrwx 1       23 Feb  6 11:52 ngx_pagespeed.so -> ngx_pagespeed_1.11.5.so

Étape 4 : chargement du module dynamique PageSpeed

Effectuez ces étapes dans l’environnement de production.

1. Ajoutez la directive « load_module » pour charger PageSpeed en tant que module dynamique. Cette directive doit figurer dans le contexte de niveau supérieur (« main ») du fichier de configuration nginx.conf (c’est-à-dire pas dans les contextes http ou stream).

load_module modules/ngx_pagespeed.so;

1. PageSpeed lui-même est configuré dans le contexte « http ». Placez donc ces directives dans un nouveau fichier de configuration nommé pagespeed.conf dans le répertoire /etc/nginx/conf.d. PageSpeed est activé pour le site web indiqué dans la directive proxy_pass, ici http://www.example.com.

pagespeed MessageBufferSize 10240;
pagespeed FileCachePath /var/ngx_pagespeed_cache;

server {
    listen 80;
    location / {
        proxy_pass http://www.example.com; 
    }
    pagespeed on;
}

1. Rechargez NGINX Plus afin de charger le module PageSpeed dans l’instance en cours d’exécution.

$ sudo nginx -s reload

Tester le module PageSpeed de NGINX Plus avec PageSpeed Insights

PageSpeed Insights est un outil distinct proposé par Google qui permet de mesurer le niveau d’optimisation d’une page web sur les appareils mobiles et les ordinateurs. Il attribue un score pour chaque type d’appareil et fournit des suggestions pour accélérer le chargement de la page. Cet outil est utile pour évaluer votre site et démontrer l’efficacité du module PageSpeed.

Vous pouvez utiliser PageSpeed Insights pour comparer le score de votre site et les suggestions d’optimisation avec et sans PageSpeed activé. Alternez entre les directives « pagespeed on; » et « pagespeed off; » pour mesurer l’efficacité du module PageSpeed sur votre site.

PageSpeed applique ses optimisations sans nécessiter de configuration ni de réglage supplémentaires. Toutefois, si vous souhaitez mieux contrôler les optimisations effectuées sur votre site, consultez la documentation de PageSpeed.

Essayez vous-même PageSpeed avec NGINX Plus : commencez votre essai gratuit de 30 jours dès aujourd’hui ou contactez-nous pour discuter de vos cas d’utilisation.

À propos de l’auteur

Liam CrillyDirecteur senior de la gestion des produits

Autres articles de Liam Crilly