Como acelerar seu site WordPress para SEO

Quanto tempo você suporta esperar para carregar uma página de internet no seu smartphone? A velocidade de carregamento de um site é um fator essencial na experiência do usuário, ainda mais em um mundo onde boa parte do tráfego já acontece nos dispositivos móveis.

De nada adianta ter design e conteúdos bem planejados se o visitante tiver que esperar alguns segundos a mais para acessar o seu site. E, principalmente, se seu objetivo for vender algum produto ou serviço, sua estratégia poderá sofrer impactos negativos.

Um site rápido, além de aumentar a taxa de retenção, também ajuda no SEO (a famosa otimização para motores de busca): a velocidade de um site, principalmente em dispositivos móveis, é um dos fatores levados em conta para um melhor posicionamento nas pesquisas do Google.

O próprio Google disponibiliza uma ferramenta para auxiliar desenvolvedores a reduzir o tempo de carregamento de páginas Web. O PageSpeed Insights analisa o conteúdo da página e retorna uma pontuação que vai de 0 a 100. Quanto maior a pontuação, mais rápido é o seu site.

Veja algumas dicas de como você pode melhorar o seu site WordPress para deixá-lo mais rápido. Todas elas foram adotadas aqui neste blog, que tem uma pontuação média acima de 90 – considerada excelente no PageSpeed Insights.

Otimize o código do seu site

Além de um código bem escrito e dentro das normas, alguns cuidados podem ajudar a um melhor ranking de velocidade. Por exemplo, se você usa o Bootstrap, use apenas a parte do framework necessária para o seu site. Carregar a imagem com o tamanho a ser exibido na tela e eliminar excessos de códigos também são boas práticas.

Alguns plugins do WordPress otimizam HTML, CSS e JavaScript comprimindo os arquivos, tirando espaços de indentação de código, deixando-os menores e mais rápidos para serem baixados. Além disso, aplicam o carregamento assíncrono de JavaScript, e o adiamento da carga de imagens e CSS. Um deles é o Autoptimize.

Outra dica é ativar o cache pelo servidor de sua hospedagem, evitando que arquivos estáticos – folhas de estilos e imagens, por exemplo – sejam recarregados toda vez que alguém entra na página. Além da página carregar mais rápido, isso vai te poupar recursos de hospedagem. Isso pode ser feito facilmente pela edição do arquivo .htaccess na raiz da instalação do WordPress.

# BEGIN EXPIRES
<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType image/svg+xml "access 1 month"
    ExpiresByType image/svg+xml "access plus 1 month"
    ExpiresByType text/css "access plus 1 week"
    ExpiresByType text/plain "access plus 1 month"
    ExpiresByType image/gif "access plus 1 month"
    ExpiresByType image/png "access plus 1 month"
    ExpiresByType image/jpeg "access plus 1 month"
    ExpiresByType application/x-javascript "access plus 1 month"
    ExpiresByType application/javascript "access plus 1 month"
    ExpiresByType application/x-icon "access plus 1 year"
</IfModule>
# END EXPIRES

No código acima, imagens e arquivos JavaScript estarão em cache por um mês, CSS durante uma semana, e o ícone do site por um ano.

Deixe o Google cuidar do jQuery

Alguns dos recursos nativos e adicionais do WordPress necessitam consultar a biblioteca do jQuery, que já vem com a plataforma. Entretanto, carregar diretamente da instalação traz uma performance pior do que se for baixada dos servidores do Google.

Usar a CDN do Google, além da agilidade de um arquivo otimizado, também permite usar uma versão mais atualizada e segura do jQuery do que provavelmente está armazenada no seu WordPress. No momento deste post, o WordPress utiliza a versão 1.12.4 da biblioteca, enquanto o Google disponibiliza a versão 3.5.1.

Para carregar o jQuery pelos servidores do Google, utilize este código no seu arquivo functions.php:

// REPLACE JQUERY FILE
function my_jquery_enqueue() {
   // Unload JQuery from WordPress installation
   wp_deregister_script('jquery');

   // Load JQuery from Google CDN
   wp_register_script('jquery',
      "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js",
      false,
      null);
   wp_enqueue_script('jquery');
}
if (!is_admin()) add_action("wp_enqueue_scripts", "my_jquery_enqueue", 11);

Reavalie os plugins instalados

Quanto mais plugins você usa em sua instalação do WordPress, maior será o processamento do código pelo servidor. Além disso, a página que será mostrada ao usuário provavelmente terá mais arquivos CSS e JavaScript e, claro, demorará mais para carregar.

Vá até a seção de plugins e veja se todos aqueles que estão instalados são necessários para o objetivo do seu site. Alguns deles podem ter sido descontinuados – o que pode gerar até brechas de segurança descritas na ferramenta Diagnóstico. Outros podem ter sido apenas usados para teste ou para uma determinada ocasião, e após isso estão inutilizados ou inativos.

Por exemplo, no desenvolvimento deste site, usei um plugin que checava se o tema que estava desenvolvendo estava dentro dos padrões do WordPress e outro que cuidava de gerenciar possíveis traduções de elementos do tema. Assim que o blog entrou no ar, foram removidos pois já cumpriram a sua função e eram desnecessários.

Dequeue: Crie regras e carregue só o necessário para cada ocasião

Esta etapa precisa de um pouco mais de pesquisa e de paciência. Primeiro você precisa analisar em que momentos você precisa de um determinado recurso nativo ou de plugin.

A partir daí, você pode decidir por eliminar recursos a serem carregados em determinadas áreas do site para deixar a página mais rápida através de condicionais. Uma página de contato dificilmente necessitará dos estilos e scripts de um plugin de uma galeria de fotos, por exemplo.

O que exigirá mais trabalho será procurar como cada plugin anexa seus estilos e scripts no seu site. Isso pode ser feito vasculhando o editor de plugins, tomando cuidado para não alterar nada, ou recorrendo a pesquisa em fóruns e comunidades (Alô, StackOverflow?).

Sabendo das regras e de como cada recurso é anexado, é só criar funções que removem os scripts e estilos da fila de carregamento (wp_dequeue_script e wp_dequeue_style), e chamar a função em add_action( 'wp_enqueue_scripts', 'nome_da_funcao' ).

No exemplo abaixo, o JavaScript necessário para que certos recursos da seção de comentários funcione só será carregado se o conteúdo for uma página ou post único, com comentários habilitados e opção de respostas a outros comentários.

function evolution_scripts() {
	if ( is_singular() 
             && comments_open()
             && get_option( 'thread_comments' ) ) {
		wp_enqueue_script( 'comment-reply' );
	}
}
add_action( 'wp_enqueue_scripts', 'evolution_scripts' );

Já neste outro exemplo utilizado neste blog, os estilos CSS e o JavaScript do plugin Flickr Justified Gallery não serão inseridos no HTML para serem baixados se a página ou post não for registrada, obviamente, como uma galeria de fotos.

function evolution_dequeue_justifiedGallery() {
   if( get_post_format() != "gallery" ){
      wp_enqueue_script('jquery');
      wp_dequeue_style('justifiedGallery');
      wp_dequeue_style('flickrJustifiedGalleryWPPlugin');
      if (fjgwpp_getOption('provideColorbox')) wp_dequeue_style('colorbox');
      if (fjgwpp_getOption('provideSwipebox')) wp_dequeue_style('swipebox');
      if (fjgwpp_getOption('provideColorbox')) wp_dequeue_script('colorbox');
      if (fjgwpp_getOption('provideSwipebox')) wp_dequeue_script('swipebox');
      wp_dequeue_script('justifiedGallery');
      wp_dequeue_script('flickrJustifiedGalleryWPPlugin');
   }
}
add_action( 'wp_enqueue_scripts', 'evolution_dequeue_justifiedGallery', 999);

Claro que o desempenho também depende de outros fatores, como o servidor em que seu WordPress está hospedado. Entretanto, esses recursos fizeram com que este site subisse mais de 10 pontos no Google PageSpeed Insights em várias ocasiões, tanto no mobile quanto no desktop.