Como Remover recursos de bloqueio de renderização
Aprenda como remover recursos de bloqueio de renderização A seção “oportunidades” de seu relatório Lighthouse lista todos os URLs bloqueando…
Aprenda como remover recursos de bloqueio de renderização
A seção “oportunidades” de seu relatório Lighthouse lista todos os URLs bloqueando a primeira pintura de sua página. O objetivo é reduzir o impacto dessas URLs de bloqueio de renderização ao in-line recursos críticos, adiando recursos não críticos e removendo qualquer coisa não utilizada.
Quais URLs são sinalizados como recursos de bloqueio de renderização?
O Lighthouse sinaliza dois tipos de URLs de bloqueio de renderização: scripts e folhas de estilo.
Uma <script>
tag que:
- Está no
<head>
do documento. - Não possui um
defer
atributo. - Não possui um
async
atributo.
Uma <link rel="stylesheet">
tag que:
- Não possui um
disabled
atributo. Quando este atributo está presente, o navegador não baixa a folha de estilo. - Não possui um
media
atributo que corresponda ao dispositivo do usuário.
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 o guia Cobertura no Chrome DevTools para identificar CSS e JS não críticos. Quando você carrega ou executa uma página, a guia informa quanto código foi usado, versus quanto foi carregado:
Você pode reduzir o tamanho de suas páginas enviando apenas o código e os estilos de que precisa. Clique em um URL para inspecionar esse arquivo no painel Fontes. Estilos em arquivos CSS e código em arquivos JavaScript são marcados em duas cores:
- Verde (crítico): Estilos que são necessários para a primeira pintura; código que é crítico para a funcionalidade central da página.
- Vermelho (não crítico): Estilos que se aplicam a conteúdo não imediatamente visível; o código não está sendo usado na funcionalidade principal da página.
Como eliminar scripts de bloqueio de renderização
Depois de identificar o código crítico, mova esse código do URL de bloqueio de renderização para uma script
tag embutida em sua página HTML. Quando a página for carregada, ela terá o que precisa para lidar com a funcionalidade principal da página.
Se houver código em um URL de bloqueio de renderização que não seja crítico, você pode mantê-lo no URL e, em seguida, marcar o URL com atributos async
ou defer
(consulte também Adicionando interatividade com JavaScript ).
O código que não está sendo usado deve ser removido (consulte Remover código não usado ).
Como eliminar folhas de estilo de bloqueio de renderização
Semelhante ao código <script>
embutido em uma tag, os estilos críticos embutidos são necessários para a primeira pintura dentro de um <style>
bloco na head
página HTML. Em seguida, carregue o restante dos estilos de forma assíncrona usando o preload
link (consulte Adiar CSS não utilizado ).
Considere automatizar o processo de extração e embutimento de CSS “Acima da Dobra” usando a ferramenta Crítica .
Outra abordagem para eliminar estilos de bloqueio de 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 que correspondem ao dispositivo do usuário (consulte CSS de bloqueio de renderização ).
Finalmente, você desejará reduzir seu CSS para remover qualquer espaço em branco ou caracteres extras (consulte Minificar CSS ). Isso garante que você está enviando o menor pacote possível para seus usuários.
Orientação específica de pilha
AMP
Use ferramentas como o Otimizador de AMP para renderizar layouts de AMP do lado do servidor .
Drupal
Considere usar um módulo para embutir CSS e JavaScript críticos ou potencialmente carregar ativos de forma assíncrona por meio de JavaScript, como o módulo Advanced CSS / JS Aggregation .
Joomla
Existem vários plug-ins do Joomla que podem ajudá-lo a incorporar ativos críticos ou adiar recursos menos importantes .
WordPress
Existem vários plug-ins do WordPress que podem ajudá-lo a incorporar ativos críticos ou adiar recursos menos importantes .
Recursos
- Código-fonte para Eliminar auditoria de recursos de bloqueio de renderização
- Reduza os payloads do JavaScript com divisão de código
- Remover codelab de código não utilizado
- Otimização de inicialização de JavaScript
Para saber mais sobre os recursos de bloqueio de renderização, acesse o site web.dev.
Comments