NextJS Core Web Vitals - remover CSS bloqueador de renderização
O guia definitivo de Core Web Vitals para NextJS - remover CSS bloqueador de renderização
Remover CSS bloqueador de renderização no NextJS
O CSS é bloqueador de renderização (render blocking). Isso significa que um navegador não começará a renderizar quando encontrar CSS no cabeçalho (head) da página até que todo esse CSS seja analisado. Se for necessário que o navegador faça o download de um ou mais arquivos CSS externos, isso pode tomar um tempo precioso. Neste artigo, mostrarei como remover esses arquivos CSS bloqueadores de renderização no seu aplicativo NextJS para acelerar a renderização. Isso melhorará as suas métricas de pintura (First Contentful Paint e Largest Contentful Paint)
Table of Contents!
Por padrão, o NextJS criará 2 folhas de estilo (stylesheets) para uma página. A primeira é a folha de estilo global e a segunda é uma folha de estilo específica da página. Quanto tempo isso vai nos custar? Isso depende de muitos fatores, como o dispositivo do visitante, a velocidade da rede, o protocolo de conexão de rede, a distância até o servidor, o tamanho da folha de estilo, etc. Em média, para todos os meus clientes, em todos os dispositivos, descobri que isso leva cerca de 200ms. No site do NextJS, o download dessas 2 folhas de estilo levará 600ms em uma conexão 3g rápida. Isso atrasará todas as métricas de pintura em 600ms. Hora de agir e remover essas folhas de estilo bloqueadoras de renderização!
Opção 1: Gerar Critical CSS
A primeira e mais rápida opção é gerar Critical CSS. Critical CSS é uma coleção de regras CSS que são necessárias para renderizar a parte visível da página. Essas regras são colocadas inline no HEAD da página. Em seguida, em paralelo, os arquivos CSS originais são baixados enquanto o navegador continua a renderizar. Uma vez que os arquivos CSS originais são baixados, eles são injetados na página.
O Critical CSS agora está disponível no NextJS como um recurso experimental. Gerar Critical CSS no NextJS é extremamente simples. Basta adicionar experimental: { optimizeCss: true } ao seu next.config.js e instalar critters@0.0.7 como uma dependência no seu projeto.
const nextConfig = {
reactStrictMode: true,
experimental: { optimizeCss: true }
} Opção 2: CSS inline no HEAD da página.
Se você não quiser habilitar recursos experimentais no seu aplicativo NextJS para melhorar o Core Web Vitals, você pode considerar colocar o seu CSS inline. Você precisará criar uma seção head personalizada e referenciá-la no seu _document.tsx.
A desvantagem deste método é que o CSS inline provavelmente será maior do que com o primeiro método. No entanto, se você mantiver suas folhas de estilo limpas e eficazes, esse método muito provavelmente melhorará significativamente o Core Web Vitals para o seu aplicativo 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>
);
} Opção 3: Styled Components
O Styled Components é uma ferramenta CSS-in-JS que permite escrever CSS em arquivos JavaScript. Isso tem muitas vantagens. Por exemplo, você pode repetir nomes de classes, remover facilmente códigos CSS não utilizados e gerenciar o código com mais facilidade em comparação aos arquivos CSS tradicionais. Em relação ao Core Web Vitals, isso significará que você injetará apenas os estilos que são necessários naquela página. Muito legal, não é?
A partir da versão 12.1 do NextJS, está mais fácil do que nunca usar styled components no seu aplicativo NextJS. Adicione compiler:{styledComponents: true} ao seu next.config.js, instale styled-components (yarn add styled-components e quando terminar a instalação, execute yarn add -D @types/styled-components ), atualize o arquivo _document.js para suportar a renderização no lado do servidor para styled components e você estará 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();
}
}
}
Ask AI why your INP spiked.
CoreDash is the only RUM tool with MCP support. Connect it to your AI agent and query your Core Web Vitals data in natural language. No more clicking through dashboards.
See How It Works
