Como eliminar JavaScript e CSS de bloqueio de renderização no conteúdo acima da dobra
Ao construir um site, existem alguns aspectos que são primordiais para oferecer aos usuários uma experiência tranquila. Um desses aspectos é representado pelo tempo de carregamento. Um site que carrega rapidamente é sempre apreciado pelos visitantes que desejam encontrar o que procuram o mais rápido possível. Para obter um tempo de carregamento rápido, você deve aprender como eliminar JavaScript e CSS de bloqueio de renderização no conteúdo acima da dobra.
A velocidade de um site pode ser influenciada por uma ampla gama de fatores, mas os fatores discutidos neste artigo têm o maior impacto. A equação perfeita do site pode ser difícil de resolver, pois certos elementos não dependem de suas ações. Eles são ditados por cada situação em particular (por exemplo, localização geográfica, velocidade da Internet). No entanto, você pode otimizar a entrega de CSS modificando os elementos que você pode controlar totalmente. Conheça abaixo mais sobre este tema neste artigo criado por nossa equipe em wpDataTables.
Definindo conteúdo de bloqueio de renderização e acima da dobra
Bloqueio de renderização
O bloqueio de renderização refere-se aos elementos que impedem que o conteúdo crucial de um site (por exemplo, o corpo do texto principal de um artigo) seja carregado antes que a página inteira seja carregada. Um bom exemplo de tal elemento é representado por qualquer JavaScript ou CSS adicional adicionado a um site. Esse código pode impedir que o usuário veja qualquer coisa em seu navegador até que o código seja totalmente executado, tornando-se assim um bloqueio de renderização.
Conteúdo acima da dobra
Quando um visitante acessa um site, ele é recebido por uma determinada parte do site – ou seja, a parte superior. Para ver o restante, o usuário terá que rolar para baixo ou realizar outras ações no site. O conteúdo que os visitantes veem imediatamente após acessá-lo é chamado de conteúdo acima da dobra.
Sobre o bloqueio de renderização em JavaScript e CSS
Os navegadores lêem HTML para exibir um site. Este é um processo que tem várias etapas. Se o navegador se deparar com elementos que fazem referência a um script/folha de estilo, são necessárias etapas extras para ler o código. O navegador precisará solicitar um arquivo, aguardar uma resposta, baixar o arquivo do servidor e executá-lo.
Obviamente, essas etapas adicionais podem diminuir o tempo de carregamento. Lembre-se de que alguns temas do WordPress envolvem mais do que apenas um arquivo CSS ou JavaScript. O tempo de carregamento pode ser reduzido drasticamente por causa desses arquivos. Esta é a razão pela qual você precisará eliminar recursos de bloqueio de renderização do seu site. Na maioria das vezes, esses não são arquivos críticos, portanto, você pode adiar a análise do JavaScript para reduzir o bloqueio da renderização da página, melhorando assim a velocidade do seu site.
Identificando JavaScript e CSS de bloqueio de renderização
Para eliminar JavaScript e CSS de bloqueio de renderização no conteúdo acima da dobra, você terá que identificar quais são esses elementos. Uma das maneiras mais fáceis de identificá-los é abrir seu site com uma ferramenta de velocidade de página que informa quais problemas ele enfrenta no carregamento. O PageSpeed Insights do Google é uma dessas ferramentas que deve ajudá-lo a encontrar os arquivos que bloqueiam a renderização em seu site. Depois de descobrir quais são os arquivos, você pode remover ou reorganizar o JavaScript de bloqueio de renderização.
Como eliminar JavaScript e CSS de bloqueio de renderização no conteúdo acima da dobra?
Você tem duas opções nessa situação: aprenda você mesmo a eliminar JavaScript e CSS de bloqueio de renderização no conteúdo acima da dobra ou use um plug-in para fazer isso. Se você é experiente em tecnologia e está disposto a aprender como os recursos de bloqueio de renderização são eliminados, aplique um destes métodos:
Limpe o JavaScript do caminho de renderização crítico
O caminho de renderização crítico deve incluir apenas os elementos essenciais para o site. Você pode mover recursos JavaScript desnecessários para fora desse caminho. Isso é feito adicionando certos atributos onde o JavaScript é necessário. Os atributos são:
- Assíncrono: este atributo informa ao navegador que ele deve iniciar o download dos recursos imediatamente para evitar tempos de carregamento lentos. Assim que os recursos estiverem disponíveis, a análise de HTML é pausada temporariamente e os recursos são carregados.
- Adiar: este atributo informa ao navegador para adiar o download dos recursos até que o processo de análise de HTML seja concluído. Depois de concluído, o navegador fará o download e renderizará os scripts na ordem em que aparecem no site.
Verifique como os recursos CSS são entregues e otimize-os
Para eliminar recursos de bloqueio de renderização em CSS, você terá que:
- Identifique os recursos necessários para o conteúdo acima da dobra e incorpore os estilos CSS com HTML.
- Use outro atributo para identificar os recursos CSS que são absolutamente necessários (atributo de mídia).
- Carregue os recursos CSS de forma assíncrona (usando os atributos discutidos acima).
Uma lista de plugins que podem ajudá-lo a eliminar o JavaScript de bloqueio de renderização mais facilmente
Otimizar automaticamente
Para eliminar JavaScript e CSS de bloqueio de renderização no conteúdo acima da dobra do WordPress, você pode usar plugins como Autoptimize. Este plugin melhora o tempo de carregamento do seu site WordPress combinando bits de código, tornando os blocos de código menores removendo caracteres desnecessários (compressão) e assim por diante. Ao fazer essas alterações, o código fica mais fácil de ler e o tamanho do arquivo é reduzido, reduzindo assim algumas centenas de milissegundos ou até segundos no tempo de carregamento.
Para instalar este plugin, basta acessar o painel do WordPress e navegar até a guia Plugins. Em seguida, selecione a opção Adicionar novo, localizada na parte superior da janela. Depois disso, você pode procurar por Autoptimize ou outros plugins na barra de pesquisa. Clique em Instalar agora, ative-o para o site desejado e pronto.
Cache Total W3
O Autoptimize tem muitas outras alternativas que você pode usar para remover recursos de bloqueio de renderização do WordPress. O plugin W3 Total Cache é um dos melhores. O que é interessante sobre este plugin é que ele incorpora vários recursos extras para otimizar o WordPress. O cache representa o processo no qual determinados arquivos são armazenados no computador de um usuário para melhorar sua experiência com o site. As visitas subsequentes serão mais fáceis e os tempos de carregamento melhorarão.
Pacote de aumento de velocidade
Outra opção é o Speed Booster Pack. Depois de instalá-lo, você pode acessar as configurações e escolher as opções que atendem às suas necessidades. O plug-in oferece algumas opções de configuração, como mover scripts para o rodapé ou adiar a análise de arquivos JavaScript. Ao selecioná-los, você pode remover JavaScript e CSS de bloqueio de renderização no conteúdo acima da dobra com apenas alguns cliques.
Otimizar JCH
JCH Optimize é um plugin que combina JavaScript e CSS enquanto reduz o tamanho dos arquivos. Ele tem muitos outros recursos que podem ser úteis a longo prazo, mas é ótimo para eliminar recursos de bloqueio de renderização. Navegue pelas suas configurações e ative os recursos que parecem relevantes para o seu site.
Mesmo que exija alguma atenção, resolver esse problema terá um grande impacto no seu site. Depois de aprender a remover JavaScript e CSS de bloqueio de renderização no conteúdo acima da dobra, certifique-se de eliminar todos os elementos que possam deixar seu site lento o mais rápido possível.
Se você gostou de ler este artigo sobre como eliminar JavaScript e CSS de bloqueio de renderização no conteúdo acima da dobra, confira este artigo sobre como alterar fontes no WordPress.
Também escrevemos sobre alguns assuntos relacionados, como incorporar um iframe do WordPress, como encontrar o ID da página no WordPress, como baixar a biblioteca de mídia do WordPress, como parar um ataque DDoS e como ocultar o título da página no WordPress.