Como melhorar a performance do teu site WordPress

Pedro FonsecaPerformance, WordPress

Disse o Freitas em tempos:

“Sites mais rápidos fazem os utilizadores felizes e vimos, nos nossos testes internos, que quando um site responde de forma lenta, os visitantes gastam menos tempo nele”.

Análise da Performance

Estou certo que conheces a frase “Aqui funciona bem e até está rápido”. Provavelmente já a disseste a alguém que visita o teu site, acrescentando: “Deve ser da tua net”.

Talvez seja mas olha que frequentemente não é. O que se passa é que como visitas muito o teu site, o teu browser guarda cópias do site na tua máquina e, por isso, experimentas uma navegação mais fluída, enquanto quem visita o teu site pela primeira vez experimenta a versão lenta.

Por isso vamos começar por testar a velocidade do teu site com algumas ferramentas de análise de performance:

E agora? Cada um destes sites forneceu uma avaliação, algumas informações e sugestões de melhoria, mas o que significam todos estes dados???

  • Performance Score – Índice de avaliação global que varia entre 1 e 100%, Sendo que quanto mais elevado, melhor;
  • Fully Loaded Time – Quanto tempo demora a carregar a página na totalidade. Por norma são testados os acessos a partir de várias localizações no planeta, pelo que é normal existirem variações, sendo que a regra é: “Quanto mais rápido, melhor” (alguns estudos apontam para uma perda aproximada de visitantes a rondar os 25% para sites que demoram mais de 4 segundos a carregar na totalidade);
  • Time To First Byte – Quanto tempo demora um site a ‘entregar’ o primeiro byte, ou seja, permite avaliar a rapidez de resposta do servidor onde o site está alojado, e uma vez mais, “Quanto mais rápido, melhor”;
  • Total Page Size – Tamanho da página HTML renderizada, incluindo imagens e fontes;
  • Requests – Total de pedidos de recursos externos à página;
  • Faster than… – Por vezes temos um indicação do percentil em que se encontra o nosso site, mediante o ‘resto da internet’

Agora tens uma percepção do estado atual do teu site, mas a dúvida é:

Porque é que o meu site está lento?

Não existe apenas uma causa, na realidade existem tantas causas que parece que o universo contribui para aumentar a lentidão de um site: desde o alojamento, o (mau) código de temas e/ou plugins, a (não) otimização das imagens utilizadas no site, etc.

Não precisas de ser um especialista em todas as áreas referidas, mas qualquer coisa que faças irá melhorar a performance do site, e dessa forma a experiência de utilização do teu visitante, ou seja, a felicidade dele (segundo o Freitas).

E se o Freitas diz que os utilizadores estão mais felizes, vai daí e a Google melhora o ranking do teu site. A sério!!!

O alojamento e a sua configuração

Comecemos pelo básico, a ‘máquina’ onde está o teu site.

Se segues alguma comunidade WordPress ou fóruns de suporte, saberás que uma das perguntas mais frequentes é: “Qual o melhor alojamento para o meu site?” que acaba sempre com a sugestão de 1001 fornecedores de serviços e mensagens de apoio ou queixas de todos eles.

Também nós temos as nossas preferências, e gostamos de trabalhar com alguns fornecedores: Siteground e Cloudways.

Estes links são de afiliados e recebemos uma pequena comissão se os utilizares, mas não partilharíamos o link se não os recomendássemos

Se optares por um serviço de alojamento partilhado (recomendado para projetos mais pequenos, ou numa fase inicial de projetos médios), convém conhecer a tua vizinhança, ou seja, quais os outros sites que partilham o mesmo servidor. Para conheceres a vizinhança podes Googlar por ‘Domain Neighbours’, ou então aceder ao site IPTools e pesquisar o teu domínio.

Quem mora num condomínio sabe que quantos mais condóminos, maior a confusão e a possibilidade de termos um vizinho incómodo. No teu alojamento passa-se o mesmo. Há fornecedores de alojamento que optam por alojar demasiados sites para a capacidade do servidor, por forma a vender um serviço mais barato. Nestes casos garanto-te que cedo dirás:

o barato sai mesmo caro.

Se vires que estás num mau condomínio ou com demasiados condóminos, pede ao fornecedor de alojamento para te levar para um condomínio mais tranquilo (atenção que pode implicar um upgrade ao plano que tens). Também convém conhecer as caraterísticas do servidor, porque quanto mais rápido e robusto for o servidor, mais potência ele pode entregar ao teu site e melhor preparado está para as necessidades que o teu site venha a ter.

Por fim, aborda o alojamento e questiona-os; tenta saber se estão confortáveis com a plataforma WordPress, e qual a participação que irão ter na gestão do teu site. Por exemplo, alguns fornecedores disponibilizam ferramentas que permitem efetuar upgrades e downgrades automáticos para fazer face à carga necessária do teu site.

Nestes casos, o alojamento adapta-se às necessidades do teu site, conseguindo reduzir o tempo de carga da página, tendo por vezes ações preventivas para garantir o melhor desempenho do site.

É aqui que deves estar atento ao Time-to-First-Byte (TTFB), uma vez que este parâmetro resulta da combinação da qualidade do código, da carga do servidor, da largura de banda do servidor, da velocidade de acesso, sendo que um fornecedor atento, deve querer (e fazer tudo para) reduzir este parâmetro, uma vez que um ‘vizinho incómodo’ pode afetar este parâmetro aos restantes sites do condomínio.

Os ficheiros, sim todos os ficheiros

A tua instalação é composta por muitos ficheiros e não importa se estamos a falar de PHP, CSS, Javascript, PDF ou imagens, seja qual for o ficheiro que estás a usar, a partir do momento que está carregado no teu site, ele é ‘carga’, e toda a carga tem um peso.

Neste caso falamos de tamanho dos ficheiros. Quanto maior for o ficheiro, mais tempo demorará a fazer o download. Por isso é usada a medida de bits por segundo (ou Mbps – Megabits por segundo) quando falamos de transferências.

Lembra-te disto sempre que fizeres um upload: “Pode demorar a carregar, mas depois todos terão de o descarregar”.

A base de dados

A informação do teu site está armazenada na base de dados. Por vezes acumulas informação que muitas vezes já não necessitas. Por exemplo, se em tempo tiveste uma loja online de produtos digitais com o Easy Digital Downloads e depois decides que vais mudar para o WooCommerce para incluir produtos físicos, deves lembrar que toda a informação da loja antiga continua armazenada na base de dados, mesmo que atualmente não esteja ativa.

Se nada fizermos, a base de dados vai crescendo e com informação ‘desfragmentada’, o que atrasa significativamente todas as pesquisas efetuadas.

Elementos externos

Muitos sites em WordPress incorporam elementos de outros sites, e estes elementos podem provocar atrasos na performance do teu site. Por exemplo, se vais ler informação de notícias a uma fonte externa ao teu site para as apresentares, caso a origem das notícias tarde em fornecer o feed, o teu site ficará à espera de o receber, e o teu visitante à espera do teu site.

Assim sendo, deves verificar se todas as fontes externas de conteúdos te conseguem responder dentro dos valores aceitáveis

Como otimizar o site sem ser programador

Ou melhor, podes até ser programador, mas o que te proponho são algumas ações em que não necessitas de editar código para obter qualquer resultado… basta seguir as regras.

Instala um plugin de cache

Imagina que entras num restaurante com os teus amigos, e apercebes-te que o restaurante está cheio. Apesar de as mesas estarem apinhadas e as pessoas estarem a comer, há um detalhe que te chama a atenção, os empregados andam numa roda viva entre as mesas e a cozinha e muitas vezes sem levarem comida para as mesas, nem a levantarem pratos.

Aparentemente, andam de um lado para o outro sem fazer nada. Quando chegam à tua mesa, perguntas qual o prato especial do dia, e de repente o empregado vai perguntar à cozinha.

Depois de voltar à mesa e informar o prato, decides perguntar se servem meias doses e lá vai o empregado outra vez. A cada pergunta que fazes, o empregado vai consultar a informação à cozinha até que terminas o teu pedido. Chega a vez do resto do teu grupo, e alguém pergunta qual o prato especial do dia, e o empregado volta à cozinha.

Se ao menos ele conseguisse memorizar o prato do dia, pensas tu….

O mesmo se passa com as páginas no teu site. As páginas de uma instalação WordPress são ‘preparadas’ no momento em que alguém visita o teu site.Para preparar a página, o WordPress necessita recolher os ficheiros php e executar os comandos, em seguida vai procurar informação à base de dados e juntando tudo finaliza a página que será exibida ao teu visitante. Enquanto o WordPress ‘corre entre a mesa e a cozinha’ para fechar o teu pedido, perde tempo e isso faz com que o teu site demore a servir todos os pratos aos clientes que estão nas mesas, principalmente em horas de ponta, ou seja, quando tens mais pessoas a visitar o teu site num determinado período de tempo.

É aqui que entra o plugin de cache, ou seja, a capacidade de o WordPress memorizar a ementa e evitar algumas viagens entre a mesa e a cozinha.

Confuso? Na realidade é bastante simples, em vez de ser necessário passar por todo o processo de criação de uma página, de cada vez que alguém a visita, o plugin de cache guarda uma cópia da página pronta a ser exibida e, dessa forma, o proximo visitante será servido da cópia evitando o processo de criação.

Já experimentamos vários plugins de cache:

cada um com as suas vantagens, mas de momento estamos rendidos ao WP Rocket. Um dia destes explicaremos porquê.

Otimização de imagens

Uma imagem vale mais que mil palavras

Sim, num site uma imagem vale mais que mil palavras. Não pelo conteúdo da imagem, mas sim pelo tamanho do ficheiro. E quando falamos de tamanho de imagens deves ter em conta 3 fatores:

  • Dimensões
  • Formato
  • Compressão

Começando pelas dimensões, deves preparar a imagem para o tamanho definido no layout do teu tema. Por exemplo, as imagens de destaque do blog da Kaksi Media devem ter as dimensões 750x330px. Sabendo as dimensões das imagens, não adianta procurar uma imagem gigante e depois definir no WordPress para reduzir para as dimensões necessárias. Quanto maior as dimensões de uma imagem, maior o seu tamanho, e como falamos no tópico dos ficheiros, quanto maior o tamanho, mais tempo será necessário para efetuar o download da imagem.

Por vezes, pedem-nos uma forma rápida de memorizar os tamanhos das imagens para os sites. Eu gosto de usar o Canva, que permite fixar as dimensões pretendidas e associar um nome, por exemplo: Kaksi – Featured Image

Se vais passar a ter cuidado com as dimensões das imagens, segue-se o segundo passo: o formato da imagem.

Em tempos avisavam-se os palermas que ‘Formatos há muitos…”. Uma linda tradição que se perdeu…porque todos o sabemos, ou porque palermas há poucos. Já aqui falamos sobre as diferenças entre JPG e PNG, mas há mais formatos, meu….

Os ‘outros formatos’ que podes usar em casos específicos, como animações ou logos, são:

  • Os ‘velhinhos’ GIF caso necessites de usar animações
  • Os vectoriais SVG se quiseres garantir a coerência de imagens geométricas sem perda de qualidade, pode ser usado em logos ou icons (também permite fazer animações)

Para terminar o capítulo de otimização de imagens, e depois de abordarmos as dimensões e os formatos, devemos atentar na compressão.

Existem muitas formas de otimizar imagens, muitas delas dependentes do formato em questão, mas nos dois casos, resumem-se a técnicas Lossy ou Lossless, ou seja, ‘espremer’ o tamanho, com perda de qualidade ou sem perda de qualidade da imagem. Para mais detalhes nestas duas técnicas voltem ao artigo das diferenças entre JPG e PNG, que eu aguardo enquanto tomo um café 😉

via GIPHY

Já voltaram, muito bem, então agora falta fazer magia, e para tal devemos recorrer a uma de várias ferramentas disponíveis (sendo que temos uma perdição pelo TinyPNG):

Ferramentas online

Ferramentas desktop

Otimização de base de dados

Respira fundo e diz para ti próprio:”Eu sou capaz!!!”.

Acede ao cPanel da tua instalação e em seguida entra no phpMyAdmin. Começa por fazer uma cópia de segurança. Se tiveres mais que uma base de dados, escolhe aquele cujas tabelas pretendes otimizar.

Depois de seleccionar, irás visualizar as tabelas existentes na base de dados, onde poderás seleccionar quais as tabelas (ou seleccionar todas)

Agora no menu [Com os seleccionados:] escolhe Optimizar tabela. Esta operação irá executar a instrução OPTIMIZE TABLE SQL e poderá demorar um pouco, mas garanto que vale a pena a espera.

Et voilá, se não quiseres fazer mais nada, tudo o que leste até aqui basta para melhorar a performance do teu site, mas decerto que gostavas de saber se há mais ‘cenas’ que possas fazer?

Outras ‘cenas’ que também otimizam a performance

Mantém o WordPress atualizado

Esta vertente nem sequer é uma recomendação; é uma obrigação! Quem nos conhece sabe que defendemos com unhas e dentes as vantagens do WordPress, mas também sabemos reconhecer as ‘desvantagens’.

A maior ‘desvantagem’ prende-se com o facto de ser necessário atualizar frequentemente as instalações WordPress para resolver falhas de segurança ou bugs. Pelo menos, com as atualizações também dotamos o nosso site de novas funcionalidades, ou pelo menos funcionalidades melhoradas (sim, também em termos de performance).

Enquanto responsáveis pela manutenção dos sites dos nossos clientes mantemos as instalações atualizadas assim como os temas e plugins nas versões mais recentes, nem que para isso seja necessário visitar os sites várias vezes por semana.

Escolhe temas rápidos

Gostos não se discutem, e aquele tema que tu gostas tanto poderá não agradar aos visitantes do teu site e no entanto, a maior parte das vezes a escolha do tema é feita por questões estéticas do dono do site. Não é regra geral, mas há muitos temas com um aspeto e design apelativo, mas quando verificamos o código, está tudo muito mal programado e pouco preparado para ser rápido.

Uma coisa podemos assegurar, alguns dos teus visitantes podem ou não gostar do tema que escolheste para o teu site, mas de certeza que TODOS o vão detestar se o tema fizer com que o site fique lento.

Ou seja, pela Lei de Freitas, “Entre rápido ou bonito, opta pelo rápido”.

E como podes saber se um site é rápido ou não antes de o comprares? Na realidade é simples, porque não testas a velocidade da demo ou sites de portfolio?

Por exemplo, um dos temas mais vendidos atualmente é o Avada, tendo vendido +280.000 temas apenas em 2016. Sabias que a demonstração do Avada demora mais de 8 segundos a carregar??? 8 SEGUNDOS!!!

Há algum tempo que optamos de uma forma genérica por criar site com temas da StudioPress Themes, porque para além de elegantes não trazem sapatos de tacão 😉

E sim, também este link é de afiliado 😉

De vez em quando testa a performance sem ‘aquele’ plugin

Todos temos aquele ‘amigo’. Aquele tipo que é um porreiro, mas volta e meia deixa-nos ficar mal. Também todos os sites acabam por ter ‘aquele’ plugin. Aquele plugin que resolve uma situação pontual, uma necessidade que o cliente pediu (podia falar de plugins que mostram neve a cair no Natal, por exemplo) alguma coisa que queremos fazer rápido e instalamos o plugin para despachar (por exemplo, plugins para criar Child theme, ou para inserir o Google Analytics no Header do teu site).

Se achas que tens um ‘daqueles’ plugins, experimenta testar ocasionalmente a performance do site com o plugin desativado. Experimenta num ambiente de staging, ou pelo menos faz um backup antes de testar.

Se quiseres, também podes testar a performance dos teus plugins recorrendo a mais um plugin: P3 (Plugin Performance Profiler), mas pelo amor da Santa, depois de testares desinstala o plugin, ok?

Confessa lá, se as fotos das férias ficam melhor sem o ‘amigo’, como ficará o teu site sem o chato do plugin???

Utiliza os excertos em vez de texto completo

Muitos sites exibem os conteúdos na sua totalidade. Por uma questão de conforto de navegação, os sites optam por exibir o texto completo. No entanto se os textos forem extensos, e com várias imagens demorará muito mais a carregar a homepage, ou a página de categorias.

Por outro lado terás dificuldade em analisar métricas do site, porque não sabes que artigo os teus visitantes estão a ler, e também a contribuir para um total de Pageviews mais baixo, e a impossibilitar de sugerires artigos relacionados e dessa forma aumentar a permanência no site.

Lógico e simples, não é?

Sabes onde ativas esta opção? Em Opções -> Leitura -> “Para cada artigo num feed, mostrar” Resumo em vez de ‘o texto completo’

Define paginação nos comentários

Ninguém gosta de trolls, e por norma não recomendamos a disponibilização de comentários nos sites dos nossos clientes, mas…há sempre um mas.

Caso tenhas os comentários ativos no teu site, e os teus visitantes costumem comentar muito, podes/deves ativar a paginação dos comentários.

Sabes onde ativas esta opção? Em Opções -> Discussão -> “Outras opções de comentários” e escolhe “Dividir os comentários em páginas de 50 comentários por página e com a última página visível por omissão”.

Quebra os artigos longos

Disclaimer: este é um artigo longo e não está quebrado!

Porquê? Sei lá, porque:

Olha para o que digo e não olhes para o que faço???

Podia ter quebrado o artigo, ou seja, quando temos artigos longos, por exemplo com mais de 1000 palavras, podemos inserir a tag <!–nextpage–> e o artigo ficará paginado. Desta forma, não necessita de carregar todo o conteúdo, para não falar que aumenta as tuas Pageviews.

Não carregues multimédia desnecessária

Parece óbvio depois de todos os avisos que fizemos sobre o tamanho dos ficheiros que carregas no servidor, mas frequentemente, verificamos que alguns sites alojam vídeo ou catálogos de produtos e depois disponibilizam a informação através de newsletter: “Consulte hoje mesmo o nosso catálogo”. Se a mailing list for grande, e todos quiserem descarregar o PDF gigantesco, o servidor poderá não conseguir manter a performance no website.

Por isso, sempre que possível recorram a serviços de cloud para alojar ficheiros que não sejam essenciais ao funcionamento do vosso site.

Evita redirects

Ainda nos acompanhas? Esta sugestão é para gerar um pouco de discussão uma vez que não é consensual. Por norma, as boas práticas aconselham que quando tens bons links a apontar para o teu site, e se necessitares de mudar o url de algumas/todas páginas, deverás implementar um redireccionamento 301 para garantir que o visitante não se perde, no entanto, estes redireccionamentos costumam atrasar o acesso à tua informação, uma vez que há um redireccionamento a ser gerido.

É uma daqueles casos, em que devemos analisar se o Fim justifica os meios 😉

Não sobrecarregues o servidor

Esta é a última boa prática que te vou recomendar e em princípio já deverias ser capaz de a depreender sozinho, mas a verdade é que hoje em dia, continuamos a verificar que se abusa do servidor de alojamento do site. Se há uns tópicos atrás referíamos que não se devia armazenar media no servidor que não fosse necessário, também devemos estar atentos aos recursos das máquinas.

Pensa no teu servidor como o motor que garante a performance do teu site. Já pensaste? Ok, agora imagina que o site começa a ficar lento, porque a malta do marketing está a despachar a newsletter que é enviada a partir do teu servidor, ou melhor, porque a malta da Contabilidade decidiu fazer os backups durante a tarde, e tu queres guardar no servidor.

Parece brincadeira…infelizmente não é.

Ir um pouco mais além

Agora que sabes o que podes/deves fazer para que o teu site fique mais rápido, vamos deixar algumas dicas de afinação da tua instalação. Se as palavras cPanel, FTP, .htaccess ou wp-config.php não te dizem muito, avança com cuidado. Sempre com backups e de preferência com apoio técnico.

Limpa o lixo

Todos os sites, mais tarde ou mais cedo acabam por acumular lixo. Sejam artigos que nunca chegamos a acabar, como páginas que já não fazem sentido (por exemplo Landing pages para o Natal de 2015), imagens que não chegamos a usar, etc.

Por vezes apagamos estes recursos/conteúdos, mas nunca esvaziamos o Lixo. Sabias que podes editar o ficheiro wp-config.php e definir o número de dias em que o lixo é limpo?

Basta adicionar a seguinte linha de código:

define('EMPTY_TRASH_DAYS', 7); // empty trash in 7 days

Reduz Revisões de artigos, Rascunhos, Spam, Pingbacks e Trackbacks

Se alteras muito os teus conteúdos, vais reparar que o WordPress guarda uma cópia de todas as tuas alterações. Toda esta informação sobrecarrega a tua instalação (principalmente a base de dados)

Por isso se quiseres podes definir o número de revisões que pretendes guardar. Nós gostamos de ter 2 revisões disponíveis:

define('WP_POST_REVISIONS', 2);

Mas conhecemos quem goste de viver no limite e prefira não ter revisões de todo…

define('WP_POST_REVISIONS', false);

Se produzes conteúdos ou tens imagens alojadas no teu servidor, podes inibir que outros usem as tuas imagens e alimentem os seus sites com os teus conteúdos. Já não basta teres o teu servidor a alimentar o teu site, e ainda tem de aguentar com fornecer conteúdos a outros sites.

Se quiseres podes editar o .htaccess e adicionar as seguintes linhas de código:

#disable hotlinking of images with forbidden or custom image option
RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?kaksimedia.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?google.com [NC]
RewriteRule \.(jpg|jpeg|png|gif)$ – [NC,F,L]

Não te esqueças de adaptar o url ao teu site 😉

Utiliza compressão gZIP

A parte boa desta dica é que na realidade não nos obriga a fazer nada. A compressão gZIP funciona tal como quando queremos enviar ficheiros compactados a alguém. Do lado do servidor basta ativar a compressão, e os visitantes do teu site utilizam browsers que são capazes de descomprimir os ficheiros.

A única coisa que necessitas de fazer é adicionar ao ficheiro .htaccess que está na pasta da instalação WordPress as seguintes linhas:

## ENABLE GZIP COMPRESSION ## 
AddOutputFilterByType DEFLATE text/plain 
AddOutputFilterByType DEFLATE text/html 
AddOutputFilterByType DEFLATE text/xml 
AddOutputFilterByType DEFLATE text/css 
AddOutputFilterByType DEFLATE application/xml 
AddOutputFilterByType DEFLATE application/xhtml+xml 
AddOutputFilterByType DEFLATE application/rss+xml 
AddOutputFilterByType DEFLATE application/javascript 
AddOutputFilterByType DEFLATE application/x-javascript 
## ENABLE GZIP COMPRESSION ##

Leverage browser caching

Se utilizarmos de forma ativa a cache de browser, podemos aliviar (e muito) a carga do teu servidor. Por exemplo depois de um visitante ter visto o teu site, não é necessário que tenha sempre de descarregar o logótipo da tua empresa. Este elemento raramente é alterado, e se ficar guardado no computador do teu visitante, poderás canalizar os recursos do servidor para outras tarefas.

Para definir a cache de browser no teu servidor deves adicionar e ajustar os seguintes parâmetros ao ficheiro .htaccess:

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 2 days"
</IfModule>
## EXPIRES CACHING ##

 Roma e Pavia não se fizeram num só dia

E nem este documento ficou pronto em dois. Na realidade este documento será o nosso repositório de todas as dicas que iremos ter para otimizar os sites dos nossos clientes…e esperamos que te sirva também.

Guarda-o nos teus favoritos e envia-nos as tuas dicas.

Queremos transformar a net num local melhor (e mais rápido) um site de cada vez. Mas isso já tu sabias, certo?

Links de referência: