Publicado em 31 de março de 2014
Por padrão, o CSS é tratado como um recurso de bloqueio de renderização, o que significa que o navegador não renderiza nenhum conteúdo processado até que o CSSOM seja construído. Mantenha o CSS simples, veicule-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, vimos que o caminho de renderização crítico exige o DOM e o CSSOM para construir a árvore de renderização. Isso cria uma implicação de desempenho importante: o HTML e o CSS são recursos de bloqueio de renderização. O HTML é óbvio, já que sem o DOM não teríamos nada para renderizar, mas o requisito de CSS pode ser menos óbvio. O que aconteceria se tentássemos renderizar uma página típica sem bloquear a renderização no CSS?
Resumo
- Por padrão, o CSS é tratado como um recurso de bloqueio de renderização.
- Os tipos e consultas de mídia permitem marcar alguns recursos de CSS como não bloqueadores de renderização.
- O navegador faz o download de todos os recursos de CSS, independentemente do comportamento de bloqueio ou não.
O exemplo anterior, que mostra o site do New York Times com e sem CSS, demonstra por que a renderização é bloqueada até que o CSS esteja disponível. Sem CSS, a página é relativamente inutilizável. A experiência à direita é geralmente chamada de Flash of Unstyled Content (FOUC). O navegador bloqueia a renderização até ter o DOM e o CSSOM.
O CSS é um recurso de bloqueio de renderização. Faça com que ele chegue ao cliente o mais rápido possível para otimizar o tempo até a primeira renderização.
No entanto, e se tivermos alguns estilos CSS que são usados apenas em determinadas condições, por exemplo, quando a página está 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" do CSS permitem abordar esses 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 de folha de estilo não fornece um tipo ou consulta de mídia, então ela se aplica a todos os casos. Ou seja, ela sempre bloqueia a renderização. Por outro lado, a segunda declaração de folha de estilo só se aplica quando o conteúdo está sendo impresso. Talvez você queira reorganizar o layout, mudar as fontes e outras considerações de design importantes para impressão. Portanto, essa declaração de folha de estilo não precisa bloquear a renderização da página quando ela é carregada pela primeira vez. Por fim, a última declaração de 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.
Ao usar consultas de mídia, podemos adaptar nossa apresentação a casos de uso específicos, como exibição versus impressão, e também a condições dinâmicas, como mudanças na orientação da tela, eventos de redimensionamento e muito mais. Ao declarar os recursos da folha de estilo, preste atenção ao tipo de mídia e às consultas. Eles afetam muito o desempenho do caminho de renderização crítico.
Considere estes exemplos:
<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 um tipo, ele será definido implicitamente como"all". Portanto, a primeira e a segunda declarações são 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á sendo carregada,
portrait.csspode ou não bloquear a renderização. - A última declaração só é aplicada quando a página está sendo impressa (
"print"), portanto, 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" se refere apenas a se o navegador precisa manter a renderização inicial da página nesse recurso. Em ambos os casos, o navegador ainda faz o download do recurso CSS, embora com uma prioridade menor para recursos não bloqueadores.