Melhore a velocidade do site: remova JS e CSS de bloqueio de renderização

O WordPress permite que você crie um site personalizado com sua escolha de plugins e temas. No entanto, isso pode significar que seu site tem muitos scripts que reduzem o tempo de carregamento e o desempenho. Nem todos esses scripts precisam ser carregados imediatamente, e alguns podem impedir que os visitantes vejam seu conteúdo o mais rápido possível.

Esses arquivos estranhos são chamados de JavaScript e CSS de bloqueio de renderização. Neste artigo, explicaremos o que são esses recursos de bloqueio de renderização e mostraremos como eliminar recursos de bloqueio de renderização do seu site WordPress. Vamos começar!

O que é JavaScript e CSS de bloqueio de renderização?

Quando um site é carregado no navegador, ele envia chamadas para cada script em uma fila. Normalmente, essa fila precisa estar vazia antes que o site fique visível no navegador. A fila de scripts que podem impedir o carregamento completo do seu site são os arquivos JavaScript e CSS de bloqueio de renderização.

Quando a fila de scripts é muito longa, pode demorar um pouco até que os visitantes possam acessar seu site. Freqüentemente, muitos desses scripts não são necessários para visualizar o site imediatamente e podem facilmente esperar para serem executados até que o próprio site esteja totalmente carregado.

Em outras palavras, esses tipos de scripts tornam suas páginas da web mais lentas sem realmente contribuir para as necessidades imediatas de seus visualizadores. Qualquer script que não envolva o que o visualizador verá imediatamente (geralmente referido como elementos 'acima da dobra') deve ser adiado até que o restante da página seja carregado.

Por que JavaScript e CSS de bloqueio de renderização são ruins para páginas da Web?

Os scripts JavaScript e CSS de bloqueio de renderização tornam suas páginas da Web mais lentas, o que é ruim por vários motivos. A velocidade do site desempenha um papel em muitos aspectos vitais do seu site WordPress, incluindo usabilidade geral e Search Engine Optimization (SEO). Quando seu site carrega lentamente, é mais provável que você perca visitantes e menos provável que tenha uma classificação alta nos resultados do mecanismo de pesquisa.

Obviamente, a velocidade e o desempenho do site são afetados por mais do que apenas recursos de bloqueio de renderização. Posto isto, este é um fator que pode fazer uma diferença significativa nos tempos de carregamento. Lembre-se de que cada recurso em uma página da Web ocupa bytes, e mais do que isso pode resultar em tempos de download mais longos. Quanto menos scripts e mais leves seu site tiver, melhor. Afinal, você não quer deixar um site lento impactar negativamente seus negócios.

Em geral, é melhor garantir que o código do seu site seja o mais limpo e mínimo possível para melhorar a velocidade geral. No entanto, sempre haverá algum código restante. Por padrão, os navegadores tentarão carregar tudo de uma vez, incluindo os scripts de bloqueio de renderização.

Cabe a você certificar-se de que seu site carregue primeiro os scripts necessários para que pareça correto e possa ser usado quando um visualizador acessar uma página pela primeira vez. Só então o restante dos scripts deve ser carregado.

Como eliminar JavaScript e CSS de bloqueio de renderização

Antes de poder eliminar os scripts de bloqueio de renderização, você precisará identificar quais scripts estão causando problemas. Para fazer isso, recomendamos usar o PageSpeed ​​Insights do Google. Basta inserir sua URL e o Google informará exatamente quais scripts estão diminuindo o desempenho da sua página:

Faça uma lista de todos os scripts que aparecem nos resultados em Eliminar JavaScript e CSS de bloqueio de renderização . Se você tentar resolvê-los manualmente ou usar um plug-in, esses são os scripts aos quais você deve prestar atenção extra ao aplicar as correções a seguir.

Para reduzir o número de scripts de bloqueio de renderização em seu site, você precisará seguir algumas práticas recomendadas:

• 'Minimize' seu JavaScript e CSS. Isso significa remover todos os espaços em branco extras e comentários desnecessários no código.
• Concatene seu JavaScript e CSS. Para fazer isso, você deve pegar vários arquivos .js e .css diferentes e combiná-los. Idealmente, você terá apenas alguns desses arquivos.
• Adie o carregamento do JavaScript. Pode ser útil forçar os arquivos JavaScript a aguardar o carregamento até que todo o resto da página esteja pronto. Uma maneira confiável de adiar o JavaScript é usar o carregamento assíncrono.

Essas dicas podem ser difíceis de realizar manualmente no WordPress, porque muitos plug-ins frontais vêm com seus próprios arquivos JavaScript e CSS. Um plug-in pode anexar facilmente mais de cinco ou seis scripts ao front-end do seu site. Esses arquivos podem aumentar rapidamente!

Felizmente, o WordPress usa um filtro combinado para registrar todos os scripts front-end. Isso significa que você tem a oportunidade de identificar e manipular qualquer arquivo JavaScript ou CSS recebido, mesmo que não saiba exatamente o que procurar. Obviamente, isso é muito mais fácil de realizar com um plug-in do que começar do zero.

Plugins para reduzir JavaScript e CSS de bloqueio de renderização

Existem alguns plug-ins do WordPress que podem ajudá-lo a otimizar seu site removendo JavaScript e CSS de bloqueio de renderização. Nesta seção, veremos quatro escolhas populares.

1. Foguete WP

O WP Rocket ajuda na otimização do site por meio de tarefas como minificação de CSS e JavaScript, carregamento lento de imagens, adiamento de solicitações remotas de JavaScript e muito mais. É o 'canivete suíço' dos plugins de otimização.

Um dos maiores benefícios de usar este plug-in é o processo de configuração fácil. No entanto, uma desvantagem potencial é a interface do usuário. O plug-in cria uma experiência diferente em seu painel do WordPress do que você pode estar acostumado. Alguns usuários antigos podem não gostar dessa mudança de interface. Ainda assim, a funcionalidade real do plug-in permanece excelente.

Existem alguns extras gratuitos que você pode obter para o WP Rocket no diretório de plugins do WordPress. No entanto, o próprio plug-in básico custa US $ 49 por ano para um site e um ano de suporte, com níveis adicionais oferecendo mais opções.

2. Otimize automaticamente

O Autoptimize foi desenvolvido especificamente para resolver problemas levantados por ferramentas de recomendação como o PageSpeed ​​Insights. Todas as configurações que permitem configurar o plug-in para o seu site estarão contidas em um novo menu no painel do WordPress.

O Autoptimize abrange todas as tarefas básicas de otimização, como minificar e armazenar scripts em cache. Um recurso exclusivo é que ele também pode otimizar e converter imagens no formato WebP. Esta ferramenta tem excelentes análises gerais, embora você deva ter em mente que pode ser um pouco complexo de configurar.

Embora o plug-in em si seja gratuito, você pode comprar um dos dois pacotes dos desenvolvedores para ajudar na configuração. Existe um plano de configuração personalizado com preço de cerca de $ 165 (€ 149). Você também pode obter uma revisão profissional totalmente prática do seu site e configuração de plug-in especializada por cerca de $ 667 (€ 599).

3. Otimização de JCH

O JCH Optimize também oferece algumas ferramentas exclusivas para ajudar a melhorar o tempo de carregamento da página. Por exemplo, pode reduzir o número de solicitações HTTP necessárias para carregar suas páginas e também diminuir o tamanho dessas páginas. Isso resulta em uma carga de servidor reduzida e requisitos de largura de banda menores.

Outro recurso exclusivo do JCH Optimize é o Sprite Generator. Isso combina imagens de plano de fundo em 'sprites', portanto, são necessárias menos solicitações HTTP para carregá-las em um navegador. Uma das desvantagens deste plugin pode ser a curva de aprendizado íngreme, no entanto. A maioria dos usuários precisará confiar na documentação de suporte para garantir que configurou o plug-in corretamente, a fim de evitar erros.

Com isso dito, o plugin tem muitas avaliações cinco estrelas e mais de 10.000 instalações ativas. Em termos de preço, existe uma versão gratuita do plugin disponível. No entanto, se você deseja acessar suporte e recursos avançados, como a API Optimize Image, precisará adquirir uma assinatura. Estes começam em $ 29 por seis meses de suporte e acesso à API.

4. Pacote de reforço de velocidade

O Speed ​​Booster Pack oferece otimização de CSS e JavaScript, carregamento lento e um recurso de remoção de desordem. Os desenvolvedores do Optimocha mantêm o plug-in atualizado com uma base de código em constante evolução, para que você saiba que sempre usará os métodos mais recentes. Há também um recurso integrado de otimização do WooCommerce que funciona para resolver gargalos.

Um dos benefícios de usar o Speed ​​Booster Pack é que ele possui um recurso de integração de Content Delivery Network (CDN). Isso facilita o uso do CDN de sua escolha no WordPress, além de otimizar com o plug-in. A desvantagem deste plug-in está no processo de tentativa e erro que você pode precisar seguir para configurá-lo corretamente.

Também é importante notar que existe uma opção de serviço para acompanhar o plug-in gratuito. Assim como o Autoptimize, os desenvolvedores oferecem várias opções para fornecer uma abordagem prática e profissional para configurar o plug-in para se adequar ao seu site exclusivo.

Melhore a velocidade do seu site com o WP Engine

Seja qual for a sua abordagem para melhorar a velocidade do seu site, estamos aqui para ajudar. Temos uma ferramenta de velocidade para testar seu site e os melhores recursos de desenvolvedor para ajudá-lo em seu caminho para uma experiência otimizada.
Na verdade, nossa plataforma de experiência digital (DXP) é um ótimo lugar para começar a criar um site WordPress melhor. Confira nossos planos de preços hoje!