Rendez-vous sur Arrakis, Le site perso d'un hacker libriste curieux crêpophile étourdi
Le 11/09/2019 à 14:53 dans /Journal/2018/

Refonte et régime

En réalisant des tests de rapidité d'affichage pour mon site, je me suis aperçu que la principale latence provenait de l'image d'en-tête, pourtant pas bien grosse. ADSL oblige, c'était le principal goulot d'étranglement. Bien que ça ne soit pas bien méchant, c'était l'occasion de réfléchir à un petit régime pour mon site. Je détaillerai dans cette article les outils que j'ai utilisé et quelques astuces qui peuvent avoir un impact énorme sur des sites plus volumineux que le mien.

Choix des couleurs

Je ne suis pas graphiste, encore moins artiste. Le choix des couleurs est toujours difficile pour moi. Heureusement, il existe des outils proposés par le w3c avec des sélections favorisant un équilibre contraste-lisibilité Vous trouverez des palettes prédéfinies par exemple. Pour ma part, je me suis servi du générateur monochromatique. Il existe aussi la même chose avec des triades ou des couleurs complémentaires.

Avec cette base, je me suis forcé à me limiter à ces couleurs, notamment pour les liens afin d'avoir une cohérence sur tout les éléments du site.

Nouvelle image d'en-tête

Comme je le disais plus haut, l'entête était la requête la plus lourde. J'utilisais des images du site unsplash que j'adore. J'ai opté pour une réalisation faîte main qui associe à la fois mon avatar (mélange d'atome d'hydrogène et représentation du cyclohexane) et un clin d'oeil à Shaï Hulud, le ver des sables. Ce n'est peut-être pas très joli, mais c'est en svg et donc extrêmement léger (10,12k seulement). Puisque je l'ai réalisé avec inkscape, je peux facilement l'améliorer au fur et à mesure que j'apprends à utiliser cet outil.

Quelques conseils pour optimiser l'image :

Eviter les requêtes inutiles

Lorsqu'une page est affichée, le navigateur va chercher des ressources externes comme :

Toutefois, si une de ces ressources est toute petite, la requête HTTP pour aller la chercher prend plus de temps que de l'inclure directement dans le code source de la page. J'ai donc intégré le code javascript directement dans mon modèle de page. Cela rend le tout nettement plus rapide à charger, mais présente quelques inconvénients à garder en tête si vous faîtes ce choix :

minify all

J'ai minifié le code CSS et le code javascript. Des sites font ça très bien pour vous :)

Optimisation du javascript

Bien que j'en utilise très peu sur mon site, il y a du javascript. En particulier, j'affiche un nom d'utilisateur pioché au hasard dans la liste des personnages de Dune ainsi que l'IP publique du visiteur. C'est purement esthétique. Deux choses ne me plaisaient pas :

Ces deux éléments ne changent normalement pas : je voulais éviter des requêtes entre chaque chargement en gardant ces informations en mémoire. Heureusement, c'est possible en javascript. J'ai donc découvert et utilisé sessionStorage. Cela donne par exemple :

``` if (typeof(Storage) !== “undefined”) { if (sessionStorage.ip) { document.getElementById(“userip”).innerHTML = sessionStorage.ip; } else { getip(); }

if (sessionStorage.username) {
    name = sessionStorage.username;
} else {
    name = name_set[Math.floor(Math.random() * name_set.length)];
    sessionStorage.username = name;
}
document.getElementById("login").innerHTML = name;

} else { // no sessionstorage support name = name_set[Math.floor(Math.random() * name_set.length)]; getip(); } ```