No ambiente digital competitivo da atualidade, a velocidade de um site assume um papel crucial no êxito de qualquer empreendimento online. Mecanismos de pesquisa renomados, como o Google, priorizam sites que carregam rapidamente, reconhecendo a importância de proporcionar uma experiência de usuário fluida e eficiente.
Estudos demonstram que páginas com carregamento veloz impulsionam o engajamento dos usuários e incrementam as taxas de conversão. Surpreendentemente, um único segundo de atraso no tempo de carregamento de uma página pode resultar em uma queda de até 7% nas conversões de clientes. Diante desse cenário, torna-se evidente que proprietários de sites devem dedicar especial atenção ao desempenho de seus domínios online.
O Google considera o desempenho do site como um fator determinante para os resultados de pesquisa. Consequentemente, sites que carregam rapidamente tendem a aparecer nas primeiras posições, atraindo mais visitantes e, consequentemente, gerando mais receita. Mas, como atender aos requisitos do Google e garantir que seu site carregue em tempo hábil?
Uma das estratégias é eliminar recursos que possam obstruir o tempo de carregamento, como arquivos CSS e JavaScript.
Entretanto, remover esses recursos pode ser um processo complexo e demorado, especialmente para aqueles que não possuem habilidades técnicas avançadas.
Neste artigo, vamos explorar os chamados recursos de bloqueio de renderização, como eles impactam o desempenho do site e oferecer um guia prático para eliminá-los do seu site WordPress. Prepare-se para otimizar seu site, aumentar sua velocidade e alcançar o sucesso!
Recursos que Impedem a Renderização
Qualquer recurso que necessite ser carregado antes que uma página web possa ser exibida é considerado um recurso de bloqueio de renderização. Esses recursos afetam o desempenho e a eficiência de um site, prolongando o tempo necessário para que uma página seja carregada.
Um arquivo CSS ou JavaScript pode ser classificado como recurso de bloqueio de renderização se impedir que uma página web seja exibida. Contudo, o conceito de “carregamento” pode variar dependendo da sua necessidade imediata.
Quando um usuário acessa uma página, o navegador começa processando o código HTML para exibir o conteúdo acima da dobra. Ao encontrar arquivos CSS e JavaScript, o navegador também os baixa e processa. Caso esses arquivos contenham códigos adicionais ou partes não utilizadas, o tempo de carregamento da página web será prolongado.
Tipos de Recursos que Bloqueiam a Renderização
De modo geral, arquivos de recursos como CSS e JavaScript são identificados como recursos que bloqueiam a renderização no WordPress. O navegador os considera essenciais e exige que sejam carregados antes que a página possa ser exibida. No entanto, esses não são os únicos tipos de arquivos que podem atrasar a exibição de um site.
Confira uma lista de recursos que podem impedir a renderização:
Folhas de Estilo CSS
As folhas de estilo CSS são responsáveis por definir o design e a apresentação de uma página web. Um arquivo CSS será considerado um recurso de bloqueio de renderização se for posicionado na seção <head> de uma página HTML.
Arquivos JavaScript na seção <head>
JavaScript é uma linguagem de script usada para adicionar interatividade e comportamentos dinâmicos a uma página web. Um arquivo JavaScript será classificado como um recurso de bloqueio de renderização se estiver localizado na seção <head> de uma página HTML.
Fontes
As fontes são utilizadas para apresentar textos de maneira estilizada em uma página web. As fontes também são consideradas recursos de bloqueio de renderização se forem incluídas na seção <head> de uma página HTML e carregadas a partir de um servidor local ou CDN.
Importações de HTML
São recursos HTML mais antigos que permitem que páginas web incluam elementos de outros documentos HTML. Apesar de não serem tão comuns hoje em dia, ainda podem ser encontradas em sites mais antigos. Importações de HTML também são consideradas recursos de bloqueio de renderização.
Por que Recursos de Bloqueio de Renderização são Prejudiciais
Se o seu site WordPress apresentar recursos que bloqueiam a renderização, ele pode perder posições nos resultados de pesquisa. Mesmo que você esteja bem posicionado, sites com melhor desempenho acabarão por superá-lo.
Sites com recursos de bloqueio de renderização acabam carregando arquivos adicionais durante o processo de exibição. Os usuários precisam aguardar enquanto esses arquivos são processados antes de poderem visualizar o site. Esses recursos impactam os seguintes indicadores de desempenho:
- Maior Exibição de Conteúdo: Indica o tempo necessário para carregar o conteúdo principal da página.
- Primeira Exibição de Conteúdo: Corresponde ao tempo que o navegador leva para exibir o primeiro conteúdo do modelo de objeto de documento (DOM) do seu site.
- Tempo Total de Bloqueio: Avalia o período entre a Primeira Exibição de Conteúdo e o momento em que uma página se torna totalmente interativa.
Apesar de não serem essenciais para o carregamento, os recursos de bloqueio de renderização podem prejudicar a exibição de um site ou página web. Portanto, é crucial remover esses recursos para evitar que eles atrapalhem a navegação dos usuários em seu site.
Vamos analisar mais detalhadamente por que o bloqueio de renderização é um problema sério para páginas web:
Tempo de Carregamento Lento da Página
Uma das principais desvantagens dos recursos de bloqueio de renderização é que eles podem tornar o carregamento do seu site mais lento. Uma página web carrega lentamente quando contém arquivos de recursos com elementos desnecessários. Isso afeta a classificação nos resultados de pesquisa, reduz o engajamento do usuário e aumenta a taxa de rejeição.
Renderização Bloqueada
Frequentemente, um navegador interrompe a renderização de uma página web ao encontrar recursos de bloqueio, pois precisa que esses recursos sejam carregados e processados antes de continuar.
Como resultado, os usuários podem ficar frustrados e abandonar o site devido à falta de resposta ou à lentidão na exibição da página.
Além disso, se um recurso demorar muito para carregar, o navegador pode desistir e interromper a tentativa de carregá-lo, o que pode levar a páginas quebradas ou informações faltando.
Diminuição do Envolvimento do Usuário
Atrasos na renderização prejudicam a experiência do usuário. Usuários esperam tempos de carregamento rápidos e geralmente abandonam sites que demoram a carregar, optando por outros que carregam mais rapidamente.
Sites com carregamento lento podem afetar a satisfação do cliente e a reputação da marca, além de reduzir o tráfego do site e as taxas de conversão.
Existem diversas abordagens para eliminar recursos de bloqueio de renderização no WordPress. A seguir, apresentaremos métodos manuais para essa remoção e, posteriormente, demonstraremos como utilizar alguns plugins renomados do WordPress.
Eliminando Recursos de Bloqueio de Renderização Manualmente
Embora possa ser tentador evitar a remoção manual, não se desanime. Ao explorar esta seção, você certamente aprenderá técnicas valiosas para otimizar o desempenho do WordPress. Mas antes de prosseguir, assista a este vídeo para se familiarizar com os termos que serão abordados.
#1. Identificação de Recursos de Bloqueio de Renderização
Antes de remover os recursos de bloqueio de renderização, é fundamental identificá-los em seu site. Siga estas etapas para detectar esses recursos em seu site WordPress:
- Acesse o Google PageSpeed Insights.
- Insira a URL do seu site na barra de pesquisa.
- Clique no botão “Analisar” para obter informações sobre o seu site.
- Role a página para baixo e verifique a seção de oportunidades.
- Caso sua página apresente recursos de bloqueio de renderização, eles serão listados nessa seção.
#2. Utilizando os Atributos “Defer” e “Async” para JS
Após identificar os recursos de bloqueio de renderização, é hora de eliminá-los para melhorar o desempenho do site. Dentre as diversas abordagens disponíveis, utilizar os atributos “defer” ou “async” para arquivos JavaScript é uma estratégia eficaz.
O atributo “defer” permite que o navegador baixe o arquivo JS e o execute somente após o carregamento da página e quando ela estiver pronta para exibir seu conteúdo.
Dessa forma, os demais elementos da página podem carregar simultaneamente com o arquivo JavaScript, reduzindo o tempo necessário para o carregamento da página.
Já o atributo “async” permite que o navegador baixe o arquivo JS assim que ele estiver disponível, sem bloquear o carregamento de outros elementos da página. O arquivo JS pode ser carregado simultaneamente com outros elementos, acelerando o processo de carregamento.
Ao utilizar os atributos “defer” ou “async”, você pode eliminar os recursos de bloqueio de renderização e aumentar a velocidade do seu site.
#3. Utilizando o Atributo “Media” para CSS Condicional
Outra abordagem para eliminar recursos de bloqueio de renderização é utilizar os atributos “media” para CSS condicional. Esse atributo permite que você defina arquivos CSS distintos para navegadores de desktop e dispositivos móveis.
Por exemplo, você pode incluir um arquivo CSS para dispositivos de desktop e outro arquivo CSS exclusivo para dispositivos móveis. O navegador será instruído a carregar o arquivo CSS de desktop quando o acesso ocorrer por meio de um computador, e o CSS móvel será carregado apenas quando o acesso for feito por dispositivos móveis.
Ao carregar CSS específico para cada dispositivo, você reduz os recursos de bloqueio de renderização e aumenta a velocidade de carregamento do seu site.
#4. Adiar CSS Não Essencial
Além de utilizar o atributo “media” para CSS condicional, você também pode adiar o carregamento de CSS não essencial. Essa abordagem envolve o carregamento prioritário do CSS essencial e o carregamento do restante do CSS à medida que a página é exibida.
Por exemplo, você pode ter um arquivo CSS abrangente que inclui todos os estilos do seu site. No entanto, apenas uma pequena parte desse arquivo é necessária para exibir o conteúdo acima da dobra. Ao adiar o carregamento do CSS não essencial, você pode exibir rapidamente o conteúdo acima da dobra, enquanto o restante do CSS é carregado posteriormente.
#5. Removendo CSS e JS Não Utilizados
Outra técnica para eliminar recursos de bloqueio de renderização é remover arquivos CSS e JavaScript desnecessários, pois esses arquivos podem tornar a página mais pesada e aumentar o tempo de carregamento.
Ao remover todos os arquivos CSS e JS não utilizados, você pode reduzir o número de recursos de bloqueio de renderização. Ferramentas como PurifyCSS ou UnusedCSS podem ser utilizadas para remover arquivos CSS desnecessários do seu site.
#6. Carregando Fontes Personalizadas Localmente
Fontes personalizadas também podem gerar recursos que restringem a renderização. Em vez de depender de fontes externas, como o Google Fonts, você deve carregar suas próprias fontes personalizadas localmente para evitar a necessidade de recursos adicionais.
Ao carregar suas fontes personalizadas localmente, você garante que elas sejam carregadas de forma rápida e eficiente, sem prejudicar o desempenho do seu site. Isso pode resultar em um site mais rápido e responsivo, melhorando a experiência do usuário.
#7. Minimizando JS e CSS
Por fim, reduzir o tamanho dos seus arquivos CSS e JavaScript pode otimizar o funcionamento do seu site. A minificação remove caracteres desnecessários, como espaços em branco e comentários, do seu código. Isso reduz o tamanho dos arquivos e acelera o carregamento.
Ferramentas como MinifyJS ou CSSNano podem ser utilizadas para minificar seus arquivos. Lembre-se de manter uma cópia dos arquivos originais para o caso de precisar fazer alterações neles.
Eliminando Recursos de Bloqueio de Renderização com Plugins
Nesta seção, mostraremos como eliminar recursos de bloqueio de renderização utilizando plugins do WordPress. Esses plugins são populares e podem remover rapidamente os recursos de bloqueio de renderização. O melhor de tudo é que você pode melhorar o desempenho do seu site sem precisar de conhecimento técnico avançado.
#1. W3 Total Cache
O W3 Total Cache (W3TC) aprimora a experiência do usuário de um site WordPress. Ele elimina recursos de bloqueio de renderização e melhora o SEO, os principais sinais vitais da web e muitos outros aspectos. O plugin utiliza recursos como a integração de rede de entrega de conteúdo para implementar as melhores práticas.
Para eliminar recursos de bloqueio de renderização, instale e ative o plugin W3 Total Cache e siga estas etapas:
- Acesse a seção Desempenho no painel do WordPress e clique em Configurações gerais.
- Sob o título Minify, habilite Minify e selecione Manual como o modo minify.
- Clique em Salvar todas as configurações.
- Em seguida, colete todos os arquivos Javascript e CSS de bloqueio de renderização por meio do Google PageSpeed Insights.
- Volte para Performance > Minify.
- Na seção js, clique em Ativar para as configurações do JS Minify. Em seguida, na seção Operações em áreas, selecione Sem bloqueio utilizando o tipo “defer” para a tag Before <head>.
- Acesse o gerenciamento de arquivos JS, selecione o tema ativado e clique no botão Adicionar Script. Cole os URLs de Javascript com problemas verificados pelo Google PageSpeed Insights no campo designado.
- Role a página até a seção CSS. Selecione seu tema no menu suspenso da seção de gerenciamento de arquivos CSS e clique em Adicionar uma folha de estilo. Siga o passo anterior, copiando e colando as URLs obtidas do PageSpeed Insights que apresentarem problemas.
- Com todas as configurações definidas, clique em Salvar configurações e limpar para executar.
#2. JCH Optimize
O JCH Optimize aprimora o desempenho do site WordPress, com base nas métricas do Google PageSpeed Insights. O plugin melhora a primeira pintura de conteúdo (FCP), a maior pintura de conteúdo (LCP), o índice de velocidade (SI), a mudança cumulativa de layout (CLS), o tempo para interação (TTI) e muitos outros aspectos.
Dessa forma, a experiência geral do usuário e o desempenho do site melhoram significativamente.
Após instalar e ativar o JCH Optimize, siga estas etapas para eliminar os recursos de bloqueio de renderização:
- Acesse Configurações > JCH Optimize, role a página e acesse as configurações de recursos básicos.
- Habilite a entrega de CSS otimizada para eliminar o bloqueio de renderização de CSS. Esse recurso identifica automaticamente o CSS essencial necessário para exibir o conteúdo acima da dobra em cada página web e o insere na seção <head> do conteúdo HTML de cada página.
- O link de pré-carregamento é utilizado para carregar os arquivos CSS concatenados de forma assíncrona.
- Para remover os recursos de bloqueio de renderização do Javascript, você deve incluir os atributos async ou defer na tag <script>. Os scripts Javascript podem apresentar falhas caso haja alguma dependência neles, pois isso pode alterar a ordem em que são carregados.
- No painel JCH Optimize, acesse a seção Combine Files Automatic Settings.
- Clique em Optimum, que ativa automaticamente o Defer/Async Javascript.
- Habilitar a configuração ideal adia ou carrega o JavaScript de forma assíncrona.
- Se os arquivos Javascript forem carregados dinamicamente, eles não poderão ser adiados.
#3. Speed Booster Pack
O Speed Booster Pack é outro plugin excelente do WordPress que melhora o desempenho e a usabilidade geral do seu site. Ele auxilia seu site a alcançar uma classificação mais elevada em mecanismos de pesquisa como o Google, aumentando o tráfego e a velocidade.
Após instalar e ativar o Speed Booster, siga estas etapas:
- Acesse Speed Booster Pack no painel do WordPress.
- Para remover os recursos de bloqueio de renderização de javascript, clique em Ativos e role a página. Acesse a opção Otimizar Javascript. Você pode adiar todos os arquivos JS e JS embutido ao clicar em tudo, ou pode personalizar para incluir seus scripts JS selecionados.
- Em seguida, ative Mover JavaScript para o rodapé. Isso move todos os arquivos JS e JS embutido para a parte inferior das fontes da página.
- Clique na opção Otimizar CSS para remover os recursos de bloqueio de renderização de CSS.
- Você terá opções para ativar o Critical CSS, que otimiza a entrega do CSS de acordo com as recomendações do Google. Essa opção irá adiar todos os arquivos CSS e incorporar o estilo do seu conteúdo acima da dobra.
Você também pode ativar Inline all CSS para incorporar todos os arquivos CSS na saída HTML. Além disso, há uma opção para minificar todo o CSS embutido para reduzir o CSS já embutido.
- Após configurar o plugin, salve todas as configurações para eliminar os recursos de bloqueio de renderização.
#4. Autoptimize
Autoptimize é outro plugin que facilita a otimização e a remoção de recursos de bloqueio de renderização. O plugin simplifica scripts JS e estilos CSS, realocando-os para o rodapé, agregando, minimizando e armazenando-os em cache.
Ele otimiza o CSS injetando-o no cabeçalho da página, incorporando CSS crítico e fazendo referência ao CSS agregado completo. Além disso, reduz automaticamente o HTML para otimizar ainda mais o desempenho.
Instale e ative o plugin Autoptimize e siga estes procedimentos para remover os recursos de bloqueio de renderização:
- Acesse Configurações > Autoptimize no painel do WordPress.
- Na seção Opções de Javascript, marque a opção “Otimizar código JavaScript?”
- Na seção de opções de CSS, marque a opção “Otimizar código CSS?”
- Clique em salvar alterações e cache vazio.
Geralmente, essas configurações são suficientes para resolver os recursos de bloqueio de renderização. No entanto, os resultados podem variar com base no tema e nos plugins instalados em seu site WordPress. Para verificar se os problemas foram resolvidos, utilize o PageSpeed Insights novamente. Para otimizar ainda mais, siga estas etapas:
- Após a etapa anterior, muitas opções estarão disponíveis nas opções de Javascript e CSS.
- Você também pode habilitar as opções Agregar CSS e Agregar Arquivos JS.
- Clique em Salvar alterações.
#5. WP Rocket
O WP Rocket é um plugin WordPress renomado e premium para otimização de desempenho e cache. Além de ser um plugin de cache, ele também remove os recursos de bloqueio de renderização do seu site. Isso aumenta o desempenho dos principais sinais vitais da web e a pontuação do PageSpeed.
Após instalar e ativar o plugin WP Rocket, siga estas etapas para eliminar os recursos de bloqueio de renderização:
- Clique em WP Rocket, acesse a aba Otimização de arquivos e vá para a seção de arquivo CSS.
- Habilite a entrega do CSS otimizado.
- Acesse a seção Arquivo JavaScript e selecione Carregar JavaScript adiado. Você também pode experimentar a opção Modo de segurança para Jaquery, mas se isso quebrar o design do front-end do seu site, você poderá revertê-la.
- Salve todas as alterações clicando no botão Salvar alterações.
Benefícios da Remoção de Recursos de Bloqueio de Renderização de um Site
O tempo de carregamento de página mais rápido pode afetar positivamente o SEO de um site, já que o Google sempre prioriza sites que carregam mais rapidamente e funcionam sem problemas. Páginas com pontuação superior a 90 geralmente têm prioridade nos resultados de pesquisa. Utilizando os plugins mencionados, você pode obter as seguintes pontuações no PageSpeed:
Tempos de carregamento de página mais rápidos podem aumentar o engajamento do usuário, pois é mais provável que eles permaneçam em um site que carrega rapidamente. Isso permite que os usuários naveguem com mais conforto e façam compras de forma rápida.
Além disso, remover recursos de bloqueio de renderização pode melhorar significativamente a experiência do usuário móvel, já que usuários móveis costumam utilizar redes mais lentas e com dados limitados.
Considerações Finais
Neste artigo, apresentamos processos manuais e automatizados (utilizando plugins) para remoção de recursos de bloqueio de renderização. Caso queira otimizar todos os aspectos do desempenho do seu site, você pode optar por métodos manuais. No entanto, se você busca minimizar o trabalho e obter uma pontuação melhor no PageSpeed imediatamente, pode utilizar os plugins mencionados.
Já observamos melhorias notáveis no desempenho de vários sites. Agora, é sua vez de otimizar seu site WordPress com o mínimo de conhecimento técnico e proporcionar uma experiência excepcional aos usuários.
Você também pode explorar outros hacks para fazer seu site carregar na velocidade da luz.