Optimiser votre site Web avec le module dynamique Google PageSpeed pour NGINX Plus

Alors que la taille moyenne des pages Web continue de croître, il est 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 bonne expérience à vos utilisateurs, quel que soit l'appareil qu'ils utilisent. Il est bien documenté que le temps de chargement des pages a un impact 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, disponible depuis plusieurs années sous forme de module tiers que vous pouvez compiler dans NGINX Open Source. Avec l'introduction de modules dynamiques dans NGINX Plus R11, les utilisateurs de NGINX Plus peuvent désormais également 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 créer et configurer le module dynamique. (Gardez à l’esprit qu’en tant que module tiers, PageSpeed n’est pas couvert par votre contrat d’assistance NGINX Plus.)

Création et chargement de PageSpeed en tant que module dynamique pour NGINX Plus

Les instructions suivantes sont basées sur les instructions d'installation manuelle de Google et adaptées pour la compatibilité binaire avec NGINX Plus. (Vous pouvez utiliser les instructions de Google inchangées pour créer un module dynamique qui fonctionne avec NGINX Open Source.)

Étape 0 : Préparation de l'environnement de construction

Nous vous recommandons fortement de compiler les modules dynamiques sur un système séparé, que nous appelons ici « environnement de build ». Cela minimise le risque et la complexité du système sur lequel vous prévoyez d’exécuter NGINX Plus avec le module PageSpeed (nous appelons cela « l’environnement de production »). L'environnement de build doit avoir le même système d'exploitation et la même version que l'environnement de production ; de plus, les composants suivants doivent être installés :

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

Pour vous assurer que votre environnement de build dispose de ces prérequis installés, 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. En travaillant dans un environnement de production, exécutez la commande suivante pour identifier la version NGINX Open Source qui correspond à la version NGINX Plus en cours d’exécution. Il est surligné en orange dans cette sortie : NGINX 1.11.5, qui correspond à NGINX Plus R11.

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

2. En travaillant dans l'environnement de construction, téléchargez les sources de la version NGINX Open Source appropriée.

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

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

Effectuez ces étapes dans l’environnement de build.

1. Recherchez le dernier numéro de 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/"

2. Le numéro de version de PageSpeed est utilisé plusieurs fois dans les commandes de build, définissez-le donc comme variable d'environnement, NPS_VERSION . Incluez uniquement la partie numérique de la chaîne de version, pas le suffixe ‑stable ou ‑beta .

   $ NPS_VERSION= partie-numérique-de-la-chaîne-de-version

3. Téléchargez et extrayez les sources comme suit. Notez que ces commandes sont censées être exécutées de manière séquentielle, comme un script.

   wget https://github.com/pagespeed/ngx_pagespeed/archive/v${NPS_VERSION}-beta.zip
   décompresser 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}) # extrait vers psol/

Étape 3 : Compilation du module dynamique PageSpeed

1. En travaillant dans l’environnement de construction, compilez le module dynamique PageSpeed en exécutant d’abord le script de configuration NGINX avec l’argument --with-compat pour rendre le module dynamique compatible 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 $ créer des modules

2. Le processus de construction produit le module dynamique sous le nom objs/ngx_pagespeed.so . Copiez le fichier .so de l'environnement de construction vers le répertoire des modules, /etc/nginx/modules , dans l'environnement de production. Nous vous recommandons (et l'étape suivante suppose) que lorsque vous copiez le fichier, vous le renommez pour inclure le numéro de version NGINX Open Source, par exemple ngx_pagespeed_1.11.5.so .

3. En travaillant dans l’environnement de production, créez un lien symbolique entre le nom de fichier numéroté de version et le nom de fichier générique (original).

   $ cd /etc/nginx/modules $ sudo ln -s ngx_pagespeed_1.11.5.so ngx_pagespeed.so $ ls -gG -rw-r--r-- 1 11924784 6 févr. 11:52 ngx_pagespeed_1.11.5.so lrwxrwxrwx 1 23 6 févr. 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. Incluez la directive load_module pour charger PageSpeed en tant que module dynamique. La directive doit apparaître dans le contexte de niveau supérieur (« main ») du fichier de configuration nginx.conf (c’est-à-dire pas dans les contextes http ou stream ).

   charger_module modules/ngx_pagespeed.so;

2. PageSpeed lui-même est configuré dans le contexte http , placez donc ces directives dans un nouveau fichier de configuration appelé pagespeed.conf dans le répertoire /etc/nginx/conf.d . PageSpeed est activé pour le site Web spécifié dans la directive proxy_pass , ici http://www.example.com .

   pagespeed MessageBufferSize 10240 ;
   pagespeed FileCachePath /var/ngx_pagespeed_cache ;
   
   serveur {
   écoute 80 ;
   emplacement / {
   proxy_pass http://www.example.com ; 
   }
   pagespeed activé ;
   }

3. Rechargez NGINX Plus pour charger le module PageSpeed dans l’instance en cours d’exécution.

   $ sudo nginx -s recharger

Test du module NGINX Plus PageSpeed avec PageSpeed Insights

PageSpeed Insights est un outil distinct fourni par Google pour mesurer le niveau d'optimisation appliqué à une page Web pour les appareils mobiles et de bureau. Il fournit un score pour les deux appareils avec des suggestions sur la façon d'accélérer le chargement de la page. C'est un outil utile pour mesurer votre site et pour 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é. Basculez entre les directives pagespeed on; et pagespeed off; pour mesurer l'efficacité du module PageSpeed sur votre site.

PageSpeed applique ses optimisations sans aucune configuration ou réglage supplémentaire. Cependant, si vous souhaitez avoir plus de contrôle sur les optimisations effectuées sur votre site, reportez-vous à la documentation de PageSpeed .

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