{"id":381,"date":"2022-06-08T19:28:19","date_gmt":"2022-06-08T22:28:19","guid":{"rendered":"https:\/\/kangaroo.host\/blog\/wp-rocket-seu-site-wordpress-mais-rapido\/"},"modified":"2024-11-01T22:52:25","modified_gmt":"2024-11-02T01:52:25","slug":"wp-rocket-seu-site-wordpress-mais-rapido","status":"publish","type":"post","link":"https:\/\/kangaroo.host\/blog\/wp-rocket-seu-site-wordpress-mais-rapido\/","title":{"rendered":"Como deixar seu site WordPress mais r\u00e1pido com WP Rocket"},"content":{"rendered":"<p>Ter um site mais r\u00e1pido \u00e9 uma das tarefas mais importantes, e igualmente dif\u00edceis para qualquer criador de conte\u00fado na web, e isso pode ser ainda mais acentuado quando falamos do <a href=\"https:\/\/wordpress.org\/\" target=\"_blank\" rel=\"noopener\">WordPress<\/a>.<\/p>\n<p>Al\u00e9m de ser um fator muito importante para o rankeamento do site, o tempo de carregamento da p\u00e1gina influencia diretamente na experi\u00eancia do usu\u00e1rio.<\/p>\n<p>Podendo ser um fator respons\u00e1vel por desestimular o usu\u00e1rio a continuar na p\u00e1gina, uma vez que pesquisas apontam que os visitantes tendem a fechar sites que n\u00e3o carregam de maneira r\u00e1pida.<\/p>\n<p>Para tornar a tarefa um pouco mais simples, constantemente novos plugins de otimiza\u00e7\u00e3o s\u00e3o adicionados ao reposit\u00f3rio do WordPress, e um dos mais antigos e conhecidos atualmente \u00e9 o WP Rocket, e \u00e9 justamente dele que falaremos hoje nesse artigo.<\/p>\n<h3>Sum\u00e1rio<\/h3>\n<ul>\n<li><a href=\"#porque\">Por que devo otimizar meu site?<\/a><\/li>\n<li><a href=\"#oque\">O que \u00e9 o WP Rocket?<\/a><\/li>\n<li><a href=\"#ativacao\">Solicitando a ativa\u00e7\u00e3o gratuita da Kangaro<\/a>o<\/li>\n<li><a href=\"#instalar\">Como instalar o WP Rocket em meu site?<\/a><\/li>\n<li><a href=\"#testar\">Como posso testar a velocidade do meu site?<\/a><\/li>\n<li><a href=\"#otimizar\">Como otimizar o site com o WP Rocket?<\/a><\/li>\n<li><a href=\"#conclusao\">Conclus\u00e3o<\/a><\/li>\n<\/ul>\n<h2 id=\"porque\">Por que devo otimizar meu site?<\/h2>\n<p>Antes de qualquer coisa, \u00e9 muito importante saber o motivo de investir tempo (e at\u00e9 dinheiro, em alguns casos) na otimiza\u00e7\u00e3o de seu site. E, por isso, vamos passar alguns pontos interessantes.<\/p>\n<ul>\n<li><strong>Evas\u00e3o do site<\/strong>: O primeiro, como dissemos acima, \u00e9 o abandono da p\u00e1gina por parte do visitante, caso a p\u00e1gina seja lenta.<\/li>\n<\/ul>\n<p>Mais da metade dos usu\u00e1rios tende a fechar sites que demorem mais de 3 segundos para carregar, o que pode acarretar uma s\u00e9rie de preju\u00edzos, principalmente para sites que dependam de an\u00fancios e\/ou vendas para ter sua rentabilidade.<\/p>\n<ul>\n<li><strong>Experi\u00eancia do usu\u00e1rio<\/strong>: al\u00e9m, claro, de evitar a evas\u00e3o, o carregamento r\u00e1pido e fluido \u00e9 essencial para que o usu\u00e1rio final sinta-se confort\u00e1vel ao navegar por seu site.<\/li>\n<\/ul>\n<p>Al\u00e9m disso, essa fluidez torna a visita mais din\u00e2mica, permitindo que seu visitante consuma uma quantidade maior de conte\u00fado no mesmo espa\u00e7o de tempo.<\/p>\n<ul>\n<li><strong>\u00c9 importante para o SEO<\/strong>: dentre as centenas de m\u00e9tricas (muitas delas, desconhecidas) dos motores de busca e, principalmente, da Google, est\u00e1 o tempo de carregamento do site.<\/li>\n<\/ul>\n<p>Isso significa que ter um site r\u00e1pido tamb\u00e9m influencia em o qu\u00e3o bem seu site ser\u00e1 posicionado nas pesquisas.<\/p>\n<p>Um fator ainda mais importante \u00e9 a otimiza\u00e7\u00e3o de dispositivos m\u00f3veis, que tende a ser bem mais complexa, gerando notas de desempenho um pouco menores nos testes na maioria dos casos.<\/p>\n<p>Somado a todos os pontos acima, ter seu site mais r\u00e1pido ajuda a passar ao visitante uma imagem de maior envolvimento com o projeto, demonstrando investimento de tempo e esfor\u00e7o para tornar o site um ambiente melhor e mais agrad\u00e1vel.<\/p>\n<h2 id=\"oque\">O que \u00e9 o WP Rocket?<\/h2>\n<p><img fetchpriority=\"high\" decoding=\"async\" class=\"alignnone size-full wp-image-7070\" src=\"https:\/\/kangaroo.host\/blog\/wp-content\/uploads\/2022\/06\/wp-rocket-site.png\" alt=\"Site WP Rocket\" width=\"947\" height=\"502\" \/><\/p>\n<p>O WP Rocket \u00e9 um plugin pago de otimiza\u00e7\u00e3o, que tem como intuito descomplicar o processo de otimiza\u00e7\u00e3o do site ao m\u00e1ximo, tornando essa tarefa mais simples at\u00e9 mesmo para usu\u00e1rios mais leigos.<\/p>\n<p>Com suas ferramentas simples e bem objetivas, toda a configura\u00e7\u00e3o pode ser feita em alguns minutos, com resultados imediatos, refletindo em uma boa melhora no tempo de carregamento de seu site.<\/p>\n<p>Por ser um plugin pago, \u00e9 muito importante sempre atentar-se para n\u00e3o baix\u00e1-lo de qualquer lugar na internet, pois os arquivos podem vir contaminados e prejudicarem a seguran\u00e7a de seu site. Por isso, utilize sempre conte\u00fado licenciado pelo desenvolvedor.<\/p>\n<p>Uma forma de ter o plugin gratuitamente, e de forma 100% segura, \u00e9 atrav\u00e9s dos planos de <a href=\"https:\/\/kangaroo.host\/blog\/hospedagem-de-site\/\">hospedagem<\/a> e <a href=\"https:\/\/kangaroo.host\/blog\/revenda-de-hospedagem\/\">revenda<\/a> que a Kangaroo oferece, uma vez que disponibilizamos gratuitamente a ativa\u00e7\u00e3o licen\u00e7a original do WP Rocket e outros plugins, tudo j\u00e1 incluso em seu plano, bastando apenas solicitar a ativa\u00e7\u00e3o para nossa equipe de suporte.<\/p>\n<h2 id=\"ativacao\">Solicitando ativa\u00e7\u00e3o gratuita do WP Rocket na Kangaroo<\/h2>\n<p>Solicitar a ativa\u00e7\u00e3o do WP Rocket para nossa equipe \u00e9 muito simples, e para fazer isso, voc\u00ea precisar\u00e1 apenas ter um plano de hospedagem ou revenda de hospedagem ativo conosco.<\/p>\n<p>Nestes planos, disponibilizamos uma ativa\u00e7\u00e3o de licen\u00e7a para cada conta de hospedagem contida. Isto \u00e9: se voc\u00ea tem uma hospedagem, ter\u00e1 uma ativa\u00e7\u00e3o e se tem uma revenda que permite a cria\u00e7\u00e3o de at\u00e9 30 contas, poder\u00e1 solicitar 30 ativa\u00e7\u00f5es da licen\u00e7a.<\/p>\n<p>O pedido de ativa\u00e7\u00e3o \u00e9 feito para nossa equipe exclusivamente atrav\u00e9s de nossa central de atendimento na \u00e1rea do cliente, a nossa \u00e1rea de tickets. Para abrir um novo ticket espec\u00edfico para ativa\u00e7\u00e3o, voc\u00ea pode clicar <a href=\"https:\/\/kangaroo.host\/blog\/central\/submitticket.php?step=2&amp;deptid=1\">neste link<\/a>.<\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-7071 size-full\" src=\"https:\/\/kangaroo.host\/blog\/wp-content\/uploads\/2022\/06\/Abrir-ticket-Kangaroo.png\" alt=\"Abrir ticket Kangaroo\" width=\"1264\" height=\"669\" \/><\/p>\n<p>Ao preencher o conte\u00fado da mensagem, ser\u00e1 necess\u00e1rio nos informar os dados de acesso ao seu WP Admin e informar qual dos plugins disponibilizados deseja. Isso \u00e9 necess\u00e1rio pois precisamos acessar sua instala\u00e7\u00e3o para conectar seu site \u00e0 nossa conta oficial junto ao desenvolvedor, \u00e0 qual pertence a licen\u00e7a que ser\u00e1 ativada em seu site.<\/p>\n<p>Se desejar uma camada extra de seguran\u00e7a, sem que seja necess\u00e1rio fornecer os dados de acesso, \u00e9 poss\u00edvel utilizar plugins como o <a href=\"https:\/\/wordpress.org\/plugins\/temporary-login-without-password\/\" target=\"_blank\" rel=\"noopener\">Temporary Login Without Password<\/a> ou o <a href=\"https:\/\/wordpress.org\/plugins\/one-time-login\/\" target=\"_blank\" rel=\"noopener\">One Time login<\/a>, para gerar acessos tempor\u00e1rios para fazermos a instala\u00e7\u00e3o e ativa\u00e7\u00e3o do plugin.<\/p>\n<h2 id=\"instalar\">Como instalar em meu site WordPress?<\/h2>\n<p>De maneira geral, o processo de instala\u00e7\u00e3o \u00e9 extremamente simples. Antes de tudo, voc\u00ea precisar\u00e1 ter acesso \u00e0 sua conta da WP Rocket, onde est\u00e1 sua assinatura do plugin.<\/p>\n<p>Com sua conta aberta, ser\u00e1 poss\u00edvel baixar o plugin direto no painel de controle do desenvolvedor. Voc\u00ea receber\u00e1 um arquivo compactado com todo o conte\u00fado de instala\u00e7\u00e3o do plugin, e \u00e9 ele que usaremos para instalar o WP Rocket, utilizando os passos a seguir:<\/p>\n<ul>\n<li>Primeiramente, fa\u00e7a login em seu WP Admin, para podermos iniciar as etapas;<br \/>\n<img decoding=\"async\" class=\"alignnone size-large wp-image-7020\" src=\"https:\/\/kangaroo.host\/blog\/wp-content\/uploads\/2022\/05\/Tela-wp-admin-wordpress-1024x540.png\" alt=\"Tela wp admin wordpress\" width=\"800\" height=\"422\" \/><\/li>\n<li>Agora, com o wp-admin aberto, localize a guia \u201cPlugins\u201d no canto esquerdo e navegue at\u00e9 \u201cAdicionar novo\u201d;<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7021\" src=\"https:\/\/kangaroo.host\/blog\/wp-content\/uploads\/2024\/11\/Adicionar-novo-plugin.png\" alt=\"Adicionar novo plugin wordpress\" width=\"161\" height=\"145\" \/><\/li>\n<li>Na nova tela que se abrir\u00e1, clique em \u201cEnviar novo\u201d no canto superior;<\/li>\n<li>Ser\u00e1 exposta uma nova parte, na qual voc\u00ea dever\u00e1 clicar em \u201cSelecionar arquivo\u201d;<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-7022\" src=\"https:\/\/kangaroo.host\/blog\/wp-content\/uploads\/2022\/05\/Enviar-tema-wordpress-1024x239.png\" alt=\"Enviar tema wordpress\" width=\"800\" height=\"187\" \/><\/li>\n<li>Ao fazer isso, voc\u00ea precisar\u00e1 navegar na ferramenta de busca para encontrar o arquivo compactado de instala\u00e7\u00e3o do WP Rocket. Selecione-o e clique em \u201cAbrir\u201d;<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-7026 size-full\" src=\"https:\/\/kangaroo.host\/blog\/wp-content\/uploads\/2022\/05\/Enviar-plugin.png\" alt=\"Enviar plugin wp rocket\" width=\"567\" height=\"307\" \/><\/li>\n<li>Com isso feito, basta clicar em \u201cInstalar agora\u201d e aguardar o in\u00edcio da instala\u00e7\u00e3o;<\/li>\n<li>Terminada a instala\u00e7\u00e3o, voc\u00ea poder\u00e1 ativar o plugin direto na tela de confirma\u00e7\u00e3o. Se desejar fazer isso, \u00e9 s\u00f3 clicar no bot\u00e3o \u201cAtivar plugin\u201d;<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-7027 size-full\" src=\"https:\/\/kangaroo.host\/blog\/wp-content\/uploads\/2022\/05\/ativar-plugin-wp-rocket.png\" alt=\"Ativar plugin wp rocket\" width=\"516\" height=\"223\" \/><\/li>\n<li>Uma vez que o WP Rocket estiver ativo, voc\u00ea poder\u00e1 iniciar as configura\u00e7\u00f5es dele, clicando no nome do plugin no menu superior;<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7028\" src=\"https:\/\/kangaroo.host\/blog\/wp-content\/uploads\/2022\/05\/dashboard.png\" alt=\"dashboard\" width=\"416\" height=\"31\" \/><\/li>\n<li>No painel do WP Rocket, voc\u00ea poder\u00e1 verificar o status da ativa\u00e7\u00e3o da licen\u00e7a feita com sucesso e come\u00e7ar as configura\u00e7\u00f5es de otimiza\u00e7\u00e3o.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-7029 size-full\" src=\"https:\/\/kangaroo.host\/blog\/wp-content\/uploads\/2022\/05\/wp-rocket.png\" alt=\"wp rocket para site wordpress mais r\u00e1pido\" width=\"559\" height=\"168\" \/><\/li>\n<\/ul>\n<p>Vale dizer, ainda, que esse \u00e9 apenas um dos m\u00e9todos de instala\u00e7\u00e3o, n\u00e3o o \u00fanico. Sendo apenas o mais simples.<\/p>\n<p>Se desejar, \u00e9 poss\u00edvel realizar a instala\u00e7\u00e3o deste (ou qualquer outro plugin), enviando a pasta de instala\u00e7\u00e3o dele para o diret\u00f3rio wp-content\/plugins em sua instala\u00e7\u00e3o WordPress, isto \u00e9, enviar todo o conte\u00fado do arquivo compactado para a pasta padr\u00e3o de plugins do WP.<\/p>\n<p>\u00c9 importante dizer tamb\u00e9m que n\u00e3o recomendamos, em hip\u00f3tese alguma, a instala\u00e7\u00e3o de plugins que n\u00e3o sejam originais, visto que estes podem danificar gravemente a integridade de sua instala\u00e7\u00e3o WordPress.<\/p>\n<p>Por isso, sempre d\u00ea prefer\u00eancia a plugins e temas originais, adquiridos e baixados diretamente em reposit\u00f3rios oficiais de seus respectivos desenvolvedores.<\/p>\n<h2 id=\"testar\">Como testar a velocidade do meu site?<\/h2>\n<p>Os testes iniciais de carregamento do seu site podem ser um pouco frustrantes, mas n\u00e3o desanime, voc\u00ea conseguir\u00e1 resultados melhores.<\/p>\n<p>Por outro lado, se voc\u00ea n\u00e3o sabe onde pode medir o tempo que seu site leva para carregar, vamos passar algumas recomenda\u00e7\u00f5es dos sites mais utilizados atualmente. Vamos l\u00e1:<\/p>\n<h3><strong>GTMetrix:<\/strong><\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-7023 size-large\" src=\"https:\/\/kangaroo.host\/blog\/wp-content\/uploads\/2022\/05\/gtmetrix-1024x236.png\" alt=\"Medir velocidade com gtmetrix\" width=\"1024\" height=\"236\" \/><\/p>\n<p>O GT \u00e9 um dos principais medidores da atualidade. Ele te dar\u00e1 diversos par\u00e2metros de melhoria, al\u00e9m de poder te apresentar uma vers\u00e3o em v\u00eddeo com o tempo do carregamento da p\u00e1gina.<\/p>\n<p>\u00c9 poss\u00edvel, tamb\u00e9m, ter acesso a uma \u00e1rvore, mostrando a cascata de carregamento das requisi\u00e7\u00f5es do seu site, mostrando muito bem quanto tempo cada uma levou para ser processada e o peso de cada uma.<\/p>\n<p>S\u00e3o diversos par\u00e2metros que ajudam e muito a aferir bem a velocidade. E \u00e9 legal dizer que, al\u00e9m dos meios pr\u00f3prios de medir, ele utiliza algumas ferramentas do Google PageSpeed para compor sua nota.<\/p>\n<p>Um outro ponto muito bom no GT \u00e9 que nele \u00e9 poss\u00edvel fazermos o teste utilizando um servidor localizado no Brasil, obtendo uma experi\u00eancia mais semelhante \u00e0quela que nossos visitantes reais teriam ao acessar o site daqui.<\/p>\n<p>E por ser bem simples de utilizar, acabou ganhando bastante espa\u00e7o, j\u00e1 que sua vis\u00e3o simplificada pode ser compreendia muito bem at\u00e9 mesmo por usu\u00e1rios mais leigos que n\u00e3o entendem muito bem de quest\u00f5es mais t\u00e9cnicas, como \u00e9 o caso do pr\u00f3ximo item da nossa lista.<\/p>\n<h3><strong>WebDev<\/strong> (antigo PageSpeed):<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7072\" src=\"https:\/\/kangaroo.host\/blog\/wp-content\/uploads\/2022\/06\/web-dev.png\" alt=\"Medir velocidade com pagespeed\" width=\"1331\" height=\"717\" \/><\/p>\n<p>Esse \u00e9, de longe, o mais utilizado entre os medidores. Mantido pela Google, o agora chamado Web.Dev \u00e9 a refer\u00eancia m\u00e1xima para os que buscam a otimiza\u00e7\u00e3o da velocidade.<\/p>\n<p>Os principais par\u00e2metros dele se dividem entre a perspectiva mobile e em desktop, informando notas diferentes para cada um desses cen\u00e1rios.<\/p>\n<p>Al\u00e9m disso, ele tem formas um pouco diferentes de dar as notas, medindo o tempo em que a o primeiro conte\u00fado \u00e9 exibido, o tempo total de carregamento, o tempo para que a p\u00e1gina se torne interativa e por a\u00ed vai.<\/p>\n<p>Mas n\u00e3o se desespere para obter notas altas aqui, principalmente no quesito mobile, pois os par\u00e2metros s\u00e3o muito, mas muito, dif\u00edceis de se alcan\u00e7ar, tornando o processo muito dif\u00edcil e quase sem fim.<\/p>\n<p>N\u00e3o compensar\u00e1 investir tempo demais em otimiza\u00e7\u00f5es apenas para uma nota melhor. A recomenda\u00e7\u00e3o mais saud\u00e1vel \u00e9 sempre de otimizar o seu site para que ele carregue mais r\u00e1pido, e n\u00e3o para que ele tenha notas melhores, pois nem sempre isso ser\u00e1 realmente o melhor para voc\u00ea e seus visitantes.<\/p>\n<h2 id=\"otimizar\">Como tornar o site mais r\u00e1pido com o WP Rocket?<\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-7073 size-large\" src=\"https:\/\/kangaroo.host\/blog\/wp-content\/uploads\/2022\/06\/wp-rocket-dashboard-1024x502.png\" alt=\"Dashboard WP Rocket\" width=\"1024\" height=\"502\" \/><\/p>\n<p>Agora, vamos para a parte realmente s\u00e9ria. Antes de tudo, precisamos dizer que a otimiza\u00e7\u00e3o de sites n\u00e3o \u00e9 uma ci\u00eancia exata, e n\u00e3o existe um caminho que seja totalmente funcional para todos os casos.<\/p>\n<p>Dito isso, optaremos por explicar individualmente cada um dos par\u00e2metros de configura\u00e7\u00e3o, para que voc\u00ea compreenda melhor o que cada um deles faz e possa ir testando em seu site, para obter os melhores resultados.<\/p>\n<p>Portanto, \u00e9 muito importante realizar v\u00e1rios testes, combinando diferentes par\u00e2metros de configura\u00e7\u00e3o para ver o que traz melhores resultados para o seu site.<\/p>\n<p>Durante os testes, \u00e9 muito comum ver que algumas configura\u00e7\u00f5es podem quebrar o seu site, por conta de algum CSS ou JavaScript alterado pelo plugin de otimiza\u00e7\u00e3o. E \u00e9 justamente nesse ponto em que \u00e9 necess\u00e1rio trabalhar o refinamento das configura\u00e7\u00f5es.<\/p>\n<p>Sempre teste tudo em outros navegadores tamb\u00e9m, uma vez que estar conectado ao admin pode exibir resultados diferentes. \u00c9 uma boa forma de evitar problemas de visualiza\u00e7\u00e3o diferente.,<\/p>\n<p>Para tornar o processo um mais did\u00e1tico, dividiremos em t\u00f3picos cada uma das abas do plugin, para facilitar a localiza\u00e7\u00e3o dos assuntos.<\/p>\n<p>Dados os devidos avisos e dicas, vamos ao que interessa. Novamente com seu wp-admin aberto e j\u00e1 na aba do painel do WP Rocket, vamos \u00e0s configura\u00e7\u00f5es.<\/p>\n<h4>Cache<\/h4>\n<p>Partindo do princ\u00edpio, come\u00e7aremos nossas configura\u00e7\u00f5es atrav\u00e9s da guia de Cache. Em resumo, o cache \u00e9 uma c\u00f3pia mais est\u00e1tica pr\u00e9-armazenada do seu site, que o visitante consultar\u00e1, em vez de carregar todo o conte\u00fado do site novamente.<\/p>\n<p>Isso \u00e9 muito \u00fatil para reduzir o consumo de recursos do servidor e, de quebra, tornar o carregamento mais r\u00e1pido, visto que o n\u00famero de requisi\u00e7\u00f5es de processos ser\u00e1 menor.<\/p>\n<p>Agora, vamos para as defini\u00e7\u00f5es de cada par\u00e2metro:<\/p>\n<p><strong>Ativar cache para dispositivos m\u00f3veis<\/strong>: assim como o nome bem sugere, essa op\u00e7\u00e3o far\u00e1 com que o cache do site seja gerado tamb\u00e9m em sua vers\u00e3o mobile, permitindo que usu\u00e1rios destes dispositivos tamb\u00e9m tenham acesso a um conte\u00fado em cache.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-7031 size-full\" src=\"https:\/\/kangaroo.host\/blog\/wp-content\/uploads\/2022\/05\/cache-mobile.png\" alt=\"Ativar cache mobile e tornar o site WordPress mais r\u00e1pido\" width=\"567\" height=\"31\" \/><\/p>\n<p><strong>Arquivos de cache separados para dispositivos m\u00f3veis<\/strong>: j\u00e1 essa outra op\u00e7\u00e3o, dependente da anterior, permite que seja criado um cache \u00e0 parte para os dispositivos m\u00f3veis.<\/p>\n<p>Contudo, boa parte dos temas atuais n\u00e3o precisa dessa op\u00e7\u00e3o, j\u00e1 que possuem responsividade nativa.<\/p>\n<p>Assim como o plugin orienta, habilite essa op\u00e7\u00e3o apenas no caso de ter um tema separado, apenas para mobile.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7032\" src=\"https:\/\/kangaroo.host\/blog\/wp-content\/uploads\/2022\/05\/cache-separado.png\" alt=\"Cache separado para mobile\" width=\"814\" height=\"81\" \/><\/p>\n<p><strong>Cache para usu\u00e1rios conectados ao WordPress<\/strong>: essa op\u00e7\u00e3o permitir\u00e1 que usu\u00e1rios que estejam logados tenham conte\u00fado em cache tamb\u00e9m.<\/p>\n<p>Essa op\u00e7\u00e3o \u00e9 particularmente \u00fatil quando falamos de sites que, de fato, t\u00eam usu\u00e1rios conectados, como eCommerces em WooCommerce e f\u00f3runs ou que possuam algum tipo de \u00e1rea de membros.<\/p>\n<p>Isso pode ajudar a reduzir muito a demanda de recursos e, se seu site se encaixa em um dos cen\u00e1rios acima, \u00e9 uma \u00f3tima op\u00e7\u00e3o.<\/p>\n<p>Do contr\u00e1rio, n\u00e3o h\u00e1 uma necessidade real de ter essa op\u00e7\u00e3o ativa.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7033\" src=\"https:\/\/kangaroo.host\/blog\/wp-content\/uploads\/2022\/05\/cache-conectado.png\" alt=\"Cache para usu\u00e1rios conectados\" width=\"818\" height=\"48\" \/><\/p>\n<p><strong>Tempo para limpeza do Cache Global<\/strong>: esse par\u00e2metro \u00e9 o respons\u00e1vel por regular o tempo em que o cache de todo o site ser\u00e1 renovado automaticamente.<\/p>\n<p>\u00c9 importante dizer que um tempo curto pode gerar carga excessiva na hospedagem, dependendo do porte do site. Por isso, uma boa recomenda\u00e7\u00e3o inicial seria de 24 horas.<\/p>\n<p>\u00c9 poss\u00edvel, tamb\u00e9m, definir o tempo em dias. Se seu site n\u00e3o recebe atualiza\u00e7\u00f5es com muita frequ\u00eancia, definir um cache de 7 dias, ou at\u00e9 mesmo 14, pode ser uma boa op\u00e7\u00e3o a se considerar.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7034\" src=\"https:\/\/kangaroo.host\/blog\/wp-content\/uploads\/2022\/05\/expiracao-do-cache.png\" alt=\"Expira\u00e7\u00e3o do cache\" width=\"816\" height=\"134\" \/><\/p>\n<p>Configura\u00e7\u00f5es recomendadas:<\/p>\n<ul>\n<li><strong>Ativar o cache para dispositivos mobile<\/strong>: ter esse par\u00e2metro ativo \u00e9 de suma import\u00e2ncia, uma vez que a maior parte dos acessos a sites s\u00e3o provenientes de dispositivos m\u00f3veis, sobretudo os celulares.<\/li>\n<\/ul>\n<p>Por isso, \u00e9 sempre uma \u00f3tima op\u00e7\u00e3o ter o conte\u00fado exibido em cache para esse tipo de dispositivo, at\u00e9 mesmo para um tempo menor de carregamento das p\u00e1ginas.<\/p>\n<ul>\n<li><strong>Tempo de renova\u00e7\u00e3o do cache<\/strong>: sendo um fator muito importante, tenha sempre um tempo de renova\u00e7\u00e3o que n\u00e3o seja muito baixo, mas que tamb\u00e9m n\u00e3o seja alto demais para que atualiza\u00e7\u00f5es do site n\u00e3o sejam vistas em tempo.<\/li>\n<\/ul>\n<p>Se seu site recebe atualiza\u00e7\u00f5es frequentemente, experimente utilizar per\u00edodos de 24 ou 48 horas. Se n\u00e3o, algo entre 7 e 14 dias dever\u00e1 ser o suficiente para te atender bem.<\/p>\n<h4>Otimizar Arquivos<\/h4>\n<p>Agora, vamos para uma das partes que mais traz diferen\u00e7a vis\u00edvel no tempo de carregamento das p\u00e1ginas: a otimiza\u00e7\u00e3o de arquivos, que \u00e9 respons\u00e1vel por interagir com arquivos JS (scripts) e CSS (folhas de estilo).<\/p>\n<p>O conjunto de todas as configura\u00e7\u00f5es que forem feitas aqui devem ser o que mais trar\u00e1 melhoria do tempo de carregamento do site, pois s\u00e3o justamente as requisi\u00e7\u00f5es JS e CSS que tendem a consumir mais tempo para serem entregues.<\/p>\n<p>Por isso, tente compreender bem o funcionamento de cada op\u00e7\u00e3o, para que o seu site tenha o melhor resultado poss\u00edvel ap\u00f3s as configura\u00e7\u00f5es.<\/p>\n<p>A t\u00edtulo de informa\u00e7\u00e3o, \u00e9 justamente nessa parte em que poderemos ver quebra do c\u00f3digo do site, e um carregamento at\u00edpico, deixando o site desformatado. Portanto, \u00e9 importante sempre testar as configura\u00e7\u00f5es para chegar no resultado desejado.<\/p>\n<p><strong>Minificar os arquivos CSS<\/strong>: torna os arquivos CSS mais leves, ao remover espa\u00e7os em branco e desfazer a \u201cidenta\u00e7\u00e3o\u201d do c\u00f3digo (nome dado \u00e0 organiza\u00e7\u00e3o por hierarquia).<\/p>\n<p>Isso faz com que o tamanho do arquivo diminua bastante, possibilitando que este seja carregado e entregue mais rapidamente pelo servidor, trazendo maior velocidade de carregamento.<\/p>\n<p>\u00c9 poss\u00edvel que n\u00e3o traga um resultado vis\u00edvel em alguns casos, mas \u00e9 uma melhoria importante.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-7035 size-full\" src=\"https:\/\/kangaroo.host\/blog\/wp-content\/uploads\/2022\/05\/Minificar-CSS.png\" alt=\"Minificar CSS para ter site mais r\u00e1pido\" width=\"813\" height=\"66\" \/><\/p>\n<p><strong>Combinar arquivos CSS<\/strong>: essa op\u00e7\u00e3o depende da anterior para poder ser habilitada, e tem por intuito juntar todos os arquivos CSS em um s\u00f3, reduzindo a quantidade de requisi\u00e7\u00f5es do site.<\/p>\n<p>Como ponto positivo, temos uma grande redu\u00e7\u00e3o das requisi\u00e7\u00f5es do site, o que pode gerar um carregamento melhor.<\/p>\n<p>Por outro lado, \u00e9 poss\u00edvel que este \u00fanico arquivo fique extenso demais e demore para ser processado, gerando atrasos.<\/p>\n<p>Ent\u00e3o, a melhor forma \u00e9 testar e testar v\u00e1rias vezes.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7036\" src=\"https:\/\/kangaroo.host\/blog\/wp-content\/uploads\/2022\/05\/Combinar-CSS.png\" alt=\"Combinar CSS\" width=\"813\" height=\"75\" \/><\/p>\n<p><strong>Arquivos CSS exclu\u00eddos<\/strong>: aqui, voc\u00ea poder\u00e1 adicionar arquivos espec\u00edficos que deseja que n\u00e3o sejam adicionados \u00e0s configura\u00e7\u00f5es de minifica\u00e7\u00e3o e combina\u00e7\u00e3o.<\/p>\n<p>Fazendo isso, eles ser\u00e3o entregues normalmente, sem passar por nenhuma dessas otimiza\u00e7\u00f5es.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7037\" src=\"https:\/\/kangaroo.host\/blog\/wp-content\/uploads\/2022\/05\/CSS-Excluidos.png\" alt=\"CSS Excluidos\" width=\"815\" height=\"151\" \/><\/p>\n<p><strong>Otimizar a entrega do CSS<\/strong>: com duas op\u00e7\u00f5es dispon\u00edveis, \u00e9 poss\u00edvel configurar como o seu site disponibilizar\u00e1 os arquivos de estilo.<\/p>\n<p>Ao escolher a op\u00e7\u00e3o secund\u00e1ria \u201cRemover o CSS n\u00e3o usado\u201d, o WP Rocket far\u00e1 alguns testes em seu site e, a partir disso, far\u00e1 automaticamente otimiza\u00e7\u00f5es de c\u00f3digo para que todo o CSS que n\u00e3o \u00e9 realmente usado na p\u00e1gina n\u00e3o seja entregue, reduzindo o tempo de carregamento.<\/p>\n<p>J\u00e1 em \u201cCarregar o CSS de forma ass\u00edncrona\u201d, o WP Rocket ir\u00e1 fazer com que as requisi\u00e7\u00f5es de arquivos CSS sejam processadas depois de todos, apenas quando o carregamento da p\u00e1gina j\u00e1 estiver pronto.<\/p>\n<p>Ambos s\u00e3o \u00f3timas op\u00e7\u00f5es e que devem ser testadas, para que seja utilizada a que trouxer melhores resultados.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7038\" src=\"https:\/\/kangaroo.host\/blog\/wp-content\/uploads\/2022\/05\/Otimizar-entrega-CSS-WP-Rocket.png\" alt=\"Otimizar entrega CSS WP Rocket\" width=\"816\" height=\"298\" \/><\/p>\n<p><strong>Minificar arquivos JavaScript<\/strong>: da mesma forma que para os arquivos em CSS, essa op\u00e7\u00e3o far\u00e1 com que os arquivos em JS sejam alterados e tenham espa\u00e7os em branco removidos, diminuindo o tamanho dos arquivos, tornando-os mais leves de se processar, fazendo com que sejam carregados mais rapidamente.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-7039 size-full\" src=\"https:\/\/kangaroo.host\/blog\/wp-content\/uploads\/2022\/05\/Minificar-JS.png\" alt=\"Minificar JS para site Wordpress mais r\u00e1pido \" width=\"818\" height=\"69\" \/><\/p>\n<p><strong>Combinar os arquivos JavaScript<\/strong>: em s\u00edntese, todo o conte\u00fado dos scripts do site ser\u00e3o reunidos em um \u00fanico arquivo, diminuindo o n\u00famero total de requisi\u00e7\u00f5es, fazendo com que apenas uma \u00fanica requisi\u00e7\u00e3o seja processada.<\/p>\n<p>Isso pode reduzir o tempo de carregamento, uma vez que s\u00e3o menos recursos para carregar. Contudo, o resultado contr\u00e1rio tamb\u00e9m \u00e9 poss\u00edvel, caso o arquivo \u00fanico fique muito extenso, fazendo com que o servidor demore um pouco mais para ler tudo que estiver nele.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7040\" src=\"https:\/\/kangaroo.host\/blog\/wp-content\/uploads\/2022\/05\/Combinar-JS.png\" alt=\"Combinar JS\" width=\"809\" height=\"77\" \/><\/p>\n<p><strong>Arquivos de JavaScript exclu\u00eddos<\/strong>: aqui, voc\u00ea poder\u00e1 orientar o WP Rocket a n\u00e3o fazer as configura\u00e7\u00f5es para alguns arquivos espec\u00edficos, que passar\u00e3o a ser entregues normalmente, sem minifica\u00e7\u00e3o ou combina\u00e7\u00e3o.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7041\" src=\"https:\/\/kangaroo.host\/blog\/wp-content\/uploads\/2022\/05\/JS-Excluidos.png\" alt=\"JS Excluidos\" width=\"817\" height=\"158\" \/><\/p>\n<p><strong>Adiar o carregamento do JavaScript<\/strong>: essa fun\u00e7\u00e3o \u00e9, basicamente, a inser\u00e7\u00e3o da diretiva \u201casync\u201d nas requisi\u00e7\u00f5es de JS. Isso permite que os scripts apenas sejam carregados ap\u00f3s as outras requisi\u00e7\u00f5es da p\u00e1gina serem carregadas.<\/p>\n<p>Isso \u00e9 um \u00f3timo truque para que o site pare\u00e7a carregar mais rapidamente, uma vez que o conte\u00fado visual da p\u00e1gina esteja impresso e cabe apenas ao restante do JS ser carregado ap\u00f3s a estrutura.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7043\" src=\"https:\/\/kangaroo.host\/blog\/wp-content\/uploads\/2022\/05\/Adiar-JS.png\" alt=\"Adiar JS\" width=\"810\" height=\"83\" \/><\/p>\n<p><strong>Atrasar a execu\u00e7\u00e3o do JavaScript<\/strong>: uma op\u00e7\u00e3o um pouco mais ousada, permite que as requisi\u00e7\u00f5es de scripts JS sejam processadas apenas ap\u00f3s o usu\u00e1rio interagir com a p\u00e1gina, isto \u00e9: cliques, rolamentos e por a\u00ed vai.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7044\" src=\"https:\/\/kangaroo.host\/blog\/wp-content\/uploads\/2022\/05\/Atrasar-JS.png\" alt=\"Atrasar JS\" width=\"813\" height=\"74\" \/><\/p>\n<p>Configura\u00e7\u00f5es recomendadas:<\/p>\n<ul>\n<li><strong>Minificar arquivos CSS<\/strong>: reduzir o tamanho das requisi\u00e7\u00f5es de estilo \u00e9 muito importante para um ganho de velocidade no carregamento, uma vez que os arquivos ficam mais leves, \u00e9 poss\u00edvel carreg\u00e1-los mais rapidamente.<\/li>\n<li><strong>Otimizar a entrega do CSS<\/strong>: complementando a op\u00e7\u00e3o anterior, \u00e9 essencial que a forma de entrega dessas requisi\u00e7\u00f5es tamb\u00e9m seja diferenciada, sendo um dos fatores que influencia bastante no tempo vis\u00edvel de carregamento da p\u00e1gina.<\/li>\n<\/ul>\n<p>Cabe a voc\u00ea testar qual das op\u00e7\u00f5es se encaixa melhor em seu site, seguindo com a remo\u00e7\u00e3o do CSS n\u00e3o utilizado ou carregando de forma ass\u00edncrona.<\/p>\n<ul>\n<li><strong>Minificar os arquivos JavaScript<\/strong>: assim como para o CSS, otimizar o JavaScript \u00e9 extremamente importante para deixar o site mais leve.<\/li>\n<\/ul>\n<p>Al\u00e9m disso, \u00e9 bom faz\u00ea-lo pois a maioria dos recursos pesados de um site \u00e9 proveniente de requisi\u00e7\u00f5es JS, sendo ainda mais necess\u00e1rio que essas sejam tornadas mais leves.<\/p>\n<ul>\n<li><strong>Adiar o carregamento do JavaScript<\/strong>: agora, chegamos na parte que provavelmente mais trar\u00e1 diferen\u00e7a ao tempo de carregamento not\u00e1vel da p\u00e1gina, e uma das fun\u00e7\u00f5es com maior chance de quebrar o site, se algo n\u00e3o carregar como deveria.<\/li>\n<\/ul>\n<p>Com ela, ser\u00e1 poss\u00edvel fazer com que o JS carregue apenas ap\u00f3s a impress\u00e3o da p\u00e1gina, fazendo com que o conte\u00fado visual seja entregue antes, gerando uma sensa\u00e7\u00e3o de maior velocidade, enquanto o JS carrega posteriormente.<\/p>\n<p>\u00c9, provavelmente, a fun\u00e7\u00e3o que mais torna r\u00e1pido o site, mas na realidade \u00e9 uma quest\u00e3o visual, causado pela reorganiza\u00e7\u00e3o da pilha de carregamento.<\/p>\n<p>Reduzir a quantidade de requisi\u00e7\u00f5es n\u00e3o utilizadas, por exemplo, causaria um efeito mais \u201cnatural\u201d de velocidade. De todo modo, ainda sim \u00e9 uma op\u00e7\u00e3o que aumenta a velocidade.<\/p>\n<h4>M\u00eddia<\/h4>\n<p>Na guia de m\u00eddia, poderemos configurar alguns par\u00e2metros de como imagens, gifs e v\u00eddeos podem interagir e responder dentro da p\u00e1gina.<\/p>\n<p>As configura\u00e7\u00f5es aqui ajudam a reduzir um pouco o tempo de carregamento das p\u00e1ginas, mas sua maior aplicabilidade \u00e9 mesmo para o ganho de nota em medidores de velocidade.<\/p>\n<p><strong>Habilitar LazyLoad para imagens<\/strong>:\u00a0 o lazyload consiste em uma configura\u00e7\u00e3o que permite que as imagens sejam carregadas apenas quando forem realmente visualizadas pelo usu\u00e1rio.<\/p>\n<p>Ou seja, essas imagens s\u00f3 s\u00e3o carregadas e exibidas quando o usu\u00e1rio\/visitante chega na parte de seu site onde essa imagem est\u00e1.<\/p>\n<p>Desse modo, \u00e9 poss\u00edvel ter um grande ganho de velocidade de carregamento, j\u00e1 que reduz e muito a quantidade de recursos que o site precisar\u00e1 carregar.<\/p>\n<p>Para o lazyload, normalmente ser\u00e1 utilizada alguma imagem tempor\u00e1ria gen\u00e9rica, que ser\u00e1 exibida enquanto o site carrega. Dependendo da configura\u00e7\u00e3o, \u00e9 poss\u00edvel n\u00e3o usar imagem alguma. Isso varia de acordo com o plugin de configura\u00e7\u00e3o.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7077\" src=\"https:\/\/kangaroo.host\/blog\/wp-content\/uploads\/2022\/06\/Habilitar-lazyload-1.png\" alt=\"Habilitar lazyload\" width=\"900\" height=\"47\" \/><\/p>\n<p>&nbsp;<\/p>\n<p><strong>Habilitar LazyLoad para iframes e v\u00eddeos<\/strong>: permitir\u00e1 que v\u00eddeos e demais conte\u00fados carregados a partir de tags de integra\u00e7\u00e3o (iframes).<\/p>\n<p>Isso possibilitar\u00e1 que uma quantidade maior de recursos (se estiverem em uso) sejam carregadas de forma ass\u00edncrona, mediante a necessidade de visualiza\u00e7\u00e3o do conte\u00fado.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7076\" src=\"https:\/\/kangaroo.host\/blog\/wp-content\/uploads\/2022\/06\/Habilitar-lazyload-iframes-e-videos.png\" alt=\"Habilitar lazyload iframes e videos\" width=\"896\" height=\"50\" \/><\/p>\n<p><strong>Exclus\u00e3o de imagens e iframes<\/strong>: aqui, \u00e9 poss\u00edvel ajustar quais requisi\u00e7\u00f5es de arquivos de imagens, v\u00eddeos e iframes n\u00e3o ser\u00e3o inclu\u00eddas na configura\u00e7\u00e3o de lazyload.<\/p>\n<p>Dessa forma, tudo que for inserido na exclus\u00e3o ser\u00e1 carregado normalmente no site, sem que o usu\u00e1rio precise chegar na parte que, de fato, carrega aquela imagem.<\/p>\n<p>\u00c9 uma boa configura\u00e7\u00e3o para adicionar, por exemplo, a logo do site, que normalmente \u00e9 carregada logo no come\u00e7o no menu do topo do site. Desse jeito, a logo ser\u00e1 visualizada bem rapidamente e o restante do conte\u00fado poder\u00e1 ser carregado em lazyload.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-7078 size-full\" src=\"https:\/\/kangaroo.host\/blog\/wp-content\/uploads\/2022\/06\/Iframes-exlcuidos.png\" alt=\"Iframes e imagens exclu\u00eddos WP Rocket Wordpress\" width=\"899\" height=\"185\" \/><\/p>\n<p><strong>Dimens\u00e3o da Imagem<\/strong>: essa fun\u00e7\u00e3o \u00e9 bem simples, ela serve unicamente para adicionar no c\u00f3digo da p\u00e1gina as informa\u00e7\u00f5es referentes \u00e0s dimens\u00f5es das imagens, quando essas informa\u00e7\u00f5es n\u00e3o estiverem presentes.<\/p>\n<p>Isso n\u00e3o traz ganho de velocidade, sejamos francos. Por\u00e9m, \u00e9 um dos fatores que ajuda a compor a nota em testes de velocidade. Por isso, \u00e9 algo a se considerar para garantir alguns pontinhos a mais.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7079\" src=\"https:\/\/kangaroo.host\/blog\/wp-content\/uploads\/2022\/06\/Dimensao-da-imagem.png\" alt=\"Dimens\u00e3o da imagem faltando\" width=\"902\" height=\"49\" \/><\/p>\n<p>Configura\u00e7\u00f5es recomendadas:<\/p>\n<ul>\n<li><strong>Habilitar LazyLoad<\/strong>: configurado na medida certa, o lazyload \u00e9 um grande aliado para que seu site carregue mais rapidamente.<\/li>\n<\/ul>\n<p>Configur\u00e1-lo e ajustar para que seu logo e outras imagens principais carreguem normalmente poder\u00e3o trazer resultados muito interessantes.<\/p>\n<ul>\n<li><strong>Adicionar dimens\u00f5es de imagens<\/strong>: essa configura\u00e7\u00e3o n\u00e3o trar\u00e1 ganho de desempenho, mas te ajudar\u00e1 a conquistar um pouco mais de nota em testes. Por isso, \u00e9 muito interessante dar uma chance a essa funcionalidade.<\/li>\n<\/ul>\n<h4>Pr\u00e9-carregar<\/h4>\n<p>A fun\u00e7\u00e3o de pr\u00e9-carregamento, tamb\u00e9m conhecida como \u201cCrawler\u201d faz uma busca em todo o site, iniciando pelos links exibidos na home e seguindo pela hierarquia do sitemap.<\/p>\n<p>O intuito dessa fun\u00e7\u00e3o \u00e9 reduzir uma quest\u00e3o que comumente acontece com o cache: a necessidade de um usu\u00e1rio visitar a p\u00e1gina para que o cache seja gerado.<\/p>\n<p>Desse modo, o pr\u00e9-carregamento permite que todo o cache seja gerado automaticamente e os visitantes cheguem diretamente nas p\u00e1ginas com suas vers\u00f5es j\u00e1 prontas em cache, tornando a navega\u00e7\u00e3o mais r\u00e1pida.<\/p>\n<p>Vale ressaltar que essa \u00e9 uma configura\u00e7\u00e3o que pode consumir bastante recurso de hardware em sua hospedagem, ent\u00e3o \u00e9 bom atentar-se a isso, pois existem casos em que essa configura\u00e7\u00e3o do WP Rocket pode at\u00e9 mesmo derrubar a hospedagem.<\/p>\n<p>Assim, por conta de o plugin n\u00e3o ser totalmente otimizado para lidar com o processamento do servidor, mesmo planos com mais recursos de hardware podem ter instabilidades por conta do plugin.<\/p>\n<p>Agora, dadas as devidas explica\u00e7\u00f5es, vamos voltar \u00e0s fun\u00e7\u00f5es de configura\u00e7\u00e3o:<\/p>\n<p><strong>Ativar o pr\u00e9-carregamento<\/strong>: faz com que o site siga com o funcionamento descrito acima, de mapear as p\u00e1ginas e gerar automaticamente o cache para elas.<\/p>\n<p>Isso ajuda a tornar a navega\u00e7\u00e3o do visitante final mais fluida e eliminar a necessidade de que as p\u00e1ginas sejam acessadas manualmente para que o cache seja constru\u00eddo.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7080\" src=\"https:\/\/kangaroo.host\/blog\/wp-content\/uploads\/2022\/06\/Ativar-pre-carregamento.png\" alt=\"\" width=\"903\" height=\"54\" \/><\/p>\n<p><strong>Ativar o pr\u00e9-carregamento do cache em sitemap: <\/strong>essa op\u00e7\u00e3o depende da primeira para funcionar, e consiste em utilizar tamb\u00e9m o sitemap do site para que o cache seja constru\u00eddo.<\/p>\n<p>Ao utilizar essa op\u00e7\u00e3o, voc\u00ea poder\u00e1 informar o link do sitemap utilizado para que as visitas sejam feitas.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7081\" src=\"https:\/\/kangaroo.host\/blog\/wp-content\/uploads\/2022\/06\/Pre-carregamento-por-sitemap.png\" alt=\"Pr\u00e9 carregar a partir do sitemap\" width=\"896\" height=\"229\" \/><\/p>\n<p><strong>Pr\u00e9-carregamento dos links<\/strong>: \u00e9 uma op\u00e7\u00e3o extremamente interessante, que permite que as p\u00e1ginas sejam carregadas assim que o visitante passa o mouse sobre o link que leva para essa p\u00e1gina.<\/p>\n<p>Assim, o conte\u00fado come\u00e7a a carregar antes mesmo que o usu\u00e1rio navegue at\u00e9 l\u00e1, fazendo com que a p\u00e1gina pare\u00e7a carregar muito mais r\u00e1pido.<\/p>\n<p>\u00c9 uma op\u00e7\u00e3o que n\u00e3o implica pontos em testes de velocidade, mas ajuda muito no tempo percept\u00edvel, j\u00e1 que o usu\u00e1rio ter\u00e1 uma sensa\u00e7\u00e3o bem maior de fluidez.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7082\" src=\"https:\/\/kangaroo.host\/blog\/wp-content\/uploads\/2022\/06\/Pre-carregamento-dos-links.png\" alt=\"Pr\u00e9 carregamento dos links WP Rocket\" width=\"901\" height=\"53\" \/><\/p>\n<p><strong>Pr\u00e9-carregar URLs externos<\/strong>: sendo outra configura\u00e7\u00e3o muito importante, possibilita que recursos que v\u00eam de fora do seu site possam ser carregados mais rapidamente, buscando entreg\u00e1-los um pouco antes.<\/p>\n<p>Isso \u00e9 particularmente \u00fatil quando falamos de sites que, por exemplo, utilizam fontes vindas do Google Fonts, que tende a causar certa lentid\u00e3o para o carregamento de algumas p\u00e1ginas.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7083\" src=\"https:\/\/kangaroo.host\/blog\/wp-content\/uploads\/2022\/06\/Capturar-urls.png\" alt=\"Capturar urls externas\" width=\"895\" height=\"169\" \/><\/p>\n<p><strong>Fontes a pr\u00e9-carregar<\/strong>: de forma semelhante \u00e0 op\u00e7\u00e3o anterior, essa age especificamente com fontes, e elas precisam estar hospedadas em seu dom\u00ednio, ou no dom\u00ednio configurado como seu CDN.<\/p>\n<p>O funcionamento \u00e9 parecido, mas bem mais direto para as fontes internas. Se alguma delas precisa ser carregada antes de outras, por ser vis\u00edvel mais rapidamente na p\u00e1gina, adicion\u00e1-la nessa configura\u00e7\u00e3o ser\u00e1 uma \u00f3tima ideia.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-7084 size-full\" src=\"https:\/\/kangaroo.host\/blog\/wp-content\/uploads\/2022\/06\/Pre-carregar-fontes-1.png\" alt=\"Pr\u00e9 carregar fontes WP Rocket Wordpress\" width=\"899\" height=\"176\" \/><\/p>\n<p>Configura\u00e7\u00f5es recomendadas:<\/p>\n<ul>\n<li><strong>Ativar o pr\u00e9-carregamento<\/strong>: extremamente importante para evitar a necessidade de acessar as p\u00e1ginas individualmente para que o cache seja criado, \u00e9 uma \u00f3tima fun\u00e7\u00e3o para que os usu\u00e1rios j\u00e1 acessem as p\u00e1ginas em maior velocidade, vendo o cache j\u00e1 em seu primeiro acesso.<\/li>\n<\/ul>\n<p>Contudo, \u00e9 uma op\u00e7\u00e3o que pode exigir uma hospedagem mais robusta, j\u00e1 que as p\u00e1ginas ser\u00e3o constantemente acessadas para gerar o cache. E, claro, quanto mais p\u00e1ginas o site tiver, mais tempo levar\u00e1 a cria\u00e7\u00e3o.<\/p>\n<ul>\n<li><strong>Ativar o pr\u00e9-carregamento de links<\/strong>: com esta, o tempo de carregamento not\u00e1vel das p\u00e1ginas tende a ser bem menor, j\u00e1 que as requisi\u00e7\u00f5es delas come\u00e7ar\u00e3o a ser processadas assim que o visitante passar o mouse por cima de algum dos links que leva a esta outra p\u00e1gina.<\/li>\n<li><strong>Pr\u00e9-captura de URLS<\/strong>: muito importante para sites que contam com recursos externos, como o Google Fontes, essa fun\u00e7\u00e3o \u00e9 muito boa para que esses recursos vindos de outros sites possam ser carregados mais rapidamente, sem que atrapalhem a pilha de carregamento de requisi\u00e7\u00f5es.<\/li>\n<li><strong>Pr\u00e9-carregamento de fontes<\/strong>: se seu site conta com muitas fontes, ou se estas forem pesadas, este certamente \u00e9 um recurso a se pensar, j\u00e1 que ajudar\u00e1 e muito a carreg\u00e1-las mais rapidamente.<\/li>\n<\/ul>\n<p>Isso ocorre porque essa op\u00e7\u00e3o faz o carregamento de fontes acontecer antes, adiantando essa requisi\u00e7\u00e3o, impedindo-a de causar lentid\u00e3o na fila.<\/p>\n<h4>Regras avan\u00e7adas<\/h4>\n<p>Essa parte da configura\u00e7\u00e3o \u00e9 muito mais complexa e bem t\u00e9cnica, para ser justo. Aqui, todos os ajustes s\u00e3o para definir quais recursos\/requisi\u00e7\u00f5es ser\u00e3o ou n\u00e3o inseridos no cache.<\/p>\n<p>Desse modo, voc\u00ea poder\u00e1 regular se alguma op\u00e7\u00e3o precisa ser mantida sempre atualizada, ao ponto de nunca passar pelo cache do site, tendo sempre sua c\u00f3pia mantida ao vivo.<\/p>\n<p>Quase todas as op\u00e7\u00f5es desta guia s\u00e3o para a exclus\u00e3o de recursos do cache, s\u00e3o elas: URL, Cookies, User Agents (normalmente, navegadores) e, por \u00faltimo, Strings.<\/p>\n<p>Existe, ainda, a configura\u00e7\u00e3o \u201cSempre esvaziar URLs\u201d, que definir\u00e1 p\u00e1ginas que devem ter seu cache renovado automaticamente assim que altera\u00e7\u00f5es sejam feitas em posts ou p\u00e1ginas.<\/p>\n<h4>CDN<\/h4>\n<p>O CDN \u00e9 uma rede de distribui\u00e7\u00e3o de conte\u00fado, traduzindo literalmente do ingl\u00eas. Sua funcionalidade consiste em armazenar conte\u00fado do seu site e os servidores desse CDN distribu\u00edrem isso para seus visitantes, diminuindo a carga gerada em sua hospedagem e podendo tornar essa entrega de requisi\u00e7\u00f5es bem mais r\u00e1pida.<\/p>\n<p>Alguns exemplos bem conhecidos de CDN s\u00e3o o <a href=\"https:\/\/www.cloudflare.com\/pt-br\/\" target=\"_blank\" rel=\"noopener\">CloudFlare<\/a>, <a href=\"https:\/\/bunny.net\/\" target=\"_blank\" rel=\"noopener\">Bunny<\/a>, <a href=\"https:\/\/cloud.google.com\/cdn?hl=pt-br\" target=\"_blank\" rel=\"noopener\">Google<\/a> e a <a href=\"https:\/\/aws.amazon.com\/pt\/cloudfront\/\" target=\"_blank\" rel=\"noopener\">CloudFront<\/a> da AWS.<\/p>\n<p>Agora, voltando ao que tange o plugin, vamos \u00e0s fun\u00e7\u00f5es:<\/p>\n<p><strong>Ativar CDN<\/strong>: informar\u00e1 ao WP Rocket que voc\u00ea faz uso de uma CDN e, ao ativar isso, ser\u00e1 necess\u00e1rio passar alguns par\u00e2metros em outras etapas.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7085\" src=\"https:\/\/kangaroo.host\/blog\/wp-content\/uploads\/2022\/06\/Ativar-CDN.png\" alt=\"Ativar CDN\" width=\"902\" height=\"47\" \/><\/p>\n<p><strong>CNAMEs da CDN<\/strong>: sendo uma op\u00e7\u00e3o que requer a ativa\u00e7\u00e3o do CDN, aqui ser\u00e1 poss\u00edvel informar qual \u00e9 o CNAME, o endere\u00e7o, que ser\u00e1 respons\u00e1vel pela entrega do conte\u00fado.<\/p>\n<p>Al\u00e9m disso, ser\u00e1 poss\u00edvel configurar se ser\u00e3o carregados todos os tipos de arquivos ou se \u00e9 algo restrito a imagens, CSS, JS ou ambos.<\/p>\n<p>\u00c9 bom frisar que se voc\u00ea utiliza CloudFlare, a configura\u00e7\u00e3o n\u00e3o \u00e9 feita por esta aba. Nesse caso, siga para a aba de complementos, onde h\u00e1 um addon espec\u00edfico para o CloudFlare, pelo qual ser\u00e1 poss\u00edvel configurar a integra\u00e7\u00e3o.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7086\" src=\"https:\/\/kangaroo.host\/blog\/wp-content\/uploads\/2022\/06\/CNAME-do-CDN.png\" alt=\"CNAME do CDN\" width=\"899\" height=\"134\" \/><\/p>\n<p><strong>Exclus\u00e3o de arquivos do CDN<\/strong>: se voc\u00ea precisa que algum arquivo seja entregue diretamente pelo seu site, mesmo que a configura\u00e7\u00e3o originalmente o fa\u00e7a ser entregue pelo CDN, voc\u00ea poder\u00e1 inserir aqui o caminho exato desse arquivo.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7087\" src=\"https:\/\/kangaroo.host\/blog\/wp-content\/uploads\/2022\/06\/Excluir-arquivos-do-CDN.png\" alt=\"Excluir arquivos do CDN\" width=\"903\" height=\"138\" \/><\/p>\n<h4>Complementos<\/h4>\n<p>No WP Rocket, os complementos s\u00e3o integra\u00e7\u00f5es com terceiros, que fazem liga\u00e7\u00f5es diretas atrav\u00e9s de API, para complementar o funcionamento do plugin. Dentre elas, temos: Varnish, Compatibilidade com WEBP, CloudFlare e Sucuri.<\/p>\n<p>Por ser mais popular, neste momento abordaremos apenas a configura\u00e7\u00e3o inicial do CloudFlare.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7088\" src=\"https:\/\/kangaroo.host\/blog\/wp-content\/uploads\/2022\/06\/Complemento-CloudFlare-WP-Rocket.png\" alt=\"Complemento CloudFlare WP Rocket\" width=\"894\" height=\"217\" \/><\/p>\n<p><strong>CloudFlare no WP Rocket: <\/strong>permitir\u00e1 conectar-se \u00e0 sua conta oficial do CF atrav\u00e9s da API, interagindo e definindo par\u00e2metros adicionais de configura\u00e7\u00e3o e otimiza\u00e7\u00e3o de seu site.<\/p>\n<p>\u00c9 muito importante tamb\u00e9m para que o WP Rocket seja capaz de limpar por si s\u00f3 o cache gerado pelo CloudFlare, sem que seja necess\u00e1rio abrir o painel de configura\u00e7\u00e3o externamente.<\/p>\n<p>Ap\u00f3s ativar esse complemento, voc\u00ea precisar\u00e1 preencher os campos para a integra\u00e7\u00e3o e, ent\u00e3o, ser\u00e1 poss\u00edvel realizar as configura\u00e7\u00f5es. Caso queira entender como obter os dados, <a href=\"https:\/\/docs.wp-rocket.me\/article\/18-using-wp-rocket-with-cloudflare?utm_source=wp_plugin&amp;utm_medium=wp_rocket#add-on\" target=\"_blank\" rel=\"noopener\">clique aqui<\/a>.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-7089 size-full\" src=\"https:\/\/kangaroo.host\/blog\/wp-content\/uploads\/2022\/06\/API-de-acesso-CloudFlare-no-WP-Rocket.png\" alt=\"API de acesso CloudFlare no WP Rocket Wordpress\" width=\"902\" height=\"179\" \/><\/p>\n<p>Aqui, poderemos configurar algumas op\u00e7\u00f5es extras, como o modo de desenvolvimento (que ignora o cache por alguns momentos), as configura\u00e7\u00f5es \u00f3timas (a melhor combina\u00e7\u00e3o para utilizar junto ao WP Rocket) e o protocolo relativo (que define e regula o uso de SSL, com http:\/\/ ou https:\/\/).<\/p>\n<p>Por \u00faltimo, \u00e9 poss\u00edvel tamb\u00e9m limpar o cache do CloudFlare diretamente do plugin, atrav\u00e9s da op\u00e7\u00e3o \u201cLimpar todos os arquivos do cache do CloudFlare\u201d.<\/p>\n<h2 id=\"conclusao\">Conclus\u00e3o<\/h2>\n<p>Wow! Depois de um artigo bem denso, acreditamos que agora voc\u00ea compreendeu bem como funcionam os principais recursos do WP Rocket para otimizar e deixar seu site WordPress ainda mais r\u00e1pido.<\/p>\n<p>Infelizmente, n\u00e3o foi poss\u00edvel abordar todos os aspectos do plugin, ou ficar\u00edamos longos dias por aqui. Mas tenha certeza de que passamos um bom panorama sobre as principais ferramentas para melhorar a velocidade do seu site.<\/p>\n<p>Agora, \u00e9 sua vez de colocar a m\u00e3o na massa (ou, melhor, no teclado) e partir para a otimiza\u00e7\u00e3o pesada do seu WP. Queremos ver seu site decolando!<\/p>\n<p>Se tiver alguma d\u00favida, ou precisar de algum aux\u00edlio, pode nos chamar em nossa <a href=\"https:\/\/kangaroo.host\/blog\/central\/submitticket.php\">central de suporte<\/a>, e estaremos prontos para te ajudar da melhor forma, n\u00e3o hesite em nos contactar.<\/p>\n<p>Ficamos por aqui, e at\u00e9 o pr\u00f3ximo artigo o\/<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ter um site mais r\u00e1pido \u00e9 uma das tarefas mais importantes, e igualmente dif\u00edceis para qualquer criador de conte\u00fado na web, e isso pode ser ainda mais acentuado quando falamos do WordPress. Al\u00e9m de ser um fator muito importante para o rankeamento do site, o tempo de carregamento da p\u00e1gina influencia diretamente na experi\u00eancia do [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":384,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[51,52,18,32,20,53],"class_list":["post-381","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress","tag-mais-rapido","tag-otimizacao","tag-plugin","tag-site","tag-wordpress","tag-wp-rocket"],"_links":{"self":[{"href":"https:\/\/kangaroo.host\/blog\/wp-json\/wp\/v2\/posts\/381","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=381"}],"version-history":[{"count":0,"href":"https:\/\/kangaroo.host\/blog\/wp-json\/wp\/v2\/posts\/381\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kangaroo.host\/blog\/wp-json\/wp\/v2\/media\/384"}],"wp:attachment":[{"href":"https:\/\/kangaroo.host\/blog\/wp-json\/wp\/v2\/media?parent=381"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kangaroo.host\/blog\/wp-json\/wp\/v2\/categories?post=381"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kangaroo.host\/blog\/wp-json\/wp\/v2\/tags?post=381"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}