Antes de falarmos sobre otimização, acredito que a primeira questão a ser resolvida é com a hospedagem. Por favor, escolha bem seu plano de hospedagem e questione a sua empresa qual plano oferece melhor desempenho para WordPress.
Se você é corajoso, pode também se aventurar em montar seu próprio servidor de alta performance para WordPress gastando R$ 40,00 por mês. Uma recurso excelente para quem tem vários sites como agências ou para quem tem sites de alto tráfego e precisa melhorar o desempenho.
Se você quiser aprender deixe sua mensagem nos comentários que irei preparar uma série de artigos bem detalhado.
Teste de Performance, Antes e Depois!
Antes de aplicar as dicas deste artigo faça um teste de performance do seu site em algum serviço de análise de sua preferência.
Eu gosto do GTMetrix. Depois de aplicar as dicas, refaça os testes depois de algumas horas (tempo para processar um novo cache) e verifique se houve melhoras.
Porque devo usar um serviço de CDN no meu site WordPress?
Os serviços de CDN (Content Delivery Network – Rede de distribuição de conteúdo) permitem aliviar a carga de requisições do seu servidor de hospedagem e distribui estas requisições para outros servidores espalhados pelo mundo. Arquivos estáticos como .JS, CSS, fontes e imagens podem ser facilmente distribuídos via CDN.
A grande vantagem de usar um CDN: Velocidade. Se você reduz a carga de requisições de seu servidor, consequentemente sobra mais recursos de processamento e memória para executar outras operações como consulta a banco de dados ou executar scripts PHP.
Ainda no aspecto de velocidade, a redução de requisições permite o seu servidor ficar mais tempo disponível para receber um número maior de visitantes. Cada imagem, cada arquivo JS ou CSS conta como uma requisição. Se você medir seu site no GTMetrix vai descobrir quantas requisições seu site possui. Se você distribui parte destas requisições para outros servidores, seu Web Server (Apache, NGINX, LiteSpeed, etc..) responsável por tratar as requisições de seu site agradece.
Neste artigo vou lhe apresentar algumas opções de como implementar este serviço de forma gratuita, usando CDNs e plugins gratuitos.
1. Seu site está hospedado fora do Brasil? Experimente Cloudflare
Cloudflare é um serviço de CND global que reduz bastante o volume de tráfego de seu servidor, além de implementar segurança através de um excelente e simples sistema de firewall, cache e SSL forte.
Na maioria das vezes, o Cloudflare quando bem configurado consegue reduzir em até 30% a velocidade de carregamento do seu site.
Sites hospedados fora do Brasil (cuidado com as empresas que se dizem nacionais, a maioria deles também possuem seus servidores fora do Brasil, isso não é algo ruim mas vale a pena se informar) conseguem diminuir seu ping e tempo de resposta com o servidor de forma muito eficiente..
Se você quiser aprender mais sobre configurar seu site WordPress na Cloudflare, deixe um comentário no final do artigo que irei preparar um passo a passo especial.
2. Otimize suas imagens para WebP e carregue-as por Statically CDN
1ª Dica: otimize a qualidade de suas imagens
Antes de distribuir suas imagens via CDN é importante que elas já estejam otimizadas no servidor pois isso maximiza o uso da CDN, embora que a maioria delas ofereçam o serviço de otimização e compressão, o resultado deste processo pode não ser tão eficiente.
Se seu site possui poucas imagens eu recomendo que otimize suas imagens através do serviço da Short Pixel, que possui um dos melhores algoritmos de compressão da atualidade.
Mas se o seu site tem um grande volume de imagens e recebe postagens com frequência eu recomendo o Robin Image Optimizer (o Blogson usa) que ajuda muito. Se você quiser um artigo mais detalhado sobre o uso deste plugin, por favor, deixe um comentário no final do artigo.
2ª Dica: otimize o tamanho de largura e altura de suas imagens
Bem, uma vez que suas imagens já estão otimizadas, verifique agora se seu site possui imagens muito grandes em espaços muito pequenos, isso afeta diretamente a performance e lhe rende notas ruins nos testes de performance da GTMetrix ou Web.Dev por exemplo.
Usar imagens grandes em espaços pequenos é um erro comum, e este erro é favorecido com o uso de Page Builders como Elementor por exemplo, que oferece recurso para corrigir isso mas que não é explicito ao usuário.
A melhor forma de fazer esta correção é manualmente, embora existam plugins como o Adaptive Images for WordPress ou Flying Images mas ainda assim o resultado não 100% eficiente.
3ª Dica: instale o plugin Flying Images
Se você não trabalha apenas com WordPress, este artigo pode lhe interessar – Otimize as imagens do seu site com WebP e Statically CDN
Este plugin é extremamente simples, mas poderoso. Ele aplica para você recursos de LazyLoad, CDN, responsiless, Compressão e WebP.
Para checar se ele está funcionando certinho é só navegar pelo seu site e abrir uma das suas imagens em uma guia separada do navegador, você deverá ver algo como isso;
3. Otimize o carregamento de arquivos JS e CSS com Shift8 CDN
Na dica anterior aprendemos como fazer o carregamento de imagens via CDN, mas você pode também fazer o mesmo com arquivos estáticos; JS e CSS.
O Blogson usa o serviço da Shift8 como CDN de imagens e arquivos estáticos CSS, JS e fontes.
Consideramos que 50% destes arquivos são estáticos, portanto, eles podem ser copiados para outro local sem afetar (quebrar) o seu site. No entanto, existem exceções, alguns plugins trabalham com CSS e JS e de forma dinâmica, ou seja, eles são gerados junto com o carregamento do site e será necessário adicionar algumas exceções no serviço de CDN para que arquivos específicos não sejam carregados via CDN.
Então, devemos estar atentos e testar todas as páginas do nosso site para ter certeza de que nada foi afetado.
Agora vamos aprender como usar o SHIT 8 CDN no WordPress.
Dica 1 – Utilize algum plugin de cache
Embora a SHIFT 8 tenha um próprio plugin, o uso deste serviço funciona melhor com algum plugin de cache.
Se você já usa um plugin de cache ou já tem o seu favorito, sem problemas, continue com ele. Mas este assunto é novo para você, o Autoptimize é uma ótima opção por ser simples e eficiente.
Dica 2 – Crie sua conta na Shift 8
Aqui tem um detalhe importante. SHIFT 8 é gratuita para que você trafegue no máximo 1Tb de arquivos por mês, mas ainda assim é um ótimo volume, apenas sites com bastante tráfego e conteúdo ultrapassam este volume.
Se o seu site possui um volume alto de tráfego eu voure comendar que você não distribuía suas imagens pela Shift 8. Vamos nos planejar assim; deixamos as imagens para a Statically CDN que é 100% gratuita e sem limitações de tráfego e os arquivos JS e CSS que são menores vamos deixar com a SHIFT 8.
Se aplicarmos algum recurso de cache, dificilmente um site de tráfego relativamente alto chegará no limite de 1TB, mas de qualquer forma é sempre bom monitorar.
Ah! É importante entender que a Statically só oferece CDN para imagens, por este motivo estou recorrendo a SHIFT 8 para resolver a entrega de CSS e JS.
Agora que você entendeu, crie sua conta. Depois de criada a conta, adicione o seu domínio e em seguida verifique qual é o endereço do CDN.
Sua missão é colocar este endereço no seu plugin de cache. Apenas se atente que alguns plugins de cache permite você escolher que tipo de conteúdo você deseja hospedar na CDN, se é somente imagens, ou imagens + arquivos, neste caso, opte apenas por “arquivos”
Como eu dei exemplo do Autoptimize, nele a configuração ficaria assim;
Se você utiliza algum outro plugin de cache, verifique nas configurações dele como fazer a mesma configuração, praticamente todos eles possuem esta configuração.
Agora é só limpar o cache do plugin e testar, ao acessar seu site você poderá acompanhar todas as requisições do site, para isso siga os passos:
- Abra o Google Chrome.
- Pressione F12 antes mesmo de acessar o seu site.
- Localize a guia Network.
- Agora, acesse normalmente o seu site e fique de olho nos resultados exibidos na guia Network.
- Passe o mouse sobre algum arquivo CSS ou JS e verifique o endereço. Se o endereço for o mesmo do seu CDN da shift8, pronto!!! Está feito!
Outras opções de CDN
Jetpack
Ah, achou que eu não ia falar do alguém ia dizer nada sobre o Jetpak para WordPress? Pois bem, ele é sim uma boa alternativa que oferece CDN tanto para imagens como para arquivos estáticos JS e CSS.
Eu nunca tive resultados que justificassem o uso do JetPack, além de achar ele intrusivo e um pouco pesado com seus rastreadores injetados no WordPress. Por este motivo não dou destaque para ele neste artigo, mas fique bem claro que esta é uma experiência minha e que talvez seja diferente da sua, eu recomendo que experimente.
QUIC.CLOUD
A QUIC. CLOUD trabalha no mesmo molde da SHIFT 8 oferecendo 1Gb de tráfego gratuito (bom para sites pequenos) para seus arquivos e você tem um bônus de 5GB ou 10G caso seu serviço de hospedagem utilize LiteSpeed ou OpenLiteSpeed.
ArvanCloud
Oferece os primeiros 20GB de tráfego gratuitos. Mas como sabemos, arquivos JS e CSS não geram tanto tráfego se houver um serviço de cache bem implementado, é possível que você possa usar o serviço da ArvanCloud por um longo período sem dores de cabeça.
Cloudnary
Cloudinary é ideal para quem quer um CDN que suporte também vídeos ou que aqueles que precisam entregar imagens de alta qualidade em seus sites. Oferece 25Gb gratuitos e também permite a hospedagem de imagens. É só criar sua conta e começar a usar.