Tuesday, March 19, 2024


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…

By thiagovicente , in Notícias , at 7 de março de 2021

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.

bloqueio de renderizacao lighthouse elliminate

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 deferatributo.
  • Não possui um asyncatributo.

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

  • Não possui um disabledatributo. Quando este atributo está presente, o navegador não baixa a folha de estilo.
  • Não possui um mediaatributo 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:

chrome devtools guia cobertura
Chrome DevTools: guia Cobertura.

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 scripttag 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 asyncou 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 headpágina HTML. Em seguida, carregue o restante dos estilos de forma assíncrona usando o preloadlink (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

Para saber mais sobre os recursos de bloqueio de renderização, acesse o site web.dev.

Comments


Deixe um comentário


O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *