Se você executa seu site por meio do Lighthouse, pode ter notado uma sugestão para remover recursos de bloqueio de renderização.
Ao atrasar o JavaScript e colocar estilos CSS importantes embutidos, você pode se livrar de recursos no WordPress que retardam a renderização. Isso é suportado pela maioria dos plug-ins de cache, Autoptimize e Async JavaScript. Tanto o Elementor quanto o Divi têm formas integradas de se livrar de recursos que impedem a renderização da página, usando CSS adiado e embutido. A remoção de CSS, JavaScript e código de terceiros desnecessários também pode ajudar na resolução.
Neste artigo, definiremos os recursos de bloqueio de renderização e veremos as vantagens de eliminá-los do seu site. Em seguida, demonstraremos cinco maneiras alternativas de se livrar deles para você.
O que são recursos de bloqueio de renderização ?
Compreender o processo típico de carregamento do site é crucial antes de examinarmos mais de perto os recursos de bloqueio de renderização. Todo o conteúdo do seu site deve ser renderizado (ou baixado) pelo navegador do visitante depois que ele clicar em um link para ele. Ele lê todo o HTML, CSS e JavaScript em seu site de cima para baixo. Seu site não ficará visível para os visitantes até que o navegador termine de ler esta fila de scripts. Eles podem ter que esperar muito tempo se houver recursos de bloqueio de renderização. Basicamente, um arquivo CSS ou JavaScript que impede o navegador de carregar outro conteúdo enquanto ele está sendo processado é um recurso de bloqueio de renderização. Isso pode interromper o processo de renderização e fazer com que a página pareça inacabada ou em branco.
Create Amazing Websites
Com o melhor criador de páginas gratuito Elementor
Comece agoraQuando há recursos de bloqueio de renderização em seu site, arquivos extras são carregados na parte superior do código. Antes de visualizar o site, os usuários devem aguardar enquanto esses arquivos são processados. Os recursos de bloqueio de renderização têm o potencial de influenciar vários indicadores de desempenho do site. Por exemplo, a maior pintura de conteúdo mede quanto tempo leva para o conteúdo principal de uma página carregar. A primeira vez que o material do Document Object Model (DOM) do seu site é renderizado pelo navegador é conhecido como a primeira pintura de conteúdo. Totalblockingtimeé o tempo entre a primeira pintura de conteúdo e o tempo para interagir (quanto tempo leva para uma página se tornar totalmente interativa).
Embora não sejam necessários para o carregamento, os recursos de bloqueio de renderização podem impedir a renderização. A experiência do usuário do seu site pode sofrer como resultado (UX). Portanto, é crucial que você se livre deles para impedir que os visitantes saiam de suas páginas.
Benefícios da eliminação de recursos de bloqueio de renderização
Os usuários da Internet geralmente não gostam de esperar que os sites carreguem. Um site rápido pode motivar os usuários a explorar seu material e evitar que visitem um rival. Ao remover os elementos de bloqueio de renderização, você está efetivamente tornando o código do seu site o mais leve possível, o que pode ser o segredo para aumentar a velocidade da página. Como o desempenho do site e o envolvimento do usuário são dois fatores que os gigantes dos mecanismos de pesquisa, como o Google, consideram ao avaliar sites, a remoção de arquivos de bloqueio de renderização pode ajudar a aumentar a classificação do mecanismo de pesquisa do seu site.
Como eliminar recursos de bloqueio de renderização no WordPress
Você pode estar se perguntando como remover elementos de bloqueio de renderização do seu site agora que você sabe como identificá-los no WordPress. Felizmente, reunimos uma lista de várias abordagens que você pode adotar para fazer isso, começando pelas mais simples.
Otimize o carregamento de CSS
Aumentar a velocidade com que o CSS carrega em seu site é uma técnica para se livrar dos recursos de bloqueio de renderização. Um navegador carrega sua página da web de cima para baixo, como foi dito anteriormente. Isso pode fazer com que o processo de carregamento demore mais quando determinados arquivos precisam ser processados. É crucial lembrar que apenas alguns arquivos CSS devem ser carregados para que a página seja exibida. Portanto, você pode exibir os arquivos mais importantes primeiro ao otimizar o carregamento de CSS. O CSS de bloqueio de renderização pode ser removido manualmente, mas você também pode instalar um plug-in para facilitar as coisas. Você pode otimizar seu site diretamente do painel do WordPress usando o Jetpack Boost. Este plug-in simplifica a implementação do carregamento lento, adia o JavaScript não essencial e melhora o carregamento do CSS. Uma das maneiras mais simples de se livrar dos recursos de bloqueio de renderização no WordPress é fazer isso.
Comece procurando por Jetpack Boost em Plugins Add New no painel do WordPress. Instale e ative o plug-in em seu site.
Você pode ir para Jetpack My Jetpack se já tiver o Jetpack carregado. Procure Boost e selecione Ativar na lista de produtos Jetpack.
Após a ativação do plug-in, clique na guia Jetpack Boost e escolha Começar.
Seu site receberá instantaneamente uma classificação de desempenho do Jetpack. Você verá uma nota com letras junto com informações sobre suas pontuações no computador e no celular.
Em seguida, ative esse recurso rolando para baixo até Otimizar carregamento de CSS. Quando ativado, o Jetpack Boost aumentará o CSS crucial para o seu site para que ele carregue mais rápido.
Adiar JavaScript não essencial
Você pode tomar mais medidas para se livrar dos recursos de bloqueio de renderização no WordPress, além de otimizar apenas o carregamento de CSS. O JavaScript não essencial também pode ser adiado para acelerar ainda mais o carregamento do seu site. O JavaScript não essencial pode ser atrasado para atrasar alguns processos até que seu conteúdo seja carregado. Você pode impedir que o navegador execute arquivos JavaScript se eles não forem necessários para o carregamento de uma página. Felizmente, usar o plug-in Jetpack Boost torna isso fácil de fazer. Você pode adiar facilmente o JavaScript não essencial depois de otimizar o processo de carregamento do CSS. Ative o botão de alternância da área Adiar JavaScript não essencial. Esta seção pode ser encontrada abaixo da seção Optimize CSS Loading.
O plug-in atualizará sua avaliação do desempenho geral da sua página depois que você habilitar essa configuração. Sua pontuação antes e depois de usar o Jetpack Boost será exibida.
Dê uma olhada nas pontuações nas capturas de tela feitas antes e depois de concluirmos este processo. Você notará que o aumento da velocidade da página foi obtido atrasando o JavaScript não essencial e carregando o CSS com mais eficiência. Os navegadores podem carregar seu conteúdo mais rapidamente porque não precisam executar scripts grandes.
Adiar imagens fora da tela
Embora as imagens não sejam um recurso que impeça a renderização das páginas, você pode querer pensar em acelerar o tempo de carregamento delas. Os sites geralmente têm imagens fora da tela que não aparecem até que o usuário interaja com a página, como rolagem. Você pode adiá-los com carregamento lento porque eles não são necessários para o carregamento da página da web. Apenas as imagens que os visitantes podem ver são carregadas de maneira preguiçosa. Essas fotos serão carregadas antes de serem exibidas na página quando o usuário rolar a página. Um navegador tentará carregar todas as imagens em uma página de uma só vez se o carregamento lento não estiver ativado. Quanto mais tempo demorar para o seu material carregar, mais provável será que os visitantes saiam do seu site.
O carregamento regular pode não ser um problema se um visitante estiver utilizando um computador desktop. Smartphones e tablets, por outro lado, têm telas menores e menos largura de banda. Seu site pode consumir mais largura de banda e demorar mais para carregar para usuários de celular se carregar totalmente todas as fotos de uma vez. Esse problema é resolvido por meio do carregamento lento.
Para habilitar o carregamento lento em seu site, utilize o Jetpack Boost. Basta procurar a opção Lazy Image Loading e habilitá-la.
O visualizador só verá as imagens carregadas em seu site quando rolarem a página para baixo se você fizer isso. Mesmo que as fotos não sejam um recurso que renderiza blocos, habilitar o carregamento lento pode acelerar sua página.
Elimine recursos de bloqueio de renderização com Elementor/Divi
Tanto o Elementor quanto o Divi incluem opções para remover recursos que obstruem a renderização.
Habilite o Carregamento de CSS aprimorado e o Font-Awesome Inline nas configurações do Elementor Experiments para carregar CSS e fontes inline, tornando-os sem bloqueio de renderização. O carregamento aprimorado de ativos elimina CSS/JavaScript desnecessários, o que melhora os sinais vitais fundamentais da Web de várias maneiras.
Ao aplicar CSS crucial, adiar CSS/JavaScript e carregar suas fontes em linha, as opções de desempenho do Divi também podem reduzir os recursos de bloqueio de renderização.
Remova manualmente o JavaScript de bloqueio de renderização
Você também pode excluir manualmente os recursos de bloqueio de renderização, embora a instalação de um plug-in de otimização seja uma opção muito mais fácil. Idealmente, você só deve pensar nessa escolha se for um programador experiente. Se você deseja reduzir o número de plugins em seu site, este procedimento também pode ser útil. Você pode atribuir aos seus arquivos uma propriedade assíncrona ou deferida para ajudar o JavaScript a ser executado com mais eficiência. O navegador será instruído a renderizar os scripts não críticos separadamente, marcando-os como tal. Ambas as características podem ser usadas para acelerar o carregamento de informações HTML.
O arquivo HTML é analisado de maneira típica até encontrar o arquivo de script. A análise será interrompida enquanto localiza o script. Depois de baixá-lo e executá-lo, a análise continua.
Enquanto processa o HTML restante, o navegador pode baixar o JavaScript graças ao recurso assíncrono. Após o download, ele pode interromper o processamento de HTML e executar o script.
O atributo defer funciona de forma semelhante, permitindo que o navegador baixe o script enquanto analisa o HTML. A diferença é que ele também atrasa a execução do script até que a análise de HTML seja concluída.
Você deve incluir um trecho de código em seu arquivo functions.php para implementar qualquer uma dessas propriedades. Você deve primeiro localizar a tag script> do recurso de bloqueio de renderização. o seguinte como um atributo assíncrono:
<script src="resource.js" async></script>Como alternativa, considere como um script pode parecer quando a propriedade defer é usada:
http://resource.jsEmbora um plug-in possa cuidar desses atributos para você, fazê-lo sozinho pode atender melhor às suas preferências. Nesse caso, é crucial entender quando aplicar cada atributo. Você deve usar uma propriedade defer para scripts não essenciais que dependem de outro script. A opção assíncrona é apropriada para qualquer outro script.
Aplique atributos assíncronos ou adie com um plug-in
Use um plug-in como o Async JavaScript se tiver problemas para editar manualmente os scripts. Você tem controle total sobre quais scripts têm a propriedade async ou defer graças a esta ferramenta.
Após a instalação do plug-in, selecione Ativar JavaScript assíncrono em Configurações JavaScript assíncrono.
Em seguida, vá para a seção intitulada Async JavaScript Method. Você pode escolher se deseja habilitar atributos assíncronos ou adiados aqui.
É uma boa ideia excluir esses scripts porque muitos plugins dependem do jQuery. A aplicação de propriedades assíncronas ao jQuery pode resultar na quebra do site.
Em caso de dúvida, você pode utilizar o atributo defer, mas excluir totalmente o jQuery é o melhor curso de ação.
Agora você pode especificar quais scripts deseja executar de forma assíncrona ou adiada. Você deve ter o cuidado de colocar cada script na seção apropriada.
Você pode listar todos os scripts que deseja excluir deste procedimento na seção Exclusão de Script.
Também existem opções para excluir plugins e temas na parte inferior da página. Os scripts para quaisquer temas ou plug-ins mencionados aqui não serão aplicáveis às características async ou defer.
Depois de fazer os ajustes necessários, você pode clicar em Salvar configurações. Essa abordagem pode ser um compromisso útil entre a alteração manual de scripts e o uso de um plug-in para lidar com a tarefa para você. Como alternativa, você pode eliminar essas etapas extras usando um aplicativo completo como o Jetpack Boost.
Empacotando
Ao fazer com que os navegadores dos visitantes adiem a renderização do conteúdo acima da dobra enquanto baixam recursos que não são imediatamente necessários, os recursos de bloqueio de renderização aumentam os tempos de carregamento percebidos da página do seu site WordPress. Você deve atrasar o carregamento de recursos que não são imediatamente necessários para ajudar os visitantes a carregar a área visível de sua página mais rapidamente. Use plug-ins pré-fabricados para se livrar de recursos de bloqueio de renderização no WordPress. Você pode combinar Autoptimize e Async JavaScript, dois plugins criados pelo mesmo desenvolvedor, para uma solução gratuita. Você pode utilizar o WP Rocket, que oferece uma interação específica com Kinsta e pode ajudar com muitos ajustes adicionais de desempenho do WordPress, se você estiver disposto a pagar por isso.
