A seção "Oportunidades" do relatório do Lighthouse lista todos os URLs que estão bloqueando a first paint da sua página. O objetivo é reduzir o impacto desses URLs que bloqueiam a renderização colocando recursos importantes em linha, adiando recursos não críticos e removendo tudo o que não é usado.
Quais URLs são sinalizados como recursos que bloqueiam a renderização?
O Lighthouse sinaliza dois tipos de URLs bloqueadores 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
mediacorrespondente ao dispositivo do usuário.media="all"é considerado um bloqueio de renderização.
Como identificar recursos críticos
A primeira etapa para reduzir o impacto dos recursos de bloqueio de renderização é identificar o que é crítico e o que não é. Use a aba "Coverage" 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 o que foi carregado:
É possível reduzir o tamanho das páginas enviando apenas o código e os estilos necessários. Clique em um URL para inspecionar esse arquivo no painel Origens. Os estilos em arquivos CSS e o código em arquivos JavaScript são marcados em duas cores:
- Verde (crítico): estilos necessários para a first paint. Código essencial para a funcionalidade principal da página.
- Vermelho (não crítico): estilos que se aplicam a conteúdo não imediatamente visível; código não usado na funcionalidade principal da página.
Como eliminar scripts que bloqueiam a renderização
Depois de identificar o código crítico,
mova-o do URL que bloqueia a renderização para uma tag script inline na página HTML.
Quando a página for carregada, ela terá o necessário para processar a funcionalidade principal dela.
Se houver código em um URL de bloqueio de renderização que não seja crítico,
é possível mantê-lo no URL
e marcar o URL com atributos async ou defer
(consulte também Adicionar interatividade com JavaScript).
O código que não está sendo usado precisa ser removido. Consulte Remover código não utilizado.
Como eliminar folhas de estilo que bloqueiam a renderização
Semelhante ao inline code em uma tag <script>,
os estilos críticos inline necessários para a primeira pintura
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 utilizado.
Considere automatizar o processo de extração e inline do CSS "Above the Fold" usando a ferramenta Critical.
Outra abordagem para eliminar estilos que bloqueiam a renderização é dividir esses estilos em arquivos diferentes, organizados por consulta de mídia. Em seguida, adicione um atributo de mídia a cada link de folha de estilo. Ao carregar uma página, o navegador bloqueia apenas a primeira pintura para recuperar as folhas de estilo correspondentes ao dispositivo do usuário (consulte CSS de bloqueio de renderização).
Por fim, reduza o CSS para remover todos os espaços em branco ou caracteres extras (consulte Reduzir CSS). Isso garante que você envie o pacote menor possível aos 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 e o atributo "adiar" para CSS ou JavaScript não essenciais.
Joomla
Há vários plug-ins do Joomla que podem ajudar você a in-line recursos essenciais ou a adiar recursos menos importantes.
WordPress
Existem vários plug-ins do WordPress que podem ajudar você a aplicar inline a recursos essenciais ou adiar recursos menos importantes.