SIMBIOS

Création du site Simbios.fr

Faire un site vitrine sobre et agréable qui véhicule les valeurs de Simbios.

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
Aperçu de la page d'accueil de Simbios sur un écran d'ordinateur

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.

Voir l’article de la mise à jour du site en Févirer 2024

Retour aux articles