Um site rápido é cada vez mais uma preocupação para as marcas. Não só se traduz numa melhor experiência para o utilizador, como é um fator importante de SEO, reconhecido pela Google (tanto em desktop como em mobile).
É especialmente importante para utilizadores que visitam o teu site através de dispositivos móveis, visto que muitos têm um limite de consumos imposto pelo seu tarifário. Quanto menos pesada for a tua página, melhor para eles – e também melhor para ti, se o teu alojamento te cobrar pelo tráfego transferido mensalmente.
Neste artigo, vou partilhar contigo os meus “truques” para aumentar a velocidade do teu site. Muitas destas dicas aplicam-se a qualquer tipo de site, mas neste caso vou falar especificamente do WordPress, visto ser a plataforma que habitualmente utilizo nos meus projetos e aquela com maior quota de mercado na web.
Vou tentar não entrar em alterações muito complexas e estruturais, como por exemplo alterar o template do site ou abdicar de plugins menos necessários. No entanto, para este tipo de alterações, sugiro sempre que faças antes um backup e, se possível, que contes com o apoio técnico de um web developer.
Como sei se o meu site é rápido ou não?
Antes de começarmos com as otimizações propriamente ditas, devemos primeiro avaliar a situação atual.
Existem inúmeras ferramentas gratuitas que nos oferecem um diagnóstico completo. Estas são algumas das mais populares:
Cada uma te dará uma nota um pouco diferente, mas todas são úteis para ficarmos com o correto ponto da situação.
A ferramenta da Google é altamente recomendada, porque a nota que te é atribuída lá será muito provavelmente a nota (ou muito próxima) que o algoritmo do motor de busca tem também em consideração. Sendo assim, deves procurar obter uma boa métrica no PageSpeed tanto em desktop como em mobile.
Verás que nas páginas de resultados surgem uma série de recomendações para melhorar a nota obtida. Muitas dessas otimizações são bastante técnicas, mas neste artigo perceberás que não é complicado implementar alguns desses ajustes.
Comecemos então pelo principal responsável do peso de uma página… as imagens.
Imagens
O HTTP Archive informa que as imagens são responsáveis por cerca de 66% do peso de cada página.
Remover imagens talvez esteja fora de questão para ti, mas assim sendo, deves certificar-te que as imagens estão otimizadas e ocupam o mínimo de espaço possível.
Primeiro, verifica se a imagem tem a dimensão certa para o espaço onde vai ser inserida. Não vale a pena carregares uma imagem de 2000 x 2000px, se o espaço onde ela aparece é de 300 x 300px.
JPG, PNG e… WebP
Depois, deves garantir que o formato é o mais adequado para o utilizador. Se tiver muitas cores, JPGs por volta dos 75% de qualidade serão mais leves que PNG (assumindo que não precisas da transparência).
Tanto o Chrome como o Firefox suportam um formato desenvolvido pela Google chamado WebP – um formato de imagem que não deves subestimar, porque a maior parte dos ficheiros beneficiará de uma redução de 50% ou mais.
Podes utilizar um plugin como o WebP Express para converter as imagens da tua galeria do WordPress e apresentar automaticamente as imagens nesse formato, se o utilizador estiver a utilizar um browser compatível.
Ferramentas de compressão de imagens
Para terminar, certifica-te que cada imagem que carregas para a plataforma está já comprimida. Podes usar o ImageOptim (grátis para Mac) ou o FileOptimizer para Windows para reduzir o tamanho das imagens, ou instalar um plugin como o reSmuth.it que te otimizará toda a galeria de imagens do WordPress, a custo zero (se as imagens tiverem menos de 5 MB cada).
Resolvida a questão das imagens, vamos para pormenores um pouco mais técnicos.
CDN
Se tiveres visitantes espalhados pelo mundo, talvez também seja boa ideia recorreres a uma CDN – a sua função é servir os conteúdos através de vários pontos do globo, fazendo com que a informação chegue mais depressa ao utilizador.
Tudo pode ser servido através de uma CDN – tanto código CSS/JavaScript como ficheiros multimédia. Existem muitas CDNs disponíveis, mas eu recomendaria começares por avaliar a Amazon CloudFront ou a Cloudinary.
Esta última é um serviço especificamente dedicado a imagens e vídeos, que tem um plano gratuito bastante generoso e um plugin para WordPress.
Base de Dados e Caching
Um CMS como o WordPress difere de um site estático porque cria a página sempre que a mesma é pedida, recorrendo à base de dados para tal.
Isto significa que para apresentar a página que os utilizadores visualizam, o WordPress terá sempre que ir à base de dados perguntar quem foi o autor do artigo, qual o título, a data de publicação, os comentários… cada pedido atrasa um pouco mais o tempo de carregamento da página e sobrecarrega o teu servidor. Em sites mais complexos, como lojas online, podemos estar a olhar para muitas dezenas (ou até centenas) de pedidos a cada carregamento.
Como a maior parte destes conteúdos não vai sofrer alterações uma vez publicados, podes recorrer a um plugin de caching para poupar visitas à base de dados – o W3 Total Cache é a solução mais popular para WordPress, apesar de pessoalmente preferir o WP Super Cache (uma solução mais simples, mas que serve bem para 90% dos casos).
Poderás ter que realizar vários testes até tirar o maior partido do plugin, pelo que recomendo que cries outra instalação do teu site para testares os ajustes à vontade. Em contra-partida podes utilizar o WP Rocket, que é um pouco mais intuitivo, mas é pago.
Falando ainda em Base de Dados, podes libertar algum espaço na tua instalação WordPress se apagares todo o “lixo” que se vai acumulando por lá. Aqui, estou a falar dos vários rascunhos de cada artigo, comentários que são spam e outro tipo de informação que já não é necessária.
Podes instalar o WP-Optimize para solucionar esta questão com um par de cliques. Já libertei vários MBs da minha base de dados recorrendo a este plugin.
O excesso de plugins instalados e ativos é também responsável pela lentidão de sites WordPress. Pessoalmente, prefiro sempre depender o mínimo possível de plugins, optando, por exemplo, por inserir o código necessário no ficheiro functions.php sempre que possível ou criando código de raíz para funções muito específicas.
Podes utilizar o Query Monitor para observar que plugins estão a realizar demasiadas chamadas à base de dados e procurar uma alternativa mais eficiente.
Otimizações avançadas
Algumas destas otimizações dependerão do controlo que tens sobre o teu alojamento.
Versão do PHP e tipo de Disco Rígido
Comecemos pela versão do PHP: o PHP deu um salto significativo em performance na versão 7, mas muitos alojamentos ainda só oferecem uma versão do PHP 5. Se ainda for esse o teu caso, eu aconselharia-te a mudares de fornecedor de hosting.
Alguns serviços de alojamento fazem a atualização da versão PHP sem informar, e outros permitem que definas qual a versão que queres usar. Se o teu alojamento permitir esta última opção, recomendo que testes primeiro: alguns temas e plugins antigos poderão ainda não estar preparados para PHP7.
A maior parte dos bons serviços de alojamento já oferece discos rígidos SSD. De qualquer modo, confirma, pois estes discos têm uma performance consideravelmente superior aos antigos HDD.
Compressão GZIP
De seguida, terás bons benefícios em garantir que o teu site tem a compressão GZIP ativa. Podes fazer o teste visitando este site.
Se não estiver, podes activá-la recorrendo a um plugin de caching como os 2 que referi acima, ou adicionar o seguinte código no ficheiro .htaccess (recomendo que faças primeiro um backup do mesmo):
<IfModule mod_deflate.c>
# Compress HTML, CSS, JavaScript, Text, XML and fonts
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
# Remove browser bugs (only needed for really old browsers)
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent
</IfModule>Minificação do código
Por fim, deves minificar o teu código (HTML, CSS e JavaScript). Este processo procura remover tudo o que é desnecessário em cada ficheiro, como espaços em branco ou comentários, alterando também o nome de variáveis por nomes mais curtos e colocando tudo numa só linha, com o objectivo de diminuir ao máximo o tamanho dos ficheiros.
Esta é outra otimização que facilmente te pode “partir” o site, pelo que deves realizar alguns testes primeiro. O já referido W3 Total Cache tem esta capacidade, mas também podes recorrer a uma solução como o Fast Velocity Minify, que é dedicada apenas a isto.
Realizadas todas estas alterações, sugiro que corras os testes outra vez – certamente a tua nota será bem mais alta desta vez. Podes sempre olhar para as sugestões fornecidas para resolver mais alguns problemas, mas acredito que já terás um site bem mais rápido agora!
Também tens alguns “truques” básicos relacionados com velocidade de sites WordPress? Partilha comigo nos comentários!
Comentários estão fechados.