Como fazer seu site WordPress carregar mais rápido usando plugins

Ter um site bonito com muito conteúdo é importante se você quiser capturar a atenção dos leitores. Infelizmente, se sua página carregar muito lentamente, os leitores podem nunca ver seu conteúdo. Por quê? Você tem apenas alguns segundos para chamar a atenção deles e evitar que eles passem para o próximo site. Os leitores não querem esperar o carregamento do seu conteúdo. Quanto maior a espera, maior a probabilidade de você perdê-los.

Por isso é extremamente importante otimizar a velocidade de carregamento da sua página. Existem várias boas ferramentas online para ajudar a medir sua velocidade e solucionar problemas. Uma das ferramentas mais populares é o Google PageSpeed ​​Insights.

Informações do PageSpeed

O Google PageSpeed ​​Insights é uma ferramenta online gratuita que testa a velocidade de carregamento de qualquer site, identifica problemas, prioriza-os e dá sugestões para corrigir esses problemas.

Para este artigo, estou usando meu próprio site que usa o Divi da Elegant Themes como um blog básico. Estou mostrando o que precisa ser corrigido, quais sugestões a ferramenta faz e como eu as corrigi. A pontuação fornece resultados para dispositivos móveis e computadores. Estou focando no desktop. Alguns dos problemas móveis serão resolvidos ao longo do caminho.

A maioria desses problemas será resolvida usando plugins. Ao decidir sobre um plugin, fique com os plugins que foram atualizados recentemente e têm uma boa reputação. Muitos plugins resolverão mais de um problema.

Uma palavra de cautela – alguns plugins não funcionam bem com outros porque ambos tentam fazer o mesmo trabalho. Isso pode ter um efeito diferente do que deseja. Eu recomendo experimentá-los em um site de teste antes de usá-los em seu site principal. Não apenas os próprios plugins, mas também as combinações de plugins. Antes de experimentar plugins em seu site ao vivo, certifique-se de ter um backup recente.

Minha pontuação

Minha pontuação é um terrível 46 . A primeira coisa a notar é que existem três seções diferentes nos resultados:

• Deve corrigir (2 itens)
• Considere corrigir (6 itens)
• Aprovado (2 itens)

Cada seção se expande para mostrar quais são os problemas e eles dão conselhos sobre como corrigi-los. Descobri que é melhor começar com o primeiro item e ir em ordem. Resolvê-los em ordem também resolverá outros problemas na lista.

Nota – eu até tive algumas falhas ao longo do caminho. Eu os incluí para que você possa estar ciente de possíveis problemas.

Deve corrigir

Tenho dois itens que precisam de atenção imediata:

• Ativar a compactação
• Elimine JavaScript e CSS de bloqueio de renderização no conteúdo acima da dobra

Ativar a compactação

Minha questão mais importante é que não estou usando compressão. Isso mostra que posso reduzir o tamanho da minha transferência de arquivos em 79%. Isso pode ser feito usando gzip ou deflate.

Impulsionador de pontuação de desempenho do WP

Este plug-in gratuito possui compactação gzip e resolverá vários outros problemas, como problemas de CSS e JavaScript, removendo strings de consulta, adicionando varia: cabeçalho de codificação e set expires caching. Eu o escolhi porque tem um 4.7/5 com mais de 10.000 instalações ativas. Ele foi desenvolvido para acelerar o carregamento da página e melhorar os testes de pontuação da página.

Isso me deu uma pontuação de 78 com uma mensagem para reduzir o tempo de resposta do servidor. Isso tem muito a ver com o meu plano de hospedagem. Estou corrigindo isso movendo meu site para um novo plano de hospedagem. Isso está além do escopo deste artigo.

Uma coisa legal sobre isso é que ele resolveu alguns dos principais problemas com a próxima edição: Eliminar JavaScript e CSS de bloqueio de renderização no conteúdo acima da dobra. Esse problema agora foi movido para Considerar correção. Também corrigiu completamente o cache do navegador de alavancagem. O site agora está passando 4 regras onde antes só passava 2.

Reduza o tempo de resposta do servidor

A coisa estranha sobre isso é que o tempo de resposta do servidor subiu de 0,96 para 1,4. Reduzir o tempo de resposta do servidor agora estava em Deveria ser corrigido. Isso exigia um plugin de cache.

Cache Total W3

O W3 Total Cache é de longe o plugin mais popular para acelerar o desempenho do servidor do seu site. Tem quase um milhão de instalações ativas e uma classificação de 4,4/5. Otimiza seu site através do cache. Você pode escolher as diferentes opções de cache individualmente. Eles incluem página, banco de dados, objeto e navegador. Ele armazenará em cache futuros cabeçalhos de expiração e tags de entidade, feeds e resultados de pesquisa. Ele também possui recursos para reduzir seu JS, CSS e HTML. Ele acelerará sua pontuação no Google PageSpeed ​​pelo menos 10 vezes quando estiver totalmente configurado.

Eu tentei com todos os recursos de cache ativados. Isso levou minha pontuação para 86 . Pela primeira vez, meu site está agora no verde e todos os problemas que tive estavam em Considere Corrigir. Ele agora passa 5 regras, incluindo o tempo de resposta do servidor, que agora diz “servidor respondeu rapidamente”.

Considere corrigir

Quando executei o teste pela primeira vez, esta seção teve mais problemas do que quando finalmente cheguei a ela. Muitos desses problemas foram resolvidos quando consertei problemas na área Deve corrigir.

Os problemas originalmente incluíam:

• Aproveite o cache do navegador
• Tempo de resposta do servidor
• Minimizar JavaScript
• Otimizar imagens
• Minimizar CSS
• Minimizar HTML

Aqui está uma olhada nos problemas atuais.

Elimine JavaScript e CSS de bloqueio de renderização no conteúdo acima da dobra

A lata de JavaScript e CSS que está acima da dobra pode retardar o carregamento da página, colocando muita carga no navegador. Eles precisam carregar antes que qualquer outra coisa acima da dobra possa carregar.

Existem várias maneiras de corrigi-lo:

• Adiar carregamento
• Carregar de forma assíncrona
• Inline-os diretamente no HTML

Aqui estão os plugins que usei para corrigir esse problema.

Otimizar automaticamente

Este plugin irá minificar (remover toda a formatação desnecessária e reduzir o tamanho do arquivo e carregar no navegador) e comprimir seu JavaScript, CSS e HTML. Ele adicionará cabeçalhos de expiração e os armazenará em cache. Ele moverá seus estilos para o cabeçalho da página e scripts para o rodapé. Usando configurações avançadas, você pode ajustá-lo para suas necessidades específicas.

Isso também resolverá alguns problemas, como reduzir JS e CSS na lista abaixo.

No começo, apenas ativei as configurações básicas para HTML, JS e CSS. Isso levou minha pontuação para 88 e reduziu os problemas para 3 recursos CSS. Uma foi criada pelo próprio plugin e as outras duas são fontes do Google. Agora passa 7 regras. Resolveu Minify CSS e Minify HTML.

Melhor WordPress Minify

O principal objetivo deste plugin é minimizar seu CSS e JS, mas também possui um recurso legal que permite mover seus arquivos para o rodapé ou outros locais (por isso o escolhi). Ele usa um sistema de enfileiramento para melhorar a compatibilidade com navegadores, plugins e temas.

Quando instalei, todas as configurações de layout do meu tema foram removidas e todos os meus menus, imagens, links, etc., apareceram na extremidade esquerda da tela. Felizmente a formatação voltou quando eu desinstalei. Pode ter sido algo nas configurações que precisava ser ajustado. Tenho certeza que este é um bom plugin porque tem mais de 60.000 instalações ativas e uma classificação de 4,4/5. Eu só incluí este como um aviso de que pode não funcionar da maneira que você precisa sem alguma configuração.

Como minha pontuação era 88 e eu sabia quais eram os 3 problemas, decidi passar para o próximo problema.

Otimizar imagens

O tamanho da imagem desempenha um papel importante na velocidade de carregamento da página. Às vezes, você pode usar um tamanho de imagem muito menor e uma qualidade inferior sem muita diferença visual quando visualizada na web. Isso não apenas acelera o tempo de carregamento e usa menos largura de banda, mas também acelera o tempo de backup e reduz o espaço de armazenamento em seu servidor.

Otimizador de imagem EWWW

Este plug-in otimizará automaticamente suas imagens à medida que você as enviar e converterá suas imagens para o formato que produz o menor tamanho. Ele também otimizará as imagens que você já carregou. Você também pode aplicar reduções com perdas para imagens PNG e JPG.

Quando o instalei, havia vários arquivos que ele queria que eu localizasse e instalasse. Acho que esse plugin funcionaria muito bem com todos os arquivos instalados, mas decidi encontrar um que funcionasse imediatamente.

WP Smush

Este plugin irá reduzir o tamanho do arquivo de imagens sem reduzir a qualidade. Ele faz isso removendo informações ocultas. Ele analisará seus arquivos e informará quantas imagens precisam ser esmagadas. Você pode esmagá-los em massa.

A versão gratuita não esmaga nada acima de 1 MB e só esmaga 50 de cada vez. Para mais do que isso, você precisará do WP Smush Pro, que compacta imagens de até 32 MB sem limite de quantas de cada vez. Ele faz um backup dos originais se você precisar deles. Os preços começam em $ 19 por mês.

Eu tinha 114 imagens que precisavam de smushing. 8 dessas imagens tinham mais de 1 MB. Eu decidi consertá-los à mão. Ele esmagou 98 imagens e reduziu o tamanho do arquivo em 4,79 MB (8,82%).

Isso levou minha pontuação para 90 . O Google Insights identificou 5 imagens das quais não gostou, mas nenhuma tinha mais de 1 MB. Eles variaram de 0,7 KB a 17 KB.

Otimizando Imagens à Mão

Você pode otimizar imagens manualmente redimensionando, reduzindo a qualidade e alterando o formato. Uma das minhas ferramentas favoritas e mais usadas para manipulação de imagens é o Paint.NET. É um aplicativo gratuito de edição de imagens e fotos para Windows que possui muitos recursos para reduzir o tamanho do arquivo. Qual é o seu favorito?

Minimize JavaScript, CSS e HTML

Achei que tinha resolvido isso…

Enquanto eu estava trabalhando com os outros problemas, vi que a única mensagem a ser minificada era para JavaScript. Depois de otimizar minhas imagens, todos os três problemas retornaram. Refiz meus passos para descobrir o que aconteceu.

Ao experimentar o Better WordPress Minify e depois desativá-lo, minhas mensagens para minificar CSS e HTML voltaram. Minha pontuação caiu para 88 e agora eu estava de volta a ter 5 regras aprovadas. Ativei os recursos de redução do W3 Total Cache e agora ele passou por todos os problemas de redução. Eu agora tinha uma pontuação de 88 e passou 8 regras. Além disso, tinha seis arquivos acima da dobra. Eu sabia que tinha resolvido alguns deles, então devo ter mudado alguma coisa.

Fiz algumas soluções de problemas e descobri que desativei o Autoptimize quando tive o problema com o Better WordPress Minify anteriormente. Liguei o Autoptimize novamente, desliguei o minify do W3 Total Cache e limpei o cache (etapa muito importante!). Eu agora tinha minha pontuação de 90 de volta e o site passou em 8 regras. Estava de volta três arquivos CSS acima da dobra e uma mensagem para otimizar as imagens.

Com base na minha experiência anterior, decidi não perder tempo com esses arquivos. Acho que o Google odeia imagens de qualquer tamanho (não importa quão pequenas eu as obtenha, ainda recebo uma mensagem para reduzir o tamanho) e passar de um PageScore de 46 para 90 é uma vitória no meu livro. Aprendi da maneira mais difícil a parar enquanto você está à frente.

Pontuação final

Minha pontuação final foi 90/100. Os plugins que usei para obter essa pontuação são:

• Otimização automática (todos os recursos ativados)
• W3 Total Cache (somente recursos de cache de página ativados)
• WP Performance Score Booster (todos os recursos ativados)
• WP Smush (edição gratuita)

Para constar, a pontuação do celular passou de 36 para 78. Para corrigi-lo, eu teria que otimizar minhas imagens e arquivos para celular.

Pensamentos finais

Seus visitantes, Google e outros mecanismos de pesquisa odeiam sites que carregam lentamente. Usando o Google PageSpeed ​​Insights você pode saber exatamente quais são os problemas e obter dicas de como resolvê-los. Um punhado de plugins gratuitos é tudo que você precisa para ir de um site lento que o Google odeia para um site rápido que o Google adora. Apenas tenha cuidado ao experimentar – alguns plugins não funcionam bem com outros.

Eu gostaria de ouvir de você. Você otimizou seu site WordPress usando o Google PageSpeed ​​Insights? Sua experiência foi parecida com a minha? Você usou plugins diferentes para resolver os problemas? Eu gostaria de ouvir sobre sua experiência nos comentários.