Como melhorar a performance de um blog Wordpress

Você já parou para pensar quantas pessoas desistem de ler o conteúdo de um post porque o site está demorando demais para carregar?

A triste verdade é que 53% das pessoas abandonarão o seu site se o tempo de carregamento for maior que 3 segundos. — Fonte

Você pode até estar no primeiro lugar do Google, mas se o conteúdo não aparecer para o usuário o mais rápido possível ele não pensará duas vezes em voltar e acessar o próximo resultado na lista.

A Amazon fez um estudo onde constatou que se o tempo de resposta do e-commerce aumentasse por 1 segundo durante 1 ano, eles teriam um prejuízo de $1.6 bilhão de dólares. — Fonte

A velocidade do site importa. Ela afeta os usuários, conversões e as vendas, então se preocupar com o desempenho é uma obrigação!

Índice

Neste post vou mostrar formas de aumentar a performance de um blog Wordpress, dividindo em 3 categorias — Iniciante, Intermediário e Avançado

  • Iniciante: Vamos diagnosticar problemas de desempenho e instalar plugins;
  • Intermediário: Você precisa ter acesso ao código do seu tema, pois vamos verificar e eventualmente mudar algumas coisas para melhorar a performance do blog;
  • Avançado: Você precisa ter acesso a seu servidor através de uma linha de comando (SSH). Vamos otimizar o banco de dados e o servidor de aplicação (Apache), além de instalar o Varnish e configurar o Cloudflare.

Iniciante

O primeiro passo é saber como seu blog está performando, para isso faremos um diagnóstico do site utilizando o Google PageSpeed insights.

Entre neste link: https://developers.google.com/speed/pagespeed/insights/ e coloque a URL do blog. Recomendo colocar tanto a homepage quando a página de um post qualquer.

Anote ou tire um print dos resultados das duas páginas, incluindo as abas mobile e desktop.

A segunda auditoria que faremos será utilizando o https://www.webpagetest.org. Faça a mesma coisa, coloque tanto a URL da home quanto de um post e tire um print.

Agora que já temos a situação do blog em relação à performance podemos começar.

Smush.it

Este é um plugin obrigatório para todos os blogs que fazem o uso de imagens.

Neste caso foram salvos 4.3GB reduzindo as imagens

O que ele faz é comprimir e otimizar qualquer imagem inserida no blog. É muito simples de instalar, basta procurar dentro do marketplace de plugins do Wordpress e depois ativar. 

Uma função muito legal dele é o Bulk smush onde é possível otimizar todas as imagens do blog de uma vez só (ou de 200 em 200 caso esteja utilizando a versão gratuita)

Outra funcionalidade excelente é a Full size images. O que isso faz é limitar o tamanho máximo das imagens do blog, prevenindo aquelas fotos de câmeras com tamanhos absurdos.

Link: https://wordpress.org/plugins/wp-smushit/

W3 Total Cache

Este é o plugin mais famoso na categoria otimização e performance.

Ele tem diversas configurações para melhorar a velocidade do seu blog incluindo cache, otimização de banco de dados e integração com serviços de CDN. O plugin é totalmente grátis e bem fácil de utilizar.

Depois de instalar e só entrar na página do plugin e ativar as otimizações desejadas.

Uma funcionalidade muito legal dele é o Preview mode que possibilita testar todas as opções de otimização antes de habilitar de verdade no blog.

As opções que recomendo são:

  • Page Cache
  • Minify (Atenção ao habilitar este. Faça um teste primeiro para ver se o tema continua funcionando)
  • Database Cache
  • Object Cache
  • Browser Cache

Protip

Abra a funcionalidade Compatibility Check do W3 Total Cache e tenha certeza que todas as extensões do apache estão habilitadas. Sem as extensões o plugin não consegue otimizar seu site!

Link: https://wordpress.org/plugins/w3-total-cache/

Lazy Load

Outro plugin que acho essencial em blogs que tem muitas imagens.

Quando você entra em uma página, o comportamento normal de um navegador é interpretar o código HTML e fazer o download das imagens, mesmo que você ainda não esteja vendo elas.

O que este plugin faz é bloquear este download e fazer apenas quando a imagem aparece na tela do computador/celular, aumentando muito a velocidade de carregamento inicial da página.

Link: https://wordpress.org/plugins/lazy-load

Intermediário

Imagens representam em média 60% do tamanho (em KB) de uma página, por este motivo vamos otimizar o código do tema para deixar o site rápido.

Antes de começar precisamos saber quais os tamanhos das imagens do blog, para isso vamos instalar a extensão Image Size Info para o Google Chrome.

Com a extensão instalada, acesse seu blog e verifique o tamanhos das imagens, tanto dentro do post quanto as imagens de destaque.

A informação importante aqui é a Displayed que é efetivamente o tamanho que está sendo mostrado na página. No exemplo acima o tamanho original da imagem é maior do que esta sendo exibido. Neste caso podemos diminuí-la para 848x579 pixels sem afetar o design do site.

O que estamos fazendo?

Esta linha de código informa ao Wordpress para cortar uma imagem com 848x579 pixels além das que ele já corta por padrão.

Porque estamos fazendo isso?

Utilizando o exemplo acima, percebemos que o tamanho máximo renderizado para uma imagem em destaque no site é de 848x579, porém uma imagem de 1024x700 está sendo utilizada.

Vamos recortar uma nova imagem para diminuir o tamanho das requisições e consequentemente deixar o site mais rápido.

Como vamos fazer?

Para fazer isso abra o arquivo functions.php do seu tema e adicione a seguinte linha:

add_image_size(‘cover’, 848, 579, true);

A partir de agora as imagens terão um tamanho a mais, que é de 848x579 (Utilize o plugin https://wordpress.org/plugins/regenerate-thumbnails/ para recortar as imagens existentes)

O último passo é utilizar estas imagens no tema. Abra o arquivo onde seus posts são renderizados (geralmente index.php ou loop.php).

Procure por esta linha:

the_post_thumbnail();

e altere por:

the_post_thumbnail(‘cover’);

Avançado

Por últimos vamos otimizar o servidor do blog instalando o Varnish, modificar as configurações do Apache e do MySQL, configurar o Cloudflare junto com o serviço de armazenamento da Amazon (S3), e por fim ativar o CloudFront (CDN).

A Digital Ocean disponibiliza servidores VPS a partir de $5

Servidor

Para fazer as duas primeiras otimizações é necessário ter acesso ao servidor do blog. Caso o site ainda não esteja em um servidor dedicado para sua aplicação recomendo mover para um VPS.

A Digital Ocean é uma excelente opção de VPS. Com apenas $5 dólares por mês é possível criar um blog em wordpress que suporta até 1.000.000 de visitas por mês

Apache & MySQL

Antes de tudo recomendo alterar algumas configurações do Apache & MySQL, mas lembre de fazer um backup dos seus arquivos de configuração antes de continuar!

Como vamos instalar diversas alternativas de cache, podemos modificar as configurações originais do MySQL e do Apache para consumir menos memória.

MySQL

Primeiro vamos alterar algumas configurações do MySQL. Abra seu arquivo de configuração (geralmente fica em /etc/my.cnf ) e faça com que o arquivo fique semelhante ao exemplo abaixo:

[mysqld]
port = 3306
socket = /var/lib/mysql/mysql.sock
skip-locking
key_buffer = 16K
max_allowed_packet = 1M
table_cache = 4
sort_buffer_size = 64K
read_buffer_size = 256K
read_rnd_buffer_size = 256K
net_buffer_length = 2K
thread_stack = 64K

# For low memory, Berkeley DB should not be used so keep skip-bdb uncommented unless required
skip-bdb

# For low memory, InnoDB should not be used so keep skip-innodb uncommented unless required
skip-innodb

# Uncomment the following if you are using InnoDB tables
#innodb_data_home_dir = /var/lib/mysql/
#innodb_data_file_path = ibdata1:10M:autoextend
#innodb_log_group_home_dir = /var/lib/mysql/
#innodb_log_arch_dir = /var/lib/mysql/
# You can set .._buffer_pool_size up to 50 - 80 %
# of RAM but beware of setting memory usage too high
#innodb_buffer_pool_size = 16M
#innodb_additional_mem_pool_size = 2M
# Set .._log_file_size to 25 % of buffer pool size
#innodb_log_file_size = 5M
#innodb_log_buffer_size = 8M
#innodb_flush_log_at_trx_commit = 1
#innodb_lock_wait_timeout = 50


[mysqldump]
quick
max_allowed_packet = 16M

[mysql]
no-auto-rehash
# Remove the next comment character if you are not familiar with SQL
#safe-updates

[isamchk]
key_buffer = 8M
sort_buffer_size = 8M

[myisamchk]
key_buffer = 8M
sort_buffer_size = 8M

[mysqlhotcopy]
interactive-timeout

Salve o arquivo e reinicie o mysql: service mysql restart

Apache

Agora é a vez do apache. Abre o arquivo de configurações do apache (geralmente /etc/httpd/conf/httpd.conf) e altere as seguintes configurações:

StartServers 1
MinSpareServers 1
MaxSpareServers 5
ServerLimit 50
MaxClients 50
MaxRequestsPerChild 5000

Salve o arquivo e reinicie o apache: service apache2 restart

Fonte: http://wiki.vpslink.com/Low_memory_MySQL_/_Apache_configurations

Varnish

Varnish é um acelerador HTTP que faz o cache de recursos estáticos como páginas HTML para reduzir o número de consultas ao banco de dados.

Este Software vai te ajudar nas piores horas, aquelas em que tem muitas visitas simultâneas e o servidor começa a ficar lento.

Veja este tutorial de como instalar o Varnish no seu VPS [ É bem simples e não leva nem 15 minutos ]

CloudFlare CDN

Vamos instalar agora a CloudFlare. Este serviço irá adicionar mais uma camada de “cache” a nossa aplicação.

Com este serviço será possível diminuir o número de requisições que chegam até o servidor, consequentemente serão utilizados menos recursos da máquina.

Um recurso interessante da CloudFlare é o Rocket, que faz com que os scripts do site trabalhem de forma assíncrona, e o melhor, sem que você precise alterar 1 linha de código.

Clique aqui para criar uma conta na CloudFlare e siga o tutorial que eles disponibilizam para realizar a instalação. Você vai precisar alterar o DNS durante a instalação. Após a instalação configure o W3 Total cache com suas credenciais da CloudFlare para poder administrar sua conta através do admin do Wordpress

Armazenamento

Caso utilize muitas imagens e vídeos no blog recomendo fortemente que você configure um serviço externo para armazenar as mídias.

— Porquê?

Geralmente, servidores VPS tem um espaço limitado. Para não ter problemas vamos armazenar as imagens em outro lugar, onde você paga apenas o espaço que utiliza e pode escalar sem dores de cabeça.

Amazon S3: (Simple Storage Service) serviço de armazenamento para a Internet.

Vamos utilizar o Amazon S3 para armazenar as fotos e vídeos do blog a partir de agora, e como ele tem um free-tier não precisamos pagar nada por isso por enquanto.

Caso você ultrapasse os 5GB da free-tier, o Amazon S3 cobra por mês apenas $0.0408 por GB, ou seja, vale muito mais a pena pagar on-demand do que fazer um upgrade no VPS.

Para usar o Amazon S3 com o Wordpress você vai precisar instalar esse plugin aqui.

É bem simples, basta ativar o plugin e informar suas chaves de API juntamente com o bucket que você deseja utilizar para armazenar as mídias.

CDN — Amazon Cloudfront

Para finalizar, recomendo utilizar o CDN da Amazon, chamado CloudFront. Com ele vamos criar uma CDN para as imagens do blog. Siga este tutorial: https://docs.aws.amazon.com/pt_br/AmazonCloudFront/latest/DeveloperGuide/MigrateS3ToCloudFront.html

Lembre de habilitar a opção CloudFront no plugin https://wordpress.org/plugins/amazon-s3-and-cloudfront/ instalado no passo anterior!

Protips

  • Mantenha seu wordpress atualizado, sempre!
  • Mantenha os plugins atualizados
  • Remova todos os plugins desnecessários, geralmente eles são as principais causas de lentidão
  • Escolha bem o tema do site, ele deve ser responsivo
  • Teste o tema antes de comprar, você já sabe como fazer isso usando o Webpagetest ou Google PageSpeed
  • Mantenha o PHP atualizado (versão 7+)
  • Wordpress performance checklist
Like what you read? Give Hugo Dias a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.