No cenário digital competitivo de hoje, a velocidade do site é muito importante quando se trata do sucesso de um negócio online. Gigantes dos mecanismos de pesquisa, como o Google, priorizam sites de carregamento rápido, reconhecendo a necessidade de fornecer uma experiência de usuário perfeita.
De acordo com estudos, carregamentos de página mais rápidos aumentam o engajamento do usuário e as taxas de conversão. Na verdade, um atraso de um segundo no tempo de carregamento de uma página pode causar uma queda de 7% nas conversões de clientes. Diante disso, é óbvio que os proprietários de sites devem colocar um grande foco no desempenho do site.
O Google leva a sério o desempenho do site e o considera ao determinar os resultados da pesquisa. Consequentemente, os sites que carregam rapidamente têm maior probabilidade de aparecer primeiro nos resultados de pesquisa, atraindo mais visitantes e, eventualmente, gerando mais receita. Mas como você pode atender aos requisitos do Google e carregar seu site rapidamente?
Você se livra de recursos que podem bloquear o tempo de carregamento de um site, como arquivos CSS e JavaScript.
No entanto, remover esses recursos pode ser desafiador e demorado, especialmente para indivíduos sem habilidades técnicas.
Neste artigo, explicaremos os recursos de bloqueio de renderização e como eles afetam o desempenho do site e forneceremos um guia passo a passo para eliminá-los do seu site WordPress. Então, vamos começar a otimizar seu site para velocidade e sucesso!
últimas postagens
Recursos de bloqueio de renderização
Qualquer recurso que deva ser carregado antes que uma página da Web possa ser exibida é considerado um recurso de bloqueio de renderização. Esses recursos influenciam o desempenho e a eficácia de um site e prolongam o tempo necessário para carregar uma página.
Um arquivo CSS ou JavaScript pode ser considerado um recurso de bloqueio de renderização se esse arquivo estiver bloqueando a renderização de uma página da web. No entanto, o significado de carregar a página pode variar de acordo com sua necessidade imediata.
Quando um usuário acessa uma página, o navegador primeiro processa o código HTML para exibir seu conteúdo acima da dobra. Quando o navegador encontra arquivos CSS e JavaScript, ele também os baixa e processa. Se os arquivos de recursos contiverem códigos adicionais ou partes não utilizadas, levará mais tempo para carregar a página da web.
Tipos de recursos de bloqueio de renderização
Geralmente, arquivos de recursos como CSS e JavaScript são considerados recursos de bloqueio de renderização no WordPress. O navegador vê esses recursos como críticos e requer carregamento antes que a página possa ser exibida. Mas não é isso; existem mais arquivos de recursos que bloqueiam a renderização de uma página da web.
Aqui está uma lista de recursos de bloqueio de renderização:
Folhas de estilo CSS
O design e a apresentação de uma página da Web são determinados pelas folhas de estilo CSS. Um arquivo CSS será considerado um recurso de bloqueio de renderização se for colocado na seção
de uma página HTML.Arquivos JavaScript na seção
JavaScript é uma linguagem de script que pode ser utilizada para fornecer uma página da Web com comportamento dinâmico e interação. Um arquivo JavaScript será considerado um recurso de bloqueio de renderização se colocado na seção
de uma página HTML.Fontes
Os textos em uma página da web são exibidos usando fontes diferentes. As fontes também são consideradas um recurso de bloqueio de renderização se incluídas na seção
de uma página HTML e carregadas de um servidor local ou CDN.Importações de HTML
Esses são os recursos HTML mais antigos que permitem que as páginas da Web incluam elementos de outros documentos HTML. Embora as importações de HTML não sejam mais usadas com tanta frequência, elas ainda podem ser vistas em alguns sites mais antigos. As importações de HTML também são consideradas recursos de bloqueio de renderização.
Por que os recursos de bloqueio de renderização são terríveis para páginas da Web
Se o seu site WordPress incluir recursos de bloqueio de renderização, você ficará para trás nos resultados da pesquisa. Mesmo se você estiver na linha de frente, os sites de melhor desempenho acabarão por dominá-lo.
Sites com recursos de bloqueio de renderização carregarão arquivos extras durante a renderização do site. Antes de ver o site, os usuários devem aguardar enquanto os arquivos são processados. Os seguintes indicadores de desempenho para sites serão afetados por esses recursos:
- Maior exibição de conteúdo: determina quanto tempo levaria para carregar o conteúdo principal da página.
- Primeira exibição de conteúdo: o tempo que leva para um navegador produzir o primeiro conteúdo de modelo de objeto de documento (DOM) em seu site.
- Tempo Total de Bloqueio: avalia quanto tempo leva desde o Primeiro Pianto de Conteúdo até quanto tempo leva para uma página se tornar totalmente interativa.
Embora os recursos de bloqueio de renderização não sejam necessários para o carregamento, eles podem prejudicar a renderização de um site ou página da web. Portanto, é essencial remover esses recursos para evitar que dificulte a navegação dos usuários em seu site.
Vamos dar uma olhada mais de perto porque o bloqueio de renderização é um problema sério para as páginas da web:
Tempo de carregamento lento da página
Os recursos de bloqueio de renderização farão com que o site carregue mais lentamente, o que é uma de suas principais desvantagens. Uma página da Web carrega lentamente quando contém arquivos de recursos com elementos desnecessários. Portanto, afetará a aparência dos resultados da pesquisa, diminuirá o envolvimento do usuário e aumentará a taxa de rejeição.
Renderização bloqueada
Freqüentemente, um navegador para de renderizar uma página da Web quando encontra recursos de bloqueio de renderização porque deseja que os recursos de bloqueio de renderização sejam recuperados e processados.
Por fim, os usuários ficarão irritados e sairão do site devido à falta de resposta da página ou à renderização lenta.
Além disso, se um recurso carregar lentamente, o navegador também pode desistir e parar de tentar carregá-lo. Isso pode levar a páginas quebradas ou informações ausentes.
Diminuição do envolvimento do usuário
Quando ocorrem atrasos na renderização, a experiência do usuário diminui com isso. Os usuários estão sempre esperando tempos de carregamento rápidos e geralmente saem de um site de carregamento lento. Então, eles acabam em um site que carrega mais rápido.
Sites de carregamento lento têm um efeito prejudicial na satisfação do consumidor e na reputação da marca. Com isso, o tráfego do site e a taxa de conversão também diminuem drasticamente.
Existem diferentes abordagens para remover recursos de bloqueio de renderização do WordPress. No entanto, apresentaremos métodos manuais para eliminar recursos de bloqueio de renderização. Em seguida, mostraremos como você pode fazer isso usando alguns dos renomados plugins do WordPress.
Elimine recursos de bloqueio de renderização manualmente
Você pode evitar fazer isso manualmente, então não fique frustrado. Mas passar por esta seção certamente ajudará você a aprender algumas técnicas de otimização de desempenho do WordPress. Mas primeiro, assista a este vídeo para se familiarizar com os termos discutidos.
#1. Identificar recursos de bloqueio de renderização
Você deve primeiro descobrir os recursos de bloqueio de renderização antes de removê-los do seu site. Basta seguir estas etapas para descobrir os recursos de bloqueio de renderização em seu site WordPress:
- Acesse o Google PageSpeed Insights.
- Digite a URL do seu site na barra de pesquisa.
- Clique no botão “Analisar” para obter informações sobre o seu site.
- Role para baixo e verifique a seção de oportunidades.
- Se sua página tiver recursos de bloqueio de renderização, eles serão listados.
#2. Usando os atributos “Defer” e “Async” para JS
Depois de identificar os recursos de bloqueio de renderização, é hora de eliminá-los para melhorar o desempenho do site. De diversos métodos, usar o método “defer” ou “async” para arquivos JavaScript é uma abordagem para fazer isso.
Quando se trata do atributo “defer”, ele permite habilitar o navegador a baixar o arquivo JS e depois executá-lo. Mas acontece quando a página termina de carregar e está pronta para exibir seu conteúdo.
Portanto, o restante dos elementos da página pode ser carregado em paralelo com o arquivo JavaScript. Como resultado, o tempo necessário para carregar a página é reduzido.
Outra abordagem é o atributo “async” que permite ao navegador baixar o arquivo JS sempre que disponível. Isso acontece sem bloquear nenhum outro elemento da página. Consequentemente, o arquivo JS pode carregar em paralelo com outros elementos, acelerando o processo de carregamento.
Você pode se livrar dos recursos de bloqueio de renderização e aumentar a velocidade do seu site utilizando o atributo “defer” ou “async”.
#3. Usando o atributo “Media” para CSS condicional
Utilizar os atributos “media” para CSS condicional é outra abordagem para eliminar recursos de bloqueio de renderização. Com esse atributo, você pode definir arquivos CSS exclusivos para navegadores de desktop e móveis.
Por exemplo, você pode incluir um arquivo CSS dedicado a dispositivos de desktop e outro arquivo CSS personalizado para dispositivos móveis. Você pode indicar ao navegador que o arquivo CSS da área de trabalho será carregado quando acessado por meio de um dispositivo de área de trabalho.
Da mesma forma, o CSS móvel só deve ser carregado quando acessado por meio de dispositivos móveis. Ao carregar CSS específico do dispositivo para dispositivos designados, você pode reduzir os recursos de bloqueio de renderização e aumentar o tempo de carregamento do seu site.
#4. Adiando CSS não crítico
Além de utilizar o atributo “media” para CSS condicional, tente adiar o CSS não crítico. Para esta abordagem, você deve carregar o CSS essencial principalmente. Em seguida, você carrega o restante do CSS à medida que a página é carregada.
Por exemplo, você pode ter um enorme arquivo CSS que inclui todos os estilos do seu site. Mas apenas uma pequena parte desse arquivo CSS é necessária para mostrar o conteúdo na região acima da dobra do seu site. O conteúdo acima da dobra pode ser exibido rapidamente atrasando o CSS não crítico, e o CSS restante pode ser carregado quando a página é carregada.
#5. Removendo CSS e JS não utilizados
Remover arquivos CSS e JavaScript desnecessários é outra técnica para remover recursos de bloqueio de renderização. Esses arquivos podem deixar sua 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. Você pode facilmente utilizar ferramentas como PurifyCSS ou UnusedCSS para remover qualquer arquivo CSS não utilizado do seu site.
#6. Carregando fontes personalizadas localmente
As fontes personalizadas também podem incluir recursos que restringem a renderização. Em vez de depender de fontes externas como o Google Fonts, você deve carregar localmente suas próprias fontes personalizadas para evitar a necessidade desses recursos.
Você pode garantir que suas fontes personalizadas carreguem de forma rápida e eficiente, sem diminuir o desempenho do seu site, carregando-as localmente. Isso pode levar a um site mais rápido e responsivo e melhorar a experiência do usuário.
#7. Minimizando JS e CSS
Por fim, reduzir seus arquivos CSS e JavaScript pode ajudar seu site a funcionar melhor. A minificação remove caracteres desnecessários, como espaços em branco e comentários, do seu código. Assim, o tamanho dos seus arquivos é reduzido, o que acelera o carregamento.
Para minificar seus arquivos, você pode usar ferramentas como MinifyJS ou CSSNano. Mantenha uma cópia de seus arquivos originais para o caso de precisar fazer modificações neles.
Elimine recursos de bloqueio de renderização com plug-in
Nesta seção, mostraremos como você pode eliminar recursos de bloqueio de renderização usando plug-ins do WordPress. Esses plug-ins são conhecidos no WordPress e podem remover rapidamente os recursos de bloqueio de renderização. A melhor parte é que você pode até melhorar o desempenho do seu site sem nenhum conhecimento especializado.
#1. Cache Total W3
O W3 Total Cache (W3TC) aprimora toda a experiência do usuário de um site WordPress. Ele elimina os recursos de bloqueio de renderização e melhora o SEO, os principais sinais vitais da Web e muito mais. O plug-in utiliza recursos como 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 plug-in W3 Total Cache e siga estas etapas:
- Vá para 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.
- Agora 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.
- Em seguida, volte para Performance > Minify.
- Agora, na seção js, primeiro clique em Ativar para as configurações do JS Minify. Em seguida, na seção Operações em áreas, selecione Sem bloqueio usando o tipo “defer” para a tag Before .
- Agora vá para o gerenciamento de arquivos JS, selecione o tema que você ativou e clique no botão Adicionar Script. Agora colete os URLs de Javascript com problemas verificados pelo Google PageSpeed Insights. Cole os URLs no campo designado, conforme indicado na imagem.
- Agora role um pouco para baixo até a seção CSS. Selecione seu tema no menu suspenso na seção de gerenciamento de arquivos CSS e clique em Adicionar uma folha de estilo. Agora basta seguir o passo anterior e copiar e colar as URLs coletadas do PageSpeed Insight que apresentam problemas.
- Como todas as configurações estão definidas, clique no botão Salvar configurações e limpar para executar.
#2. Otimização JCH
O JCH Optimize aprimora o desempenho do site WordPress medido pelo insight do Google PageSpeed. O plug-in 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 muito mais.
Assim, a experiência geral do usuário e o desempenho do site melhoram significativamente.
Depois de instalar e ativar o JCH Optimize, siga estes processos para eliminar os recursos de bloqueio de renderização:
- Vá para Configurações>JCH Optimize, role um pouco para baixo e vá para as configurações de recursos básicos.
- Habilite a entrega de CSS otimizada para eliminar o bloqueio de renderização de CSS. Esse recurso determina automaticamente o CSS essencial necessário para exibir o conteúdo acima da dobra em cada página da web. Além disso, ele o insere na seção do conteúdo HTML de cada página.
- O link de pré-carregamento é usado 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