NextJS Core Web Vitals - eliminar CSS que bloquea el renderizado

La guía definitiva de NextJS Core Web Vitals - eliminar CSS que bloquea el renderizado

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

Eliminar CSS que bloquea el renderizado en NextJS

CSS bloquea el renderizado. Esto significa que un navegador no comenzará a renderizar cuando encuentre CSS en el head de la página hasta que todo ese CSS sea analizado. Si el navegador necesita descargar uno o más archivos CSS externos, eso puede consumir un tiempo valioso. En este artículo te mostraré cómo eliminar esos archivos CSS que bloquean el renderizado en tu aplicación NextJS para acelerar el renderizado. Esto mejorará tus métricas de pintado (First Contentful Paint y Largest Contentful Paint)

Por defecto, NextJS creará 2 hojas de estilo para una página. La primera es la hoja de estilo global y la segunda es una hoja de estilo específica de la página. ¿Cuánto tiempo nos costará eso? Eso depende de muchos factores como el dispositivo del visitante, la velocidad de la red, el protocolo de conexión de red, la distancia al servidor, el tamaño de la hoja de estilo, etc. En promedio, para todos mis clientes, en todos los dispositivos, he encontrado que esto toma alrededor de 200ms. En el sitio web de NextJS, descargar esas 2 hojas de estilo tomará 600ms en una conexión 3G rápida. Esto retrasará todas las métricas de pintado en 600ms. ¡Es hora de actuar y eliminar estas hojas de estilo que bloquean el renderizado!

nextjs css network

Opción 1: Generar Critical CSS

La primera y más rápida opción es generar Critical CSS. Critical CSS es una colección de reglas CSS necesarias para renderizar la parte visible de la página. Esas reglas se colocan en línea en el HEAD de la página. Luego, en paralelo, los archivos CSS originales se descargan mientras el navegador continúa renderizando. Una vez que los archivos CSS originales se descargan, se inyectan en la página.

Critical CSS ahora está disponible en NextJS como una función experimental. Generar Critical CSS en NextJS es extremadamente simple. Solo agrega experimental: { optimizeCss: true } a tu next.config.js e instala critters@0.0.7 como dependencia en tu proyecto.

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

Opción 2: CSS en línea en el HEAD de la página.

Si no deseas habilitar funciones experimentales en tu aplicación NextJS para mejorar los Core Web Vitals, podrías considerar poner tu CSS en línea. Necesitarás crear una sección head personalizada y referenciarla en tu _document.tsx.

La desventaja de este método es que el CSS en línea probablemente será más grande que con el primer método. Sin embargo, si mantienes tus hojas de estilo limpias y eficientes, ¡este método probablemente mejorará significativamente los Core Web Vitals de tu aplicación 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>
  );
}

Opción 3: Styled Components

Styled Components es una herramienta de CSS-in-JS que te permite escribir CSS en archivos JavaScript. Esto tiene muchas ventajas. Por ejemplo, puedes repetir nombres de clases, eliminar fácilmente código CSS no utilizado y gestionar el código más fácilmente en comparación con los archivos CSS tradicionales. En cuanto a los Core Web Vitals, significa que solo inyectarás los estilos necesarios en esa página. ¿Bastante práctico, verdad?

A partir de la versión 12.1 de NextJS, es más fácil que nunca usar styled components en tu aplicación NextJS. Agrega compiler:{styledComponents: true} a tu next.config.js, instala styled-components (yarn add styled-components y cuando termine de instalarse, ejecuta yarn add -D @types/styled-components), actualiza el archivo _document.js para soportar renderizado del lado del servidor para styled components ¡y estarás listo!

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

Urgent Fix Required?

Google Search Console failing? I offer rapid-response auditing to identify the failure point within 48 hours.

Request Urgent Audit >>

  • 48hr Turnaround
  • Rapid Response
  • Failure Identification
NextJS Core Web Vitals - eliminar CSS que bloquea el renderizadoCore Web Vitals NextJS Core Web Vitals - eliminar CSS que bloquea el renderizado