Récemment, je suit tombé sur gtmetrix.com. C’est un outil très intéressant qui permet de mesurer les performances d’un site internet et qui, surtout, propose des conseils pour améliorer la situation.

Vu que mon site est propulsé par Nginx sur un Raspberry Pi 2 Model B (depuis une semaine), je vais vous détailler les modifications apportées pour booster les performances.

Tout d’abord, c’est très simple, il suffit de se rendre sur gtmetrix.com et d’entrer l’URL du site à analyser.

Voici les première performances retournées par le système :

Les 3 erreurs principales en rouge indiquent :

• Leverage browser caching
• Serve scaled images
• Enable gzip compression

Leverage browser caching

Par défaut, lors de la navigation sur un site, le navigateur va lire complètement les pages qui le composent et donc charger tous les éléments (images, css, js, …) lors de chaque visite.

L’idée est de demander au navigateur de stocker ces éléments en cache, c-à-d en local, pour les réutiliser plus tard. Par exemple, le logo du site ou le css peuvent être réutilisés sur différentes pages.

Pour cela, on va spécifier une date d’expiration aux fichiers pour éviter de les recharger à chaque fois.

$ sudo nano /etc/nginx/sites-enabled/default

Et on ajoute les lignes location ~* \.(jpg|jpeg|png|gif|ico|css|js|pdf)$ { expires 365d; } au fichier comme ci-dessous :

server {

listen 80;
server_name localhost;

location / {
root /usr/share/nginx/html;
index index.html index.htm;
}

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

}

Serve scaled images

Lorsque vous insérez une image dans une page web, évitez de spécifier une taille (largeur / hauteur) inférieure à l’image originale. Sinon, le navigateur devra charger une grande image qui sera ensuite affichée en petit. Préférez charger la juste taille.

Dans WordPress, il est possible de définir les formats qui seront créés au moment de l’importation.

Dans le cas de mon site, l’image en pleine largeur fait 620px. Je peux donc uploader une image en 1000px qui sera redimensionnée à max 175×175, 300×300 et 620×620. Un clic sur l’image à 620px ouvrira l’image originale à 1000px.

Il est également important de bien compresser les images avant de les envoyer et de choisir le format le plus adéquat : JPEG, PNG ou GIF.

L’outil ImageOptim est un très bon utilitaire gratuit sur MAC.

Edit 13 janvier 2021 :

Il est également possible d’utiliser des outils en ligne pour compresser les images comme : https://www.websiteplanet.com/ .

Merci Nancy pour ton mail ! 🙂

Enable gzip compression

Gzip permet de compresser les pages Web et les feuilles de style avant de les envoyer vers le navigateur. Cela réduit considérablement le temps de transfert puisque les fichiers sont beaucoup plus petits.

Pour activer la compression Gzip dans Nginx :

$ sudo nano /etc/nginx/nginx.conf

Et on dé-commente les lignes suivantes :

gzip on;
gzip_disable "msie6";

gzip_vary on;
gzip_proxied any;
gzip_comp_level 6;
gzip_buffers 16 8k;
gzip_http_version 1.1;
gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;

Une fois toutes ces opérations effectuées, on relance Nginx :

$ sudo service nginx restart

Un nouveau petit test avec gtmetrix.com devrait renvoyer des performances nettement meilleures.

Edit 15 mai 2015 :

Sur les statistiques de Google, on peut s’apercevoir que le temps de chargement des pages a considérablement diminué vers le 10 mars (trait orange), lors de l’application des mesures décrites dans cet article.