Corrigir o aviso do Lighthouse sobre eliminar recursos que bloqueiam a renderização
Livre-se dos recursos que bloqueiam a renderização e melhore os Core Web Vitals
'Eliminar recursos que bloqueiam a renderização' em resumo
Ao carregar qualquer página com recursos que bloqueiam a renderização, um navegador não pode iniciar o processo de renderização até que todos os elementos que estão causando isso sejam baixados e avaliados.
Isso quebra a regra de ouro do PageSpeed: 'sempre inicie a renderização o mais cedo possível'. Qualquer atraso na renderização da página faz com que a página carregue mais lentamente do que o necessário.
Corrija este aviso do Lighthouse removendo ou adiando esses recursos que bloqueiam a renderização.
O que é o aviso 'Eliminate render-blocking resources' do Lighthouse?
O que causa o aviso Eliminate render-blocking resources no Lighthouse? O Lighthouse sinaliza páginas que têm um dos seguintes:
- Uma tag script que está no head e não é adiada.
Scripts no head da página bloqueiam a renderização por padrão se não tiverem o atributo defer ou async. - Uma folha de estilo vinculada que corresponde à mídia do dispositivo.
Um <link rel="stylesheet"> bloqueará a renderização da página se não estiver desativado e corresponder à mídia do navegador. Por exemplo, <link rel="stylesheet" media="print"> não bloqueará a renderização em dispositivos desktop.
O aviso 'Eliminate render-blocking resources' impacta diretamente algumas métricas do Lighthouse. Na teoria, páginas com recursos que bloqueiam a renderização poderiam ainda carregar bem rápido. Na prática, muitas vezes não carregam. O excesso de recursos que bloqueiam a renderização muito provavelmente afetará diretamente métricas importantes do Lighthouse, como First Contentful Paint (FCP) e Largest Contentful Paint (LCP).
Um lembrete rápido - O que é renderização?
A renderização é um processo usado no desenvolvimento web que transforma o código do site nas páginas interativas que os usuários veem quando visitam um site. O termo geralmente se refere ao uso de códigos HTML, CSS e JavaScript. O processo é concluído por um mecanismo de renderização, o software usado por um navegador web para renderizar uma página da web.
O que causa 'recursos que bloqueiam a renderização'?
Os recursos que bloqueiam a renderização são sempre StyleSheets e JavaScripts no head da página. Isso significa que eles só podem ser adicionados pelo seu CMS, manualmente pelo seu desenvolvedor web ou por um plugin. Ao tentar encontrar a origem de um recurso que bloqueia a renderização, tente procurar nestes lugares:
- O template Os arquivos de template do seu site são o primeiro lugar para procurar. Encontre o local onde o código <head> está localizado e procure por estilos e scripts codificados.
- O CMS às vezes o próprio CMS exige alguns scripts (por exemplo, jQuery) para funcionar corretamente.
- Plugins. Plugins são notórios por injetar estilos e scripts na página.
Como os 'recursos que bloqueiam a renderização' afetam o PageSpeed
Os recursos que bloqueiam a renderização impedem que a árvore de renderização seja gerada. Quando a árvore de renderização não foi construída, o navegador não iniciará a renderização. Isso significa que a página ficará completamente em branco até que todos os recursos que bloqueiam a renderização tenham sido baixados e avaliados. Isso impactará métricas como o First Contentful Paint e o Largest Contentful Paint.
Como corrigir 'Eliminar recursos que bloqueiam a renderização'
Para corrigir 'recursos que bloqueiam a renderização', você precisará garantir que esses recursos não bloqueiem mais a renderização. A maneira mais fácil é simplesmente remover esses recursos. Às vezes, recursos antigos e não utilizados ainda estão bloqueando a renderização da página. Se você não puder removê-los, deverá adiá-los.
Adiando JavaScript
O JavaScript pode ser adiado adicionando o atributo defer ou async à tag script.
//javascript adiado
<script src="script.js"></script>
//javascript assíncrono
<script src="script.js"></script>
Adiando StyleSheets
Adiar stylesheets pode ser um pouco mais complicado. Quando uma folha de estilo é adiada, a página será renderizada sem os estilos primeiro. Então, quando os estilos forem carregados, o navegador aplicará a estilização causando todos os tipos de oscilações e mudanças de layout. É por isso que você precisará de CSS crítico e inline. O CSS crítico é uma coleção dos estilos necessários para renderizar a parte visível da página.
<style>//CSS crítico aqui</style> <link rel="preload"
href="css.css"
type="text/css"
as="style"
onload="this.onload=null;this.rel='stylesheet';"/> Solução alternativa para 'eliminar recursos que bloqueiam a renderização'
Às vezes não é possível eliminar esses recursos que bloqueiam a renderização. Você pode não ter acesso ao template ou o seu CMS pode exigir certos scripts. Existem algumas soluções alternativas para diminuir o impacto desses recursos que bloqueiam a renderização.
- Minifique e comprima seus estilos e scripts.
Minimize e comprima seus estilos e scripts atuais. Recursos menores têm menos impacto no desempenho de carregamento do que recursos maiores. - Divida arquivos grandes em vários arquivos.
Dividir arquivos grandes em vários arquivos pode reduzir o tempo de carregamento dos recursos. - Descarregue recursos por página.
Quando um recurso não pode ser removido de uma página, isso não significa que ele seja necessário em todas as páginas. Plugins do Wordpress, por exemplo, tendem a adicionar scripts e estilos a todas as páginas, mesmo que o plugin não esteja ativo naquela página.
Performance degrades unless you guard it.
I do not just fix the metrics. I set up the monitoring, the budgets, and the processes so your team keeps them green after I leave.
Start the Engagement
