TOC

Comment augmenter le score de PageSpeed ​​en modifiant votre configuration Nginx sur Ubuntu 16.04

introduction

Nginx excelle dans le traitement des demandes de pages Web, mais même si une page Web peut sembler rapide, la configuration par défaut de Nginx entraînera le contrôle de Google https://developers.google.com/speed/. pagespeed / insights / Outil [PageSpeed ​​Insights] pour signaler les inefficacités de votre site et le classer mal. Google utilise la vitesse de votre site comme facteur clé pour déterminer la position de recherche de votre site.

Dans ce didacticiel, vous allez modifier rapidement le fichier de configuration de votre domaine afin d’accroître instantanément la vitesse de réponse de votre site et sa métrique PageSpeed. L’objectif est d’obtenir un score supérieur à 80/100, car c’est le seuil au-dessus duquel Google appliquera un marqueur vert à votre score, signalant ainsi un site rapide.

Tout d’abord, vous allez activer la compression Gzip pour des types de fichiers spécifiques. Ensuite, vous allez configurer la mise en cache du navigateur pour un boost supplémentaire. Ces méthodes amélioreront la vitesse de n’importe quel site exécuté sur Nginx, quel que soit le logiciel ou le CMS avec lequel il est construit. Par exemple, une installation Wordpress lente et peu performante permettrait des gains instantanés sans avoir à toucher une ligne du noyau ou à payer des plugins de performance coûteux. Cette approche fonctionne même si le site fonctionne sur un hébergement partagé de faible puissance, tant que le serveur est Nginx et que vous pouvez modifier le fichier de configuration.

Conditions préalables

Pour compléter ce tutoriel, vous aurez besoin de:

Étape 1 - Obtenir le score initial de PageSpeed

Avant d’apporter des modifications, saisissons le score PageSpeed ​​existant afin de disposer d’une base de référence de performances à comparer une fois le didacticiel terminé. Pour ce faire, collez l’URL du site dans Google, le service PageSpeed ​​Insights, puis cliquez sur * Run Insights *.

Vous verrez des résultats comme ceux-ci:

image: https: //assets.digitalocean.com/articles/pagespeed_nginx_1604/LbXFqZD.png [Score de vitesse de page avant optimisations]

Dans cet exemple, nous constatons un faible score de 63 sur Mobile et de 74 sur le bureau, car la compression et la mise en cache du navigateur ne sont pas configurées correctement sur le serveur. À la fin de ce didacticiel, ces deux éléments seront résolus sur tous les types de périphériques via les modifications de configuration de Nginx.

Commençons par configurer Nginx pour compresser certaines réponses.

Étape 2 - Activer la compression

Les fichiers CSS, JavaScript et les images peuvent être volumineux, ce qui augmente la quantité de données que les utilisateurs doivent télécharger. La compression signifie que la taille de ces actifs est réduite à une version plus compacte, plus petite mais contenant toutes les données requises. Gzip est une option pour effectuer cette compression sur Nginx. Il est disponible dans toutes les principales distributions Linux et doit simplement être activé et configuré correctement. Lorsque la compression Gzip est activée, les navigateurs peuvent télécharger les actifs statiques plus rapidement. C’est pourquoi l’outil PageSpeed ​​l’indique comme un problème à résoudre.

Pour activer la compression, ouvrez le fichier de configuration Nginx de votre site dans nano ou votre éditeur de texte préféré. Nous allons utiliser le fichier par défaut dans cet exemple:

sudo nano /etc/nginx/sites-available/

Localisez le bloc de configuration du serveur, qui ressemblera à ceci:

/ etc / nginx / sites-available / default

server {
   listen 80 default_server;
   listen [::]:80 default_server;
   . . .
}

Ajoutons une série d’extraits pour configurer la compression.

Tout d’abord, activez la compression Gzip et définissez le niveau de compression:

/ etc / nginx / sites-available / default

server {
   listen 80 default_server;
   listen [::]:80 default_server;

Vous pouvez choisir un nombre compris entre «+ 1 » et « 9 » pour cette valeur. ` 5 +` est un compromis parfait entre la taille et l’utilisation du processeur, offrant une réduction d’environ 75% pour la plupart des fichiers ASCII (presque identique au niveau 9).

Ensuite, dites à Nginx de ne pas compresser tout ce qui est déjà petit et ne risque pas de rétrécir davantage. La valeur par défaut est + 20 + octets, ce qui est mauvais car cela entraîne généralement des fichiers plus volumineux après compression. Réglez-le sur + 256 + à la place:

/ etc / nginx / sites-available / default

...
   gzip_comp_level    5;

Ensuite, dites à Nginx de compresser les données même pour les clients qui se connectent à nous via des proxies tels que CloudFront:

/ etc / nginx / sites-available / default

...
   gzip_min_length    256;

Indiquez ensuite à ces mandataires de mettre en cache la version compressée et la version normale d’une ressource chaque fois que l’en-tête de capacités + Accept-Encoding + du client varie. Cela évite le problème où un client non compatible Gzip, ce qui est extrêmement rare aujourd’hui, afficherait un charabia si leur proxy leur donnait la version compressée.

...
   gzip_proxied       any;

Enfin, spécifiez les types MIME pour la sortie à compresser. Nous allons compresser les images, les données JSON, les polices et autres types de fichiers courants:

/ etc / nginx / sites-available / default

...
   gzip_vary          on;

Lorsque vous avez terminé, la section entière devrait ressembler à l’exemple suivant:

/ etc / nginx / sites-available / default

server {
   listen 80 default_server;
   listen [::]:80 default_server;

   gzip on;
   gzip_comp_level    5;
   gzip_min_length    256;
   gzip_proxied       any;
   gzip_vary          on;

   gzip_types
   application/atom+xml
   application/javascript
   application/json
   application/ld+json
   application/manifest+json
   application/rss+xml
   application/vnd.geo+json
   application/vnd.ms-fontobject
   application/x-font-ttf
   application/x-web-app-manifest+json
   application/xhtml+xml
   application/xml
   font/opentype
   image/bmp
   image/svg+xml
   image/x-icon
   text/cache-manifest
   text/css
   text/plain
   text/vcard
   text/vnd.rim.location.xloc
   text/vtt
   text/x-component
   text/x-cross-domain-policy;
   # text/html is always compressed by gzip module
}

Enregistrez et fermez le fichier.

Vous avez ajouté de nombreuses lignes au fichier de configuration et il est toujours possible qu’un caractère manquant ou un point-virgule puisse briser des éléments. Pour vous assurer que votre fichier ne contient aucune erreur à ce stade, testez la configuration de Nginx:

sudo nginx -t

Si vous avez apporté les modifications exactement comme indiqué dans ce didacticiel, aucun message d’erreur ne s’affiche.

Cette modification fournira l’accélération la plus importante de la vitesse de votre site, mais vous pouvez également configurer Nginx pour qu’il exploite la mise en cache du navigateur, ce qui réduira les performances supplémentaires du serveur.

Étape 3 - Configuration de la mise en cache du navigateur

La première fois que vous visitez un domaine, ces fichiers sont téléchargés et stockés dans la mémoire cache du navigateur. Lors de visites ultérieures, le navigateur peut servir les versions locales au lieu de télécharger à nouveau les fichiers. Cela permet à la page Web de se charger beaucoup plus rapidement car il lui suffit de récupérer les données qui ont changé depuis la dernière visite. Il offre une bien meilleure expérience aux utilisateurs et c’est la raison pour laquelle PageSpeed ​​Insights de Google recommande son implémentation.

Encore une fois, ouvrez le fichier de configuration Nginx par défaut dans votre éditeur:

sudo nano /etc/nginx/sites-available/default

Vous allez ajouter un petit morceau de code qui indiquera aux navigateurs de stocker en mémoire cache les fichiers CSS, JavaScript, les images et les fichiers PDF pendant une période de sept jours.

Insérez l’extrait de code suivant dans le bloc serveur directement après le code précédent pour la compression Gzip:

/ etc / nginx / sites-available / default

...
# text/html is always compressed by gzip module

Le fichier de configuration final de Nginx devrait ressembler à ceci:

/ etc / nginx / sites-available / default

server {
   listen 80 default_server;
   listen [::]:80 default_server;

   gzip on;
   gzip_comp_level    5;
   gzip_min_length    256;
   gzip_proxied       any;
   gzip_vary          on;

   gzip_types
   application/atom+xml
   application/javascript
   application/json
   application/ld+json
   application/manifest+json
   application/rss+xml
   application/vnd.geo+json
   application/vnd.ms-fontobject
   application/x-font-ttf
   application/x-web-app-manifest+json
   application/xhtml+xml
   application/xml
   font/opentype
   image/bmp
   image/svg+xml
   image/x-icon
   text/cache-manifest
   text/css
   text/plain
   text/vcard
   text/vnd.rim.location.xloc
   text/vtt
   text/x-component
   text/x-cross-domain-policy;
   # text/html is always compressed by gzip module

   location ~*  \.(jpg|jpeg|png|gif|ico|css|js|pdf)$ {
       expires 7d;
   }
}

Enregistrez et fermez le fichier pour quitter. Assurez-vous que la configuration ne contient pas d’erreur:

sudo nginx -t

Redémarrez ensuite Nginx pour appliquer ces nouvelles directives aux demandes entrantes.

sudo systemctl restart nginx

Vous avez adapté Nginx pour générer de meilleurs scores PageSpeed. Voyons comment ces changements affectent notre PageSpeed.

Étape 4 - Mesurer les résultats

Pour vérifier le nombre de points par lesquels ces modifications de configuration ont élevé votre score PageSpeed, exécutez votre site à l’aide des outils PageSpeed ​​Insights en collant l’URL et en cliquant sur * Exécuter Insights *. Vous verrez que les avertissements de compression et de mise en cache du navigateur ont disparu:

image: https: //assets.digitalocean.com/articles/pagespeed_nginx_1604/IQolNMR.png [Score de vitesse de page après l’optimisation]

Comparez le nouveau score à votre métrique de base initiale. À la fin de ce tutoriel, vous devriez avoir une note au moins 10 points plus élevée qu’auparavant.

Notre objectif était d’obtenir un score supérieur à 80. Si votre site se trouve toujours en dessous de ce seuil, vous devez faire attention à autre chose. PageSpeed ​​Insights vous expliquera en détail ce qu’il en est et vous indiquera comment les résoudre si vous cliquez sur le lien * Montrer comment réparer * pour chaque problème. Les étapes exactes varient pour chaque site et sortent du cadre de ce didacticiel.

Conclusion

Vous avez accéléré votre site Web en apportant de simples modifications à la configuration de Nginx. Votre score PageSpeed ​​est maintenant bien meilleur et le site se charge beaucoup plus rapidement. Cela rendra les utilisateurs plus heureux et augmentera la qualité de votre site aux yeux de Google. PageSpeed ​​est un signal de classement très important, et vous démontrez maintenant que votre domaine offre une expérience agréable aux visiteurs.

Changer votre configuration de Nginx n’est qu’un moyen d’améliorer PageSpeed ​​et peut ne pas suffire par lui-même. Vous devez toujours écrire du code performant, mettre les objets en cache de manière appropriée, servir les actifs via un réseau de diffusion de contenu (CDN) et utiliser la minimisation, dans la mesure du possible, pour accélérer les choses.

Related