A seção "Oportunidades" do relatório do Lighthouse lista todos os URLs que bloqueiam a primeira exibição da sua página. O objetivo é reduzir o impacto desses URLs de bloqueio de renderização in-line de recursos críticos, adiando recursos não críticos e removendo qualquer item não utilizado.
Quais URLs são sinalizados como recursos que bloqueiam a renderização?
O Lighthouse sinaliza dois tipos de URLs de bloqueio de renderização: scripts e folhas de estilo.
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 faz o download da folha de estilo. - Não tem um atributo
mediaque corresponda especificamente ao dispositivo do usuário.media="all"é considerado um bloqueio de renderização.
Como identificar recursos essenciais
A primeira etapa para reduzir o impacto dos recursos de bloqueio de renderização é identificar o que é essencial e o que não é. Use a guia "Cobertura" no Chrome DevTools para identificar CSS e JS não essenciais. Quando você carrega ou executa uma página, a guia informa quanto código foi usado em comparação com a quantidade carregada:
É possível reduzir o tamanho das páginas enviando apenas o código e os estilos necessários. Clique em um URL para inspecionar o arquivo no painel Sources. Os estilos em arquivos CSS e códigos em arquivos JavaScript são marcados em duas cores:
- Verde (crítico): estilos necessários para a primeira pintura. É um código essencial para a funcionalidade principal da página.
- Vermelho (não essencial): estilos que se aplicam ao conteúdo que não é imediatamente visível. Código que não está sendo usado no recurso principal da página.
Como eliminar scripts que bloqueiam a renderização
Depois de identificar o código essencial, mova o código do URL de bloqueio de renderização para uma tag script in-line na sua página HTML.
Quando a página for carregada, ela terá o necessário para processar a funcionalidade principal dela.
Se houver um código não crítico em um URL de bloqueio de renderização,
será possível mantê-lo no URL
e marcar o URL com os atributos async ou defer.
Consulte também Como adicionar interatividade com JavaScript.
Remova o código que não está sendo usado. Consulte Remover código não utilizado.
Como eliminar folhas de estilo que bloqueiam a renderização
Semelhante ao código in-line em uma tag <script>,
os estilos críticos inline necessários para a primeira exibição
dentro de um bloco <style> no head da página HTML.
Em seguida, carregue o restante dos estilos de forma assíncrona usando o link preload.
Consulte Adiar CSS não usado.
Considere automatizar o processo de extração e inserção in-line de CSS "Acima da dobra" usando a ferramenta essencial.
Outra abordagem para eliminar estilos de bloqueio de renderização é dividir esses estilos em diferentes arquivos, organizados por consulta de mídia. Em seguida, adicione um atributo de mídia a cada link da folha de estilo. Ao carregar uma página, o navegador bloqueia apenas a primeira pintura para recuperar as folhas de estilo que correspondem ao dispositivo do usuário. Consulte CSS bloqueador de renderização.
Por fim, reduza seu CSS para remover espaços ou caracteres extras. Consulte Minificar CSS. Isso garante que você envie o menor pacote possível para os usuários.
Orientações específicas para a pilha
AMP
Use ferramentas como o otimizador de AMP para renderizar layouts de AMP no lado do servidor.
Drupal
Use um módulo para CSS e JavaScript inline essenciais ou carregue recursos de forma assíncrona via JavaScript, como o módulo Agregação avançada de CSS/JS.
Joomla
Há vários plug-ins do Joomla que podem ajudar você a inline recursos essenciais ou adiar recursos menos importantes (links em inglês).
WordPress
Existem vários plug-ins do WordPress que podem ajudar você a adicionar recursos essenciais ou adiar recursos menos importantes.