Comment giftlist.life obtient un Lighthouse 100 parfait

giftlist.life est l’un de nos propres produits : un site éditorial de recommandations de cadeaux comptant 119 pages couvrant occasions, années d’anniversaire, catégories et budgets. Il obtient un score de 100 en performance sur Google Lighthouse, avec un Largest Contentful Paint de 0,8 seconde et un décalage de mise en page quasi nul.

Ce chiffre n’est ni un hasard ni une prouesse exotique. Il résulte d’une poignée de choix délibérés que tout site peut faire. Voici comment nous avons procédé.

Livrer du HTML, pas une application JavaScript

La décision la plus déterminante a été de construire le site en HTML statique. Chacune des 119 pages est générée au moment de la compilation et servie comme un simple fichier .html. Aucun framework côté client à démarrer, aucune cascade de requêtes de données, aucun indicateur de chargement. Lorsque le navigateur reçoit la page, le contenu est déjà là.

Nous utilisons Astro pour cela. Il permet d’écrire des pages avec des composants (le même confort de développement qu’un framework moderne) tout en n’envoyant aucun JavaScript par défaut. Le navigateur reçoit du HTML et du CSS, et rien d’autre, sauf si une partie précise de la page a réellement besoin d’interactivité.

C’est aussi pourquoi le site est facile à indexer pour les moteurs de recherche : il n’y a rien à attendre. Tout le contenu est dans la réponse initiale.

Traiter les images comme un budget de performance

Les images sont l’endroit où la plupart des sites perdent leur score. Nous :

• Servons du WebP moderne aux bonnes dimensions, pour que le navigateur ne télécharge jamais une image de 2000 px afin de l’afficher à 400 px.
• Définissons width et height sur chaque image pour que la mise en page ne saute jamais au chargement, ce qui maintient le Cumulative Layout Shift près de zéro.
• Chargeons en différé tout ce qui est sous la ligne de flottaison, pour que le premier écran ne charge que le nécessaire.

Envoyer moins de CSS et aucun script bloquant

La feuille de style est générée avec Tailwind, ce qui signifie que le CSS de production ne contient que les classes réellement utilisées. Pas d’énorme feuille de style de framework. Aucun script tiers bloquant ne se dispute le fil principal.

Pourquoi cela compte pour le travail client

giftlist.life est notre propre projet, mais c’est aussi une démonstration concrète. Quand un client nous demande de créer un site web, c’est le standard de départ : rapide, accessible et bien référencé par construction, et non par des optimisations ajoutées à la fin.

Un site rapide n’est pas un luxe. Il se classe mieux, convertit mieux, et respecte les personnes qui le visitent, y compris celles sur un téléphone avec une connexion faible. Si vous voulez un site qui performe ainsi, écrivez-nous.