Índice
Duas maneiras de acelerar seu site
Armazenamento em cache e otimização são duas coisas diferentes.
Cada um deles desempenha um papel único ao acelerar a velocidade de carregamento da página do site.
O armazenamento em cache é sobre o armazenamento de elementos do site, para que eles não precisem ser baixados do host novamente sempre que uma página/postagem for solicitada.
A otimização é sobre a redução de recursos visando a velocidade.
Dois tipos de otimização
A otimização On-Site refere-se aos elementos diretamente relacionados ao site que podem impactar em sua velocidade.
A otimização da ordem de carregamento refere-se a reorganizar a forma como os elementos, que compõem sua página, são carregados no navegador do visitante.
Faça a otimização On-Site primeiro
Não há como qualquer plugin de cache compensar a falta de otimização dos recursos utilizados pelo seu site.
A melhor maneira de acelerar o seu site é consertar e reduzir os recursos carregados por suas páginas.
Os maiores responsáveis por um desempenho ruim de sites, em ordem, são:
- Imagens
- Tema
- Plugins
- Segurança
- Inchaço do banco de dados
- Hospedagem
Nenhum teste de velocidade online apontará magicamente uma solução para todos os problemas,é preciso olhar pelo lado do host, do webmaster e, de fato, quando vamos conversar com um cliente sobre a otimização de seu site, já sabemos quais são os problemas de velocidade antes mesmo de começarmos o papo. Você tem estas informações interpretando o que os testadores de velocidade online mostram.
Nosso trabalho aqui é consertar as coisas do servidor e do site e, mesmo sem nenhum tipo de plug-in de cache ou otimização instalado, a maioria dos clientes vê uma diferença notável de velocidade em seu site.
A gente leva isso a sério por aqui!
O maior retorno para o seu investimento é a otimização de imagem, simplesmente porque esses arquivos são muito grandes e levam mais tempo para serem baixados.
Imagens
Você precisa otimizar as imagens antes do upload. Eu recomendo o Squoosh para isso.
Dessa forma, você não precisará de nenhum desses plug-ins de otimização de imagens, mas se você faz upload de grande quantidade, recomendo que limite as imagens a lagura máxima de 1800 pixel e recomendo a utilização de plugin para otimizar imagens… E saiba que a maioria exige que você carregue o espaço em disco de sua hospedagem, ou seja, todos os originais, além de todas as versões otimizadas são armazenadas e consumir espaço em disco sem necessidade é muito ruim.
Leia as postagens a seguir para obter mais ajuda na otimização de suas imagens.
- Por que a redução e otimização de imagens é o melhor caminho para um site rápido.
- Como testar a otimização de imagem para maior velocidade de carregamento.
- Por que o Squoosh é a minha ferramenta de otimização de imagem preferida.
Tema
O tema pode ser ruim, pesado e desorganizado e é o segundo principal problema com a velocidade de carregamento do site.
Normalmente, você só irá perceber o resultado disso na cascata de testes de velocidade. Encontraremos todos os tipos de arquivos css e js. Isso sem contar alguns arquivos de fonte, incluindo o FontAwesome, que traz uma biblioteca inteira de símbolos, mesmo se você estiver usando apenas um deles em todo o tema!
Plug-ins
Os plugins são outra grande fonte de problemas de velocidade do site devido a muitas solicitações ao banco e também de arquivos css e js. Alguns também trarão suas próprias fontes. E alguns parecem que vieram diretamente do inferno para atrapalhar a performance do site.
Segurança
Segurança e desempenho andam de mãos dadas. Você está locando um número limitado de recursos de hospedagem, como espaço em disco, CPU e memória. Se os robôs (malware, trojan, vírus, bitcoin miners, etc) estão constantemente consumindo esses recursos, haverá menos recursos para os visitantes humanos, ou seja, seu site não carregará tão rápido quanto poderia.
Hospedagem do Site
A hospedagem é definitivamente um fator de velocidade. Mas observe que ela está no final da lista e por boas razões. Não faço ideia porque tantas pessoas nos grupos de WordPress no Facebook sugerem mudar de host para melhorar a velocidade. Posso fazer um site funcionar mais rápido em qualquer host, pois a hospedagem geralmente não é o maior infrator da velocidade. Claro que ter um site lindo e super otimizado hospedado em um provedor ruim é o mesmo que andar de ferrari numa estrada de terra… Não será uma experiência tão agradável assim.
Usamos WPDASH por termos a disposição algumas vantagens inexistentes em hospedagens tradicionais como Locaweb, Hostinger, Hostgator, Uol Host, e outros. A WPDASH tem ativado em todos os planos APCu, OpCode, Versão atualizada de PHP 7.3 e 7.4, Cache no lado do servidor, Redis ou Memcache, Banco de dados em instância própria e servidores hospedados no datacenter Google Cloud Brasil, além de configuração automática para a máxima performance que a gente nem sabe que existe mas, ainda assim, você pode implementar cache no host que já contratou e que está utilizando e conseguirá resultados suficientes para seu negócio.
A outra diferença de velocidade é determinada pelo servidor web que o host usa. O Apache é mais lento que o NGINX e o Litespeed, por exemplo. E você precisará pagar um pouco mais pelos servidores mais rápidos.
No final das contas, o pior problema com a velocidade em alguns hosts é a falta de segurança adequada, suporte limitado e a dificuldade em implementar todas as medidas de segurança. Esse é o principal motivo para mudar para um host melhor. E de novo, temos a WPDASH como líder de hospedagem WordPress no Brasil, trazendo configuração de segurança pré-ativada, rastreamento diário contra vírus e malware e uma equipe de suporte técnico altamente qualificada para atender a demanda de WordPress, mas talvez não seja necessário contratar este serviço de hospedagem. Busque o melhor custo x benefício para seu próprio caso e se for necessário, experimente e compare várias opções.
Organize a ordem de carregamento
Já ouviu falar de problemas do tipo “eliminate render” ou “eliminate blocking above the fold” em um resultado de teste de performance de site? Significa que você precisa eliminar o bloqueio de renderização da página.
Isso se refere à reorganização da ordem de carregamento dos elementos de conteúdo, para que as coisas que um visitante possa ver, como textos e imagens, sejam entregues mais cedo no processo de carregamento e mais tarde.
Os 2 elementos mais comuns de bloqueio de renderização são:
- JS – Arquivos Javascript – principalmente de plugins e anúncios
- CSS – Arquivos da folha de estilos – principalmente do tema e plugins
Os arquivos JS e CSS não renderizam nada que possamos ver e portanto, são considerados elementos que causam “bloqueio de renderização”.
A referência “acima da dobra” refere-se ao que é chamado de ponto de carregamento.
Essa é a última linha que você pode ver em uma página antes de rolar.
Naturalmente, é muito mais curto em um dispositivo móvel do que em uma tela de computador.
Mas, apenas porque o conteúdo visual é mais curto no celular, isso não significa que a ordem de carregamento dos elementos de bloqueio de renderização é menor!!
É por isso que você precisa de ajuda externa para reorganizar a ordem de carregamento e colocar coisas como suas primeiras imagens na parte superior.
Por exemplo, você realmente não precisa que os arquivos js e css dos botões de compartilhamento sejam carregados antes da imagem do logotipo do cabeçalho. A propósito, nós preferimos que o logotipo seja carregado “inline” junto com o html e que seja o mais leve possível… Seguimos.
Você também não precisa que os Gravatars das pessoas que comentaram no seu blog sejam carregados antes da primeira imagem incorporada do seu blog.
Mas é exatamente isso que acontece.
De fato, você pode ver a ordem exata de cada solicitação de elemento do site na exibição em cascata dos testadores online e na seção Cabeçalhos de Solicitação desses testadores.
Adiar é uma excelente opção
Existem alguns elementos do site que precisam ser carregados imediatamente, como o arquivo CSS do seu tema.
Mas outros, como seus plug-ins de compartilhamento social, imagens secundária, vídeos e conteúdo abaixo da quebra da página podem esperar até mais tarde.
É isso que um bom plugin de otimização pode fazer por você… Mas qual deles utilizar? Novamente vale a avaliação de todas as opções de forma que você descubra qual deles resulta numa melhor performance para seu site.
Minificar e combinar
E se você pudesse armazenar todos os arquivos CSS e JS em um arquivo menor?
Pense nisso como colocar roupas de um mês em uma bolsa para dormir.
Isso se chama minificação e é uma ótima maneira de reduzir e/ou reordenar os elementos de bloqueio de renderização que diminuem o tempo de carregamento da página.
Você também pode agrupar alguns CSS, JS e até arquivos HTML para reduzir o número de solicitações necessárias para carregar o site.
Isso é chamado de combinação.
A minificação raramente interrompe e cria problemas para o carregamento do site, mas… combinar é um pouco mais complicado. Quanto mais agressivo, maior o risco de quebrar seu site.
Felizmente, a maioria dos plugins de otimização tem uma longa lista de itens que são quebrados quando combinados, para que eles saibam o que pode e o que não pode ser incluído.
E, se eles não tiverem um, oferecem uma maneira de excluir manualmente cada um dos arquivos.
Lazy Load, o tal do Carregamento Preguiçoso
Como um visitante do site pode ver apenas algumas imagens no site antes da rolagem, por que não adiar o carregamento do restante das imagens até que elas rolem?
Essa é a premissa do carregamento preguiçoso.
Ele literalmente interrompe o carregamento do arquivo de imagem até ser necessário, e isso acelera o carregamento inicial da página, pois remove essas imagens da ordem de carregamento.
Utilizar-se deste recurso é interessante para melhorar a performance de seu site.
Caching. O passo final.
Como dito antes, o armazenamento em cache consiste em salvar certos elementos do seu site, para que seu site seja carregado mais rapidamente.
Existem vários locais para armazenar esses elementos, incluindo:
- O host – também chamado de cache do lado do servidor (server-side caching)
- CDN – Rede de entrega de conteúdo, o chamado Content Delivery Network, como Cloudflare, CloudFront e KeyCDN entre outros
- O dispositivo do visitante – também chamado de cache do navegador ou client-side caching
Cache do Navegador
Esse tipo de cache informa ao dispositivo do visitante quais elementos do seu site devem ser armazenados no navegador para que ele não precise ser baixado do host ou da CDN novamente.
Os elementos em cache do navegador podem incluir:
- Fontes
- Imagem do logotipo do cabeçalho
- Alguns arquivos CSS e JS
Você também pode dizer ao dispositivo do visitante quanto tempo manter esses elementos em armazenamento.
Portanto, se o visitante acessar uma segunda página no seu site, ele carregará muito mais rápido que a primeira página, pois já tem na própria memória alguns dos elementos da página que está visitando.
E se o visitante retornar a qualquer página de seu site dentro de uma semana, esses mesmos elementos ainda estarão armazenados no dispositivo e sua página carregará mais rápido.
Cache do Host: Server-Side Caching
WordPress, temas e plugins são criados na linguagem de codificação PHP.
Seu site é composto de vários arquivos PHP, como header.php, sidebar.php, etc. E todos eles precisam ser compilados em um único documento.
Além disso, os arquivos de imagem precisam ser extraídos da pasta de uploads.
E seu conteúdo, links e outras informações precisam ser extraídos do banco de dados.
Tudo isso precisa ser compilado para ser enviado para cada visitante.
E se suas postagens mais populares pudessem ser pré-compiladas e uma cópia delas estivesse lá esperando para ser entregue para cada visitante?
Isso é chamado de pré-carregamento.
E essa cópia é uma versão em cache do servidor da sua página.
Isso não apenas acelera o carregamento da página, como também diminui a carga no seu host.
Mas não espere ver nenhuma velocidade real ou economia de recursos até que seu site receba mais de 25 mil acessos por dia.
Além disso, o pré-carregamento no host pode aumentar o consumo de recursos! Então é interessante planejar como ativará esta solução.
Cache da CDN
Se você pedir uma pizza, você prefere uma pizzaria próxima de sua casa, porque assim ela vem o mais rápido possível para que ainda esteja quente quando chegar até você, certo?
E se o seu site pudesse ser entregue ao visitante usando o mesmo princípio do pedido acima? E se pudéssemos estar mais próximos de todos os visitantes de nosso site? Isso faria com que os arquivos fossem acessados mais rapidamente, porque eliminaria todos os fios e hubs da Internet que poderiam ser sobrecarregados e diminuir a velocidade de entrega do site.
É exatamente isso que uma CDN como o Cloudflare faz. Falando de CDN, depois de ter testado centenas de opções existentes, acredito que a BunnyCDN seja a melhor delas. Tem configuração simples, é baratísssima, tem plugin para gerenciamento através do painel do WordPress e a melhor performance que encontramos.
Sobre a CloudFlare, a última vez que olhei, eles tinham mais de 200 locais espelhados ao redor do mundo e 5 apenas no Brasil. Com isso em jogo, os arquivos do seu site serão entregues em menos de 100ms. Se você quiser os recursos da versão paga como WAF, Page Rules, Suporte a otimização de imagens com conversão automática para WebP, você pode contratar um dos planos pagos, a partir de US$ 20 mensais.
A WPDASH foi a primeira empresa de hospedagem no Brasil a fazer uma parceria com a CloudFlare e disponibilizar recursos premium sem a cobrança mensal. Só por este motivo já valeria a pena hospedar o site na WPDASH (tem outras características que posso detalhar em um futuro post).
E como são uma versão em cache do seu site, a maioria está lá pré-carregada e pronta para ser usada, e não precisa extrair muito do seu host toda vez que alguém solicita uma página / postagem.
O Cloudflare também oferece muito mais segurança. Isso vai poupar muito tempo em hospedagem de recursos e tornar seu site mais rápido. Há vantagens sensacionais nos planos pagos também, como suporte a criação automática de arquivos webp, firewall de aplicação, etc.
Plugins para otimização
Existem plugins que não fazem nada além de otimização.
O plugin gratuito Autoptimize é um bom exemplo.
Autoptimize literalmente reordena os elementos de sua página garantindo que o tempo de renderização inicial seja o mais rápido possível.
Isso equivale diretamente a sua velocidade percebida ou quanto tempo um visitante tem que esperar antes de começar a ver o conteúdo do seu site.
Também influencia o tempo que o visitante deve esperar entre o momento em que vê algo e quando pode rolar para ver mais.
Ambas as coisas afetam o tempo de carregamento do site como “velocidade percebida”.
Quanto mais rápido, maior a chance de seu usuário ficar e ler seu conteúdo.
Plugins para armazenamento em cache
Existem plugins que não fazem nada além de cache de navegador.
O WP Super Cache é um deles.
Ele informa ao navegador quais elementos do site devem ser armazenados no dispositivo do visitante e por quanto tempo.
Você também pode codificar essas diretivas de cache no seu arquivo .htaccess (se o seu servidor é Apache. Se for NGINX, o arquivo de configuração é outro)
De fato, algumas pessoas fazem isso e depois usam um plugin de otimização inteligente.
Plug-ins para armazenamento em cache e otimização
Existem plugins que oferecem solução para cache e otimização.
Mas, eles podem ser difíceis de configurar corretamente.
Os métodos/plug-ins de cache e otimização devem ser coordenados com:
- Tipo do servidor host
- Cache e otimização do servidor
- Seus elementos exclusivos (css, js, etc) do site
Bons exemplos de plug-ins de cache e otimização combinados que são relativamente fáceis de configurar são:
- WP Fastest Cache Premium
- WP Rocket
Precisa de ajuda com a velocidade do seu site?
Nós oferecemos uma auditoria de site que encontra todos os problemas de desempenho no site, incluindo aqueles causados por falta de segurança adequada.
Em média, encontramos 26 problemas que nenhum plug-in ou testador pode encontrar.
Você terá seu site rápido e seguro e também saberá como mantê-lo.
