No que diz respeito à velocidade do seu website, é importante pensar na velocidade como um recurso necessário, não como um luxo, e agir em conformidade. Muitas coisas fazem parte da equação que determina a rapidez com que os visitantes visionam o conteúdo do seu site quando entram nele. Algumas delas você não pode controlar: a velocidade da conexão com a Internet, a localização geográfica, o congestionamento da rede, entre outros. No entanto, existem outras elementos que pode e deve controlar.

Uma ferramenta que pode usar para identificar problemas de redução de velocidade que estão sob o seu controle é o Google PageSpeed ​​Insights. Certamente você já usou o PageSpeed ​​Insights anteriormente (se você não o fez, fica aqui sugestão para ir até lá antes ler o resto do artigo). É gratuito e identifica problemas que estão atrasando a apresentação de seus sites, como bloqueios de renderização do JavaScript e CSS.

Problema Comum: Bloqueio de Renderização do JavaScript e CSS

Existem dez regras de velocidade utilizadas para analisar sites corridos no PageSpeed ​​Insights. Duas dessas regras estão relacionadas com recursos JavaScript e CSS que bloqueiam o conteúdo acima da dobra. Quando qualquer uma dessas duas regras não é cumprida – e muitos sites falham uma ou ambas – você verá uma mensagem “Correção Necessária”, informando que deve: Eliminar Bloqueio de Renderização do JavaScript e CSS no conteúdo acima da dobra.

Eliminar bloqueios de renderização do JavaScript e CSS no conteúdo acima da borda

Eliminar bloqueios de renderização do JavaScript e CSS no conteúdo acima da borda

O que isso realmente significa? Fica aqui uma explicação mais detalhada.

Quando um navegador carrega uma página web, os recursos JavaScript e CSS geralmente impedem que a página web seja exibida até que sejam baixados e processados ​​pelo navegador. Isso é positivo, em alguns casos. Por exemplo, se você renderizar HTML puro antes de baixar qualquer CSS,  acabará por ter flash de conteúdo sem estilo (FOUC), que é provavelmente uma experiência pior para seus usuários do que aguardar alguns centésimos de segundo a mais pelo surgimento do conteúdo.

Alguns recursos precisam ser baixados e processados ​​antes que qualquer coisa seja exibida. Contudo, muitos recursos CSS e JavaScript são condicionais – ou seja, aplicados somente em casos específicos – ou simplesmente não são necessários para renderizar o conteúdo acima da dobra. Para produzir a experiência mais rápida possível para seus usuários, você deve tentar eliminar todos os recursos de bloqueio de renderização que não são necessários para exibir o conteúdo acima da dobra.

Quero deixar um ponto bem claro: pode exigir muito esforço ou simplesmente ser impossível remover todos os recursos de bloqueio de renderização. Fazer isso pode até produzir o temido FOUC (mencionado acima). Só precisa de ter em mente que o nosso objetivo não é alcançar uma pontuação perfeita para a velocidade da página. A nossa meta é, isso sim, oferecer a melhor experiência de usuário possível, o que significa um site que carrega o mais rápido possível sem exibir conteúdo não estilizado.

Dito de outra forma, use o PageSpeed Insights para identificar arquivos de bloqueio de renderização que você pode tentar eliminar, mas deixe que o UX atue como a sua diretriz supervisora. Você também pode ver essa mensagem em outras ferramentas de teste de velocidade. Por exemplo, na GTmetrix ela aparece como “Deferir Análise de JavaScript”.

Como Eliminar o Bloqueio de Renderização do JavaScript e CSS

Tem um plugin para fazer isso, certo? Claro, mas você precisa entender o que está acontecendo antes de começar acionando os plugins. Muitos plugins têm muitas configurações, e saber como os recursos de bloqueio de renderização são eliminados ajudará você a trabalhar com mais eficiência com o plugin que escolher.

Limpar JS do Caminho Crítico de Renderização

Primeiro, vamos falar sobre JavaScript. A ideia básica é mover recursos desnecessários de JavaScript e jQuery do caminho crítico de renderização. Isso normalmente é feito adicionando o atributo defer ou async nos elementos HTML do script que acionam os recursos JavaScript.

Os atributosdefereasync não são criados de forma igual e pode ser importante entender a diferença.

  • atributo async diz ao navegador para começar baixando o recurso imediatamente sem desacelerar a análise de HTML. Quando o recurso estiver disponível, a análise de HTML será pausada para que o recurso possa ser carregado.
  • O atributo defer informa o navegador para adiar o download do recurso até que a análise HTML seja concluída.Quando o navegador tiver terminado o HTML, ele baixará e renderizará todos os scripts adiados pela ordem em que aparecem no documento.

A grande diferença entre os dois é que o defer garante que os scripts são baixados e aplicados na página da Web pela ordem em que aparecem no documento HTML, enquanto o async não faz isso. Se o async for usado em todos os recursos JavaScript, pode quebrar recursos que dependem de recursos que aparecem anteriormente no documento. O problema mais comum que o async produz são recursos jQuery quebrados, que tentam carregar antes de o jquery.js ser adicionado ao documento.

Otimize a Entrega de Recursos CSS

A eliminação total bloqueio de renderização do CSS também pode ser complicada, se não mesmo impossível. Eis o cenário ideal:

  • Identificar os estilos necessários para renderizar o conteúdo acima da dobra e apresentar esses estilos em linha com o HTML.
  • Usar o atributo media nos elementos link que extraem arquivos CSS para identificar recursos CSS condicionais, ou seja, apenas necessários para dispositivos ou situações específicas.
  • Os outros recursos de CSS devem ser carregados de forma assíncrona, algo normalmente feito com a sua adição ao JavaScript diferido ou assíncrono. Com toda a honestidade, já estamos falando algo bem além das nossas capacidades, não é mesmo? Isso pertence ao território de engenharia front-end.O que é ótimo se você é um engenheiro de front-end, mas a maioria de nós não é. A boa notícia é que esse artigo é sobre o WordPress, e com os plugins corretos você pode eliminar ou, pelo menos, reduzir significativamente o número de recursos JS e CSS, que bloqueiam a renderização e afetam seu site.

Plugins para Reduzir o Bloqueio de Renderização do JavaScript e CSS

Na preparação desse artigo, pesquisei sobre uma dúzia de plugins WordPress populares, desenhados para reduzir e eliminar recursos de bloqueio de renderização JavaScript e CSS e escolhi cinco capazes de produzir uma redução mensurável.

Devo também dizer que não usei qualquer plugin de cache durante esse processo. Meu site de testes foi configurado em um plano da Kinsta que vem com armazenamento em cache embutido no servidor. Se você não é um cliente Kinsta, configurar um bom plugin de cache irá melhorar ainda mais o desempenho do seu site.

Contudo, antes de entrar nos plugins, precisamos de uma pontuação de referência. O que eu fiz foi configurar um site de teste simples na Kinsta e instalar um tema popular, grátis e que usa jQuery, a partir do WordPress.org: o Sydney. Sem fazer mais nada, eis onde estamos.

PageSpeed Insights sem pluginsPageSpeed Insights sem plugins

Não é muito mais, mas obviamente há espaço para melhorias. Existem dois recursos JavaScript e cinco CSS em uma posição de bloqueio de renderização.

Um outro teste que usaremos como referência é o Teste de Velocidade do Website Pingdom. Especificamente, queremos saber onúmero de solicitações necessárias para carregar a página web e ver como esse número muda com diferentes plugins ativados. Cada solicitação adicional significa outra viagem de ida e volta ao servidor; portanto, muitos plugins combinam recursos CSS e JavaScript em menos arquivos para acelerar o desempenho do website.

Tendo em consideração que o meu site de teste está hospedado na Kinsta, o site está em alta velocidade desde o início e exigiu 24 pedidos para carregar a página inicial.

Teste de velocidade sem plugins

Teste de velocidade sem plugins

Vejamos como podemos melhorar esse desempenho, experimentando alguns plugins.

Speed Booster Pack

O primeiro é o Speed Booster Pack. Esse plugin está ativo em mais de 40,000 sites do WordPress e tem uma classificação de 5 estrelas no WordPress.org.

Plugin Speed Booster Pack

Plugin Speed Booster Pack

As configurações do plugin estão em Configurações > Speed Booster Pack e o menu é razoavelmente simples, oferecendo também algumas opções de configuração.

O menu de opções gerais pode Mover scripts para o rodapé e Diferir a análise de arquivos javascript. Juntas, essas duas opções devem remover totalmente o JavaScript enquanto fonte de bloqueio de renderização. Outro menu designado por Ainda precisa de mais velocidade? permite o carregamento de CSS de forma assíncrona. Embora isso devesse ter eliminado todo o CSS do bloqueio de renderização, ativar essa opção fez surgir o temido FOUC, por isso não deixei essa opção ativada.

Com o plugin configurado, vejamos como o site se comportou no PageSpeed ​​Insights.

PageSpeed Insights com o plugin Speed Booster

PageSpeed Insights com o plugin Speed Booster

Conforme tínhamos antecipado, já não existem recursos JavaScript como fonte de bloqueio de renderização. Porém, tendo em conta que o carregamento assíncrono de CSS produziu um FOUC e precisa ser desativado, todos os cinco recursos de CSS ainda estão bloqueando o conteúdo acima da dobra.

Teste de velocidade com o plugin Speed Booster

Teste de velocidade com o plugin Speed Booster

Curiosamente, o número de pedidos realmente aumentou. Apesar de não haver nada que sugira que o número tenha diminuído, é surpreendente notar o aumento do número de solicitações. O nível geral de desempenho melhorou um pouco, então não irei considerar o Speed ​​Booster Pack um fracasso. Mas existem opções mais eficazes.

JCH Optimize

Vejamos agora o JCH Optimize. Apesar de o plugin ter menos instalações ativas do que o Speed ​​Booster Pack, possui impressionantes 4.6 estrelas.

Plugin JCH Optimize

Plugin JCH Optimize

Esse plugin combina e reduz o JavaScript e CSS e, como muitos outros recursos, está desenhado para acelerar o carregamento da página. Apesar de a eliminação de recursos de bloqueio de renderização não estar mencionada em lugar algum, a combinação de arquivos JavaScript e CSS deve ser traduzida em menos recursos necessários para carregar a página e menos recursos JS e CSS em uma posição de bloqueio de renderização.

O plugin adiciona um menu de configurações em Configurações > JCH Optimize. O menu de configurações tem várias páginas com muitas opções de configuração diferentes. Para tornar as coisas relativamente simples, selecionei as configurações automáticas Médias no menu Opções Básicas.

Os resultados foram um pouco intrigantes.

PageSpeed Insights com o plugin JCH

PageSpeed Insights com o plugin JCH

Todos os recursos JavaScript foram combinados, ou seja, apenas um recurso JS está bloqueando a renderização do conteúdo acima da dobra. Por enquanto, tudo bem. Os resultados do CSS são aqueles que despertam dúvidas. Ainda existem cinco recursos CSS em uma posição de bloqueio de renderização. Parece que o plugin combinou e diminuiu o conteúdo dos arquivos CSS. Mas os arquivos de fontes foram excluídos e o JCH carregou três arquivos CSS diferentes em vez de combinar todos os três em um só arquivo CSS.

Não é isso que eu esperava encontrar. Vamos ver o que o Teste de Velocidade do Website da Pingdom tem a dizer sobre essas mudanças.

Teste de velocidade com o plugin JCH

Teste de velocidade com o plugin JCH

Como havíamos previsto, o número de solicitações foi reduzido em um depois de os dois recursos JavaScript terem sido combinados. Além disso, o teste revela um desempenho praticamente inalterado.

Eu esperava uma melhoria mais mensurável do JCH. Pensei que todos os arquivos CSS fossem combinados, restando depois somente dois recursos de bloqueio de renderização: um arquivo JavaScript combinado e um arquivo CSS combinado. Não sei por que isso não aconteceu. Existe uma versão premium do JCH Optimize. Ou seja, é possível que alguns dos recursos avançados permitam combinar ainda mais arquivos CSS e reduzir o número de recursos de bloqueio de renderização.

Da forma como as coisas estão, o JCH Optimize não é muito útil para otimizar esse site de teste em particular.

Autoptimize

Com mais de 600,000 instalações ativas e uma classificação de 4.7 estrelas, o Autoptimize é um dos mais populares plugins de otimização de velocidade no diretório de plugins do WordPress. Também recebe pontuações elevadas devido à atitude caridosa e generosa do autor do plugin.

Plugin Autoptimize

Plugin Autoptimize

Esse plugin está desenhado para ser simples de usar e cumpre a promessa. Considerando que muitas das outras opções que eu usei tinham menus bem complexos, o Autoptimize é muito mais simples. Tudo que fiz foi ir em Strong Autoptimize e selecionar as três opções principais da caixa de seleção mostradas nessa página.

Configurações do Autoptimize

Configurações do Autoptimize

Vejamos os resultados do meu site no teste realizado no PageSpeed ​​Insights após essa otimização simples de 30 segundos ou menos.

Lutando com tempo de inatividade e problemas no WordPress? Kinsta é a solução de hospedagem projetada para economizar seu tempo! Confira nossos recursos
PageSpeed Insights com o plugin Autoptimize

PageSpeed Insights com o plugin Autoptimize

Conseguimos reduzir o número de recursos de bloqueio de renderização de sete para quatro. Muito bom. Agora vejamos como o número de solicitações foi alterado.

Teste de velocidade com o plugin Autoptimize

Teste de velocidade com o plugin Autoptimize

O número total de solicitações diminuiu consideravelmente de 24 para 17, e o nível de desempenho disparou para 92. Parece que a fama do Autoptimize é justificada. Devo salientar que Kinsta notou uma tendência de incompatibilidade do Autoptimize com alguns sites que embutem CSS personalizado no header.php. Por exemplo, se você tem CSS personalizado codificado no seu arquivio header.php do seu tema, tome mais precauções se você experimentar o Autoptimize.

Async Javascript

O próximo na lista é o Async Javascript. Esse plugin se tornou muito popular em pouco tempo e é mantido pelo mesmo desenvolvedor do Autoptimize. Passou de 4,000 instalações para mais de 40,000 em menos de um ano com uma classificação bem alta: 4,4 estrelas. Esse é outro plugin muito simples. É só instalar e ativar. Entre na opção Async Javascript adicionada ao menu Admin. Marque a caixa de seleção ao lado de Ativar o Async JavaScript. Selecione o botão de opção para o método Defer ou Async. Depois salve as alterações e veja o desempenho do seu site.

No caso do meu site de testes, o async acabou carregando alguns arquivos jQuery antes do jquery.js, o que acabou quebrando o site. Então escolhi o método defer. Com essas opções selecionadas, eis os resultados dos testes. Primeiro, o PageSpeed ​​Insights.

PageSpeed Insights com o plugin Async

PageSpeed Insights com o plugin Async

Como esperado, todo o JavaScript foi removido, mas o CSS permaneceu igual. Isso é bom, já que esse plugin foi desenhado para lidar apenas com JavaScript.

Teste de velocidade com o plugin Async

Teste de velocidade com o plugin Async

O desempenho do site no teste de velocidade do site da Pingdom manteve-se quase inalterado já com o plugin instalado. Novamente, isso confirma que esse plugin faz exatamente o que ele promete: eliminará o bloqueio de renderização do JavaScript.

Combinando o Async JS e o Autoptimize

O menu Async Javascript chama a atenção para o fato de que ele foi projetado para ter um bom funcionamento com o Autoptimize. Como eu já tinha o Autoptimize instalado, experimentei fazer isso. Após ativar a opção Autoptimize, uma nova caixa de seleção surgiu no menu de configurações do Javascript para Ativar Suporte Autoptimize. Com essa caixa de seleção ativada, vejamos o comportamento do site.

PageSpeed Insights com plugins Async e Autoptimize

PageSpeed Insights com plugins Async e Autoptimize

Ótimo. Com os dois plugins configurados, conseguimos reduzir o número total de recursos de bloqueio de renderização para apenas três recursos de CSS. Como isso afeta o número de solicitações?

Teste de velocidade com plugins Async e Autoptimize

Teste de velocidade com plugins Async e Autoptimize

O site tem uma velocidade alta e envia somente 17 solicitações.

Enquanto plugin solitário, não sou um grande fã do Async Javascript. Ele dedica mais espaço no menu de configurações para anunciar a sua versão premium do que para as configurações do plugin. Ele adiciona um item primário ao menu Admin em vez de adicionar ele como um item de submenu no menu Configurações onde realmente deveria estar. Ele erra na ortografia do JavaScript, escrevendo Javascript. Ok, eu admito que a última queixa é trivial, mas se o P no WordPress é importante, então o S em JavaScript também.

Atualização: O autor do plugin abordou essas questões após esse artigo, reduzindo o tamanho da publicidade, movendo a localização do plugin no menu Admin e corrigindo até a ortografia do JavaScript. Estamos impressionados. Independentemente do que eu penso sobre o Async Javascript enquanto plugin, quando combinado com o Autoptimize ele faz um ótimo trabalho ao eliminar completamente o JavaScript do bloqueio de renderização e reduzindo a quantidade de CSS.

Hummingbird

O último plugin testado foi o Hummingbird da WPMU DEV. É um plugin que eu uso em alguns dos meus websites. Costumava ser um plugin premium, mas agora é gratuito! Conseguiu a redução mais significativa nos recursos de bloqueio de renderização, por isso vale a pena ser mencionado.

Plugin Hummingbird para WordPress

Plugin Hummingbird para WordPress

O Hummingbird é um plugin complexo, mas muito amigo do usuário, tendo em conta o que ele oferece. Para mover recursos de bloqueio de renderização, entre em Hummingbird Minimização e selecione Verificar Arquivos. Nessa tela, pode selecionar arquivos CSS e JavaScript para os colocar no rodapé ou cabeçalho da página, assim como arquivos para combinar e minimizar.

Eu combinei e reduzi todos os arquivos e movi eles para o rodapé com duas exceções: o arquivo style.css primário do tema e o jquery.js. Eu descobri que ambos os arquivos devem aparecer no seu local original para evitar quebrar o site ou produzir um FOUC. Com essas configurações, veja o desempenho do site no PageSpeed ​​Insights.

PageSpeed Insights com o plugin Hummingbird

PageSpeed Insights com o plugin Hummingbird

Como esperado, apenas temos dois recursos de bloqueio de renderização: style.css e jquery.js. Ótimo. Vamos ver o que diz o Pingdom.

Teste de velocidade com o plugin Hummingbird

Teste de velocidade com o plugin Hummingbird

Apesar de o grau geral de desempenho não ser tão alto quanto foi com o Autoptimize, conseguimos reduzir o número total de solicitações para o valor mais baixo que vimos até agora: 16.

O Async JS Funciona Bem com o Hummingbird

Apesar desse cenário positivo, achei que o Async Javascript poderia ser útil para movermos o jquery.js sem quebrar nada. Depois de ativar o Async Javascript e de executar novamente o PageSpeed ​​Insights, concluímos que eliminámos quase todos os recursos de bloqueio de renderização.

Eliminar bloqueio de renderização do JavaScript

Eliminar bloqueio de renderização do JavaScript

Só resta o style.css. O último passo para eliminarmos totalmente os recursos de bloqueio de renderização seria alinhar o style.css. Contudo, passámos de uma mensagem Deve Corrigir para uma que diz Considerar Correção no PageSpeed ​​Insights. Irei colocar no Google a responsabilidade sobre definir a gravidade dessa mensagem que fala Considerar Correção e falar que o alcançámos até agora é um enorme sucesso.

Resumo

Nem todos os plugins que afirmam serem capazes de resolver e eliminar os problemas de bloqueio de renderização do JavaScript e CSS são criados de igual forma. O Autoptimize usado em combinação com o Async JavaScript é a melhor opção gratuita que encontrei para o meu site de teste. O plugin Hummingbird junto com o Async Javascript também produziu resultados que finalmente satisfizeram o PageSpeed ​​Insights.

Esse artigo está longe de ser exaustivo, e existem muitos plugins adicionais que pode usar para lidar com os recursos de bloqueio de renderização. Que plugins você usa e recomenda para remover o bloqueio de renderização do JavaScript e CSS?