CSS que bloqueia a renderização

Por padrão, o CSS é tratado como um recurso bloqueador de renderização, o que significa que o navegador não renderiza nenhum conteúdo processado até que o CSSOM seja criado. Mantenha seu CSS enxuto, envie-o o mais rápido possível e use tipos e consultas de mídia para desbloquear a renderização.

Na construção da árvore de renderização, observamos que o caminho crítico de renderização exige que o DOM e o CSSOM construam a árvore de renderização. Isso gera impacto importante no desempenho: tanto o HTML quanto o CSS são recursos que bloqueiam a renderização. O HTML é óbvio, já que sem o DOM não teríamos nada para renderizar, mas o requisito do CSS pode ser menos óbvio. O que acontece se tentarmos renderizar uma página típica sem bloquear a renderização no CSS?

Resumo

  • Por padrão, o CSS é tratado como um recurso bloqueador de renderização.
  • Tipos de mídia e consultas de mídia nos permitem marcar alguns recursos CSS como não bloqueadores de renderização.
  • O navegador faz o download de todos os recursos CSS, independentemente de seu comportamento com ou sem bloqueio.
NYTimes com CSS
The New York Times com CSS
NYTimes sem CSS
The New York Times sem CSS (FOUC)

O exemplo acima, que mostra o site do NYTimes com e sem CSS, demonstra por que a renderização é bloqueada até que o CSS esteja disponível. Sem o CSS, a página é relativamente inutilizável. A experiência à direita é frequentemente chamada de "relâmpago de conteúdo sem estilo" (FOUC, na sigla em inglês). O navegador bloqueia a renderização até que tenha o DOM e o CSSOM.

O CSS é um recurso que bloqueia a renderização. Envie ao cliente o quanto antes para otimizar o tempo da primeira renderização.

No entanto, e se alguns estilos CSS forem usados apenas em determinadas condições, por exemplo, quando a página estiver sendo impressa ou projetada em um monitor grande? Seria bom se não tivéssemos que bloquear a renderização nesses recursos.

Os "tipos de mídia" e "consultas de mídia" de CSS nos permitem atender a estes casos de uso:

<link href="style.css" rel="stylesheet" />
<link href="print.css" rel="stylesheet" media="print" />
<link href="other.css" rel="stylesheet" media="(min-width: 40em)" />

Uma consulta de mídia consiste em um tipo de mídia e zero ou mais expressões que verificam as condições de recursos de mídia específicos. Por exemplo, nossa primeira declaração da folha de estilo não fornece um tipo ou consulta de mídia, por isso é aplicada em todos os casos, ou seja, sempre bloqueia a renderização. Por outro lado, a segunda declaração da folha de estilo aplica-se somente quando o conteúdo está sendo impresso, talvez você queira reorganizar o layout, alterar as fontes e assim por diante. Portanto, essa declaração da folha de estilo não precisa bloquear a renderização da página quando ela é carregada pela primeira vez. Finalmente, a última declaração da folha de estilo fornece uma "consulta de mídia", que é executada pelo navegador: se as condições corresponderem, o navegador bloqueará a renderização até que a folha de estilo seja baixada e processada.

Com as consultas de mídia, podemos adaptar nossa apresentação a casos de uso específicos, como exibição ou impressão, e também a condições dinâmicas, como alterações na orientação da tela, eventos de redimensionamento e muito mais. Ao declarar os recursos da folha de estilo, preste muita atenção ao tipo e às consultas de mídia. Eles afetam muito o desempenho do caminho crítico de renderização.

Vamos conferir alguns exemplos práticos:

<link href="style.css" rel="stylesheet" />
<link href="style.css" rel="stylesheet" media="all" />
<link href="portrait.css" rel="stylesheet" media="orientation:portrait" />
<link href="print.css" rel="stylesheet" media="print" />
  • A primeira declaração bloqueia a renderização e corresponde a todas as condições.
  • A segunda declaração também bloqueia a renderização: "all" é o tipo padrão. Portanto, se você não especificar nenhum tipo, ele será definido implicitamente como "all". Portanto, a primeira e a segunda declarações são, na verdade, equivalentes.
  • A terceira declaração tem uma consulta de mídia dinâmica, que é avaliada quando a página é carregada. Dependendo da orientação do dispositivo enquanto a página está carregando, retrato.css pode ou não bloquear a renderização.
  • A última declaração só é aplicada quando a página está sendo impressa, ou seja, ela não bloqueia a renderização quando a página é carregada pela primeira vez no navegador.

Por fim, observe que "bloqueio de renderização" indica apenas se o navegador precisa manter a renderização inicial da página nesse recurso. Em ambos os casos, o navegador ainda baixa o ativo CSS, embora com menor prioridade para recursos sem bloqueio.

Feedback