Pour beaucoup de professionels, il est important d’avoir un site pour promouvoir son activité. Pour moi, c’est d’autant plus intéressant que cela peut également me permettre de montrer mon savoir-faire. Je n’essaie pas de montrer mes compétences de développeur, mais plutôt de montrer qu’on peut faire un site sobre et agréable.
Les objectifs de ce site :
- être un modèle de sobriété
- montrer les différents services que je propose
- partager les articles que je publie régulièrement
La sobriété avant tout
La première évidence, c’est qu’il faut faire un site statique. Cela permet d’éviter d’avoir un serveur allumé en permanance alors que c’est évitable. Pour rester dans la sobriété, on va se fixer des contraintes :
- Site statique
- Pas de vidéo
- Pas plus de 150 ko par page (non compressé)
- Pas plus de 15 requêtes par page
- Pas plus de 150 éléments dans le DOM
Côté technique
Framework CSS
N’étant pas un expert CSS, je vais utiliser un framework. Le plus connu c’est Bootstrap. Il pèse 235 ko. Il est donc hors jeu. Après quelques recherches, je tombe sur Pure.css . Avec ses 35 ko, cela devrait me permettre de construire un site léger.
Javascript
A priori, on ne va pas avoir besoin de javascript. Au passage, les Framworks javascript pèsent tous plus de 150 ko…
Les polices
Dans le but de ne garder que les choses essentielles, on utilisera uniquement les polices par défaut.
Les icônes
Fontawesome pèse 60 ko à lui seul. On va donc se débrouiller sans. Il n’est pas utile de charger l’ensemble des icones pour n’en utiliser que 5 à la fin. Dans un premier temps, je passe par IcoMoon pour me créer ma propre font d’icônes. Mais par la suite, je vais directement intégrer les SVG dans mon CSS pour gagner un appel et quelques ko.
Les images
Il faudra être attentif à ne pas mettre trop d’images et surtout à limiter leur taille tant que possible. Il faudra aussi bien les optimiser. Je vais utiliser le format webp qui permet d’avoir les images les plus légères possible.
Analytics
J’ai espéré un temps m’abstenir d’outil analytics, mais en réalité si on ne suit pas ce qu’il se passe sur le site, on est un peu aveugle. Google Analytics est trop lourd. Avec ses 53 ko (non compressés) et ses nombreuses fonctionnalités dont je ne sais que faire. Je me décide donc pour LiteAnalytics (2.2 ko - données anonymisées).
Hébergement
Par commodité, le site sera hébergé sur Github Pages . Cela permettra de mutualiser le repo de code et l’hébergement. Cela me permet également de m’affranchir des problématques d’hebrgeur comme la délivrabilité ou la compression.
Stack technique
Pour faciliter la création du site pour un développeur amateur comme moi, j’ai décidé d’utiliser Jekyll qui permet de générer les pages à partir des éléments que je lui donne. Je peux donc gérer le contenu d’un côté et la mise en page de l’autre. Jeykill a également quelques fonctionnalités bien pratiques :
- contenu en markdown
- gestion de la sitemap
- gestion des tags SEO
- gestion automatisée de la pagination
- gestion de scss (regroupement, minification)
- création d’un flux RSS
Il y avait même un plugin pour automatiser le redimensionnement des images. Mais il n’est pas compatible avec Github pages…
Si cela vous intéresse, le repo avec le code est public.
Résultat
Au final, je suis plutôt satisfait du rendu. Il reste encore pas mal de contenu à ajouter mais la brique technique est prête. De plus, en limitant le superflu, je trouve son interface agréable et apaisante.
Le site respecte largement les objetifs de sobriété. C’est peut-être même le site le plus léger qui existe, y compris parmis ceux qui se revendiquent éco-conçus.
Pour le moment, je n’ai trouvé qu’un seul site avec des résultats comparables : le site EcoIndex . Forcément, ils se devaient d’être irréprochables (EcoIndex teste et note la sobriété des sites).
| Simbios | EcoIndex | |
|---|---|---|
| Requêtes | 8 | 5 |
| Taille de la page | 51.3 ko | 105.1 ko |
| Transferts | 22.9 ko | 33.58 ko |
| DOM | 102 | 187 |
On voit que, Simbios est plus léger, mais EcoIndex a moins de requêtes. Les trois requêtes que j’ai en plus :
- un fichier print.css (ce qui permet d’éviter de gâcher de l’encre quand la page est imprimée). Les navigateurs gérant plutôt bien l’impression, je pense que je vais retirer ce fichier sur Simbios.
- les CSS compilés en un seul fichier chez eux, ce qui fait qu’ils doivent recharger l’ensemble du CSS à chaque page. Dans mon cas, j’ai fait le choix d’avoir un fichier commun à toutes les pages qui n’est chargé qu’une fois par visite et un autre fichier par page. Je pense que les deux démarches se valent.
- J’ai deux requêtes dues à mon outil d’analyse de trafic.
- Je n’ai pas de javascript, donc je gagne une requête. Il est à noter que le javascript est nécessaire dans le cas d’usage d’EcoIndex.
Améliorations possibles
Le site est extrêmement léger. Je ne suis pas convaincu qu’il soit très intéressant environnementalement de faire beaucoup mieux. Le temps passé à la mise en place des améliorations mettra beaucoup de temps à être rentabilisé. Ceci étant dit, il y a encore des pistes d’amélioration.
Faire le logo en CSS
Le logo étant en SVG, il n’est pas trop compliqué de l’inclure dans le fichier CSS.
Gain potentiel : une requête en moins
Passer à du CSS natif
On voit que c’est finalement le framwork CSS qui pèse le plus lourd. J’ai commencé à retirer les parties non pertinentes. Il est possible que je m’en tienne à du CSS totalement personalisé pour réduire encore un peu le poid de la page.
Gain potentiel : réduction du poids de la page de 10-15ko (non compressé)
Remplacer l’analytics par des statistiques côté hébergement
Github pages ne donne pas de statistiques sur le nombre de téléchargements de la page. Je pourrais décider de passer sur un hébergement avec des statistiques et retirer l’outil d’analytics.
Gains potentiels :
- 2 requêtes en moins et 2 ko en moins
- toutes les requêtes seraient sur le domaine simbios.fr
Mieux gérer les images dans la partie blog
Pour le moment, toutes les images du blog sont d’une largeur de 720px ce qui est un peu grand pour l’usage sur le téléphone.
