Você é paciente e prefere aguardar o carregamento de um blog ou site lento para consumir um conteúdo, fazer uma compra ou acaba clicando no botão de voltar para encontrar outra opção mais rápida?
A menos que seu produto ou serviço seja muito escasso ou tenha uma qualidade tão alta, a maioria dos usuários não tem “todo o tempo do mundo” para aguardar esses segundos intermináveis.
O objetivo deste artigo é mostrar algumas práticas para melhorar a performance do seu WordPress, bem como, apresentar ações você deve adotar a partir de hoje para não prejudicar mais o seu pagespeed ao longo do tempo.
Por que otimizar o seu site?
Veja algumas conclusões de uma pesquisa realizada pela Deloitte e Google em junho de 2020 sobre velocidade em dispositivos móveis:
Sites mais rápidos significam que mais pessoas vão chegar no checkout do seu produto ou serviço.
Um site rápido encoraja as pessoas a ficarem mais tempo no seu site e comprarem mais.
A velocidade de carregamento ajuda reduzir a taxa de rejeição do seu website, situação na qual as pessoas saem do seu site para buscar outro.
Acredito que agora consegui te convencer a respeito da importância, então vamos virar a mesa?
Hospedagem
Ter um bom servidor, sem dúvidas é um dos principais pontos que determina o tempo que uma página será carregada do lado do usuário, e contar com um host que responde rápido às requisições fará toda a diferença.
Tema
Um tema do WordPress é um modelo para ser editado pelo usuário e que pode ser personalizado a qualquer momento. Garanta que você possua um tema otimizado, atualizado e com foco em responsividade para diferentes dispositivos sempre pensando na experiência do usuário.
Neste artigo você confere algumas opções que performam bem quando tratamos de velocidade de carregamento e responsividade.
Remoção de plugins desnecessários
Deixar aquele plugin que você não utiliza em seu website mesmo que desativado, certamente não é uma boa ideia. Além de deixar o seu site lento, se torna uma brecha de segurança caso você não o atualize.
Faça o levantamento de todos os plugins do seu website junto a função de cada um e comece a limpeza.
E o mais importante: se você não compreendeu bem a função de um plugin que esteja instalado, pesquise e pergunte ao responsável se é necessário mantê-lo. Nada de deixar pegando “teia de aranha” nem desinstalar algum importante sem saber, viu?
Plugin de compressão de imagens
Optar por um plugin de otimização de imagens é uma ótima opção para reduzir em massa o tamanho das imagens que já estão em seu site.
As configurações irão depender de seus objetivos, pois quanto maior o nível de compressão aplicado, você gradativamente abre mão da qualidade.
No ShortPixel, plugin com foco em imagens possuímos três níveis de compressão:
- Lossless: não há perda de qualidade, apenas redução no tamanho do arquivo;
- Lossy: é a opção mais escolhida pelos usuários, no qual a perda na qualidade chega a ser imperceptível.
- Glossy: maior perda de qualidade e ganho em redução no tamanho do arquivo.
Além do ShortPixel, o Smush e EWWW Image Optimization são ótimas escolhas.
Plugins de otimização
Os plugins de otimização são uma boa pedida para minificar os códigos do seu website, ativar lazy loading ou dividir as requisições em CDNs (falaremos sobre elas no próximo tópico).
Podemos desde ativar configurações mais simples que não comprometem nenhum elemento visual até desativar algumas animações e elementos visuais.
Em alguns testes com o Autoptimize, obtive resultados positivos ativando:
Otimização de código JavaScript, CSS e HTML: minificação é um processo de remoção de caracteres desnecessários e espaços em branco que melhoram a performance da execução de um código.
Compare os trechos de HTML:
Primeiro:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>Segundo:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> </body></html>Visualmente falando a primeira é mais organizada para nós humanos, mas as máquinas não precisam da mesma legibilidade de uma pessoa para executar. Logo, retirando as quebras de texto faz com que o arquivo seja executado mais rapidamente.
Ativar JS, CSS em linha: é uma opção que ajuda o seu website a carregar arquivos complementares mais rapidamente, visto que deixa seu JavaScript ou CSS em linha na mesma página HTML.
Ative esta opção apenas se indicada lentidão da primeira dobra de conteúdo em ferramentas de performance.
Lazy Loading: você já entrou em um site em que a primeira parte da tela foi carregada e a medida que você consumia o conteúdo o restante foi aparecendo? Pois, estamos falando de carregamento adiado, uma ótima funcionalidade do Autoptimize.
Vídeos em Lazy Loading: se você explora vídeos em seus conteúdos vindos do YouTube, o WP YouTube Lite pode ajudá-lo a exibir uma thumbnail estática e apenas carregá-los quando o usuário clicar.
Além do plugin citado, caso você tenha budget disponível para a missão, o WPRocket pode ser um ótimo investimento.
CDN
Uma CDN (Content Delivery Network), são diferentes servidores distribuídos que trabalham em conjunto para oferecer uma rápida entrega de conteúdos, que vão desde páginas HTML arquivos em JavaScript, CSS e mídias.
Configurar uma CDN é uma excelente opção para aprimorar a velocidade de carregamento do seu site, pois com ela os servidores mais próximos à localidade do seu visitante são acionados, fornecendo uma experiência de carregamento mais rápida e personalizada.
De acordo com a Cloudflare,
A popularidade dos serviços de CDN continua a aumentar e, hoje, a maior parte do tráfego de internet é servida por CDNs, incluindo o tráfego de sites importantes como Facebook, Netflix e Amazon.
A Cloudflare é uma excelente opção de CDN, já que, além de gratuita é fácil de configurar e possui forte comunidade ativa.
Tratamento de cache
O cache é a reutilização de uma visão que o usuário teve do seu website há um tempo visando carregamento mais rápido a partir da reutilização desses dados.
Tratar o cache não só irá melhorar o tempo de carregamento, como você irá salvar o consumo de recursos do servidor e melhorar o seu ranqueamento nos buscadores.
O WP Fastest Cache junto ao W3 Total Cache são plugins bem avaliados com esta finalidade.
Crie hábitos saudáveis para o seu site
Tenha em mente que a forma como tratamos nosso WordPress é um importante fator que vai determinar o peso de uma única página ou da estrutura completa do seu site.
Para isso, construa uma checklist com alguns pontos ao adicionar uma página ou post no CMS.
1. Redimensionar imagens
Indico o iLoveIMG na função “Resize Image”. É importante entender qual é o objetivo da imagem antes do redimensionamento. Enquanto o recomendado para blog posts é em torno de 1200px, para a homepage do seu site pode variar.
2. Comprimir as imagens
Um bom aliado para a tarefa é o TinyPNG.
4. Preciso usar algum plugin construtor de páginas?
Que tal identificar os plugins mortais para o seu tempo de carregamento? Talvez você considere mudar.
5. Irei estilizar algum elemento “na unha”? Minifique seu CSS ou JavaScript antes de incluí-lo em sua página e mantenha sempre o backup do seu código caso precise fazer alguma manutenção futuramente.
Ferramentas para análise de performance
Existem inúmeras ferramentas de desempenho disponíveis, onde cada uma possui um ambiente de testes específico e simula acesso em diferentes regiões do mundo e dispositivos.
As principais são:
Todos os dados dessas ferramentas são exibidos em gráficos ricos que permitem que você atue diretamente no problema.
Gostou do artigo? Compartilhe o conteúdo e me siga nas redes sociais para mais dicas sobre otimização! 😉🚀
Deixe um comentário