Como Acelerar ao Máximo Seu Site em WordPress: O Guia Definitivo

Recentemente o Google anunciou que a velocidade de carregamento das páginas de um site terão também seu peso na posição do ranking que o mesmo ocupa nas buscas (link, em inglês).

Por enquanto apenas sites em inglês estão sendo afetados, mas a tendência é que o critério se espalhe para toda a Internet.

Um tempo atrás eu já publiquei um pequeno guia de otimização (link), hoje eu vou mais fundo, entrando em detalhes bem mais técnicos, mas nem por isso muito difíceis de aplicar.

1. Analisando Seu Site

Para analisar o desempenho do seu site, vamos utilizar um complemento para Firefox chamado Pagespeed, que funciona em conjunto com o Firebug.

Download Firebug.

Download Pagespeed.

Instale os dois complementos (o Pagespeed funciona apenas em conjunto com Firebug) e reinicie o Firefox. Você verá o símbolo de um inseto no lado direito da barra de ferramentas inferior.

Abra seu site, aguarde o completo carregamento da página e clique no ícone. Clique em “Analyse Performance” e você verá uma página de resultados como a mostrada abaixo.

O índice de 0 a 100 exibido no início indica o quanto sua página é bem otimizada para rapidez. O objetivo é chegar o mais próximo possível de 100. Já vou avisando que esse valor é praticamente impossível. O resultado 89 acima é da página inicial do próprio Google.

Via de regra, se seu site estiver acima de 85 nem vale muito a pena mexer, já que dificilmente você irá conseguir algo muito melhor do que isso.

2. Trabalhando Com os Resultados

Os resultados marcados com um ponto de exclamação dentro de um círculo vermelho são aqueles considerados críticos; o triângulo amarelo representa pontos intermediários; verde representa o que está OK.

O sinal de + permite ver sugestões para resolver o problema ou melhorar o que já está bom.

3. Atacando o Problema

Certamente o seu site terá muitos problemas a ser resolvidos, e atacar um por um pode ser uma tarefa demorada e improdutiva.

Há um plugin, no entanto, que ajuda a colocar boa parte da casa em ordem.

O W3 Total Cache, além de cachear seu site com eficiência, tem uma gama enorme de configurações que permitem ajustar quase que cada detalhe de seu site.

Eu já havia testado a versão anterior do plugin, que deixava muito a desejar, principalmente por comer uma infinidade de recursos do servidor.

A versão que iremos utilizar é a que está em desenvolvimento (link para download), se o link direto não funcionar, clique nesse link e baixe a “Development Version” no final da página.

Instale o plugin e desabilite qualquer sistema de cachê que você utiliza antes de ativá-lo. Se seu site é movimentado é melhor fazer isso em horários de menor tráfego, como a madrugada.

Após ativar o plugin, vá até a página de configurações. Não se assuste com a quantidade de abas e opções, muitas delas serão utilizadas no estado padrão.

Na aba inicial você irá usar as configurações mostradas na figura acima (clique na imagem para ampliar), o item CDN nós iremos ver mais adiante se se aplica ao seu caso.

Mesmo que seu servidor tenha outras opções de cachê, eu observei que a mais eficiente á a que utiliza o disco, principalmente em momentos de maior tráfego.

As outras abas já vêm pré-configuradas, você só precisará alterar o tempo de validade do cachê. 86400 segundos (24 horas) é um bom valor.

Você deve prestar uma atenção especial à aba “Browser Cache”.

Esta aba trata dos chamados “server headers”. Server headers são informações que seu site envia ao navegador do visitante, como por exemplo quanto tempo as imagens devem ser armazenadas no cachê (do navegador).

Dessa forma, quando o visitante voltar a sua página as imagens não serão enviadas novamente via servidor, sendo utilizadas as que estão armazenadas, reduzindo o tempo de carregamento das páginas.

86400 segundos também é um bom valor, com exceção das imagens. Dificilmente as imagens irão mudar com o tempo, então um valor alto (no mínimo uma semana, ou 604800 segundos) é o ideal. Eu radicalizei e coloquei logo um ano (31536000 segundos).

Esse valor mais alto deve ser utilizado na última caixa de opções, “Media & Other Files”.

Se seu tema utiliza o script “Timthumb” para gerar imagens, é necessário mais um passo. Vá até a página do script e procure por “Cache-Control: max-age”. Você irá encontrar um valor em torno de 9999, equivalente a algo como 2 horas e 40 minutos. Altere para 9999999999, equivalente a algo em torno de 100 dias.

Para localizar mais facilmente essa linha de código, digite CTRL+F5, cole Cache-Control: max-age na janela que se abrirá e clique em OK.

Utilizar ou Não um CDN?

Cdn é a abreviatura de “Content Delivery Network”. A rigor, é um site com servidores espalhados pelo mundo que entregam seus arquivos de mídia, imagens geralmente, do ponto mais próximo possível em relação ao visitante.

Isso faz com que suas páginas carreguem muito mais rápido, não apenas pela questão dos servidores, mas por causa de outro ponto importante que veremos logo em seguida.

Um serviço de CND custa caro e, se você usa muitas imagens e tem uma visitação alta, custa muito caro.

Porém, é possível montar um CDN “caseiro” e tirar vantagem de algumas características do serviço que fazem a diferença.

Quando seu site é aberto em um navegador, ele baixa sua página para poder exibi-la. A maneira com que os navegadores baixam as páginas segue algumas regras.

Só são baixados 2 arquivos de cada vez por domínio, ou seja, se seu site usa a url exemplo.com e todos os seus arquivos são armazenados debaixo dessa url, uma página com muitos arquivos vai demorar bem mais para ser exibida completamente do que se você utilizasse, digamos, 3 domínios.

A matemática é simples: 1 domínio = 2 arquivos de cada vez, 2 domínios = 4 arquivos de cada vez, 3 domínios = 6 arquivos de cada vez, 4 domínios = muitas conexões de DNS.

Exatamente, o navegador precisa requisitar o DNS de cada domínio utilizado. Mais do que 3 cria um problema: você ganha em velocidade de download e perde no tempo gasto realizando as conexões.

Segundo o próprio Google, um CDN, caseiro ou não, só vale a pena se você exibe mais do que 5 imagens na maioria de suas páginas (link, em inglês). O termo técnico é “arquivo estático” e refere-se também a arquivos em javascript ou css.

Utilizando um CDN

Caso você tenha dinheiro sobrando para contratar um CDN, eles lhe darão todas as instruções necessárias; aqui nós iremos ver como estabelecer um CDN “caseiro”, utilizando o próprio plugin W3 Total Cache.

Antes de mais nada, vale lembrar que um subdomínio é considerado como um domínio diferente pelo navegador, logo não é necessário sair registrando domínios em massa.

No entanto, não adianta servir as imagens de outro domínio ou subdomínio, se o mesmo envia cookies para o navegador do visitante. Cada cookie é uma informação a mais a ser baixada, e não é uma informação necessária para arquivos que não mudam. Novamente você ganha por um lado e perde pelo outro.

O problema com os cookies é que eles são estabelecidos em nível de domínio superior, e o WordPress envia cookies sempre. Isso quer dizer que se você tem seu site em exemplo.com, qualquer diretório ou subdomínio irá estabelecer cookies, e não há muito que se possa fazer quanto a isso.

Há alguns tutoriais, como esse, que ensinam a criar um subdomínio de seu site livre de cookies, mas eu não consegui fazer funcionar de forma alguma; tente se quiser e tiver tempo sobrando para o festival de tentativas e erros.

Com menos de 10 dólares você registra um domínio .com, que pode ser utilizado como CDN para todos os seus sites, através de subdomínios.

Como você não vai instalar nada no domínio e apenas utilizá-lo para armazenar imagens, ele nunca irá gerar cookies.

Se você tem um domínio parado, também é possível utilizá-lo, basta remover os arquivos que porventura estejam armazenados.

Utilizando Subdomínios

Supondo que você irá utilizar o domínio novo para armazenar as imagens de seu site principal, vamos criar um subdomínio tal como img.seudominio.com.

Armazene todas as imagens utilizadas por seu tema nesse subdomínio e altere os caminhos para as imagens no css e onde mais for necessário.

Configurando o CDN

Na página “General” do W3 Total Cache, marque a opção CDN e escolha a opção “Self-hosted / File Transfer Protocol Upload”.

Vá até a aba “Content Delivery Network” e configure tudo conforme a figura abaixo (clique para ampliar).

Os dados de conexão via FTP são os dados do domínio que você vai utilizar para hospedar os arquivos, “Replace site’s hostname with” é o domínio que será usado em seus artigos para chamar as imagens, substituindo o caminho atual.

Clique em “Test FTP server”, se aparecer “Test passed” é só começar a subir os arquivos.

Agora é só clicar nos botões, um a um, para subir os diversos arquivos ao novo domínio. Se você tem muitas imagens, o processo será mais demorado e provavelmente vários erros acontecerão.

A velocidade vai variar conforme seu servidor. Aqui, em um site com aproximadamente 8000 imagens, demorou algo em torno de 15 minutos. Isso na tentativa que funcionou, que deve ter sido a sexta (não esqueça que é uma versão de desenvolvimento do plugin).

Caso algo dê errado e você não consiga consertar de jeito algum, é só desabilitar o plugin que tudo retorna ao normal, nada é feito de forma a afetar a base de dados.

Quando você sobe imagens para um artigo, elas vão para o caminho tradicional e uma cópia vai para o domínio novo, então é possível reverter tudo a qualquer momento.

Agora é testar novamente seu site com o Pagespeed e ver a mudança. Qualquer dúvida, consulte esse link.