Continue conosco at\u00e9 o fim para entender o que \u00e9 o plugin, como ele funciona e algumas dicas de configura\u00e7\u00e3o para deixar seu site WordPress mais r\u00e1pido.<\/p>\n\n\n\n
Sum\u00e1rio<\/h3>\n\n\n\n- Por que otimizar meu site?<\/a><\/li>
- Como testar a velocidade do meu site?<\/a><\/li>
- O que \u00e9 o LiteSpeed Cache?<\/a><\/li>
- Como o LiteSpeed Cache funciona?<\/a><\/li>
- Como instalar em meu site?<\/a><\/li>
- Como deixar o site mais r\u00e1pido com LiteSpeed?<\/a><\/li>
- Conclus\u00e3o<\/a><\/li><\/ol>\n\n\n\n
Por que devo otimizar meu site?<\/h2>\n\n\n\n
Como dissemos acima, os usu\u00e1rios est\u00e3o cada vez mais buscando por conte\u00fados que s\u00e3o entregues de maneira mais r\u00e1pida, gerando uma experi\u00eancia de navega\u00e7\u00e3o muito melhor.<\/p>\n\n\n\n
Isso justifica, por exemplo, a crescente escalada de popularidade do Tik Tok, que permite que v\u00eddeos curtos sejam vistos mais rapidamente, aumentando a quantidade de v\u00eddeos que o usu\u00e1rio v\u00ea em um mesmo espa\u00e7o de tempo.<\/p>\n\n\n\n
O motivo dessa breve compara\u00e7\u00e3o \u00e9 te mostrar que principalmente quando site \u00e9 sua fonte de renda, o tempo em que ele carrega pode influenciar no quanto voc\u00ea pode faturar com ele.<\/p>\n\n\n\n
Em lojas que apresentem travamentos, por exemplo, qualquer usu\u00e1rio n\u00e3o ficaria esperando a exibi\u00e7\u00e3o do produto, ele imediatamente fecharia e partiria para uma concorrente. E \u00e9 isso que precisamos evitar ao pensar em aumentar a velocidade de navega\u00e7\u00e3o.<\/p>\n\n\n\n
Outro fator de extrema import\u00e2ncia, que pode igualmente afetar no seu faturamento \u00e9 o posicionamento do seu site em motores de busca. Mas por que estamos falando de SEO em um artigo de otimiza\u00e7\u00e3o de site?<\/p>\n\n\n\n
Bom, por incr\u00edvel que pare\u00e7a, motores como o Google presam bastante pela experi\u00eancia que o visitante tem ao acessar seu site e, por isso, um dos crit\u00e9rios de rankeamento das p\u00e1ginas \u00e9 justamente quanto tempo ele leva para carregar, al\u00e9m de como ele se comporta com dispositivos m\u00f3veis (como celulares e tablets).<\/p>\n\n\n\n
Essa n\u00e3o \u00e9 uma m\u00e9trica que atingir vai garantidamente te colocar em posi\u00e7\u00f5es superiores, j\u00e1 que n\u00e3o \u00e9 de grande influ\u00eancia. Contudo, sites que lidam diariamente com SEO avan\u00e7ado e que cada palavra na p\u00e1gina \u00e9 sagrada para o rankeamento, quantos mais crit\u00e9rios atingidos para um rankeamento mais eficaz, melhor.<\/p>\n\n\n\n
Tendo em vista isso, temos, em resumo, tr\u00eas fatores que devem te motivar a otimizar seu site:<\/p>\n\n\n\n
- Experi\u00eancia do usu\u00e1rio<\/strong>: para que o visitante tenha navega\u00e7\u00e3o fluida e possa consumir mais, seja em compras ou em tempo na p\u00e1gina;<\/li>
- Faturamento<\/strong>: visto que em lojas e sites que exibem an\u00fancios, os visitantes devem tender a fecharem as p\u00e1ginas caso o site demore a carregar, o que pode acarretar uma s\u00e9rie de preju\u00edzos;<\/li>
- Rankeamento<\/strong>: j\u00e1 que mesmo n\u00e3o sendo algo que gera grandes recompensas nos motores de busca, ainda sim pode te ajudar a conseguir uma reputa\u00e7\u00e3o melhor nesse sentido, incrementando ligeiramente seu posicionamento.<\/li><\/ul>\n\n\n\n
Como medir a velocidade de carregamento?<\/h2>\n\n\n\n
Uma boa forma de ver poss\u00edveis pontos de melhoria de tempo de carregamento das p\u00e1ginas de seu site \u00e9 atrav\u00e9s das v\u00e1rias ferramentas que fazem testes de performance no site.<\/p>\n\n\n\n
Algumas das mais conhecidas atualmente s\u00e3o o GTMetrix<\/a>, PageSpeed<\/a> e WebDev<\/a>, sendo estes dois \u00faltimos mantidos pela pr\u00f3pria Google.<\/p>\n\n\n\nOs testes do GTMetrix s\u00e3o os mais feitos por boa parte dos usu\u00e1rios, mostrando resultados simples e dicas pontuais de melhoria que, de fato, ajudam a ter um site mais r\u00e1pido.<\/p>\n\n\n\n
No PageSpeed e WebDev, temos algumas avalia\u00e7\u00f5es para a performance do site em dispositivos mobile e em desktops, mas os par\u00e2metros por muitas vezes s\u00e3o bem dif\u00edceis de se ajustar para que seja poss\u00edvel atingir as notas mais altas.<\/p>\n\n\n\n![\"gtmetrix\"](\"https:\/\/kangaroo.host\/blog\/wp-content\/uploads\/2024\/11\/gtmetrix.jpg\")
<\/figure>\n\n\n\nNestes testes, o GTMetrix tem um recurso bem legal, que \u00e9 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\u00e1 necess\u00e1rio fazer um breve cadastro no site deles.<\/p>\n\n\n\n
Enquanto isso, nos outros dois testes que citamos, os servidores est\u00e3o localizados na Am\u00e9rica do norte, fazendo com que o resultado que vemos nos testes n\u00e3o seja totalmente condizente com a experi\u00eancia que um usu\u00e1rio no Brasil veria ao acessar seu site.<\/p>\n\n\n\n
Vale ressaltar que as notas do PageSpeed e WebDev s\u00e3o muito dif\u00edceis de se atingir de maneira org\u00e2nica, sem que seja feito algo que \u201cengane\u201d o teste de alguma forma. Sendo necess\u00e1rio um bom conhecimento t\u00e9cnico para isso.<\/p>\n\n\n\n![\"webdev\"](\"https:\/\/kangaroo.host\/blog\/wp-content\/uploads\/2024\/11\/webdev.jpg\")
<\/figure>\n\n\n\nDe maneira geral, contar com o aux\u00edlio de um bom desenvolvedor WordPress \u00e9 a melhor forma de identificar quais s\u00e3o os pontos de ajuste mais importante do site, para fazer um ajuste fino e conseguir torna-lo mais r\u00e1pido para os visitantes.<\/p>\n\n\n\n
O que \u00e9 o plugin LiteSpeed Cache?<\/h2>\n\n\n\n
Bom, como dissemos acima, trata-se de um plugin para WordPress, desenvolvido por uma j\u00e1 renomada empresa que atua em diversas \u00e1reas relacionadas a sites, com painel de controle, sistemas de cache e servidor Web.<\/p>\n\n\n\n
No caso do plugin para WP, \u00e9 uma aplica\u00e7\u00e3o totalmente gratuita, que pode ser instalado em quase todos os sites que utilizam a plataforma. <\/p>\n\n\n\n
Isso acontece porque o Plugin \u00e9 desenvolvido para interagir direto com o servidor web, formulando todo o cache e facilitando muito mais a comunica\u00e7\u00e3o dos recursos do site com o servidor em si, tornando o processo mais eficiente que na maioria de seus concorrentes convencionais.<\/p>\n\n\n\n
Com isso, o LiteSpeed Cache \u00e9 capaz de gerar cache rapidamente, al\u00e9m de contar com diversos recursos de integra\u00e7\u00e3o que permitem limp\u00e1-lo de forma muito simples dentro do painel de gerenciamento, inclusive o cache gerado pela pr\u00f3pria hospedagem do site.<\/p>\n\n\n\n
\u00c9 poss\u00edvel dizer que, atualmente, ele \u00e9 um dos plugins mais completos quando falamos de otimiza\u00e7\u00e3o de sites. Talvez, o mais completo dentre todos.<\/p>\n\n\n\n
Por conta de sua grande disponibilidade de par\u00e2metros facilmente configur\u00e1veis, \u00e9 poss\u00edvel atingir n\u00edveis muito bons de refinamento da performance e velocidade, caso o usu\u00e1rio tenha conhecimento mais t\u00e9cnico para analisar corretamente o site e executar os devidos testes e ajustes dentro do plugin.<\/p>\n\n\n\n
Como o plugin LiteSpeed Cache funciona?<\/h2>\n\n\n\n
Al\u00e9m de fazer o cache do site, o LiteSpeed tamb\u00e9m tem diversos sistemas de otimiza\u00e7\u00e3o para p\u00e1ginas, JavaScript, CSS, HTML, otimiza\u00e7\u00e3o de imagens, cache de objetos em Redis e Memcached, integra\u00e7\u00e3o com CDNs e, at\u00e9 mesmo, conta com CDN pr\u00f3prio, o Quic.CLOUD.<\/p>\n\n\n\n
Al\u00e9m disso, existem outros recursos dentro do plugin, mas que s\u00e3o muitos e v\u00e1rios deles exigem bastante conhecimento t\u00e9cnico para que a otimiza\u00e7\u00e3o seja feita sem prejudicar o site.<\/p>\n\n\n\n
Por serem muitos recursos, nosso artigo focar\u00e1 apenas nos que s\u00e3o mais f\u00e1ceis de usu\u00e1rios mais leigos configurarem e que devem ajudar a obter maior velocidade de carregamento.<\/p>\n\n\n\n
Como \u00e9 sempre bom lembrar, n\u00e3o existe m\u00e1gica ou f\u00f3rmula perfeita quando falamos de otimiza\u00e7\u00e3o de sites, pois as vari\u00e1veis s\u00e3o muitas \u00e9 imposs\u00edvel imaginar ou prever o que uma configura\u00e7\u00e3o pode causar no site, j\u00e1 que algumas fun\u00e7\u00f5es podem \u201cquebrar\u201d seu site, desformatando a parte visual.<\/p>\n\n\n\n
Por isso, recomendamos fortemente que fa\u00e7a v\u00e1rios testes e retestes com as fun\u00e7\u00f5es do plugin at\u00e9 achar a combina\u00e7\u00e3o de configura\u00e7\u00f5es que funciona melhor em seu caso. Desse modo, vamos explicar os recursos um a um, para que voc\u00ea entenda como eles funcionam e possa tomar as melhores decis\u00f5es.<\/p>\n\n\n\n
Como instalar em meu site?<\/h2>\n\n\n\n
Por ser um plugin gratuito, \u00e9 poss\u00edvel encontra-lo para instala\u00e7\u00e3o direto na loja de plugins do WordPress, dentro de seu wp-admin voc\u00ea poder\u00e1 fazer rapidamente todo o processo, que \u00e9 muito simples.<\/p>\n\n\n\n
Para realizar a instala\u00e7\u00e3o, siga estes passos:<\/p>\n\n\n\n
- Fa\u00e7a login em seu WP Admin, em uma conta que possua permiss\u00f5es suficientes para instalar um plugin;<\/li><\/ol>\n\n\n\n
![\"Tela](\"https:\/\/kangaroo.host\/blog\/wp-content\/uploads\/2024\/11\/Tela-login-acesso-wp-admin.jpg\")
<\/figure>\n\n\n\n- Com o painel aberto, localize a guia \u201cPlugins\u201d e siga para \u201cAdicionar novo\u201d;<\/li><\/ul>\n\n\n\n
![\"Adicionar](\"https:\/\/kangaroo.host\/blog\/wp-content\/uploads\/2024\/11\/Adicionar-novo-plugin.png\")
<\/figure>\n\n\n\n- Na barra de pesquisa da loja, busque por \u201clitespeed\u201d e clique em \u201cInstalar\u201d quando localizar o plugin LiteSpeed Cache;<\/li><\/ul>\n\n\n\n
![\"Pesquisa](\"https:\/\/kangaroo.host\/blog\/wp-content\/uploads\/2024\/11\/Pesquisando-plugin-LiteSpeed-Cache.jpg\")
<\/figure>\n\n\n\n- Uma vez que a instala\u00e7\u00e3o esteja totalmente feita, prossiga clicando em \u201cAtivar\u201d.<\/li><\/ul>\n\n\n\n
![\"Plugin](\"https:\/\/kangaroo.host\/blog\/wp-content\/uploads\/2024\/11\/Plugin-LiteSpeed-Cache.jpg\")
<\/figure>\n\n\n\nFeito isso, o plugin estar\u00e1 totalmente instalado e ativo em seu site, prontinho para come\u00e7ar a receber as primeiras configura\u00e7\u00f5es de otimiza\u00e7\u00e3o.<\/p>\n\n\n\n
Como deixar meu WordPress mais r\u00e1pido com LiteSpeed?<\/h2>\n\n\n\n
Bom, o processo de otimiza\u00e7\u00e3o \u00e9 um pouco trabalhoso, devemos adiantar. \u00c9 algo que envolve muitos testes de refinamento, para chegar em um resultado mais acurado, mas alguns pequenos ajustes simples j\u00e1 podem te ajudar a obter um grande ganho de velocidade.<\/p>\n\n\n\n
Por isso, vamos te mostrar aqui as principais formas simples de otimizar seu site WordPress com o LiteSpeed Cache.<\/p>\n\n\n\n
Refor\u00e7ando, n\u00e3o existe caminho m\u00e1gico para a otimiza\u00e7\u00e3o, e as configura\u00e7\u00f5es que funcionam em um site, podem n\u00e3o funcionar em outro. Ent\u00e3o, sempre teste bastante as configura\u00e7\u00f5es at\u00e9 chegar no resultado desejado.<\/p>\n\n\n\n
E tudo que diremos aqui tem como intuito principal ajudar usu\u00e1rios mais leigos, por isso teremos um conte\u00fado ligeiramente reduzido, visto que o plugin LiteSpeed Cache \u00e9 extremamente denso, contando com mais de uma centena de diferentes par\u00e2metros de configura\u00e7\u00e3o.<\/p>\n\n\n\n
Para que o artigo fique mais organizado, did\u00e1tico e din\u00e2mico, vamos separar alguns recursos em t\u00f3picos, para que voc\u00ea consiga acompanhar melhor cada uma das etapas que seguiremos. Vamos l\u00e1:<\/p>\n\n\n\n
Configurando o cache<\/h3>\n\n\n\n
Aqui, temos uma das partes mais importantes para gerar uma melhor sensa\u00e7\u00e3o de velocidade para seus visitantes.<\/p>\n\n\n\n
Caso n\u00e3o saiba o que \u00e9 o cache, ele consiste em armazenar previamente uma c\u00f3pia est\u00e1tica de todo o conte\u00fado, permitindo que o visitante acesse essa c\u00f3pia mais rapidamente, liberando processamento no servidor.<\/p>\n\n\n\n
Com essa economia e din\u00e2mica de otimiza\u00e7\u00e3o, voc\u00ea ser\u00e1 capaz de ter uma quantidade muito maior de acessos simult\u00e2neos em uma mesma p\u00e1gina.<\/p>\n\n\n\n
Configura\u00e7\u00e3o inicial<\/h3>\n\n\n\n
Localize o plugin \u201cLiteSpeed Cache\u201d na guia esquerda e busque pela op\u00e7\u00e3o \u201cGeneral\u201d. Nela, precisaremos fazer alguns ajustes iniciais que ser\u00e3o importantes para o correto funcionamento do nosso plugin nas pr\u00f3ximas etapas.<\/p>\n\n\n\n
Para utilizarmos todos os recursos que o plugin pode nos oferecer, primeiramente devemos gerar a chave de dom\u00ednio, clicando em \u201cRequest Domain Key\u201d<\/p>\n\n\n\n![\"Request](\"https:\/\/kangaroo.host\/blog\/wp-content\/uploads\/2024\/11\/Request-key-LiteSpeed.jpg\")
<\/figure>\n\n\n\nCom isso feito, poderemos usar alguns recursos de CDN, convers\u00e3o e otimiza\u00e7\u00e3o de imagens, al\u00e9m de contar com outras ferramentas para otimiza\u00e7\u00e3o de CSS e UCSS.<\/p>\n\n\n\n
Logo abaixo, temos as op\u00e7\u00f5es \u201cGuest mode\u201d e \u201cGuest optimization\u201d, que s\u00e3o especificamente para gerar uma p\u00e1gina em HTML que ser\u00e1 exibida para ferramentas de testes de velocidade.<\/p>\n\n\n\n![\"Guest](\"https:\/\/kangaroo.host\/blog\/wp-content\/uploads\/2024\/11\/Guest-LiteSpeed.jpg\")
<\/figure>\n\n\n\nEssa p\u00e1gina gerada ser\u00e1 muito mais leve e otimizada, mas tudo isso \u00e9 feito artificialmente. Seu intuito \u00e9 justamente conseguir notas mais elevadas em testes, mas n\u00e3o implica necessariamente em melhoria de velocidade no site.<\/p>\n\n\n\n
Al\u00e9m disso, \u00e9 poss\u00edvel que essas op\u00e7\u00f5es causem algum problema de CSS\/JS em seu site, por isso \u00e9 importante fazer alguns testes antes de colocar em produ\u00e7\u00e3o.<\/p>\n\n\n\n
Aba Cache<\/h3>\n\n\n\n
Agora, vamos para o tutorial em si. Com seu WP Admin aberto novamente, localize na guia esquerda a aba \u201cLiteSpeed Cache\u201d, para seguirmos com a configura\u00e7\u00e3o. Dentro dela, abra a guia \u201cCache\u201d para prosseguirmos com os passos baixo:<\/p>\n\n\n\n![\"Litespeed](\"https:\/\/kangaroo.host\/blog\/wp-content\/uploads\/2024\/11\/Abas-plugin-LiteSpeed-Cache.jpg\")
<\/figure>\n\n\n\nAo abrir a guia de Cache, chegaremos primeiro na aba principal, tamb\u00e9m chamada Cache. Nela, teremos os seguintes par\u00e2metros (nas imagens, temos nossas recomenda\u00e7\u00f5es de como configurar cada um):<\/p>\n\n\n\n
- Enable Cache<\/strong>: permite ativar o sistema de cache do LiteSpeed, e ir\u00e1 interagir com as demais configura\u00e7\u00f5es referentes ao cache;<\/li><\/ul>\n\n\n\n
![\"enable](\"https:\/\/kangaroo.host\/blog\/wp-content\/uploads\/2024\/11\/Habilitar-Cache.jpg\")
<\/figure>\n\n\n\n- Cache Logged-in users<\/strong>: quando ativada, far\u00e1 com que o plugin ative o cache tamb\u00e9m para usu\u00e1rios conectados. Essa \u00e9 uma configura\u00e7\u00e3o totalmente opcional, de acordo com o cen\u00e1rio e necessidade de seu site;<\/li><\/ul>\n\n\n\n
![\"cache](\"https:\/\/kangaroo.host\/blog\/wp-content\/uploads\/2024\/11\/Cache-em-usuarios-logados.jpg\")
<\/figure>\n\n\n\n- Cache REST API<\/strong>: essa op\u00e7\u00e3o ir\u00e1 colocar no cache todas as requisi\u00e7\u00f5es de API relacionadas ao funcionamento interno do WordPress;<\/li><\/ul>\n\n\n\n
![\"cache](\"https:\/\/kangaroo.host\/blog\/wp-content\/uploads\/2024\/11\/Cache-Rest-API.jpg\")
<\/figure>\n\n\n\n- Cache PHP Resources<\/strong>: far\u00e1 com que algumas requisi\u00e7\u00f5es de plugins, relacionadas a arquivos PHP sejam armazenadas no cache, permitindo que elas n\u00e3o precisem ser processadas repetidas vezes;<\/li><\/ul>\n\n\n\n
![\"cache](\"https:\/\/kangaroo.host\/blog\/wp-content\/uploads\/2024\/11\/Cache-PHP-Resources.jpg\")
<\/figure>\n\n\n\n- Cache Mobile<\/strong>: essa \u00e9 uma das op\u00e7\u00f5es mais importantes, que permite que seja gerado um cache tamb\u00e9m para dispositivos mobile, melhorando para eles o tempo de carregamento.<\/li><\/ul>\n\n\n\n
![\"cache](\"https:\/\/kangaroo.host\/blog\/wp-content\/uploads\/2024\/11\/Cache-mobile.jpg\")
<\/figure>\n\n\n\nUm adendo interessante \u00e9 que, no caso do cache mobile, ele funciona separadamente do cache principal, isto \u00e9, o LiteSpeed necessita que um acesso prim\u00e1rio seja feito em uma p\u00e1gina, para que ela seja colocada em cache. Quando isso acontece, os outros acessos seguintes j\u00e1 acessam direto do conte\u00fado em cache.<\/p>\n\n\n\n
Quando h\u00e1 o cache separado, usu\u00e1rios de PC, por exemplo, n\u00e3o geram o cache para celulares e tablets, sendo necess\u00e1rio que cada tipo de dispositivo de navega\u00e7\u00e3o (mobile\/desktop) fa\u00e7a o primeiro acesso para iniciar o processo de cache das p\u00e1ginas, que \u00e9 instant\u00e2neo.<\/p>\n\n\n\n
Aba TTL<\/h3>\n\n\n\n
Agora, seguindo para a guia \u201cTTL\u201d, iremos definir alguns tempos de expira\u00e7\u00e3o do cache. Quando o TTL expira, o cache ser\u00e1 automaticamente limpo e renovado, sendo completamente gerado novamente.<\/p>\n\n\n\n
Aqui, \u00e9 importante prestarmos aten\u00e7\u00e3o em que tipo de site estamos atuando. Se \u00e9 um blog, que tem conte\u00fados di\u00e1rios, seu cache n\u00e3o poder\u00e1 ter uma expira\u00e7\u00e3o de data longa.<\/p>\n\n\n\n
Se \u00e9 um site mais est\u00e1tico, que recebe pouco conte\u00fado e atualiza\u00e7\u00f5es, a recomenda\u00e7\u00e3o \u00e9 deixar um TTL (Tempo de vida, do ingl\u00eas) maior, como algo a partir de uma semana. Agora, se o site realmente n\u00e3o recebe nenhuma atualiza\u00e7\u00e3o visual ou de conte\u00fado, \u00e9 poss\u00edvel adicionar tempo de vida de um ano.<\/p>\n\n\n\n
Os par\u00e2metros de TTL s\u00e3o sempre configurados em segundos, para uma maior precis\u00e3o. Ao lado, voc\u00ea ver\u00e1 quanto tempo em dias\/semanas\/meses corresponde a quantidade de segundos que inseriu, e temos os seguintes par\u00e2metros:<\/p>\n\n\n\n![\"ttl\"](\"https:\/\/kangaroo.host\/blog\/wp-content\/uploads\/2024\/11\/TTL.jpg\")
<\/figure>\n\n\n\n- Public Cache<\/strong>: ser\u00e1 o tempo de armazenamento do cache para p\u00e1ginas p\u00fablicas;<\/li>
- Private Cache<\/strong>: \u00e9 referente ao tempo de armazenamento do cache de p\u00e1ginas privadas;<\/li>
- Front Page<\/strong>: ser\u00e1 configurado para o tempo de vida do cache especificamente da p\u00e1gina principal do site;<\/li>
- Feed<\/strong>: \u00e9 referente a quanto tempo ser\u00e1 armazenado o conte\u00fado em cache de seu feed;<\/li>
- REST<\/strong>: diz respeito ao tempo em que ser\u00e1 armazenado o cache das requisi\u00e7\u00f5es feitas pela API do WordPress.<\/li><\/ul>\n\n\n\n
Aba Purge<\/h3>\n\n\n\n
Agora, vamos para a aba seguinte \u201cPurge\u201d, que define os par\u00e2metros de exclus\u00e3o do cache mediante algumas a\u00e7\u00f5es espec\u00edficas. E, aqui, temos as seguintes op\u00e7\u00f5es:<\/p>\n\n\n\n
- Purge all on upgrade<\/strong>: far\u00e1 com que o seu cache seja automaticamente removido sempre que um tema, plugin ou o pr\u00f3prio WordPress for instalado ou atualizado, for\u00e7ando a renova\u00e7\u00e3o do cache;<\/li><\/ul>\n\n\n\n
![\"purge](\"https:\/\/kangaroo.host\/blog\/wp-content\/uploads\/2024\/11\/Apagar-ao-atualizar.jpg\")
<\/figure>\n\n\n\n- Auto purge rules for publish\/update<\/strong>: permitir\u00e1 com que o cache seja renovado quando as op\u00e7\u00f5es que estiverem marcadas forem executadas, como a adi\u00e7\u00e3o de um novo post, por exemplo;<\/li><\/ul>\n\n\n\n
![\"Purge](\"https:\/\/kangaroo.host\/blog\/wp-content\/uploads\/2024\/11\/Apagar-cache-ao.jpg\")
<\/figure>\n\n\n\n- Serve stale<\/strong>: \u00e9 para permitir que conte\u00fado n\u00e3o atualizado seja entregue. Caso seu cache esteja sendo processado, por exemplo, enquanto um visitante acessa a p\u00e1gina, o \u00faltimo cache gerado ser\u00e1 disponibilizado para ele. Se n\u00e3o, ele acessar\u00e1 normalmente processando a visita sem cache;<\/li><\/ul>\n\n\n\n
![\"server](\"https:\/\/kangaroo.host\/blog\/wp-content\/uploads\/2024\/11\/Server-Stale.jpg\")
<\/figure>\n\n\n\nComo aba seguinte, agora temos a \u201cExcludes\u201d. Nesta, passaremos um pouco mais rapidamente, j\u00e1 que consiste em especificar p\u00e1ginas e requisi\u00e7\u00f5es que n\u00e3o devem fazer parte do conte\u00fado armazenado em cache. Nela, temos os seguintes par\u00e2metros:<\/p>\n\n\n\n
- URLS;<\/li>
- Query Strings;<\/li>
- Categorias;<\/li>
- Tags;<\/li>
- Cookies;<\/li>
- Agentes de usu\u00e1rio;<\/li>
- Fun\u00e7\u00f5es do WP (Admin, editor, etc).<\/li><\/ul>\n\n\n\n
Aba Object<\/h3>\n\n\n\n
Um pouco mais \u00e0 frente, vamos direto para a aba \u201cObject\u201d, que diz respeito ao cache de objetos, muito importante para sites em WordPress.<\/p>\n\n\n\n
O cache de objetos tem rela\u00e7\u00e3o com as consultas ao banco de dados e, ao ativ\u00e1-lo, voc\u00ea poder\u00e1 armazenar as consultas ao banco, permitindo que o site n\u00e3o precise refaz\u00ea-la v\u00e1rias vezes.<\/p>\n\n\n\n
E, nessa guia, temos as seguintes op\u00e7\u00f5es:<\/p>\n\n\n\n
- Object cache<\/strong>: permite ativar as fun\u00e7\u00f5es do cache de objetos;<\/li><\/ul>\n\n\n\n
![\"object](\"https:\/\/kangaroo.host\/blog\/wp-content\/uploads\/2024\/11\/Cache-de-objetos.jpg\")
<\/figure>\n\n\n\n- Method<\/strong>: pode variar de acordo com seu provedor de hospedagem, e te permitir\u00e1 escolher entre o Memcached e o Redis, ambas extens\u00f5es para o PHP. Nos servidores da Kangaroo, recomendamos utilizar o Redis para maior efici\u00eancia;<\/li>
- Host e Port<\/strong>: aqui, voc\u00ea configurar\u00e1 seu host do cache de objeto (normalmente, ser\u00e1 localhost) e a porta de funcionamento, sendo 11211 para Memcached e 6379 para o Redis;<\/li><\/ul>\n\n\n\n
![\"conex\u00e3o](\"https:\/\/kangaroo.host\/blog\/wp-content\/uploads\/2024\/11\/Conexao-cache-de-objetos.jpg\")
<\/figure>\n\n\n\nAba Browser<\/h3>\n\n\n\n
Aqui, vamos definir se o nosso cache tamb\u00e9m vai interagir com o navegador do usu\u00e1rio e, se sim, por quanto tempo ele ficar\u00e1 armazenado l\u00e1.<\/p>\n\n\n\n
Essa \u00e9 uma boa forma de poupar ainda mais recursos do servidor, j\u00e1 que poderemos armazenar algumas informa\u00e7\u00f5es direto no dispositivo do usu\u00e1rio, tornando a navega\u00e7\u00e3o ainda mais r\u00e1pida e leve ao acessar o site.<\/p>\n\n\n\n
- Para ativar essa configura\u00e7\u00e3o, vamos marcar \u201cOn\u201d em \u201cBrowser cache\u201d.<\/li><\/ol>\n\n\n\n
![\"browser](\"https:\/\/kangaroo.host\/blog\/wp-content\/uploads\/2024\/11\/Cache-do-navegador.jpg\")
<\/figure>\n\n\n\n- Agora, para configurar o tempo em que ele ser\u00e1 armazenado, vamos inserir o valor em segundos em \u201cBrowser Cache TTL\u201d. Como o cache do navegador ser\u00e1 limpo junto com o cache do site, podemos deixar um cache maior aqui, como algo perto de um m\u00eas.<\/li><\/ul>\n\n\n\n
![\"browser](\"https:\/\/kangaroo.host\/blog\/wp-content\/uploads\/2022\/06\/TTL-cache-do-navegador.jpg\")
<\/figure>\n\n\n\nAba Advanced<\/h3>\n\n\n\n
Por \u00faltimo, vamos fazer uma \u00fanica configura\u00e7\u00e3o extra nessa aba, que ser\u00e1 ativar a fun\u00e7\u00e3o \u201cInstant click\u201d marcando-a para \u201cOn\u201d. Atrav\u00e9s dela, ser\u00e1 poss\u00edvel que as p\u00e1ginas que o visitante do site comecem a ser pr\u00e9-carregadas assim que ele passa sobre o link delas.<\/p>\n\n\n\n![\"instant](\"https:\/\/kangaroo.host\/blog\/wp-content\/uploads\/2022\/06\/Instant-click.jpg\")
<\/figure>\n\n\n\nClaro, isso gera algumas requisi\u00e7\u00f5es extras no servidor, podendo aumentar um pouco a carga de processamento, mas ajuda a gerar uma melhor sensa\u00e7\u00e3o de velocidade percebida no carregamento.<\/p>\n\n\n\n
Configurando otimiza\u00e7\u00f5es de CSS<\/h3>\n\n\n\n
Uma das principais formas de otimiza\u00e7\u00e3o do site, assim como os t\u00f3picos a seguir, \u00e9 a otimiza\u00e7\u00e3o dos arquivos de CSS, seja atrav\u00e9s de compress\u00f5es ou da melhoria de entrega desses recursos.<\/p>\n\n\n\n
Por ser de tanta import\u00e2ncia, podemos configurar alguns desses par\u00e2metros para que o site tenha um melhor carregamento. Dentre as principais configura\u00e7\u00f5es, est\u00e3o os seguintes par\u00e2metros:<\/p>\n\n\n\n
- CSS Minify<\/strong>: faz a redu\u00e7\u00e3o dos arquivos CSS, retirando a identa\u00e7\u00e3o, que \u00e9 a organiza\u00e7\u00e3o dos arquivos, retirando os espa\u00e7os, o que permite que o arquivo fique com um tamanho menor, proporcionando uma maior velocidade em process\u00e1-los;<\/li><\/ul>\n\n\n\n
![\"css](\"https:\/\/kangaroo.host\/blog\/wp-content\/uploads\/2022\/06\/Minificar-CSS.jpg\")
<\/figure>\n\n\n\n- CSS Combine<\/strong>: far\u00e1 com que os seus arquivos CSS sejam unificados em um s\u00f3, reduzindo a quantidade de requisi\u00e7\u00f5es que seu servidor far\u00e1, mas aumentando o tempo de carregamento desse \u00fanico arquivo;<\/li><\/ul>\n\n\n\n
![\"css](\"https:\/\/kangaroo.host\/blog\/wp-content\/uploads\/2022\/06\/Combinar-CSS.jpg\")
<\/figure>\n\n\n\n- Font Display Optimzation<\/strong>: essa op\u00e7\u00e3o, quando configurada para \u201cSWAP\u201d permitir\u00e1 que as fontes sejam escritas genericamente enquanto n\u00e3o forem totalmente carregadas e, quando finalmente carregarem, o resultado vis\u00edvel do texto ser\u00e1 alterado corretamente para a fonte certa.<\/li><\/ul>\n\n\n\n
![\"font](\"https:\/\/kangaroo.host\/blog\/wp-content\/uploads\/2022\/06\/Font-display-optimization.jpg\")
<\/figure>\n\n\n\nCom a configura\u00e7\u00e3o de combina\u00e7\u00e3o dos arquivos CSS, \u00e9 poss\u00edvel que ocorram falhas no CSS do site, causando algum problema de forma\u00e7\u00e3o do visual da p\u00e1gina. Por isso, atente-se para reverter as altera\u00e7\u00f5es caso o resultado n\u00e3o seja o esperado.<\/p>\n\n\n\n
Otimiza\u00e7\u00f5es de c\u00f3digo JavaScript<\/h3>\n\n\n\n
Possivelmente, essa ser\u00e1 a parte da configura\u00e7\u00e3o que mais vai influenciar no tempo real do carregamento da p\u00e1gina, j\u00e1 que na maior parte dos sites as requisi\u00e7\u00f5es em JavaScript s\u00e3o o que demora mais tempo para completar a execu\u00e7\u00e3o.<\/p>\n\n\n\n
Dito isso, tente sempre manter um n\u00famero m\u00ednimo dessas requisi\u00e7\u00f5es em seu site, utilizando apenas o que for realmente necess\u00e1rio.<\/p>\n\n\n\n
Algumas boas dicas para reduzir essas requisi\u00e7\u00f5es \u00e9 eliminar plugins que n\u00e3o estejam em uso, al\u00e9m de remover tamb\u00e9m solicita\u00e7\u00f5es JS do tema que n\u00e3o sejam \u00fateis.<\/p>\n\n\n\n
Dadas as dicas, vamos \u00e0s op\u00e7\u00f5es de configura\u00e7\u00e3o:<\/p>\n\n\n\n
- JS Minify<\/strong>: com essa op\u00e7\u00e3o, poderemos reduzir bastante o tamanho dos arquivos JS, j\u00e1 que o c\u00f3digo ser\u00e1 aglutinado de modo que n\u00e3o fiquem espa\u00e7os em branco, o que permitir\u00e1 maior velocidade no processamento da requisi\u00e7\u00e3o;<\/li><\/ul>\n\n\n\n
![\"js](\"https:\/\/kangaroo.host\/blog\/wp-content\/uploads\/2022\/06\/Minificar-JS.jpg\")
<\/figure>\n\n\n\n- JS Combine<\/strong>: esse par\u00e2metro pode causar algum mau funcionamento no site caso algum script necess\u00e1rio quebre no processo, mas configur\u00e1-lo ir\u00e1 reduzir a quantidade de scripts que a p\u00e1gina utiliza, carregando tudo em um \u00fanico arquivo de uma vez s\u00f3;<\/li><\/ul>\n\n\n\n
![\"js](\"https:\/\/kangaroo.host\/blog\/wp-content\/uploads\/2022\/06\/Combinar-JS.jpg\")
<\/figure>\n\n\n\n- JS Combine External and Inline<\/strong>: quando a op\u00e7\u00e3o de JS Combine estiver ativa, essa configura\u00e7\u00e3o far\u00e1 com que o c\u00f3digo seja colocado dentro da pr\u00f3pria p\u00e1gina, carregando internamente e ajudando a reduzir poss\u00edveis problemas de carregamento causados pela configura\u00e7\u00e3o anterior;<\/li><\/ul>\n\n\n\n
![\"js](\"https:\/\/kangaroo.host\/blog\/wp-content\/uploads\/2022\/06\/Combinar-JS-interno-e-externo-inline.jpg\")
<\/figure>\n\n\n\n- Load JS Deferred<\/strong>: aqui temos a configura\u00e7\u00e3o que mais deve alterar a percep\u00e7\u00e3o de tempo de carregamento da sua p\u00e1gina, e temos duas op\u00e7\u00f5es de recurso, o Deferred e o Delayed.<\/li><\/ul>\n\n\n\n
![\"js](\"https:\/\/kangaroo.host\/blog\/wp-content\/uploads\/2022\/06\/JS-Defer.jpg\")
<\/figure>\n\n\n\n- Deferred<\/strong>: far\u00e1 com que as requisi\u00e7\u00f5es JS sejam executadas apenas ap\u00f3s a intera\u00e7\u00e3o do usu\u00e1rio com a p\u00e1gina, isto \u00e9, quando ele movimentar o mouse, clicar em algo ou mover a p\u00e1gina subindo ou descendo;
- Delayed<\/strong>: colocar\u00e1 o carregamento das requisi\u00e7\u00f5es JS para serem executadas apenas ap\u00f3s o total processamento das outras requisi\u00e7\u00f5es.<\/li><\/ul><\/li><\/ul>\n\n\n\n
A configura\u00e7\u00e3o do m\u00e9todo Delayed ou Deferred \u00e9 o que causar\u00e1 a maior sensa\u00e7\u00e3o de velocidade ao acessar o site, na maioria dos casos.<\/p>\n\n\n\n
Para a maioria dos sites, a op\u00e7\u00e3o \u201cDelayed\u201d ter\u00e1 resultados melhores, j\u00e1 que nela temos uma incid\u00eancia menor de problemas relacionados ao carregamento de JS.<\/p>\n\n\n\n
Contudo, vale o teste para verificar se o carregamento ap\u00f3s a intera\u00e7\u00e3o do usu\u00e1rio, 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.<\/p>\n\n\n\n
Otimiza\u00e7\u00f5es de carregamento do HTML<\/h3>\n\n\n\n
Por \u00faltimo, chegamos \u00e0 guia de configura\u00e7\u00f5es do HTML, que tamb\u00e9m s\u00e3o de grande valia para o ganho de velocidade no carregamento das nossas p\u00e1ginas.<\/p>\n\n\n\n
Para essa aba, vamos dar mais aten\u00e7\u00e3o \u00e0s seguintes funcionalidades:<\/p>\n\n\n\n
- HTML Minify<\/strong>: far\u00e1 uma redu\u00e7\u00e3o do arquivo HTML da p\u00e1gina, removendo espa\u00e7os em branco e reduzindo a identa\u00e7\u00e3o, fazendo com que o arquivo fique mais leve e, consequentemente, seja carregado mais rapidamente;<\/li><\/ul>\n\n\n\n
![\"minificar](\"https:\/\/kangaroo.host\/blog\/wp-content\/uploads\/2022\/06\/Minificar-HTML.jpg\")
<\/figure>\n\n\n\n- DNS Prefetch<\/strong>: caso seu site fa\u00e7a conex\u00f5es com links externos, colocar o LINK\/HOST em prefetch ajudar\u00e1 a carreg\u00e1-las mais rapidamente, uma vez que essa configura\u00e7\u00e3o permitir\u00e1 estabelecer a conex\u00e3o previamente, tornando mais \u00e1gil a comunica\u00e7\u00e3o com a fonte externa. Para essa configura\u00e7\u00e3o, devemos inserir um host por linha;<\/li><\/ul>\n\n\n\n
![\"dns](\"https:\/\/kangaroo.host\/blog\/wp-content\/uploads\/2022\/06\/Pre-conectar-DNS.jpg\")
<\/figure>\n\n\n\n- DNS Prefetch Control<\/strong>: com esse par\u00e2metro, poderemos fazer com que o site se comunique mais rapidamente com as fontes externas de arquivos JS, CSS, etc., para que tais requisi\u00e7\u00f5es sejam executadas e carregadas mais r\u00e1pido;<\/li><\/ul>\n\n\n\n
![\"dns](\"https:\/\/kangaroo.host\/blog\/wp-content\/uploads\/2022\/06\/Controle-para-conectar-DNS.jpg\")
<\/figure>\n\n\n\n- Load Google Fonts Asynchronously<\/strong>: far\u00e1 com que todas as fontes que v\u00eam do Google Fonts sejam carregadas apenas ap\u00f3s o processamento completo da p\u00e1gina, causando um efeito melhor de carregamento;<\/li><\/ul>\n\n\n\n
![\"carregar](\"https:\/\/kangaroo.host\/blog\/wp-content\/uploads\/2022\/06\/Carregar-google-fonts-assincronamente.jpg\")
<\/figure>\n\n\n\nConclus\u00e3o<\/h2>\n\n\n\n
Ao fim deste artigo, agora esperamos que voc\u00ea tenha compreendido algumas das principais fun\u00e7\u00f5es do LiteSpeed que podem te ajudar a atingir melhores resultados de performance em seu WordPress, ajudando a deixar seu site bem mais r\u00e1pido.<\/p>\n\n\n\n
Como dissemos por todo o post, infelizmente n\u00e3o h\u00e1 um segredo, n\u00e3o h\u00e1 formula\u00e7\u00e3o m\u00e1gica 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\u00e1veis.<\/p>\n\n\n\n
Em seus testes, n\u00e3o se assuste se o site parecer quebrado em algum momento, por conta de algum arquivo CSS ou JS que foi alterado nas otimiza\u00e7\u00f5es, \u00e9 perfeitamente normal e completamente revers\u00edvel. N\u00e3o desista, siga nossas dicas e ter\u00e1 resultados bem interessantes =)<\/p>\n\n\n\n
Afinal, ter a velocidade de carregamento pode te ajudar a faturar mais e, em momentos delicados como este, \u00e9 sempre bom contar com rendimentos extras, n\u00e3o \u00e9 mesmo?<\/p>\n\n\n\n
Esperamos que todas as informa\u00e7\u00f5es aqui possam te ajudar a atingir os resultados desejados, qualquer d\u00favida, nosso time de suporte estar\u00e1 prontinho para te atender. Ficaremos por aqui e at\u00e9 a pr\u00f3xima o\/<\/p>\n","protected":false},"excerpt":{"rendered":"
Com tudo no mundo nos acostumando \u00e0 m\u00e1xima agilidade, n\u00e3o poder\u00edamos espera resultados muito diferentes ao pensarmos que tamb\u00e9m queremos acessar sites mais r\u00e1pidos. Como mostram as pesquisas, mais da metade dos usu\u00e1rios tentem a fechar p\u00e1ginas que demorem mais de 3 segundos para exibirem o conte\u00fado e, quando pensamos em sites que dependem das […]<\/p>\n","protected":false},"author":1,"featured_media":471,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[10,61,52,46,18,62,32,20],"class_list":["post-449","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-litespeed","tag-litespeed","tag-mais","tag-otimizacao","tag-performance","tag-plugin","tag-rapido","tag-site","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/kangaroo.host\/blog\/wp-json\/wp\/v2\/posts\/449","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kangaroo.host\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kangaroo.host\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kangaroo.host\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kangaroo.host\/blog\/wp-json\/wp\/v2\/comments?post=449"}],"version-history":[{"count":1,"href":"https:\/\/kangaroo.host\/blog\/wp-json\/wp\/v2\/posts\/449\/revisions"}],"predecessor-version":[{"id":2644,"href":"https:\/\/kangaroo.host\/blog\/wp-json\/wp\/v2\/posts\/449\/revisions\/2644"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kangaroo.host\/blog\/wp-json\/wp\/v2\/media\/471"}],"wp:attachment":[{"href":"https:\/\/kangaroo.host\/blog\/wp-json\/wp\/v2\/media?parent=449"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kangaroo.host\/blog\/wp-json\/wp\/v2\/categories?post=449"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kangaroo.host\/blog\/wp-json\/wp\/v2\/tags?post=449"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Por que devo otimizar meu site?<\/h2>\n\n\n\n
Como dissemos acima, os usu\u00e1rios est\u00e3o cada vez mais buscando por conte\u00fados que s\u00e3o entregues de maneira mais r\u00e1pida, gerando uma experi\u00eancia de navega\u00e7\u00e3o muito melhor.<\/p>\n\n\n\n
Isso justifica, por exemplo, a crescente escalada de popularidade do Tik Tok, que permite que v\u00eddeos curtos sejam vistos mais rapidamente, aumentando a quantidade de v\u00eddeos que o usu\u00e1rio v\u00ea em um mesmo espa\u00e7o de tempo.<\/p>\n\n\n\n
O motivo dessa breve compara\u00e7\u00e3o \u00e9 te mostrar que principalmente quando site \u00e9 sua fonte de renda, o tempo em que ele carrega pode influenciar no quanto voc\u00ea pode faturar com ele.<\/p>\n\n\n\n
Em lojas que apresentem travamentos, por exemplo, qualquer usu\u00e1rio n\u00e3o ficaria esperando a exibi\u00e7\u00e3o do produto, ele imediatamente fecharia e partiria para uma concorrente. E \u00e9 isso que precisamos evitar ao pensar em aumentar a velocidade de navega\u00e7\u00e3o.<\/p>\n\n\n\n
Outro fator de extrema import\u00e2ncia, que pode igualmente afetar no seu faturamento \u00e9 o posicionamento do seu site em motores de busca. Mas por que estamos falando de SEO em um artigo de otimiza\u00e7\u00e3o de site?<\/p>\n\n\n\n
Bom, por incr\u00edvel que pare\u00e7a, motores como o Google presam bastante pela experi\u00eancia que o visitante tem ao acessar seu site e, por isso, um dos crit\u00e9rios de rankeamento das p\u00e1ginas \u00e9 justamente quanto tempo ele leva para carregar, al\u00e9m de como ele se comporta com dispositivos m\u00f3veis (como celulares e tablets).<\/p>\n\n\n\n
Essa n\u00e3o \u00e9 uma m\u00e9trica que atingir vai garantidamente te colocar em posi\u00e7\u00f5es superiores, j\u00e1 que n\u00e3o \u00e9 de grande influ\u00eancia. Contudo, sites que lidam diariamente com SEO avan\u00e7ado e que cada palavra na p\u00e1gina \u00e9 sagrada para o rankeamento, quantos mais crit\u00e9rios atingidos para um rankeamento mais eficaz, melhor.<\/p>\n\n\n\n
Tendo em vista isso, temos, em resumo, tr\u00eas fatores que devem te motivar a otimizar seu site:<\/p>\n\n\n\n
- Experi\u00eancia do usu\u00e1rio<\/strong>: para que o visitante tenha navega\u00e7\u00e3o fluida e possa consumir mais, seja em compras ou em tempo na p\u00e1gina;<\/li>
- Faturamento<\/strong>: visto que em lojas e sites que exibem an\u00fancios, os visitantes devem tender a fecharem as p\u00e1ginas caso o site demore a carregar, o que pode acarretar uma s\u00e9rie de preju\u00edzos;<\/li>
- Rankeamento<\/strong>: j\u00e1 que mesmo n\u00e3o sendo algo que gera grandes recompensas nos motores de busca, ainda sim pode te ajudar a conseguir uma reputa\u00e7\u00e3o melhor nesse sentido, incrementando ligeiramente seu posicionamento.<\/li><\/ul>\n\n\n\n
Como medir a velocidade de carregamento?<\/h2>\n\n\n\n
Uma boa forma de ver poss\u00edveis pontos de melhoria de tempo de carregamento das p\u00e1ginas de seu site \u00e9 atrav\u00e9s das v\u00e1rias ferramentas que fazem testes de performance no site.<\/p>\n\n\n\n
Algumas das mais conhecidas atualmente s\u00e3o o GTMetrix<\/a>, PageSpeed<\/a> e WebDev<\/a>, sendo estes dois \u00faltimos mantidos pela pr\u00f3pria Google.<\/p>\n\n\n\n
Os testes do GTMetrix s\u00e3o os mais feitos por boa parte dos usu\u00e1rios, mostrando resultados simples e dicas pontuais de melhoria que, de fato, ajudam a ter um site mais r\u00e1pido.<\/p>\n\n\n\n
No PageSpeed e WebDev, temos algumas avalia\u00e7\u00f5es para a performance do site em dispositivos mobile e em desktops, mas os par\u00e2metros por muitas vezes s\u00e3o bem dif\u00edceis de se ajustar para que seja poss\u00edvel atingir as notas mais altas.<\/p>\n\n\n\n
<\/figure>\n\n\n\nNestes testes, o GTMetrix tem um recurso bem legal, que \u00e9 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\u00e1 necess\u00e1rio fazer um breve cadastro no site deles.<\/p>\n\n\n\n
Enquanto isso, nos outros dois testes que citamos, os servidores est\u00e3o localizados na Am\u00e9rica do norte, fazendo com que o resultado que vemos nos testes n\u00e3o seja totalmente condizente com a experi\u00eancia que um usu\u00e1rio no Brasil veria ao acessar seu site.<\/p>\n\n\n\n
Vale ressaltar que as notas do PageSpeed e WebDev s\u00e3o muito dif\u00edceis de se atingir de maneira org\u00e2nica, sem que seja feito algo que \u201cengane\u201d o teste de alguma forma. Sendo necess\u00e1rio um bom conhecimento t\u00e9cnico para isso.<\/p>\n\n\n\n
<\/figure>\n\n\n\nDe maneira geral, contar com o aux\u00edlio de um bom desenvolvedor WordPress \u00e9 a melhor forma de identificar quais s\u00e3o os pontos de ajuste mais importante do site, para fazer um ajuste fino e conseguir torna-lo mais r\u00e1pido para os visitantes.<\/p>\n\n\n\n
O que \u00e9 o plugin LiteSpeed Cache?<\/h2>\n\n\n\n
Bom, como dissemos acima, trata-se de um plugin para WordPress, desenvolvido por uma j\u00e1 renomada empresa que atua em diversas \u00e1reas relacionadas a sites, com painel de controle, sistemas de cache e servidor Web.<\/p>\n\n\n\n
No caso do plugin para WP, \u00e9 uma aplica\u00e7\u00e3o totalmente gratuita, que pode ser instalado em quase todos os sites que utilizam a plataforma. <\/p>\n\n\n\n
Isso acontece porque o Plugin \u00e9 desenvolvido para interagir direto com o servidor web, formulando todo o cache e facilitando muito mais a comunica\u00e7\u00e3o dos recursos do site com o servidor em si, tornando o processo mais eficiente que na maioria de seus concorrentes convencionais.<\/p>\n\n\n\n
Com isso, o LiteSpeed Cache \u00e9 capaz de gerar cache rapidamente, al\u00e9m de contar com diversos recursos de integra\u00e7\u00e3o que permitem limp\u00e1-lo de forma muito simples dentro do painel de gerenciamento, inclusive o cache gerado pela pr\u00f3pria hospedagem do site.<\/p>\n\n\n\n
\u00c9 poss\u00edvel dizer que, atualmente, ele \u00e9 um dos plugins mais completos quando falamos de otimiza\u00e7\u00e3o de sites. Talvez, o mais completo dentre todos.<\/p>\n\n\n\n
Por conta de sua grande disponibilidade de par\u00e2metros facilmente configur\u00e1veis, \u00e9 poss\u00edvel atingir n\u00edveis muito bons de refinamento da performance e velocidade, caso o usu\u00e1rio tenha conhecimento mais t\u00e9cnico para analisar corretamente o site e executar os devidos testes e ajustes dentro do plugin.<\/p>\n\n\n\n
Como o plugin LiteSpeed Cache funciona?<\/h2>\n\n\n\n
Al\u00e9m de fazer o cache do site, o LiteSpeed tamb\u00e9m tem diversos sistemas de otimiza\u00e7\u00e3o para p\u00e1ginas, JavaScript, CSS, HTML, otimiza\u00e7\u00e3o de imagens, cache de objetos em Redis e Memcached, integra\u00e7\u00e3o com CDNs e, at\u00e9 mesmo, conta com CDN pr\u00f3prio, o Quic.CLOUD.<\/p>\n\n\n\n
Al\u00e9m disso, existem outros recursos dentro do plugin, mas que s\u00e3o muitos e v\u00e1rios deles exigem bastante conhecimento t\u00e9cnico para que a otimiza\u00e7\u00e3o seja feita sem prejudicar o site.<\/p>\n\n\n\n
Por serem muitos recursos, nosso artigo focar\u00e1 apenas nos que s\u00e3o mais f\u00e1ceis de usu\u00e1rios mais leigos configurarem e que devem ajudar a obter maior velocidade de carregamento.<\/p>\n\n\n\n
Como \u00e9 sempre bom lembrar, n\u00e3o existe m\u00e1gica ou f\u00f3rmula perfeita quando falamos de otimiza\u00e7\u00e3o de sites, pois as vari\u00e1veis s\u00e3o muitas \u00e9 imposs\u00edvel imaginar ou prever o que uma configura\u00e7\u00e3o pode causar no site, j\u00e1 que algumas fun\u00e7\u00f5es podem \u201cquebrar\u201d seu site, desformatando a parte visual.<\/p>\n\n\n\n
Por isso, recomendamos fortemente que fa\u00e7a v\u00e1rios testes e retestes com as fun\u00e7\u00f5es do plugin at\u00e9 achar a combina\u00e7\u00e3o de configura\u00e7\u00f5es que funciona melhor em seu caso. Desse modo, vamos explicar os recursos um a um, para que voc\u00ea entenda como eles funcionam e possa tomar as melhores decis\u00f5es.<\/p>\n\n\n\n
Como instalar em meu site?<\/h2>\n\n\n\n
Por ser um plugin gratuito, \u00e9 poss\u00edvel encontra-lo para instala\u00e7\u00e3o direto na loja de plugins do WordPress, dentro de seu wp-admin voc\u00ea poder\u00e1 fazer rapidamente todo o processo, que \u00e9 muito simples.<\/p>\n\n\n\n
Para realizar a instala\u00e7\u00e3o, siga estes passos:<\/p>\n\n\n\n
- Fa\u00e7a login em seu WP Admin, em uma conta que possua permiss\u00f5es suficientes para instalar um plugin;<\/li><\/ol>\n\n\n\n<\/figure>\n\n\n\n
- Com o painel aberto, localize a guia \u201cPlugins\u201d e siga para \u201cAdicionar novo\u201d;<\/li><\/ul>\n\n\n\n<\/figure>\n\n\n\n
- Na barra de pesquisa da loja, busque por \u201clitespeed\u201d e clique em \u201cInstalar\u201d quando localizar o plugin LiteSpeed Cache;<\/li><\/ul>\n\n\n\n<\/figure>\n\n\n\n
- Uma vez que a instala\u00e7\u00e3o esteja totalmente feita, prossiga clicando em \u201cAtivar\u201d.<\/li><\/ul>\n\n\n\n<\/figure>\n\n\n\n
Feito isso, o plugin estar\u00e1 totalmente instalado e ativo em seu site, prontinho para come\u00e7ar a receber as primeiras configura\u00e7\u00f5es de otimiza\u00e7\u00e3o.<\/p>\n\n\n\n
Como deixar meu WordPress mais r\u00e1pido com LiteSpeed?<\/h2>\n\n\n\n
Bom, o processo de otimiza\u00e7\u00e3o \u00e9 um pouco trabalhoso, devemos adiantar. \u00c9 algo que envolve muitos testes de refinamento, para chegar em um resultado mais acurado, mas alguns pequenos ajustes simples j\u00e1 podem te ajudar a obter um grande ganho de velocidade.<\/p>\n\n\n\n
Por isso, vamos te mostrar aqui as principais formas simples de otimizar seu site WordPress com o LiteSpeed Cache.<\/p>\n\n\n\n
Refor\u00e7ando, n\u00e3o existe caminho m\u00e1gico para a otimiza\u00e7\u00e3o, e as configura\u00e7\u00f5es que funcionam em um site, podem n\u00e3o funcionar em outro. Ent\u00e3o, sempre teste bastante as configura\u00e7\u00f5es at\u00e9 chegar no resultado desejado.<\/p>\n\n\n\n
E tudo que diremos aqui tem como intuito principal ajudar usu\u00e1rios mais leigos, por isso teremos um conte\u00fado ligeiramente reduzido, visto que o plugin LiteSpeed Cache \u00e9 extremamente denso, contando com mais de uma centena de diferentes par\u00e2metros de configura\u00e7\u00e3o.<\/p>\n\n\n\n
Para que o artigo fique mais organizado, did\u00e1tico e din\u00e2mico, vamos separar alguns recursos em t\u00f3picos, para que voc\u00ea consiga acompanhar melhor cada uma das etapas que seguiremos. Vamos l\u00e1:<\/p>\n\n\n\n
Configurando o cache<\/h3>\n\n\n\n
Aqui, temos uma das partes mais importantes para gerar uma melhor sensa\u00e7\u00e3o de velocidade para seus visitantes.<\/p>\n\n\n\n
Caso n\u00e3o saiba o que \u00e9 o cache, ele consiste em armazenar previamente uma c\u00f3pia est\u00e1tica de todo o conte\u00fado, permitindo que o visitante acesse essa c\u00f3pia mais rapidamente, liberando processamento no servidor.<\/p>\n\n\n\n
Com essa economia e din\u00e2mica de otimiza\u00e7\u00e3o, voc\u00ea ser\u00e1 capaz de ter uma quantidade muito maior de acessos simult\u00e2neos em uma mesma p\u00e1gina.<\/p>\n\n\n\n
Configura\u00e7\u00e3o inicial<\/h3>\n\n\n\n
Localize o plugin \u201cLiteSpeed Cache\u201d na guia esquerda e busque pela op\u00e7\u00e3o \u201cGeneral\u201d. Nela, precisaremos fazer alguns ajustes iniciais que ser\u00e3o importantes para o correto funcionamento do nosso plugin nas pr\u00f3ximas etapas.<\/p>\n\n\n\n
Para utilizarmos todos os recursos que o plugin pode nos oferecer, primeiramente devemos gerar a chave de dom\u00ednio, clicando em \u201cRequest Domain Key\u201d<\/p>\n\n\n\n
<\/figure>\n\n\n\nCom isso feito, poderemos usar alguns recursos de CDN, convers\u00e3o e otimiza\u00e7\u00e3o de imagens, al\u00e9m de contar com outras ferramentas para otimiza\u00e7\u00e3o de CSS e UCSS.<\/p>\n\n\n\n
Logo abaixo, temos as op\u00e7\u00f5es \u201cGuest mode\u201d e \u201cGuest optimization\u201d, que s\u00e3o especificamente para gerar uma p\u00e1gina em HTML que ser\u00e1 exibida para ferramentas de testes de velocidade.<\/p>\n\n\n\n
<\/figure>\n\n\n\nEssa p\u00e1gina gerada ser\u00e1 muito mais leve e otimizada, mas tudo isso \u00e9 feito artificialmente. Seu intuito \u00e9 justamente conseguir notas mais elevadas em testes, mas n\u00e3o implica necessariamente em melhoria de velocidade no site.<\/p>\n\n\n\n
Al\u00e9m disso, \u00e9 poss\u00edvel que essas op\u00e7\u00f5es causem algum problema de CSS\/JS em seu site, por isso \u00e9 importante fazer alguns testes antes de colocar em produ\u00e7\u00e3o.<\/p>\n\n\n\n
Aba Cache<\/h3>\n\n\n\n
Agora, vamos para o tutorial em si. Com seu WP Admin aberto novamente, localize na guia esquerda a aba \u201cLiteSpeed Cache\u201d, para seguirmos com a configura\u00e7\u00e3o. Dentro dela, abra a guia \u201cCache\u201d para prosseguirmos com os passos baixo:<\/p>\n\n\n\n
<\/figure>\n\n\n\nAo abrir a guia de Cache, chegaremos primeiro na aba principal, tamb\u00e9m chamada Cache. Nela, teremos os seguintes par\u00e2metros (nas imagens, temos nossas recomenda\u00e7\u00f5es de como configurar cada um):<\/p>\n\n\n\n
- Enable Cache<\/strong>: permite ativar o sistema de cache do LiteSpeed, e ir\u00e1 interagir com as demais configura\u00e7\u00f5es referentes ao cache;<\/li><\/ul>\n\n\n\n<\/figure>\n\n\n\n
- Cache Logged-in users<\/strong>: quando ativada, far\u00e1 com que o plugin ative o cache tamb\u00e9m para usu\u00e1rios conectados. Essa \u00e9 uma configura\u00e7\u00e3o totalmente opcional, de acordo com o cen\u00e1rio e necessidade de seu site;<\/li><\/ul>\n\n\n\n<\/figure>\n\n\n\n
- Cache REST API<\/strong>: essa op\u00e7\u00e3o ir\u00e1 colocar no cache todas as requisi\u00e7\u00f5es de API relacionadas ao funcionamento interno do WordPress;<\/li><\/ul>\n\n\n\n<\/figure>\n\n\n\n
- Cache PHP Resources<\/strong>: far\u00e1 com que algumas requisi\u00e7\u00f5es de plugins, relacionadas a arquivos PHP sejam armazenadas no cache, permitindo que elas n\u00e3o precisem ser processadas repetidas vezes;<\/li><\/ul>\n\n\n\n<\/figure>\n\n\n\n
- Cache Mobile<\/strong>: essa \u00e9 uma das op\u00e7\u00f5es mais importantes, que permite que seja gerado um cache tamb\u00e9m para dispositivos mobile, melhorando para eles o tempo de carregamento.<\/li><\/ul>\n\n\n\n<\/figure>\n\n\n\n
Um adendo interessante \u00e9 que, no caso do cache mobile, ele funciona separadamente do cache principal, isto \u00e9, o LiteSpeed necessita que um acesso prim\u00e1rio seja feito em uma p\u00e1gina, para que ela seja colocada em cache. Quando isso acontece, os outros acessos seguintes j\u00e1 acessam direto do conte\u00fado em cache.<\/p>\n\n\n\n
Quando h\u00e1 o cache separado, usu\u00e1rios de PC, por exemplo, n\u00e3o geram o cache para celulares e tablets, sendo necess\u00e1rio que cada tipo de dispositivo de navega\u00e7\u00e3o (mobile\/desktop) fa\u00e7a o primeiro acesso para iniciar o processo de cache das p\u00e1ginas, que \u00e9 instant\u00e2neo.<\/p>\n\n\n\n
Aba TTL<\/h3>\n\n\n\n
Agora, seguindo para a guia \u201cTTL\u201d, iremos definir alguns tempos de expira\u00e7\u00e3o do cache. Quando o TTL expira, o cache ser\u00e1 automaticamente limpo e renovado, sendo completamente gerado novamente.<\/p>\n\n\n\n
Aqui, \u00e9 importante prestarmos aten\u00e7\u00e3o em que tipo de site estamos atuando. Se \u00e9 um blog, que tem conte\u00fados di\u00e1rios, seu cache n\u00e3o poder\u00e1 ter uma expira\u00e7\u00e3o de data longa.<\/p>\n\n\n\n
Se \u00e9 um site mais est\u00e1tico, que recebe pouco conte\u00fado e atualiza\u00e7\u00f5es, a recomenda\u00e7\u00e3o \u00e9 deixar um TTL (Tempo de vida, do ingl\u00eas) maior, como algo a partir de uma semana. Agora, se o site realmente n\u00e3o recebe nenhuma atualiza\u00e7\u00e3o visual ou de conte\u00fado, \u00e9 poss\u00edvel adicionar tempo de vida de um ano.<\/p>\n\n\n\n
Os par\u00e2metros de TTL s\u00e3o sempre configurados em segundos, para uma maior precis\u00e3o. Ao lado, voc\u00ea ver\u00e1 quanto tempo em dias\/semanas\/meses corresponde a quantidade de segundos que inseriu, e temos os seguintes par\u00e2metros:<\/p>\n\n\n\n
<\/figure>\n\n\n\n- Public Cache<\/strong>: ser\u00e1 o tempo de armazenamento do cache para p\u00e1ginas p\u00fablicas;<\/li>
- Private Cache<\/strong>: \u00e9 referente ao tempo de armazenamento do cache de p\u00e1ginas privadas;<\/li>
- Front Page<\/strong>: ser\u00e1 configurado para o tempo de vida do cache especificamente da p\u00e1gina principal do site;<\/li>
- Feed<\/strong>: \u00e9 referente a quanto tempo ser\u00e1 armazenado o conte\u00fado em cache de seu feed;<\/li>
- REST<\/strong>: diz respeito ao tempo em que ser\u00e1 armazenado o cache das requisi\u00e7\u00f5es feitas pela API do WordPress.<\/li><\/ul>\n\n\n\n
Aba Purge<\/h3>\n\n\n\n
Agora, vamos para a aba seguinte \u201cPurge\u201d, que define os par\u00e2metros de exclus\u00e3o do cache mediante algumas a\u00e7\u00f5es espec\u00edficas. E, aqui, temos as seguintes op\u00e7\u00f5es:<\/p>\n\n\n\n
- Purge all on upgrade<\/strong>: far\u00e1 com que o seu cache seja automaticamente removido sempre que um tema, plugin ou o pr\u00f3prio WordPress for instalado ou atualizado, for\u00e7ando a renova\u00e7\u00e3o do cache;<\/li><\/ul>\n\n\n\n<\/figure>\n\n\n\n
- Auto purge rules for publish\/update<\/strong>: permitir\u00e1 com que o cache seja renovado quando as op\u00e7\u00f5es que estiverem marcadas forem executadas, como a adi\u00e7\u00e3o de um novo post, por exemplo;<\/li><\/ul>\n\n\n\n<\/figure>\n\n\n\n
- Serve stale<\/strong>: \u00e9 para permitir que conte\u00fado n\u00e3o atualizado seja entregue. Caso seu cache esteja sendo processado, por exemplo, enquanto um visitante acessa a p\u00e1gina, o \u00faltimo cache gerado ser\u00e1 disponibilizado para ele. Se n\u00e3o, ele acessar\u00e1 normalmente processando a visita sem cache;<\/li><\/ul>\n\n\n\n<\/figure>\n\n\n\n
Como aba seguinte, agora temos a \u201cExcludes\u201d. Nesta, passaremos um pouco mais rapidamente, j\u00e1 que consiste em especificar p\u00e1ginas e requisi\u00e7\u00f5es que n\u00e3o devem fazer parte do conte\u00fado armazenado em cache. Nela, temos os seguintes par\u00e2metros:<\/p>\n\n\n\n
- URLS;<\/li>
- Query Strings;<\/li>
- Categorias;<\/li>
- Tags;<\/li>
- Cookies;<\/li>
- Agentes de usu\u00e1rio;<\/li>
- Fun\u00e7\u00f5es do WP (Admin, editor, etc).<\/li><\/ul>\n\n\n\n
Aba Object<\/h3>\n\n\n\n
Um pouco mais \u00e0 frente, vamos direto para a aba \u201cObject\u201d, que diz respeito ao cache de objetos, muito importante para sites em WordPress.<\/p>\n\n\n\n
O cache de objetos tem rela\u00e7\u00e3o com as consultas ao banco de dados e, ao ativ\u00e1-lo, voc\u00ea poder\u00e1 armazenar as consultas ao banco, permitindo que o site n\u00e3o precise refaz\u00ea-la v\u00e1rias vezes.<\/p>\n\n\n\n
E, nessa guia, temos as seguintes op\u00e7\u00f5es:<\/p>\n\n\n\n
- Object cache<\/strong>: permite ativar as fun\u00e7\u00f5es do cache de objetos;<\/li><\/ul>\n\n\n\n<\/figure>\n\n\n\n
- Method<\/strong>: pode variar de acordo com seu provedor de hospedagem, e te permitir\u00e1 escolher entre o Memcached e o Redis, ambas extens\u00f5es para o PHP. Nos servidores da Kangaroo, recomendamos utilizar o Redis para maior efici\u00eancia;<\/li>
- Host e Port<\/strong>: aqui, voc\u00ea configurar\u00e1 seu host do cache de objeto (normalmente, ser\u00e1 localhost) e a porta de funcionamento, sendo 11211 para Memcached e 6379 para o Redis;<\/li><\/ul>\n\n\n\n
<\/figure>\n\n\n\nAba Browser<\/h3>\n\n\n\n
Aqui, vamos definir se o nosso cache tamb\u00e9m vai interagir com o navegador do usu\u00e1rio e, se sim, por quanto tempo ele ficar\u00e1 armazenado l\u00e1.<\/p>\n\n\n\n
Essa \u00e9 uma boa forma de poupar ainda mais recursos do servidor, j\u00e1 que poderemos armazenar algumas informa\u00e7\u00f5es direto no dispositivo do usu\u00e1rio, tornando a navega\u00e7\u00e3o ainda mais r\u00e1pida e leve ao acessar o site.<\/p>\n\n\n\n
- Para ativar essa configura\u00e7\u00e3o, vamos marcar \u201cOn\u201d em \u201cBrowser cache\u201d.<\/li><\/ol>\n\n\n\n<\/figure>\n\n\n\n
- Agora, para configurar o tempo em que ele ser\u00e1 armazenado, vamos inserir o valor em segundos em \u201cBrowser Cache TTL\u201d. Como o cache do navegador ser\u00e1 limpo junto com o cache do site, podemos deixar um cache maior aqui, como algo perto de um m\u00eas.<\/li><\/ul>\n\n\n\n<\/figure>\n\n\n\n
Aba Advanced<\/h3>\n\n\n\n
Por \u00faltimo, vamos fazer uma \u00fanica configura\u00e7\u00e3o extra nessa aba, que ser\u00e1 ativar a fun\u00e7\u00e3o \u201cInstant click\u201d marcando-a para \u201cOn\u201d. Atrav\u00e9s dela, ser\u00e1 poss\u00edvel que as p\u00e1ginas que o visitante do site comecem a ser pr\u00e9-carregadas assim que ele passa sobre o link delas.<\/p>\n\n\n\n
<\/figure>\n\n\n\nClaro, isso gera algumas requisi\u00e7\u00f5es extras no servidor, podendo aumentar um pouco a carga de processamento, mas ajuda a gerar uma melhor sensa\u00e7\u00e3o de velocidade percebida no carregamento.<\/p>\n\n\n\n
Configurando otimiza\u00e7\u00f5es de CSS<\/h3>\n\n\n\n
Uma das principais formas de otimiza\u00e7\u00e3o do site, assim como os t\u00f3picos a seguir, \u00e9 a otimiza\u00e7\u00e3o dos arquivos de CSS, seja atrav\u00e9s de compress\u00f5es ou da melhoria de entrega desses recursos.<\/p>\n\n\n\n
Por ser de tanta import\u00e2ncia, podemos configurar alguns desses par\u00e2metros para que o site tenha um melhor carregamento. Dentre as principais configura\u00e7\u00f5es, est\u00e3o os seguintes par\u00e2metros:<\/p>\n\n\n\n
- CSS Minify<\/strong>: faz a redu\u00e7\u00e3o dos arquivos CSS, retirando a identa\u00e7\u00e3o, que \u00e9 a organiza\u00e7\u00e3o dos arquivos, retirando os espa\u00e7os, o que permite que o arquivo fique com um tamanho menor, proporcionando uma maior velocidade em process\u00e1-los;<\/li><\/ul>\n\n\n\n<\/figure>\n\n\n\n
- CSS Combine<\/strong>: far\u00e1 com que os seus arquivos CSS sejam unificados em um s\u00f3, reduzindo a quantidade de requisi\u00e7\u00f5es que seu servidor far\u00e1, mas aumentando o tempo de carregamento desse \u00fanico arquivo;<\/li><\/ul>\n\n\n\n<\/figure>\n\n\n\n
- Font Display Optimzation<\/strong>: essa op\u00e7\u00e3o, quando configurada para \u201cSWAP\u201d permitir\u00e1 que as fontes sejam escritas genericamente enquanto n\u00e3o forem totalmente carregadas e, quando finalmente carregarem, o resultado vis\u00edvel do texto ser\u00e1 alterado corretamente para a fonte certa.<\/li><\/ul>\n\n\n\n<\/figure>\n\n\n\n
Com a configura\u00e7\u00e3o de combina\u00e7\u00e3o dos arquivos CSS, \u00e9 poss\u00edvel que ocorram falhas no CSS do site, causando algum problema de forma\u00e7\u00e3o do visual da p\u00e1gina. Por isso, atente-se para reverter as altera\u00e7\u00f5es caso o resultado n\u00e3o seja o esperado.<\/p>\n\n\n\n
Otimiza\u00e7\u00f5es de c\u00f3digo JavaScript<\/h3>\n\n\n\n
Possivelmente, essa ser\u00e1 a parte da configura\u00e7\u00e3o que mais vai influenciar no tempo real do carregamento da p\u00e1gina, j\u00e1 que na maior parte dos sites as requisi\u00e7\u00f5es em JavaScript s\u00e3o o que demora mais tempo para completar a execu\u00e7\u00e3o.<\/p>\n\n\n\n
Dito isso, tente sempre manter um n\u00famero m\u00ednimo dessas requisi\u00e7\u00f5es em seu site, utilizando apenas o que for realmente necess\u00e1rio.<\/p>\n\n\n\n
Algumas boas dicas para reduzir essas requisi\u00e7\u00f5es \u00e9 eliminar plugins que n\u00e3o estejam em uso, al\u00e9m de remover tamb\u00e9m solicita\u00e7\u00f5es JS do tema que n\u00e3o sejam \u00fateis.<\/p>\n\n\n\n
Dadas as dicas, vamos \u00e0s op\u00e7\u00f5es de configura\u00e7\u00e3o:<\/p>\n\n\n\n
- JS Minify<\/strong>: com essa op\u00e7\u00e3o, poderemos reduzir bastante o tamanho dos arquivos JS, j\u00e1 que o c\u00f3digo ser\u00e1 aglutinado de modo que n\u00e3o fiquem espa\u00e7os em branco, o que permitir\u00e1 maior velocidade no processamento da requisi\u00e7\u00e3o;<\/li><\/ul>\n\n\n\n<\/figure>\n\n\n\n
- JS Combine<\/strong>: esse par\u00e2metro pode causar algum mau funcionamento no site caso algum script necess\u00e1rio quebre no processo, mas configur\u00e1-lo ir\u00e1 reduzir a quantidade de scripts que a p\u00e1gina utiliza, carregando tudo em um \u00fanico arquivo de uma vez s\u00f3;<\/li><\/ul>\n\n\n\n<\/figure>\n\n\n\n
- JS Combine External and Inline<\/strong>: quando a op\u00e7\u00e3o de JS Combine estiver ativa, essa configura\u00e7\u00e3o far\u00e1 com que o c\u00f3digo seja colocado dentro da pr\u00f3pria p\u00e1gina, carregando internamente e ajudando a reduzir poss\u00edveis problemas de carregamento causados pela configura\u00e7\u00e3o anterior;<\/li><\/ul>\n\n\n\n<\/figure>\n\n\n\n
- Load JS Deferred<\/strong>: aqui temos a configura\u00e7\u00e3o que mais deve alterar a percep\u00e7\u00e3o de tempo de carregamento da sua p\u00e1gina, e temos duas op\u00e7\u00f5es de recurso, o Deferred e o Delayed.<\/li><\/ul>\n\n\n\n<\/figure>\n\n\n\n
- Deferred<\/strong>: far\u00e1 com que as requisi\u00e7\u00f5es JS sejam executadas apenas ap\u00f3s a intera\u00e7\u00e3o do usu\u00e1rio com a p\u00e1gina, isto \u00e9, quando ele movimentar o mouse, clicar em algo ou mover a p\u00e1gina subindo ou descendo;
- Delayed<\/strong>: colocar\u00e1 o carregamento das requisi\u00e7\u00f5es JS para serem executadas apenas ap\u00f3s o total processamento das outras requisi\u00e7\u00f5es.<\/li><\/ul><\/li><\/ul>\n\n\n\n
A configura\u00e7\u00e3o do m\u00e9todo Delayed ou Deferred \u00e9 o que causar\u00e1 a maior sensa\u00e7\u00e3o de velocidade ao acessar o site, na maioria dos casos.<\/p>\n\n\n\n
Para a maioria dos sites, a op\u00e7\u00e3o \u201cDelayed\u201d ter\u00e1 resultados melhores, j\u00e1 que nela temos uma incid\u00eancia menor de problemas relacionados ao carregamento de JS.<\/p>\n\n\n\n
Contudo, vale o teste para verificar se o carregamento ap\u00f3s a intera\u00e7\u00e3o do usu\u00e1rio, 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.<\/p>\n\n\n\n
Otimiza\u00e7\u00f5es de carregamento do HTML<\/h3>\n\n\n\n
Por \u00faltimo, chegamos \u00e0 guia de configura\u00e7\u00f5es do HTML, que tamb\u00e9m s\u00e3o de grande valia para o ganho de velocidade no carregamento das nossas p\u00e1ginas.<\/p>\n\n\n\n
Para essa aba, vamos dar mais aten\u00e7\u00e3o \u00e0s seguintes funcionalidades:<\/p>\n\n\n\n
- HTML Minify<\/strong>: far\u00e1 uma redu\u00e7\u00e3o do arquivo HTML da p\u00e1gina, removendo espa\u00e7os em branco e reduzindo a identa\u00e7\u00e3o, fazendo com que o arquivo fique mais leve e, consequentemente, seja carregado mais rapidamente;<\/li><\/ul>\n\n\n\n<\/figure>\n\n\n\n
- DNS Prefetch<\/strong>: caso seu site fa\u00e7a conex\u00f5es com links externos, colocar o LINK\/HOST em prefetch ajudar\u00e1 a carreg\u00e1-las mais rapidamente, uma vez que essa configura\u00e7\u00e3o permitir\u00e1 estabelecer a conex\u00e3o previamente, tornando mais \u00e1gil a comunica\u00e7\u00e3o com a fonte externa. Para essa configura\u00e7\u00e3o, devemos inserir um host por linha;<\/li><\/ul>\n\n\n\n<\/figure>\n\n\n\n
- DNS Prefetch Control<\/strong>: com esse par\u00e2metro, poderemos fazer com que o site se comunique mais rapidamente com as fontes externas de arquivos JS, CSS, etc., para que tais requisi\u00e7\u00f5es sejam executadas e carregadas mais r\u00e1pido;<\/li><\/ul>\n\n\n\n<\/figure>\n\n\n\n
- Load Google Fonts Asynchronously<\/strong>: far\u00e1 com que todas as fontes que v\u00eam do Google Fonts sejam carregadas apenas ap\u00f3s o processamento completo da p\u00e1gina, causando um efeito melhor de carregamento;<\/li><\/ul>\n\n\n\n<\/figure>\n\n\n\n
Conclus\u00e3o<\/h2>\n\n\n\n
Ao fim deste artigo, agora esperamos que voc\u00ea tenha compreendido algumas das principais fun\u00e7\u00f5es do LiteSpeed que podem te ajudar a atingir melhores resultados de performance em seu WordPress, ajudando a deixar seu site bem mais r\u00e1pido.<\/p>\n\n\n\n
Como dissemos por todo o post, infelizmente n\u00e3o h\u00e1 um segredo, n\u00e3o h\u00e1 formula\u00e7\u00e3o m\u00e1gica 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\u00e1veis.<\/p>\n\n\n\n
Em seus testes, n\u00e3o se assuste se o site parecer quebrado em algum momento, por conta de algum arquivo CSS ou JS que foi alterado nas otimiza\u00e7\u00f5es, \u00e9 perfeitamente normal e completamente revers\u00edvel. N\u00e3o desista, siga nossas dicas e ter\u00e1 resultados bem interessantes =)<\/p>\n\n\n\n
Afinal, ter a velocidade de carregamento pode te ajudar a faturar mais e, em momentos delicados como este, \u00e9 sempre bom contar com rendimentos extras, n\u00e3o \u00e9 mesmo?<\/p>\n\n\n\n
Esperamos que todas as informa\u00e7\u00f5es aqui possam te ajudar a atingir os resultados desejados, qualquer d\u00favida, nosso time de suporte estar\u00e1 prontinho para te atender. Ficaremos por aqui e at\u00e9 a pr\u00f3xima o\/<\/p>\n","protected":false},"excerpt":{"rendered":"
Com tudo no mundo nos acostumando \u00e0 m\u00e1xima agilidade, n\u00e3o poder\u00edamos espera resultados muito diferentes ao pensarmos que tamb\u00e9m queremos acessar sites mais r\u00e1pidos. Como mostram as pesquisas, mais da metade dos usu\u00e1rios tentem a fechar p\u00e1ginas que demorem mais de 3 segundos para exibirem o conte\u00fado e, quando pensamos em sites que dependem das […]<\/p>\n","protected":false},"author":1,"featured_media":471,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[10,61,52,46,18,62,32,20],"class_list":["post-449","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-litespeed","tag-litespeed","tag-mais","tag-otimizacao","tag-performance","tag-plugin","tag-rapido","tag-site","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/kangaroo.host\/blog\/wp-json\/wp\/v2\/posts\/449","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kangaroo.host\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kangaroo.host\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kangaroo.host\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kangaroo.host\/blog\/wp-json\/wp\/v2\/comments?post=449"}],"version-history":[{"count":1,"href":"https:\/\/kangaroo.host\/blog\/wp-json\/wp\/v2\/posts\/449\/revisions"}],"predecessor-version":[{"id":2644,"href":"https:\/\/kangaroo.host\/blog\/wp-json\/wp\/v2\/posts\/449\/revisions\/2644"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kangaroo.host\/blog\/wp-json\/wp\/v2\/media\/471"}],"wp:attachment":[{"href":"https:\/\/kangaroo.host\/blog\/wp-json\/wp\/v2\/media?parent=449"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kangaroo.host\/blog\/wp-json\/wp\/v2\/categories?post=449"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kangaroo.host\/blog\/wp-json\/wp\/v2\/tags?post=449"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
- Load Google Fonts Asynchronously<\/strong>: far\u00e1 com que todas as fontes que v\u00eam do Google Fonts sejam carregadas apenas ap\u00f3s o processamento completo da p\u00e1gina, causando um efeito melhor de carregamento;<\/li><\/ul>\n\n\n\n
- DNS Prefetch Control<\/strong>: com esse par\u00e2metro, poderemos fazer com que o site se comunique mais rapidamente com as fontes externas de arquivos JS, CSS, etc., para que tais requisi\u00e7\u00f5es sejam executadas e carregadas mais r\u00e1pido;<\/li><\/ul>\n\n\n\n
- DNS Prefetch<\/strong>: caso seu site fa\u00e7a conex\u00f5es com links externos, colocar o LINK\/HOST em prefetch ajudar\u00e1 a carreg\u00e1-las mais rapidamente, uma vez que essa configura\u00e7\u00e3o permitir\u00e1 estabelecer a conex\u00e3o previamente, tornando mais \u00e1gil a comunica\u00e7\u00e3o com a fonte externa. Para essa configura\u00e7\u00e3o, devemos inserir um host por linha;<\/li><\/ul>\n\n\n\n
- HTML Minify<\/strong>: far\u00e1 uma redu\u00e7\u00e3o do arquivo HTML da p\u00e1gina, removendo espa\u00e7os em branco e reduzindo a identa\u00e7\u00e3o, fazendo com que o arquivo fique mais leve e, consequentemente, seja carregado mais rapidamente;<\/li><\/ul>\n\n\n\n
- Delayed<\/strong>: colocar\u00e1 o carregamento das requisi\u00e7\u00f5es JS para serem executadas apenas ap\u00f3s o total processamento das outras requisi\u00e7\u00f5es.<\/li><\/ul><\/li><\/ul>\n\n\n\n
- Deferred<\/strong>: far\u00e1 com que as requisi\u00e7\u00f5es JS sejam executadas apenas ap\u00f3s a intera\u00e7\u00e3o do usu\u00e1rio com a p\u00e1gina, isto \u00e9, quando ele movimentar o mouse, clicar em algo ou mover a p\u00e1gina subindo ou descendo;
- Load JS Deferred<\/strong>: aqui temos a configura\u00e7\u00e3o que mais deve alterar a percep\u00e7\u00e3o de tempo de carregamento da sua p\u00e1gina, e temos duas op\u00e7\u00f5es de recurso, o Deferred e o Delayed.<\/li><\/ul>\n\n\n\n
- JS Combine External and Inline<\/strong>: quando a op\u00e7\u00e3o de JS Combine estiver ativa, essa configura\u00e7\u00e3o far\u00e1 com que o c\u00f3digo seja colocado dentro da pr\u00f3pria p\u00e1gina, carregando internamente e ajudando a reduzir poss\u00edveis problemas de carregamento causados pela configura\u00e7\u00e3o anterior;<\/li><\/ul>\n\n\n\n
- JS Combine<\/strong>: esse par\u00e2metro pode causar algum mau funcionamento no site caso algum script necess\u00e1rio quebre no processo, mas configur\u00e1-lo ir\u00e1 reduzir a quantidade de scripts que a p\u00e1gina utiliza, carregando tudo em um \u00fanico arquivo de uma vez s\u00f3;<\/li><\/ul>\n\n\n\n
- JS Minify<\/strong>: com essa op\u00e7\u00e3o, poderemos reduzir bastante o tamanho dos arquivos JS, j\u00e1 que o c\u00f3digo ser\u00e1 aglutinado de modo que n\u00e3o fiquem espa\u00e7os em branco, o que permitir\u00e1 maior velocidade no processamento da requisi\u00e7\u00e3o;<\/li><\/ul>\n\n\n\n
- Font Display Optimzation<\/strong>: essa op\u00e7\u00e3o, quando configurada para \u201cSWAP\u201d permitir\u00e1 que as fontes sejam escritas genericamente enquanto n\u00e3o forem totalmente carregadas e, quando finalmente carregarem, o resultado vis\u00edvel do texto ser\u00e1 alterado corretamente para a fonte certa.<\/li><\/ul>\n\n\n\n
- CSS Combine<\/strong>: far\u00e1 com que os seus arquivos CSS sejam unificados em um s\u00f3, reduzindo a quantidade de requisi\u00e7\u00f5es que seu servidor far\u00e1, mas aumentando o tempo de carregamento desse \u00fanico arquivo;<\/li><\/ul>\n\n\n\n
- CSS Minify<\/strong>: faz a redu\u00e7\u00e3o dos arquivos CSS, retirando a identa\u00e7\u00e3o, que \u00e9 a organiza\u00e7\u00e3o dos arquivos, retirando os espa\u00e7os, o que permite que o arquivo fique com um tamanho menor, proporcionando uma maior velocidade em process\u00e1-los;<\/li><\/ul>\n\n\n\n
- Agora, para configurar o tempo em que ele ser\u00e1 armazenado, vamos inserir o valor em segundos em \u201cBrowser Cache TTL\u201d. Como o cache do navegador ser\u00e1 limpo junto com o cache do site, podemos deixar um cache maior aqui, como algo perto de um m\u00eas.<\/li><\/ul>\n\n\n\n
- Host e Port<\/strong>: aqui, voc\u00ea configurar\u00e1 seu host do cache de objeto (normalmente, ser\u00e1 localhost) e a porta de funcionamento, sendo 11211 para Memcached e 6379 para o Redis;<\/li><\/ul>\n\n\n\n
- Method<\/strong>: pode variar de acordo com seu provedor de hospedagem, e te permitir\u00e1 escolher entre o Memcached e o Redis, ambas extens\u00f5es para o PHP. Nos servidores da Kangaroo, recomendamos utilizar o Redis para maior efici\u00eancia;<\/li>
- Object cache<\/strong>: permite ativar as fun\u00e7\u00f5es do cache de objetos;<\/li><\/ul>\n\n\n\n
- Serve stale<\/strong>: \u00e9 para permitir que conte\u00fado n\u00e3o atualizado seja entregue. Caso seu cache esteja sendo processado, por exemplo, enquanto um visitante acessa a p\u00e1gina, o \u00faltimo cache gerado ser\u00e1 disponibilizado para ele. Se n\u00e3o, ele acessar\u00e1 normalmente processando a visita sem cache;<\/li><\/ul>\n\n\n\n
- Auto purge rules for publish\/update<\/strong>: permitir\u00e1 com que o cache seja renovado quando as op\u00e7\u00f5es que estiverem marcadas forem executadas, como a adi\u00e7\u00e3o de um novo post, por exemplo;<\/li><\/ul>\n\n\n\n
- Private Cache<\/strong>: \u00e9 referente ao tempo de armazenamento do cache de p\u00e1ginas privadas;<\/li>
- Public Cache<\/strong>: ser\u00e1 o tempo de armazenamento do cache para p\u00e1ginas p\u00fablicas;<\/li>
- Cache Mobile<\/strong>: essa \u00e9 uma das op\u00e7\u00f5es mais importantes, que permite que seja gerado um cache tamb\u00e9m para dispositivos mobile, melhorando para eles o tempo de carregamento.<\/li><\/ul>\n\n\n\n
- Cache PHP Resources<\/strong>: far\u00e1 com que algumas requisi\u00e7\u00f5es de plugins, relacionadas a arquivos PHP sejam armazenadas no cache, permitindo que elas n\u00e3o precisem ser processadas repetidas vezes;<\/li><\/ul>\n\n\n\n
- Cache REST API<\/strong>: essa op\u00e7\u00e3o ir\u00e1 colocar no cache todas as requisi\u00e7\u00f5es de API relacionadas ao funcionamento interno do WordPress;<\/li><\/ul>\n\n\n\n
- Cache Logged-in users<\/strong>: quando ativada, far\u00e1 com que o plugin ative o cache tamb\u00e9m para usu\u00e1rios conectados. Essa \u00e9 uma configura\u00e7\u00e3o totalmente opcional, de acordo com o cen\u00e1rio e necessidade de seu site;<\/li><\/ul>\n\n\n\n
- Enable Cache<\/strong>: permite ativar o sistema de cache do LiteSpeed, e ir\u00e1 interagir com as demais configura\u00e7\u00f5es referentes ao cache;<\/li><\/ul>\n\n\n\n
- Uma vez que a instala\u00e7\u00e3o esteja totalmente feita, prossiga clicando em \u201cAtivar\u201d.<\/li><\/ul>\n\n\n\n
- Na barra de pesquisa da loja, busque por \u201clitespeed\u201d e clique em \u201cInstalar\u201d quando localizar o plugin LiteSpeed Cache;<\/li><\/ul>\n\n\n\n
- Com o painel aberto, localize a guia \u201cPlugins\u201d e siga para \u201cAdicionar novo\u201d;<\/li><\/ul>\n\n\n\n
- Faturamento<\/strong>: visto que em lojas e sites que exibem an\u00fancios, os visitantes devem tender a fecharem as p\u00e1ginas caso o site demore a carregar, o que pode acarretar uma s\u00e9rie de preju\u00edzos;<\/li>