NextJS Core Web Vitals - Render-Blocking CSS entfernen

Der ultimative NextJS Core Web Vitals Guide - Render-Blocking CSS entfernen

Arjen Karel - linkedin

Last update: 2024-11-27

Render-Blocking CSS in NextJS entfernen

CSS ist render-blocking. Das bedeutet, dass ein Browser nicht mit dem Rendern beginnt, wenn er CSS im Head der Seite findet, bis all dieses CSS geparst ist. Wenn der Browser verpflichtet ist, eine oder mehrere externe CSS-Dateien herunterzuladen, kann das kostbare Zeit in Anspruch nehmen. In diesem Artikel zeige ich Ihnen, wie Sie diese render-blocking CSS-Dateien in Ihrer NextJS-App entfernen können, um das Rendern zu beschleunigen. Dies wird Ihre Paint-Metriken (First Contentful Paint und Largest Contentful Paint) verbessern

Standardmäßig erstellt NextJS 2 Stylesheets für eine Seite. Das erste ist das globale Stylesheet und das zweite ein seitenspezifisches Stylesheet. Wie viel Zeit wird uns das kosten? Das hängt von vielen Faktoren ab, wie dem Gerät des Besuchers, der Netzwerkgeschwindigkeit, dem Netzwerkverbindungsprotokoll, der Entfernung zum Server, der Größe des Stylesheets usw. Im Durchschnitt habe ich für alle meine Kunden auf allen Geräten festgestellt, dass dies etwa 200 ms dauert. Auf der NextJS-Website dauert das Herunterladen dieser 2 Stylesheets bei einer schnellen 3G-Verbindung 600 ms. Dies verzögert alle Paint-Metriken um 600 ms. Zeit zu handeln und diese render-blocking Stylesheets zu entfernen!

Option 1: Critical CSS generieren

Die erste und schnellste Option ist das Generieren von Critical CSS. Critical CSS ist eine Sammlung von CSS-Regeln, die benötigt werden, um den sichtbaren Teil der Seite zu rendern. Diese Regeln werden inline im HEAD der Seite platziert. Dann werden parallel die originalen CSS-Dateien heruntergeladen, während der Browser mit dem Rendern fortfährt. Sobald die originalen CSS-Dateien heruntergeladen sind, werden sie in die Seite injiziert.

Critical CSS ist jetzt in NextJS als experimentelles Feature verfügbar. Das Generieren von Critical CSS in NextJS ist extrem einfach. Fügen Sie einfach experimental: { optimizeCss: true } zu Ihrer next.config.js hinzu und fügen Sie install critters@0.0.7 als Abhängigkeit in Ihrem Projekt hinzu.

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

Option 2: Inline CSS im HEAD der Seite.

Wenn Sie keine experimentellen Funktionen in Ihrer NextJS-App aktivieren möchten, um die Core Web Vitals zu verbessern, könnten Sie in Erwägung ziehen, Ihr CSS inline einzubinden. Sie müssen einen benutzerdefinierten Head-Bereich erstellen und diesen in Ihrer _document.tsx referenzieren.

Der Nachteil dieser Methode ist, dass das Inline-CSS wahrscheinlich größer sein wird als bei der ersten Methode. Wenn Sie Ihre Stylesheets jedoch sauber und effektiv halten, wird diese Methode die Core Web Vitals für Ihre NextJS-App höchstwahrscheinlich erheblich verbessern!

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 ist ein CSS-in-JS-Tool, mit dem Sie CSS in JavaScript-Dateien schreiben können. Das hat viele Vorteile. Sie können zum Beispiel Klassennamen wiederholen, ungenutzten CSS-Code einfach entfernen und Code einfacher verwalten im Vergleich zu traditionellen CSS-Dateien. Was die Core Web Vitals betrifft, bedeutet dies, dass Sie nur die Stile injizieren, die auf dieser Seite benötigt werden. Ziemlich sauber, oder?

Ab NextJS Version 12.1 ist es einfacher denn je, Styled Components in Ihrer NextJS-App zu verwenden. Fügen Sie compiler:{styledComponents: true} zu Ihrer next.config.js hinzu, installieren Sie styled-components (yarn add styled-components und wenn die Installation abgeschlossen ist, führen Sie yarn add -D @types/styled-components aus), aktualisieren Sie die Datei _document.js, um Server Side Rendering für Styled Components zu unterstützen, und Sie sind startklar!

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