NextJS Core Web Vitals - rimuovere il CSS che blocca il rendering

La guida definitiva ai NextJS Core Web Vitals - rimuovere il CSS che blocca il rendering

Arjen Karel Core Web Vitals Consultant
Arjen Karel - linkedin
Last update: 2024-11-27

Rimuovere il CSS che blocca il rendering in NextJS

Il CSS è render blocking. Questo significa che un browser non inizierà il rendering quando trova CSS nell'head della pagina fino a quando tutto quel CSS non sarà stato analizzato. Se il browser deve scaricare uno o più file CSS esterni, questo potrebbe richiedere tempo prezioso. In questo articolo ti mostrerò come rimuovere quei file CSS che bloccano il rendering nella tua app NextJS per velocizzare il rendering. Questo migliorerà le tue metriche di paint (First Contentful Paint e Largest Contentful Paint)

Per impostazione predefinita NextJS creerà 2 fogli di stile per una pagina. Il primo è il foglio di stile globale e il secondo è un foglio di stile specifico per la pagina. Quanto tempo ci costerà? Questo dipende da molti fattori come il dispositivo del visitatore, la velocità della rete, il protocollo di connessione, la distanza dal server, la dimensione del foglio di stile ecc. In media, per tutti i miei clienti, su tutti i dispositivi, ho riscontrato che questo richiede circa 200ms. Sul sito web di NextJS il download di quei 2 fogli di stile richiederà 600ms su una connessione fast 3g. Questo ritarderà tutte le metriche di paint di 600ms. È ora di agire e rimuovere questi fogli di stile che bloccano il rendering!

nextjs css network

Opzione 1: Generare Critical CSS

La prima e più veloce opzione è generare Critical CSS. Il Critical CSS è una raccolta di regole CSS necessarie per renderizzare la parte visibile della pagina. Queste regole vengono inserite inline nell'HEAD della pagina. Poi, in parallelo, i file CSS originali vengono scaricati mentre il browser continuerà a renderizzare. Una volta che i file CSS originali sono stati scaricati, vengono iniettati nella pagina.

Il Critical CSS è ora disponibile in NextJS come funzionalità sperimentale. Generare Critical CSS in NextJS è estremamente semplice. Basta aggiungere experimental: { optimizeCss: true } al tuo next.config.js e installare critters@0.0.7 come dipendenza nel tuo progetto.

const nextConfig = {
  reactStrictMode: true,
  experimental: { optimizeCss: true }
}

Opzione 2: CSS inline nell'HEAD della pagina.

Se non vuoi abilitare funzionalità sperimentali nella tua app NextJS per migliorare i Core Web Vitals potresti considerare di inserire il tuo CSS inline. Dovrai creare una sezione head personalizzata e referenziarla nel tuo _document.tsx.

Lo svantaggio di questo metodo è che il CSS inline sarà probabilmente più grande rispetto al primo metodo. Tuttavia, se mantieni i tuoi fogli di stile puliti ed efficaci, questo metodo migliorerà molto probabilmente i Core Web Vitals della tua app NextJS in modo significativo!

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>
  );
}

Opzione 3: Styled Components

Styled Components è uno strumento CSS-in-JS che ti permette di scrivere CSS in file JavaScript. Questo ha molti vantaggi. Ad esempio, puoi ripetere i nomi delle classi, rimuovere facilmente il codice CSS inutilizzato e gestire il codice più facilmente rispetto ai file CSS tradizionali. Per quanto riguarda i Core Web Vitals, questo significa che inietterai solo gli stili necessari su quella pagina. Piuttosto interessante, vero?

A partire dalla versione 12.1 di NextJS è più facile che mai utilizzare styled components nella tua app NextJS. Aggiungi compiler:{styledComponents: true} al tuo next.config.js, installa styled-components (yarn add styled-components e quando l'installazione è completata, esegui yarn add -D @types/styled-components), aggiorna il file _document.js per supportare il server side rendering per styled components e sei pronto!

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.

Discuss Resource Allocation >>

  • Parallel Workflows
  • Specialized Expertise
  • Faster Delivery
NextJS Core Web Vitals - rimuovere il CSS che blocca il renderingCore Web Vitals NextJS Core Web Vitals - rimuovere il CSS che blocca il rendering