Context
Le site charge Tailwind CSS via le CDN de développement (https://cdn.tailwindcss.com/3.4.16). Ce mode est explicitement déconseillé par Tailwind pour la production :
The Play CDN is designed for development purposes only, and is not the best choice for production.
Problèmes concrets :
- Le navigateur télécharge le runtime JS complet de Tailwind (~300 KB+) à chaque visite
- Les styles sont générés côté client, ce qui retarde le rendu
- Pas de purge des classes inutilisées
Proposition
Mettre en place un build Tailwind (CLI ou via Vite/PostCSS) qui génère un fichier CSS optimisé ne contenant que les classes utilisées.
Options possibles :
- Tailwind CLI — le plus simple, un script
npx tailwindcss -o dist/output.css --minify
- Vite + PostCSS — plus structuré si le projet évolue vers un bundler
Le CSS généré remplacerait le <script src="cdn.tailwindcss.com"> par un simple <link rel="stylesheet">.
Bénéfices attendus
- Réduction significative du poids de la page (de ~300 KB+ à quelques KB de CSS)
- Meilleur score Lighthouse / Core Web Vitals
- Plus de dépendance réseau au CDN Tailwind au runtime
Context
Le site charge Tailwind CSS via le CDN de développement (
https://cdn.tailwindcss.com/3.4.16). Ce mode est explicitement déconseillé par Tailwind pour la production :Problèmes concrets :
Proposition
Mettre en place un build Tailwind (CLI ou via Vite/PostCSS) qui génère un fichier CSS optimisé ne contenant que les classes utilisées.
Options possibles :
npx tailwindcss -o dist/output.css --minifyLe CSS généré remplacerait le
<script src="cdn.tailwindcss.com">par un simple<link rel="stylesheet">.Bénéfices attendus