Chrome Dev Summit 2018 is happening now and streaming live on YouTube. Watch now.

Site não usa recursos que retardam a primeira pintura

Por que a auditoria é importante

Carregamentos de página mais rápidos resultam em maior envolvimento dos usuários, mais pageviews e melhor conversão.

Você pode aumentar a velocidade de carregamento das páginas incluindo em linha os links e scripts necessários para a primeira pintura e retardando os que não são necessários.

Como ser aprovado na auditoria

No relatório, o Lighthouse lista todos os links ou scripts bloqueadores de renderização detectados. O objetivo é reduzir esse número.

Como mencionado em Como a auditoria é implementada, o Lighthouse indica três tipos de links bloqueadores de renderização: importações de scripts, folhas de estilo e HTML. A forma de otimização depende do tipo de recurso usado.

Observação: quando um recurso é mencionado abaixo como "crítico", isso significa que esse recurso é necessário para a primeira pintura ou é essencial para a funcionalidade principal da página.

  • Considere a inclusão de scripts críticos em linha no HTML. Para scripts não críticos, considere marcá-los com os atributos async ou defer. Consulte Adicionar interatividade com o JavaScript para saber mais.
  • Para folhas de estilo, considere a divisão dos estilos em arquivos diferentes, organizados por consulta de mídia e adicionado um atributo media a cada link da folha de estilo. No carregamento de uma página, o navegador bloqueia a primeira pintura somente para recuperar as folhas de estilo correspondentes ao dispositivo do usuário. Consulte CSS bloqueador de renderização para saber mais.
  • Marque as importações de HTML não crítico com o atributo async. Como regra geral, async deve ser usado com importações HTML sempre que possível.

Como a auditoria é implementada

Esta seção explica como esta auditoria é implementada para que você possa compreender como a pontuação da auditoria é calculada.

O Lighthouse identifica três tipos de recursos bloqueadores.

Uma tag <script> que:

  • Está no <head> do documento.
  • Não tem um atributo defer.
  • Não tem um atributo async.

Uma tag <link rel="stylesheet"> que:

  • Não tem um atributo disabled. Quando esse atributo está presente, o navegador não baixa a folha de estilo.
  • Não tem um atributo media correspondente ao dispositivo do usuário.

Uma tag <link rel="import"> que:

  • Não tem um atributo async.