Externaliser les CSS et JavaScript

Ce que dit le référentiel

Veiller à ce que les codes CSS et JavaScript ne soient pas embarqués dans le code HTML de la page, à l’exception d’éventuelles variables de configuration pour les objets JavaScript.

En effet, si vous incluez du code CSS ou JavaScript dans le corps du fichier HTML, alors que ce dernier est utilisé par plusieurs pages (voire tout le site), ce code doit être transféré pour chaque page demandée par l’internaute, ce qui augmente le volume de données transmises. En revanche, si les codes CSS et JavaScript sont inclus dans leurs propres fichiers, le navigateur peut les stocker dans son système de cache local afin de ne pas les redemander.

Notre avis

Tailwind CSS offre une manière optimisée d’écrire du CSS modulaire. Dans un projet React, l'utilisation de Tailwind CSS permet de minimiser la taille des fichiers en n'incluant que les classes CSS nécessaires. De plus, en utilisant le compilateur JIT (Just-In-Time), nous pouvons générer les feuilles de style à la demande, réduisant ainsi le volume de données chargé par les utilisateurs.

Nous externalisons le CSS et le JavaScript dans des fichiers séparés pour faciliter la mise en cache par le navigateur. Cela réduit les requêtes redondantes et optimise le temps de chargement des pages. Nos pratiques garantissent ainsi une expérience utilisateur fluide tout en réduisant l’empreinte environnementale grâce à une gestion efficace des ressources.