Dernièrement, je me suis amusé à optimiser mon site. Je voulais limiter la quantité de données à transférer. Ma bande passante est maigre. Et puis un visiteur ne devrait pas avoir à charger des tas de données pour lire un pauvre blog. Je suis passé d'une note "C" à A sur GTMetrix :

En-tête http pour la mise en cache
Tout d'abord, j'ai réactivé la gestion du cache dans les entêtes avec relayd, un outil présent dans OpenBSD. Le contenu est mis en cache par les navigateurs pendant une durée de 1 an maximum. La partie correspondante de la configuration, c'est ça :

match response header set "Cache-Control" value "max-age=31536000"

Chargement et optimisation des images
J'optimise systématiquement les images que je met en ligne avec ce script.

En plus, j'ai activé le plugin "lazyload" de blogotext qui permet de charger les images seulement lorsque le visiteur a déroulé la page vers l'emplacement de l'image. Ça limite grandement l'utilisation de bande passante.

Enfin, pour certaines pages, j'utilise un bout de javascript qui fait office de "spoiler".
Le HTML :

Cliquez pour afficher l'image.

La fonction javascript suivante va remplacer le texte précédent par l'image :

function showimg(elmnt,lnk) {
	elmnt.innerHTML = '';
	elmnt.style = 'border:0';
};

Utilisation d'emojis pour les icônes

Au lieu d'utiliser des images pour faire des icônes, je suis allé piocher des émojis ici.

Pas de ressources externes
J'évite le chargement de ressources externes, comme les polices. À la place, dans le CSS, je propose plusieurs polices en faisant le pari qu'une bonne partie est déjà sur l'ordinateur du visiteur :

font-family: "Hack", "Menlo", "Liberation Mono", "Arial Monospaced", monospace;

Activation de la compression gzip
Il est recommandé d'activer la compression gzip dans les divers tutoriels. Cependant, cette fonctionnalité n'est pas implémentée dans le serveur httpd d'OpenBSD pour des raisons de sécurité (voir là et surtout là.
J'ai quand même activé cette fonctionnalité dans php en mettant les options suivantes dans le php.ini :

zlib.output_compression = On
zlib.output_compression_level = -1

Je pourrais aussi gzipper à la main les ressources css et javascript, mais pour l'instant non, car la flemme, et c'est pas pratique. De plus, la suite est très prometteuse.

Minification des fichiers CSS et JS
J'ai commencé à minifier les fichiers CSS et JS. En gros, on retire tous les espaces et sauts de ligne qui permettent une lecture de ces fichiers par les humains mais ne servent à rien par les navigateurs afin de réduire leurs poids. Il s'avère que Remrem a déjà commencé à créer un bout de code dans blogotext qui ferait ça automatiquement. Je n'ai pas encore vu le code, mais qui sait, le fichier minifié qui sera mis en cache sur le serveur pourra être gzippé automatiquement.

À améliorer?
Il faudrait rassembler tout le CSS dans un seul fichier pour réduire le nombre de requêtes. Ce n'est pas possible car je ne veux pas mélanger ces derniers afin de m'y retrouver.
Je pourrais aussi utiliser un CDN. Cependant, c'est soit payant, soit ça ne marche plus. D'ailleurs, quelqu'un a des nouvelles de coralCND?

Pour finir...
Un peu de lecture intéressante pour finir : https://lehollandaisvolant.net/tuto/pagespd/

Original post of Thuban.Votez pour ce billet sur Planet Libre.