WordPress: site mais rápido com LiteSpeed Cache

Com tudo no mundo nos acostumando à máxima agilidade, não poderíamos espera resultados muito diferentes ao pensarmos que também queremos acessar sites mais rápidos.

Como mostram as pesquisas, mais da metade dos usuários tentem a fechar páginas que demorem mais de 3 segundos para exibirem o conteúdo e, quando pensamos em sites que dependem das visitas para ter sua lucratividade, isso poderia arruinar completamente o site, causando grandes prejuízos.

Pensando em contornar problemas assim, são desenvolvidas diversas ferramentas que visam melhorar os tempos de carregamento, além de novas funções e recursos que ajudam a complementar o site para uma maior velocidade.

Com esse intuito, foi criado o LiteSpeed Cache, um plugin para WordPress desenvolvido pela LiteSpeed, a mesma que também é responsável pelo web server que já abordamos em um outro artigo.

Continue conosco até o fim para entender o que é o plugin, como ele funciona e algumas dicas de configuração para deixar seu site WordPress mais rápido.

Sumário

1. Por que otimizar meu site?
2. Como testar a velocidade do meu site?
3. O que é o LiteSpeed Cache?
4. Como o LiteSpeed Cache funciona?
5. Como instalar em meu site?
6. Como deixar o site mais rápido com LiteSpeed?
7. Conclusão

Por que devo otimizar meu site?

Como dissemos acima, os usuários estão cada vez mais buscando por conteúdos que são entregues de maneira mais rápida, gerando uma experiência de navegação muito melhor.

Isso justifica, por exemplo, a crescente escalada de popularidade do Tik Tok, que permite que vídeos curtos sejam vistos mais rapidamente, aumentando a quantidade de vídeos que o usuário vê em um mesmo espaço de tempo.

O motivo dessa breve comparação é te mostrar que principalmente quando site é sua fonte de renda, o tempo em que ele carrega pode influenciar no quanto você pode faturar com ele.

Em lojas que apresentem travamentos, por exemplo, qualquer usuário não ficaria esperando a exibição do produto, ele imediatamente fecharia e partiria para uma concorrente. E é isso que precisamos evitar ao pensar em aumentar a velocidade de navegação.

Outro fator de extrema importância, que pode igualmente afetar no seu faturamento é o posicionamento do seu site em motores de busca. Mas por que estamos falando de SEO em um artigo de otimização de site?

Bom, por incrível que pareça, motores como o Google presam bastante pela experiência que o visitante tem ao acessar seu site e, por isso, um dos critérios de rankeamento das páginas é justamente quanto tempo ele leva para carregar, além de como ele se comporta com dispositivos móveis (como celulares e tablets).

Essa não é uma métrica que atingir vai garantidamente te colocar em posições superiores, já que não é de grande influência. Contudo, sites que lidam diariamente com SEO avançado e que cada palavra na página é sagrada para o rankeamento, quantos mais critérios atingidos para um rankeamento mais eficaz, melhor.

Tendo em vista isso, temos, em resumo, três fatores que devem te motivar a otimizar seu site:

• Experiência do usuário: para que o visitante tenha navegação fluida e possa consumir mais, seja em compras ou em tempo na página;
• Faturamento: visto que em lojas e sites que exibem anúncios, os visitantes devem tender a fecharem as páginas caso o site demore a carregar, o que pode acarretar uma série de prejuízos;
• Rankeamento: já que mesmo não sendo algo que gera grandes recompensas nos motores de busca, ainda sim pode te ajudar a conseguir uma reputação melhor nesse sentido, incrementando ligeiramente seu posicionamento.

Como medir a velocidade de carregamento?

Uma boa forma de ver possíveis pontos de melhoria de tempo de carregamento das páginas de seu site é através das várias ferramentas que fazem testes de performance no site.

Algumas das mais conhecidas atualmente são o GTMetrix, PageSpeed e WebDev, sendo estes dois últimos mantidos pela própria Google.

Os testes do GTMetrix são os mais feitos por boa parte dos usuários, mostrando resultados simples e dicas pontuais de melhoria que, de fato, ajudam a ter um site mais rápido.

No PageSpeed e WebDev, temos algumas avaliações para a performance do site em dispositivos mobile e em desktops, mas os parâmetros por muitas vezes são bem difíceis de se ajustar para que seja possível atingir as notas mais altas.

Nestes testes, o GTMetrix tem um recurso bem legal, que é a possibilidade de usar servidores no Brasil para fazer o teste, ilustrando um resultado mais condizente com a realidade dos nossos visitantes. Para isso, será necessário fazer um breve cadastro no site deles.

Enquanto isso, nos outros dois testes que citamos, os servidores estão localizados na América do norte, fazendo com que o resultado que vemos nos testes não seja totalmente condizente com a experiência que um usuário no Brasil veria ao acessar seu site.

Vale ressaltar que as notas do PageSpeed e WebDev são muito difíceis de se atingir de maneira orgânica, sem que seja feito algo que “engane” o teste de alguma forma. Sendo necessário um bom conhecimento técnico para isso.

De maneira geral, contar com o auxílio de um bom desenvolvedor WordPress é a melhor forma de identificar quais são os pontos de ajuste mais importante do site, para fazer um ajuste fino e conseguir torna-lo mais rápido para os visitantes.

O que é o plugin LiteSpeed Cache?

Bom, como dissemos acima, trata-se de um plugin para WordPress, desenvolvido por uma já renomada empresa que atua em diversas áreas relacionadas a sites, com painel de controle, sistemas de cache e servidor Web.

No caso do plugin para WP, é uma aplicação totalmente gratuita, que pode ser instalado em quase todos os sites que utilizam a plataforma.

Isso acontece porque o Plugin é desenvolvido para interagir direto com o servidor web, formulando todo o cache e facilitando muito mais a comunicação dos recursos do site com o servidor em si, tornando o processo mais eficiente que na maioria de seus concorrentes convencionais.

Com isso, o LiteSpeed Cache é capaz de gerar cache rapidamente, além de contar com diversos recursos de integração que permitem limpá-lo de forma muito simples dentro do painel de gerenciamento, inclusive o cache gerado pela própria hospedagem do site.

É possível dizer que, atualmente, ele é um dos plugins mais completos quando falamos de otimização de sites. Talvez, o mais completo dentre todos.

Por conta de sua grande disponibilidade de parâmetros facilmente configuráveis, é possível atingir níveis muito bons de refinamento da performance e velocidade, caso o usuário tenha conhecimento mais técnico para analisar corretamente o site e executar os devidos testes e ajustes dentro do plugin.

Como o plugin LiteSpeed Cache funciona?

Além de fazer o cache do site, o LiteSpeed também tem diversos sistemas de otimização para páginas, JavaScript, CSS, HTML, otimização de imagens, cache de objetos em Redis e Memcached, integração com CDNs e, até mesmo, conta com CDN próprio, o Quic.CLOUD.

Além disso, existem outros recursos dentro do plugin, mas que são muitos e vários deles exigem bastante conhecimento técnico para que a otimização seja feita sem prejudicar o site.

Por serem muitos recursos, nosso artigo focará apenas nos que são mais fáceis de usuários mais leigos configurarem e que devem ajudar a obter maior velocidade de carregamento.

Como é sempre bom lembrar, não existe mágica ou fórmula perfeita quando falamos de otimização de sites, pois as variáveis são muitas é impossível imaginar ou prever o que uma configuração pode causar no site, já que algumas funções podem “quebrar” seu site, desformatando a parte visual.

Por isso, recomendamos fortemente que faça vários testes e retestes com as funções do plugin até achar a combinação de configurações que funciona melhor em seu caso. Desse modo, vamos explicar os recursos um a um, para que você entenda como eles funcionam e possa tomar as melhores decisões.

Como instalar em meu site?

Por ser um plugin gratuito, é possível encontra-lo para instalação direto na loja de plugins do WordPress, dentro de seu wp-admin você poderá fazer rapidamente todo o processo, que é muito simples.

Para realizar a instalação, siga estes passos:

1. Faça login em seu WP Admin, em uma conta que possua permissões suficientes para instalar um plugin;

• Com o painel aberto, localize a guia “Plugins” e siga para “Adicionar novo”;

• Na barra de pesquisa da loja, busque por “litespeed” e clique em “Instalar” quando localizar o plugin LiteSpeed Cache;

• Uma vez que a instalação esteja totalmente feita, prossiga clicando em “Ativar”.

Feito isso, o plugin estará totalmente instalado e ativo em seu site, prontinho para começar a receber as primeiras configurações de otimização.

Como deixar meu WordPress mais rápido com LiteSpeed?

Bom, o processo de otimização é um pouco trabalhoso, devemos adiantar. É algo que envolve muitos testes de refinamento, para chegar em um resultado mais acurado, mas alguns pequenos ajustes simples já podem te ajudar a obter um grande ganho de velocidade.

Por isso, vamos te mostrar aqui as principais formas simples de otimizar seu site WordPress com o LiteSpeed Cache.

Reforçando, não existe caminho mágico para a otimização, e as configurações que funcionam em um site, podem não funcionar em outro. Então, sempre teste bastante as configurações até chegar no resultado desejado.

E tudo que diremos aqui tem como intuito principal ajudar usuários mais leigos, por isso teremos um conteúdo ligeiramente reduzido, visto que o plugin LiteSpeed Cache é extremamente denso, contando com mais de uma centena de diferentes parâmetros de configuração.

Para que o artigo fique mais organizado, didático e dinâmico, vamos separar alguns recursos em tópicos, para que você consiga acompanhar melhor cada uma das etapas que seguiremos. Vamos lá:

Configurando o cache

Aqui, temos uma das partes mais importantes para gerar uma melhor sensação de velocidade para seus visitantes.

Caso não saiba o que é o cache, ele consiste em armazenar previamente uma cópia estática de todo o conteúdo, permitindo que o visitante acesse essa cópia mais rapidamente, liberando processamento no servidor.

Com essa economia e dinâmica de otimização, você será capaz de ter uma quantidade muito maior de acessos simultâneos em uma mesma página.

Configuração inicial

Localize o plugin “LiteSpeed Cache” na guia esquerda e busque pela opção “General”. Nela, precisaremos fazer alguns ajustes iniciais que serão importantes para o correto funcionamento do nosso plugin nas próximas etapas.

Para utilizarmos todos os recursos que o plugin pode nos oferecer, primeiramente devemos gerar a chave de domínio, clicando em “Request Domain Key”

Com isso feito, poderemos usar alguns recursos de CDN, conversão e otimização de imagens, além de contar com outras ferramentas para otimização de CSS e UCSS.

Logo abaixo, temos as opções “Guest mode” e “Guest optimization”, que são especificamente para gerar uma página em HTML que será exibida para ferramentas de testes de velocidade.

Essa página gerada será muito mais leve e otimizada, mas tudo isso é feito artificialmente. Seu intuito é justamente conseguir notas mais elevadas em testes, mas não implica necessariamente em melhoria de velocidade no site.

Além disso, é possível que essas opções causem algum problema de CSS/JS em seu site, por isso é importante fazer alguns testes antes de colocar em produção.

Aba Cache

Agora, vamos para o tutorial em si. Com seu WP Admin aberto novamente, localize na guia esquerda a aba “LiteSpeed Cache”, para seguirmos com a configuração. Dentro dela, abra a guia “Cache” para prosseguirmos com os passos baixo:

Ao abrir a guia de Cache, chegaremos primeiro na aba principal, também chamada Cache. Nela, teremos os seguintes parâmetros (nas imagens, temos nossas recomendações de como configurar cada um):

• Enable Cache: permite ativar o sistema de cache do LiteSpeed, e irá interagir com as demais configurações referentes ao cache;

• Cache Logged-in users: quando ativada, fará com que o plugin ative o cache também para usuários conectados. Essa é uma configuração totalmente opcional, de acordo com o cenário e necessidade de seu site;

• Cache REST API: essa opção irá colocar no cache todas as requisições de API relacionadas ao funcionamento interno do WordPress;

• Cache PHP Resources: fará com que algumas requisições de plugins, relacionadas a arquivos PHP sejam armazenadas no cache, permitindo que elas não precisem ser processadas repetidas vezes;

• Cache Mobile: essa é uma das opções mais importantes, que permite que seja gerado um cache também para dispositivos mobile, melhorando para eles o tempo de carregamento.

Um adendo interessante é que, no caso do cache mobile, ele funciona separadamente do cache principal, isto é, o LiteSpeed necessita que um acesso primário seja feito em uma página, para que ela seja colocada em cache. Quando isso acontece, os outros acessos seguintes já acessam direto do conteúdo em cache.

Quando há o cache separado, usuários de PC, por exemplo, não geram o cache para celulares e tablets, sendo necessário que cada tipo de dispositivo de navegação (mobile/desktop) faça o primeiro acesso para iniciar o processo de cache das páginas, que é instantâneo.

Aba TTL

Agora, seguindo para a guia “TTL”, iremos definir alguns tempos de expiração do cache. Quando o TTL expira, o cache será automaticamente limpo e renovado, sendo completamente gerado novamente.

Aqui, é importante prestarmos atenção em que tipo de site estamos atuando. Se é um blog, que tem conteúdos diários, seu cache não poderá ter uma expiração de data longa.

Se é um site mais estático, que recebe pouco conteúdo e atualizações, a recomendação é deixar um TTL (Tempo de vida, do inglês) maior, como algo a partir de uma semana. Agora, se o site realmente não recebe nenhuma atualização visual ou de conteúdo, é possível adicionar tempo de vida de um ano.

Os parâmetros de TTL são sempre configurados em segundos, para uma maior precisão. Ao lado, você verá quanto tempo em dias/semanas/meses corresponde a quantidade de segundos que inseriu, e temos os seguintes parâmetros:

• Public Cache: será o tempo de armazenamento do cache para páginas públicas;
• Private Cache: é referente ao tempo de armazenamento do cache de páginas privadas;
• Front Page: será configurado para o tempo de vida do cache especificamente da página principal do site;
• Feed: é referente a quanto tempo será armazenado o conteúdo em cache de seu feed;
• REST: diz respeito ao tempo em que será armazenado o cache das requisições feitas pela API do WordPress.

Aba Purge

Agora, vamos para a aba seguinte “Purge”, que define os parâmetros de exclusão do cache mediante algumas ações específicas. E, aqui, temos as seguintes opções:

• Purge all on upgrade: fará com que o seu cache seja automaticamente removido sempre que um tema, plugin ou o próprio WordPress for instalado ou atualizado, forçando a renovação do cache;

• Auto purge rules for publish/update: permitirá com que o cache seja renovado quando as opções que estiverem marcadas forem executadas, como a adição de um novo post, por exemplo;

• Serve stale: é para permitir que conteúdo não atualizado seja entregue. Caso seu cache esteja sendo processado, por exemplo, enquanto um visitante acessa a página, o último cache gerado será disponibilizado para ele. Se não, ele acessará normalmente processando a visita sem cache;

Como aba seguinte, agora temos a “Excludes”. Nesta, passaremos um pouco mais rapidamente, já que consiste em especificar páginas e requisições que não devem fazer parte do conteúdo armazenado em cache. Nela, temos os seguintes parâmetros:

• URLS;
• Query Strings;
• Categorias;
• Tags;
• Cookies;
• Agentes de usuário;
• Funções do WP (Admin, editor, etc).

Aba Object

Um pouco mais à frente, vamos direto para a aba “Object”, que diz respeito ao cache de objetos, muito importante para sites em WordPress.

O cache de objetos tem relação com as consultas ao banco de dados e, ao ativá-lo, você poderá armazenar as consultas ao banco, permitindo que o site não precise refazê-la várias vezes.

E, nessa guia, temos as seguintes opções:

• Object cache: permite ativar as funções do cache de objetos;

• Method: pode variar de acordo com seu provedor de hospedagem, e te permitirá escolher entre o Memcached e o Redis, ambas extensões para o PHP. Nos servidores da Kangaroo, recomendamos utilizar o Redis para maior eficiência;
• Host e Port: aqui, você configurará seu host do cache de objeto (normalmente, será localhost) e a porta de funcionamento, sendo 11211 para Memcached e 6379 para o Redis;

Aba Browser

Aqui, vamos definir se o nosso cache também vai interagir com o navegador do usuário e, se sim, por quanto tempo ele ficará armazenado lá.

Essa é uma boa forma de poupar ainda mais recursos do servidor, já que poderemos armazenar algumas informações direto no dispositivo do usuário, tornando a navegação ainda mais rápida e leve ao acessar o site.

1. Para ativar essa configuração, vamos marcar “On” em “Browser cache”.

• Agora, para configurar o tempo em que ele será armazenado, vamos inserir o valor em segundos em “Browser Cache TTL”. Como o cache do navegador será limpo junto com o cache do site, podemos deixar um cache maior aqui, como algo perto de um mês.

Aba Advanced

Por último, vamos fazer uma única configuração extra nessa aba, que será ativar a função “Instant click” marcando-a para “On”. Através dela, será possível que as páginas que o visitante do site comecem a ser pré-carregadas assim que ele passa sobre o link delas.

Claro, isso gera algumas requisições extras no servidor, podendo aumentar um pouco a carga de processamento, mas ajuda a gerar uma melhor sensação de velocidade percebida no carregamento.

Configurando otimizações de CSS

Uma das principais formas de otimização do site, assim como os tópicos a seguir, é a otimização dos arquivos de CSS, seja através de compressões ou da melhoria de entrega desses recursos.

Por ser de tanta importância, podemos configurar alguns desses parâmetros para que o site tenha um melhor carregamento. Dentre as principais configurações, estão os seguintes parâmetros:

• CSS Minify: faz a redução dos arquivos CSS, retirando a identação, que é a organização dos arquivos, retirando os espaços, o que permite que o arquivo fique com um tamanho menor, proporcionando uma maior velocidade em processá-los;

• CSS Combine: fará com que os seus arquivos CSS sejam unificados em um só, reduzindo a quantidade de requisições que seu servidor fará, mas aumentando o tempo de carregamento desse único arquivo;

• Font Display Optimzation: essa opção, quando configurada para “SWAP” permitirá que as fontes sejam escritas genericamente enquanto não forem totalmente carregadas e, quando finalmente carregarem, o resultado visível do texto será alterado corretamente para a fonte certa.

Com a configuração de combinação dos arquivos CSS, é possível que ocorram falhas no CSS do site, causando algum problema de formação do visual da página. Por isso, atente-se para reverter as alterações caso o resultado não seja o esperado.

Otimizações de código JavaScript

Possivelmente, essa será a parte da configuração que mais vai influenciar no tempo real do carregamento da página, já que na maior parte dos sites as requisições em JavaScript são o que demora mais tempo para completar a execução.

Dito isso, tente sempre manter um número mínimo dessas requisições em seu site, utilizando apenas o que for realmente necessário.

Algumas boas dicas para reduzir essas requisições é eliminar plugins que não estejam em uso, além de remover também solicitações JS do tema que não sejam úteis.

Dadas as dicas, vamos às opções de configuração:

• JS Minify: com essa opção, poderemos reduzir bastante o tamanho dos arquivos JS, já que o código será aglutinado de modo que não fiquem espaços em branco, o que permitirá maior velocidade no processamento da requisição;

• JS Combine: esse parâmetro pode causar algum mau funcionamento no site caso algum script necessário quebre no processo, mas configurá-lo irá reduzir a quantidade de scripts que a página utiliza, carregando tudo em um único arquivo de uma vez só;

• JS Combine External and Inline: quando a opção de JS Combine estiver ativa, essa configuração fará com que o código seja colocado dentro da própria página, carregando internamente e ajudando a reduzir possíveis problemas de carregamento causados pela configuração anterior;

• Load JS Deferred:  aqui temos a configuração que mais deve alterar a percepção de tempo de carregamento da sua página, e temos duas opções de recurso, o Deferred e o Delayed.

• Deferred: fará com que as requisições JS sejam executadas apenas após a interação do usuário com a página, isto é, quando ele movimentar o mouse, clicar em algo ou mover a página subindo ou descendo;
  • Delayed: colocará o carregamento das requisições JS para serem executadas apenas após o total processamento das outras requisições.

A configuração do método Delayed ou Deferred é o que causará a maior sensação de velocidade ao acessar o site, na maioria dos casos.

Para a maioria dos sites, a opção “Delayed” terá resultados melhores, já que nela temos uma incidência menor de problemas relacionados ao carregamento de JS.

Contudo, vale o teste para verificar se o carregamento após a interação do usuário, o Deferred, tem bons resultados para ti. Como ele pode causar quebras do site mais facilmente, acaba sendo menos recomendado, mas isso depende de todo o seu conjunto de temas e plugins no site.

Otimizações de carregamento do HTML

Por último, chegamos à guia de configurações do HTML, que também são de grande valia para o ganho de velocidade no carregamento das nossas páginas.

Para essa aba, vamos dar mais atenção às seguintes funcionalidades:

• HTML Minify: fará uma redução do arquivo HTML da página, removendo espaços em branco e reduzindo a identação, fazendo com que o arquivo fique mais leve e, consequentemente, seja carregado mais rapidamente;

• DNS Prefetch: caso seu site faça conexões com links externos, colocar o LINK/HOST em prefetch ajudará a carregá-las mais rapidamente, uma vez que essa configuração permitirá estabelecer a conexão previamente, tornando mais ágil a comunicação com a fonte externa. Para essa configuração, devemos inserir um host por linha;

• DNS Prefetch Control: com esse parâmetro, poderemos fazer com que o site se comunique mais rapidamente com as fontes externas de arquivos JS, CSS, etc., para que tais requisições sejam executadas e carregadas mais rápido;

•  Load Google Fonts Asynchronously: fará com que todas as fontes que vêm do Google Fonts sejam carregadas apenas após o processamento completo da página, causando um efeito melhor de carregamento;

Conclusão

Ao fim deste artigo, agora esperamos que você tenha compreendido algumas das principais funções do LiteSpeed que podem te ajudar a atingir melhores resultados de performance em seu WordPress, ajudando a deixar seu site bem mais rápido.

Como dissemos por todo o post, infelizmente não há um segredo, não há formulação mágica que sirva para todos os sites e atinja um resultado rapidamente, tudo depende de muitos testes para ver o que se encaixa melhor com seu site, visto a quantidade de variáveis.

Em seus testes, não se assuste se o site parecer quebrado em algum momento, por conta de algum arquivo CSS ou JS que foi alterado nas otimizações, é perfeitamente normal e completamente reversível. Não desista, siga nossas dicas e terá resultados bem interessantes =)

Afinal, ter a velocidade de carregamento pode te ajudar a faturar mais e, em momentos delicados como este, é sempre bom contar com rendimentos extras, não é mesmo?

Esperamos que todas as informações aqui possam te ajudar a atingir os resultados desejados, qualquer dúvida, nosso time de suporte estará prontinho para te atender. Ficaremos por aqui e até a próxima o/