inlineCss

Utilisation

Support expérimental pour l'intégration de CSS dans le <head>. Lorsque cette option est activée, tous les endroits où nous générons normalement une balise <link> utiliseront à la place une balise <style> générée.

import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  experimental: {
    inlineCss: true,
  },
}

export default nextConfig

Compromis

Quand utiliser le CSS inline

L'intégration de CSS peut être bénéfique dans plusieurs scénarios :

Première visite : Comme les fichiers CSS bloquent le rendu, leur intégration élimine le délai de téléchargement initial que subissent les nouveaux visiteurs, améliorant ainsi les performances de chargement de la page.
Mesures de performance : En supprimant les requêtes réseau supplémentaires pour les fichiers CSS, l'intégration peut significativement améliorer des métriques clés comme le First Contentful Paint (FCP) et le Largest Contentful Paint (LCP).
Connexions lentes : Pour les utilisateurs sur des réseaux lents où chaque requête ajoute une latence considérable, l'intégration de CSS peut apporter un gain de performance notable en réduisant les allers-retours réseau.
Paquets CSS atomiques (ex : Tailwind) : Avec des frameworks utility-first comme Tailwind CSS, la taille des styles nécessaires pour une page est souvent O(1) par rapport à la complexité du design. Cela rend l'intégration intéressante car l'ensemble des styles pour la page actuelle est léger et ne grossit pas avec la taille de la page. L'intégration des styles Tailwind garantit une charge utile minimale et élimine le besoin de requêtes réseau supplémentaires, ce qui peut encore améliorer les performances.

Quand ne pas utiliser le CSS inline

Bien que l'intégration de CSS offre des avantages significatifs pour les performances, il existe des scénarios où ce n'est pas le meilleur choix :

Paquets CSS volumineux : Si votre paquet CSS est trop gros, son intégration peut augmenter significativement la taille du HTML, entraînant un Time to First Byte (TTFB) plus lent et potentiellement de moins bonnes performances pour les utilisateurs avec des connexions lentes.
CSS dynamique ou spécifique à une page : Pour les applications avec des styles hautement dynamiques ou des pages utilisant différents ensembles de CSS, l'intégration peut conduire à de la redondance et du gonflement, car le CSS complet pour toutes les pages pourrait devoir être intégré à plusieurs reprises.
Cache navigateur : Dans les cas où les visiteurs reviennent fréquemment sur votre site, les fichiers CSS externes permettent aux navigateurs de mettre en cache les styles efficacement, réduisant le transfert de données pour les visites suivantes. L'intégration de CSS élimine cet avantage.

Évaluez soigneusement ces compromis et envisagez de combiner l'intégration avec d'autres stratégies, comme l'extraction de CSS critique ou une approche hybride, pour des résultats optimaux adaptés aux besoins de votre site.

Bon à savoir :

Cette fonctionnalité est actuellement expérimentale et présente certaines limitations connues :

L'intégration de CSS est appliquée globalement et ne peut pas être configurée page par page

Les styles sont dupliqués lors du chargement initial de la page - une fois dans les balises <style> pour le SSR et une fois dans la charge utile RSC

Lors de la navigation vers des pages rendues statiquement, les styles utiliseront des balises <link> au lieu du CSS inline pour éviter la duplication

Cette fonctionnalité n'est pas disponible en mode développement et ne fonctionne que dans les builds de production

Utilisation

Compromis

Quand utiliser le CSS inline

Quand ne pas utiliser le CSS inline

On this page