Bref, j’ai enfin optimisé la configuration de mon conteneur Nginx desservant ce site.

Un peu de blabla

Quand ce site était hébergé sur mon VPS avec Apache, j’étais assez content des performances. Je ne vais pas dire que j’étais naïve à cette époque mais plutôt que je me basais sur ce qu’était ce site avant que j’utilise le SSG Hugo : un blog Wordpress !

Avant (sous Apache), je comprenais que mon site pouvait être lent vu à quel point Apache se fait bâché sur le sujet. Pour résumé, il n’est pas trop recommandé pour les petits serveurs : j’ai fait un test assez concluant dans ce sens en testant Apache et Nginx sur un Raspberry Pi (3B+).

Maintenant que j’ai un peu plus de connaissances et surtout que j’ai découvert la plateforme de tests de performance de Google (PageSpeed Insights), je suis parti en quête de performances.

Un peu plus de blabla

Nginx est la solution que j’ai retenue lors de la résurrection de ce site. J’utilise le conteneur Docker officiel qui se cache derrière Traefik.
Vu qu’il est derrière un reverse-proxy Edge Router, je suis resté sur la configuration de base (vu que Traefik gère la redirection HTTPS et le certificat).

Avec cette configuration, j’ai moins de performance sur mobile que dans la configuration avec Apache ! De mémoire, j’avais un score d’environ 80 pour 62 actuellement.

Un peu de configuration

Voici donc la configuration qui m’a permis d’atteindre le score de 95 :

# Run as a less privileged user for security reasons.
user nginx;

# #worker_threads to run;
# "auto" sets it to the #CPU_cores available in the system, and
# offers the best performance.
worker_processes    auto;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;

events { worker_connections 1024; }

http {
    server {
        # Hide nginx version information.
        server_tokens off;

        listen  80;
        root    /usr/share/nginx/html;
        include /etc/nginx/mime.types;

        location / {
            try_files $uri $uri/ /index.html;
            aio threads;
            directio 5m;
        }
        location ~* .(jpg|jpeg|png|gif|ico|svg|css|js|woff2)$ {
            expires 60d;
        }

        gzip            on;
        gzip_vary       on;
        gzip_http_version  1.0;
        gzip_comp_level 5;
        gzip_types
            application/atom+xml
            application/javascript
            application/json
            application/rss+xml
            application/vnd.ms-fontobject
            application/x-font-ttf
            application/x-web-app-manifest+json
            application/xhtml+xml
            application/xml
            font/opentype
            image/svg+xml
            image/x-icon
            text/css
            text/plain
            text/x-component;
        gzip_proxied    no-cache no-store private expired auth;
        gzip_min_length 256;
        gunzip          on;
    }
}

J’ai donc mappé cette configuration vers le fichier /etc/nginx/nginx.conf du conteneur Docker en lecture seule (:ro).

Un peu d’explication

L’amélioration principale et l’activation de la compression GZip. Cette dernière est active pour la liste des éléments de gzip_types.
Cela signifie que tous les fichiers relatifs vont être compressés avant l’envoi et c’est votre navigateur qui va se charger de décompresser le contenu du site.
À noter que la compression n’est active que pour les fichiers de plus de 256 octets (gzip_min_length).

Un autre axe d’amélioration est la mise en cache des certains fichiers tel que les images, les fichiers de styles, les modules JavaScript ainsi que les polices. En gros les fichiers qui ont peut de chance de changer.

Voilà donc comment j’ai pu améliorer les performances de mon site.
En soi, j’ai mis un premier pas dans le SEO :wink: !