NextJS Core Web Vitals - supprimer le CSS bloquant le rendu
Le guide ultime NextJS Core Web Vitals - supprimer le CSS bloquant le rendu
Supprimer le CSS bloquant le rendu dans NextJS
Le CSS bloque le rendu. Cela signifie qu'un navigateur ne commencera pas le rendu lorsqu'il trouve du CSS dans l'en-tête de la page tant que tout ce CSS n'est pas analysé. Si le navigateur doit télécharger un ou plusieurs fichiers CSS externes, cela peut prendre un temps précieux. Dans cet article, je vais vous montrer comment supprimer ces fichiers CSS bloquant le rendu dans votre application NextJS pour accélérer le rendu. Cela améliorera vos métriques d'affichage (First Contentful Paint et Largest Contentful Paint)
Table of Contents!
Par défaut, NextJS créera 2 feuilles de style pour une page. La première est la feuille de style globale et la seconde est une feuille de style spécifique à la page. Combien de temps cela nous coûtera-t-il ? Cela dépend de nombreux facteurs tels que l'appareil du visiteur, la vitesse du réseau, le protocole de connexion réseau, la distance au serveur, la taille de la feuille de style, etc. En moyenne, pour tous mes clients, sur tous les appareils, j'ai constaté que cela prend environ 200ms. Sur le site web NextJS, le téléchargement de ces 2 feuilles de style prendra 600ms sur une connexion 3g rapide. Cela retardera toutes les métriques d'affichage de 600ms. Il est temps d'agir et de supprimer ces feuilles de style bloquant le rendu !
Option 1 : Générer le Critical CSS
La première option, et la plus rapide, consiste à générer le Critical CSS. Le Critical CSS est une collection de règles CSS nécessaires pour rendre la partie visible de la page. Ces règles sont placées en ligne dans le HEAD de la page. Ensuite, en parallèle, les fichiers CSS originaux sont téléchargés pendant que le navigateur continue le rendu. Une fois les fichiers CSS originaux téléchargés, ils sont injectés dans la page.
Le Critical CSS est maintenant disponible dans NextJS en tant que fonctionnalité expérimentale. Générer du Critical CSS dans NextJS est extrêmement simple. Ajoutez simplement experimental: { optimizeCss: true } à votre next.config.js et ajoutez install critters@0.0.7 comme dépendance dans votre projet.
const nextConfig = {
reactStrictMode: true,
experimental: { optimizeCss: true }
} Option 2 : CSS en ligne dans le HEAD de la page.
Si vous ne souhaitez pas activer les fonctionnalités expérimentales dans votre application NextJS pour améliorer les Core Web Vitals, vous pouvez envisager d'inclure votre CSS en ligne. Vous devrez créer une section head personnalisée et la référencer dans votre _document.tsx.
L'inconvénient de cette méthode est que le CSS en ligne sera probablement plus volumineux qu'avec la première méthode. Cependant, si vous gardez vos feuilles de style propres et efficaces, cette méthode améliorera probablement considérablement les Core Web Vitals de votre application NextJS !
import { Html, Head, Main, NextScript } from "next/document";
import { readFileSync } from "fs";
import { join } from "path";
class InlineStylesHead extends Head {
getCssLinks: Head["getCssLinks"] = ({ allFiles }) => {
const { assetPrefix } = this.context;
if (!allFiles || allFiles.length === 0) return null;
return allFiles
.filter((file: any) => /\.css$/.test(file))
.map((file: any) => (
<style
key={file}
nonce={this.props.nonce}
data-href={`${assetPrefix}/_next/${file}`}
dangerouslySetInnerHTML={{
__html: readFileSync(join(process.cwd(), ".next", file), "utf-8"),
}}
/>
));
};
}
export default function Document() {
return (
<Html>
<InlineStylesHead />
<body>
<Main />
<NextScript />
</body>
</Html>
);
} Option 3 : Styled Components
Styled Components est un outil CSS-in-JS qui vous permet d'écrire du CSS dans des fichiers JavaScript. Cela présente de nombreux avantages. Par exemple, vous pouvez répéter les noms de classe, supprimer facilement le code CSS inutilisé et gérer le code plus facilement par rapport aux fichiers CSS traditionnels. En ce qui concerne les Core Web Vitals, cela signifie que vous n'injecterez que les styles nécessaires sur cette page. Plutôt sympa, non ?
À partir de la version 12.1 de NextJS, il est plus facile que jamais d'utiliser les styled components dans votre application NextJS. Ajoutez compiler:{styledComponents: true} à votre next.config.js, installez styled-components (yarn add styled-components et une fois l'installation terminée, lancez yarn add -D @types/styled-components), mettez à jour le fichier _document.js pour supporter le rendu côté serveur pour les styled components et vous êtes prêt !
const nextConfig = {
reactStrictMode: true,
compiler: {
styledComponents: true,
}
}import Document, { DocumentContext } from "next/document";
import { ServerStyleSheet } from "styled-components";
export default class MyDocument extends Document {
static async getInitialProps(ctx: DocumentContext) {
const sheet = new ServerStyleSheet();
const originalRenderPage = ctx.renderPage;
try {
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: (App) => (props) =>
sheet.collectStyles(<App {...props} />),
});
const initialProps = await Document.getInitialProps(ctx);
return {
...initialProps,
styles: (
<>
{initialProps.styles}
{sheet.getStyleElement()}
</>
),
};
} finally {
sheet.seal();
}
}
}
Your dev team is busy.
Delegate the performance architecture to a specialist. I handle the optimization track while your team ships the product.
- Parallel Workflows
- Specialized Expertise
- Faster Delivery
