NextJS Core Web Vitals - usuń CSS blokujący renderowanie

Kompletny przewodnik po NextJS Core Web Vitals - usuń CSS blokujący renderowanie

Arjen Karel - linkedin

Last update: 2024-11-27

Usuń CSS blokujący renderowanie w NextJS

CSS blokuje renderowanie. Oznacza to, że przeglądarka nie rozpocznie renderowania, gdy znajdzie CSS w nagłówku strony, dopóki cały ten CSS nie zostanie sparsowany. Jeśli przeglądarka musi pobrać jeden lub więcej zewnętrznych plików CSS, może to zająć cenny czas. W tym artykule pokażę Ci, jak usunąć te blokujące renderowanie pliki CSS w Twojej aplikacji NextJS, aby przyspieszyć renderowanie. Poprawi to Twoje metryki renderowania (First Contentful Paint i Largest Contentful Paint)

Domyślnie NextJS tworzy 2 arkusze stylów dla strony. Pierwszy to globalny arkusz stylów, a drugi to arkusz stylów specyficzny dla strony. Ile czasu nas to kosztuje? To zależy od wielu czynników, takich jak urządzenie odwiedzającego, prędkość sieci, protokół połączenia sieciowego, odległość do serwera, rozmiar arkusza stylów itp. Średnio, dla wszystkich moich klientów, na wszystkich urządzeniach, stwierdziłem, że zajmuje to około 200ms. Na stronie NextJS pobranie tych 2 arkuszy stylów zajmie 600ms przy szybkim połączeniu 3G. Opóźni to wszystkie metryki renderowania o 600ms. Czas podjąć działania i usunąć te blokujące renderowanie arkusze stylów!

Opcja 1: Generowanie Critical CSS

Pierwsza i najszybsza opcja to wygenerowanie Critical CSS. Critical CSS to zbiór reguł CSS potrzebnych do wyrenderowania widocznej części strony. Te reguły są umieszczane inline w HEAD strony. Następnie, równolegle, oryginalne pliki CSS są pobierane, podczas gdy przeglądarka kontynuuje renderowanie. Po pobraniu oryginalnych plików CSS są one wstrzykiwane na stronę.

Critical CSS jest teraz dostępne w NextJS jako funkcja eksperymentalna. Generowanie Critical CSS w NextJS jest niezwykle proste. Wystarczy dodać experimental: { optimizeCss: true } do pliku next.config.js i zainstalować critters@0.0.7 jako zależność w swoim projekcie.

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

Opcja 2: CSS inline w HEAD strony.

Jeśli nie chcesz włączać eksperymentalnych funkcji w swojej aplikacji NextJS, aby poprawić Core Web Vitals, możesz rozważyć umieszczenie CSS inline. Musisz utworzyć niestandardową sekcję head i odwołać się do niej w pliku _document.tsx.

Wadą tej metody jest to, że CSS inline będzie prawdopodobnie większy niż w pierwszej metodzie. Jednak jeśli utrzymasz swoje arkusze stylów czyste i efektywne, ta metoda najprawdopodobniej znacząco poprawi Core Web Vitals Twojej aplikacji 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>
  );
}

Opcja 3: Styled Components

Styled Components to narzędzie CSS-in-JavaScript, które pozwala pisać CSS w plikach JavaScript. Ma to wiele zalet. Na przykład możesz powtarzać nazwy klas, łatwo usuwać nieużywany kod CSS i łatwiej zarządzać kodem w porównaniu z tradycyjnymi plikami CSS. Jeśli chodzi o Core Web Vitals, oznacza to, że wstrzykniesz tylko te style, które są potrzebne na danej stronie. Całkiem sprytne, prawda?

Od wersji 12.1 NextJS używanie Styled Components w aplikacji NextJS jest łatwiejsze niż kiedykolwiek. Dodaj compiler:{styledComponents: true} do pliku next.config.js, zainstaluj styled-components (yarn add styled-components, a po zakończeniu instalacji uruchom yarn add -D @types/styled-components), zaktualizuj plik _document.js, aby obsługiwał renderowanie po stronie serwera dla Styled Components i gotowe!

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

Secure your Q3 Metrics.

Do not let technical debt derail your Core Web Vitals. I provide the strategy, the code, and the verification to pass Google's assessment.

Start the Engagement >>

Strategic Planning
Code Implementation
Verification & Testing

NextJS Core Web Vitals - usuń CSS blokujący renderowanie

Core Web Vitals NextJS Core Web Vitals - usuń CSS blokujący renderowanie