Estamos sempre buscando formas novas e inovadoras de acelerar e otimizar ainda mais seus sites. Nos últimos meses, nossa equipe tem trabalhado nos bastidores com os desenvolvedores do WP Rocket para coordenar algumas mudanças em seu novo plugin versão 3.0 (lançado em 3 de abril de 2018). Estamos animados em anunciar que o WP Rocket 3.0 e a Kinsta agora são completamente compatíveis e sempre serão daqui em diante.
Veja abaixo tudo o que é preciso saber sobre o uso do WP Rocket na Kinsta e como esta pode ser uma ótima combinação para você e seus clientes.
Usando o WP Rocket na Kinsta
Para aqueles que não estão familiarizados com o WP Rocket, trata-se de um plugin premium completo de cache e otimização para WordPress. Normalmente, não permitimos plugins de cache em nosso ambiente, pois eles entram em conflito com nossa solução embutida de cache. Entretanto, até a versão 3.0 do WP Rocket, a funcionalidade de cache de página será automaticamente desabilitada quando executada nos servidores da Kinsta. Como resultado, permitimos o WP Rocket em nossa plataforma porque não há mais incompatibilidades.
Isso permite que agora você use a solução de cache da Kinsta, mas ainda assim tire vantagem dos incríveis recursos de otimização que o WP Rocket tem a oferecer (falaremos deles mais abaixo).
Por que o cache é importante? Cache é o processo de armazenar recursos de uma solicitação e reutilizá-los para solicitações subsequentes. Basicamente, ele diminui a quantidade de trabalho necessário para gerar uma visualização de página e reduz a carga no servidor web. Essa é a forma número um de impedir o atraso gerado pela dependência do WordPress por PHP e um banco de dados (leia mais sobre WordPress vs HTML estático).
Recursos do WP Rocket 3.0
Se você ainda não viu a nova versão 3.0 do WP Rocket, saiba que a interface de usuário é linda e permanece fácil de usar e navegar! Abaixo, vamos nos aprofundar em alguns dos recursos recomendados do WP Rocket que você pode usar para acelerar seu site WordPress, bem como a maneira com a qual ele está sincronizado com o ambiente Kinsta.
Também rodamos alguns testes de velocidade para verificar quais opções apresentarão o maior impacto em sites reais. Lembre-se, no entanto, que os resultados podem variar de site para site, portanto certifique-se de testá-los em seu próprio site ou no ambiente de testes.
Se estiver usando um site de testes na Kinsta, saiba que o WP Rocket colocou nossa estrutura de URL na lista de permissões (teste-nomedosite.kinsta.cloud), o que significa que ele não contará como um site em sua contagem geral de licenças. O mesmo vale para rodar o site no host local
Limpeza de Cache
Mesmo que o cache esteja desabilitado automaticamente no WP Rocket quando ele é executado na Kinsta, a opção “Limpar cache” (“Clean cache”) no menu do plugin é sincronizada com o ambiente Kinsta. Se você limpa seu cache no WP Rocket, na realidade está limpando o cache do seu site inteiro na Kinsta. Legal, certo? E, como sempre, também é possível limpar o cache da Kinsta na parte superior direita na barra de administração.
A opção “Limpar essa URL” (“Purge this URL”) funciona da mesma forma, mas ao invés de fazer a limpeza do cache do seu site inteiro, ela limpa apenas o cache da URL que estiver sendo visitada no momento. Esse é um ótimo recurso caso você tenha feito uma atualização manual em uma página ou post.
Por motivos de desempenho, não recomendamos limpar constantemente o cache do seu site inteiro, pois ele teria que ser reconstruído do zero. Limpar URLs individuais é uma forma muito melhor.
Se você alterar algo em seu site WordPress, como um plugin ou tema, talvez receba uma mensagem do WP Rocket. O botão “Limpar cache” (“Clear cache”) exibido aqui também vai limpar o cache da Kinsta.
Por fim, se você clicar no botão “Limpar Cache” (“Clean Cache”) no painel do WP Rocket, também fará a limpeza do cache na Kinsta.
Cache
Como mencionamos anteriormente, o cache de páginas WP Rocket é automaticamente desativado para sites hospedados na Kinsta. Assim, recomendamos deixar as configurações de cache do WP Rocket como está com “Enable Caching for Mobile Devices” (Habilitar cache para dispositivos móveis) verificado.
Otimização de Arquivos
No menu “Otimização de Arquivos” (“File Optimization”), eles oferecem a capacidade de otimizar seus arquivos CSS e JavaScript. Vamos nos aprofundar um pouco em cada um deles.
Configurações Básicas
- Redução de HTML: A redução de HTML remove espaços em branco e comentários para reduzir o tamanho das páginas. Rodamos testes de velocidade e vimos uma queda de 0,84% no tempo de carregamento com essa opção habilitada. ⏱ Você pode não observar melhorias drásticas com esse recurso, mas no geral, quanto menos espaços em branco e código, melhor.
- Combinar arquivos do Google Fonts: Combinar arquivos do Google Fonts reduz o número de solicitações HTTP. Se você está usando uma hospedagem com HTTP/2 habilitado, não é recomendado combinar arquivos, devido a melhorias com paralelismo. A Kinsta suporta HTTP/2 completamente. Carregar suas fontes em sua própria CDN também pode melhorar o desempenho. Veja nosso guia sobre como hospedar fontes locais.
- Removendo strings de consulta de recursos estáticos: Seus arquivos CSS e JavaScript geralmente têm a versão do arquivo no final de suas URLs, como
domain.com/style.css?ver=4.6. Alguns servidores e servidores proxy são incapazes de fazer o cache de strings de consulta, mesmo que um controle decache-control:publicheader esteja presente. Portanto, ao removê-los, você pode, às vezes, melhorar seu cache. Fizemos testes de velocidade e vimos uma redução de 1,86% no tempo de carregamento com esta opção ativada. Nota: Você não pode usar isto junto com as opções minify CSS ou JavaScript.
Arquivos CSS
- Redução de arquivos CSS remove espaços em branco e comentários para reduzir o tamanho do arquivo. Rodamos testes de velocidade e vimos uma redução de 1,69% no tempo de carregamento com essa opção habilitada. ⏱ Devido à forma como CSS funciona, isso pode quebrar seu site, portanto certifique-se de fazer testes. Novamente, em geral, ter menos espaço em branco e código é algo positivo.
- Combinar arquivos CSS mescla todos os seus arquivos em um só, reduzindo as solicitações HTTP. Se você está usando uma hospedagem com HTTP/2 habilitado, não é recomendado combinar arquivos, pois eles podem ser carregados em paralelo em uma única conexão. A Kinsta suporta HTTP/2 completamente. Leia mais sobre combinação de CSS externo.
- Otimizar entrega de CSS elimina a renderização em blocos de CSS em seu website para apresentar um menor tempo de carregamento. Saiba mais sobre isso em nossos artigos aprofundados sobre renderização em blocos CSS e otimização de caminhos críticos de renderização. Rodamos testes de velocidade e vimos uma redução de 0,17% no tempo de carregamento com esta opção habilitada. ⏱ Lembre-se, no entanto, que se trata mais de tempo de carregamento percebido do que tempo real de carregamento.
Arquivos JavaScript
- Reduzir arquivos JavaScript remove os espaços em branco e comentários para reduzir o tamanho do arquivo. Rodamos testes de velocidade e vimos uma redução de 0,84% no tempo de carregamento com esta opção habilitada. ⏱ Devido à forma como JavaScript funciona, isso poderia quebrar a funcionalidade de seus plugins ou temas, portanto certifique-se de testar.
- Combine arquivos JavaScript combinando as informações JS de seu site com menos arquivos, reduzindo as solicitações HTTP. Se você está usando uma hospedagem com HTTP/2 habilitado, não é recomendado combinar arquivos, pois eles podem ser carregados em paralelo em uma única conexão. A Kinsta suporta HTTP/2 completamente.
- O carregamento de JavaScript diferido elimina o render-blocking JS em seu site e pode melhorar o tempo de carregamento. Leia mais sobre isso em nossos artigos detalhados sobre renderização em blocos JavaScript. Ele pode quebrar seu site se você não for cuidadoso, portanto faça os testes. Rodamos testes de velocidade e vimos uma redução de 1,35% no tempo de carregamento com essa opção habilitada. ⏱
Se você é um cliente Kinsta e está usando o recurso de minificação de código, que está incorporado no painel MyKinsta, verifique novamente com o suporte para ver se o uso de ambas as opções está bem.
Mídia
No menu “Mídia” (“Media”), eles oferecem a você uma opção de lazy load de suas imagens e vídeos, bem como a possibilidade de desabilitar scripts adicionais de carregarem, como Emojis e Embeds. Vamos abordar em detalhes cada um deles.
Lazy Load
Lazy loading é uma técnica de otimização que carrega conteúdo visível, mas atrasa o download e a renderização do conteúdo que aparece abaixo da dobra. Ao habilitar a opção de lazy load, é possível melhorar o tempo de carregamento real e percebido, uma vez que imagens, iframes e vídeos serão carregados somente quando entram (ou estão perto de entrar) na visualização de tela, reduzindo o número de solicitações HTTP.
- Habilitar para imagens: Rodamos testes de velocidade e vimos uma redução de 3,89% no tempo de carregamento com esta opção habilitada.
- Habilitar para iframes e vídeos: Colocamos oito vídeos do YouTube na página e vimos uma redução de 74,43% no tempo de carregamento com esta opção habilitada. O WP Rocket tem uma opção para substituir automaticamente um vídeo do YouTube por sua imagem de destaque. Essa é uma forma incrivelmente poderosa de acelerar os vídeos em seu site WordPress.
Veja nosso tutorial detalhado sobre lazy loading no WordPress.
Emojis
O lançamento do WordPress 4.2 veio acompanhado da integração de emojis em seu núcleo para navegadores antigos. A grande questão é que isso gera uma solicitação HTTP adicional em seu site WordPress para carregar o arquivo wp-emoji-release.min.js . E ele é carregado em cada uma das páginas.
Desabilitar Emojis: A opção para desabilitar emojis reduzirá o número de solicitações HTTP. Ela não impedirá que eles sejam usados, apenas os transformará na versão padrão dos emojis do navegador do usuário. Rodamos testes de velocidade e vimos uma redução de 2,2% no tempo de carregamento com esta opção habilitada.
Veja nosso artigo detalhado sobre desabilitar emojis.
Embeds
O lançamento do WordPress 4.4 veio acompanhado pelo recurso oEmbed em seu núcleo. Você provavelmente já o viu ou usou antes. Ele permite que usuários incluam vídeos do YouTube, tweets e muitos outros recursos em seus sites simplesmente colando uma URL, que é automaticamente convertida em um embed pelo WordPress e que exibe uma prévia em tempo real no editor visual.
Se você tiver o Facebook incorporado em seu site, verifique como a nova atualização do Facebook terá impacto sobre ele e como corrigi-lo.
Entretanto, isso significa que uma solicitação HTTP adicional também é gerada em seu site WordPress, que agora carrega o arquivo wp-embed.min.js.
Desabilitar embeds no WordPress: A opção para desabilitar embeds reduz o número de solicitações HTTP. Rodamos testes de velocidade e vimos uma redução de 4,9% nos tempos de carregamento com esta opção habilitada. ⏱ Veja nosso artigo detalhado sobre desabilitar embeds.
Pré-carregamento
Sob o menu “Preload” eles lhe dão uma opção para ativar a pré-carregamento do cache, o DNS prefetch e as fontes pré-carregadas. Nem tudo isso funcionará na Kinsta. Mas vamos mergulhar um pouco em cada um deles.
Pré-carregamento do Cache
Não recomendamos esta opção para sites hospedados na Kinsta porque ela pode realmente reduzir o desempenho ao sobrecarregar os PHP workers.
Busca Prévia de Solicitações DNS
A busca prévia de DNS permite que você resolva nomes de domínio (desempenhe uma pesquisa DNS no plano de fundo) antes que um usuário clique em um link, o que por sua vez ajuda a melhorar o desempenho. Isso é feito através da adição de uma tag rel="dns-prefetch" no cabeçalho do seu site WordPress. Recomendamos que adicione a busca prévia para solicitações externas de sua CDN, Google Fonts e Google Analytics. Aqui está um exemplo:
<link rel="dns-prefetch" href="//cdn.domain.com/">
<link rel="dns-prefetch" href="//fonts.googleapis.com/">
<link rel="dns-prefetch" href="//www.google-analytics.com">É mais difícil de testar a velocidade nesse caso, mas você pode ficar tranquilo, pois isso ajudará a acelerar seu site.
Preload Fonts
Se você estiver hospedando fontes em seu próprio domínio, e não em um serviço externo como o Google Fonts, recomendamos adicioná-las à lista de ” Pré-carregamento de fontes” no WP Rocket. Ao pré-carregar fontes no elemento <head> do seu HTML, os navegadores web podem começar a baixar fontes antes que elas sejam descobertas em seu arquivo CSS.
Regras Avançadas
Devido ao fato de que o WP Rocket sincroniza com o cache do ambiente Kinsta, você não pode usar as regras avançadas. Se você precisar excluir uma URL ou diretório do cache ou forçar o cache de uma determinada string de consulta, você pode sempre contatar a equipe de suporte da Kinsta.
Banco de Dados
Sob o menu “Database” o WP Rocket lhe dá a capacidade de realizar limpezas em artigos, comentários, transitórios e tabelas.
Quando combinado com nossas otimizações semanais automáticas de banco de dados, manter seu banco de dados limpo, removendo revisões e transientes desnecessários, garantirá que seu banco de dados esteja trabalhando com o máximo desempenho.
Limpeza de Posts
Não é incomum que sites mais antigos tenham mais de 100 revisões em suas páginas principais. Isso é decorrente de anos de edições e atualizações no conteúdo. Por exemplo, digamos que um site tenha 700 páginas ou posts com 150 revisões em cada um. Isso resultaria em mais de 100 mil entradas no banco de dados. Isto ocupa espaço de armazenamento, e mesmo com índices de banco de dados, isto às vezes pode prejudicar o desempenho.
WP Rocket dá a você a opção de excluir o seguinte:
- Revisões
- Rascunhos automáticos
- Posts excluídos
Veja nosso post detalhado sobre como otimizar revisões para um desempenho mais rápido.
Limpeza de Comentários
Similarmente às revisões, os spam e comentários excluídos podem simplesmente acumular e desperdiçar espaço ao longo do tempo. O WP Rocket te dá a opção de remover:
- Spam
- Comentários excluídos
Se você não está usando comentários em seu site WordPress, recomendamos que simplesmente os desabilite para prevenir que spams cheguem. Assim, você também não precisaria se preocupar em instalar plugins para cuidar deles.
Limpeza de Transientes
Por vezes, os transientes no WordPress são ignorados, mas eles são muito importantes! Na verdade, já vimos cache transiente corrompido derrubar completamente um site WordPress. Eles devem ser temporários, por isso é seguro removê-los e é exatamente o que recomendamos que seja feito. Se eles forem necessários para um plugin, serão regenerados automaticamente. O WP Rocket te dá a opção de excluir:
- Transientes expirados
- Todos os transientes
Limpeza de Banco de Dados
A opção de limpeza de banco de dados reduz a sobrecarga de tabelas do banco de dados. Entretanto, usamos InnoDB na Kinsta, ao invés de MyISAM e, portanto, ela geralmente não é necessária. InnoDB demonstrou um desempenho melhor e mais confiável. Uma grande razão para usar InnoDB ao invés de MyISAM é aproveitar o bloqueio de linhas. Isto permite que suas consultas de banco de dados sejam processadas mais rapidamente. Se você migrar seu site WordPress para Kinsta, esta é uma das muitas otimizações que nossos engenheiros fazem em seu site.
Limpeza Automática
O WP Rocket também oferece a opção para agendar uma limpeza automática em seu banco de dados, que pode ser diária, semanal ou mensal. O agendamento é feito através de um CRON job nos bastidores.
CDN
No menu “CDN”, você pode habilitar uma rede terceirizada de entrega de conteúdo. Essa é uma opção indispensável quando se trata de desempenho. Ela tira a carga do seu servidor web ao mesmo tempo em que acelera a entrega do conteúdo para seus visitantes, tornando sua experiência ainda melhor. Veja por que acreditamos que todo site deveria usar uma CDN.
Se você é um cliente Kinsta, este menu não será necessário, uma vez que a CDN Kinsta é automaticamente implementada em seu site. Entretanto, notamos que em alguns sites talvez seja necessário inserir sua URL da CDN Kinsta quando o WP Rocket está habilitado.
Recomendamos rodar seu site primeiramente através de uma ferramenta de teste de velocidade para confirmar que todos os seus ativos (JS, CSS e imagens) estão carregando a partir da CDN Kinsta. Se não estiverem, tente inserir sua URL da CDN Kinsta manualmente (por exemplo: https://mk0dgs321g.kinstacdn.com).
Heartbeat
O Heartbeat é uma API do WordPress Core para sondagem de servidores. É usada por muitos temas e plugins para manter um fluxo de conexão com seu servidor. Isto permite que os desenvolvedores de WordPress incorporem atualizações em tempo real em seus produtos.
Por padrão, o código Heartbeat do lado do cliente é executado a cada 15 – 60 segundos. Dependendo da configuração do seu site e servidor, os pings frequentes do Heartbeat server podem não ser necessários.
Com o WP Rocket, você pode reduzir os intervalos de ping Heartbeat para 2 minutos ou desativar completamente os pings para o backend (painel WP), frontend e editor de artigos do seu site.
Para a maioria dos sites, recomendamos o uso da opção “Reduzir Atividade”. Muitos plugins e temas modernos garantem o Heartbeat para as funcionalidades principais, de modo que desativá-lo completamente poderia potencialmente quebrar seu site.
Complementos
Sob o “Add-Ons” WP Rocket lhe dá a possibilidade de adicionar serviços adicionais ao seu site como Cloudflare, Sucuri, Google Analytics, e Facebook Pixel. Se você utilizar qualquer um destes serviços em seu site, recomendamos que os configure através do WP Rocket para garantir que você se beneficie da integração mais otimizada para estes serviços.
Se você já estiver usando outros plugins para integrar estes serviços em seu site, você pode remover com segurança estes plugins após configurar o complemento no WP Rocket.
Otimização de imagens
Os desenvolvedores do WP Rocket são as mesmas pessoas por trás do Imagify, um de nossos serviços favoritos de otimização de imagem. Se você está procurando um plugin WordPress fácil de usar para otimizar as imagens, dê uma olhada na Imagify. Para saber mais sobre otimização de imagens e outros plugins e soluções de otimização, confira este artigo.
Testes de Velocidade Final
Em seguida, rodamos alguns testes de velocidade final com tudo habilitado, para analisarmos a comparação entre antes e depois. Observação: Este site WordPress está hospedado na Kinsta.
Antes do WP Rocket
Rodamos cinco testes no Pingdom sem o WP Rocket e extraímos a média.
Na sequência, rodamos um teste no Google PageSpeed Insights sem o WP Rocket.
Após o WP Rocket
Realizamos mais cinco testes no Pingdom com o WP Rocket e suas opções ativadas e extraímos a média.
Em seguida, fizemos um teste no Google PageSpeed Insights com o WP Rocket.
Aqui está a conclusão dos resultados acima:
- Em nossos testes no Pingdom, observamos uma redução de 9,12% no tempo total de carregamento quando rodamos o WP Rocket. Embora esse número não pareça tão alto, levou apenas alguns minutos e menos de dez cliques para alcançá-lo.
- Lembre-se que o feijão com arroz do WP Rocket é a solução de cache. Mas aqui em Kinsta já usamos nosso cache embutido, portanto estamos apenas compartilhando os resultados obtidos com os demais recursos de otimização. Então, se trata de uma melhoria real de 9% sobre o cache veloz da Kinsta.
- O site que utilizamos para o teste já estava bastante otimizado. Sites maiores e aqueles que não são tão otimizados apresentarão resultados ainda melhores.
- Curioso para saber por que há solicitações adicionais na versão final? Isso geralmente ocorre devido ao recurso de lazy loading nas imagens, uma vez que ele cria solicitações data:image/gif;base64em branco. Mas não se preocupe, o site ainda assim será mais rápido.
- Se você estiver hospedando vídeos, provavelmente observará reduções no tempo de carregamento de 50% ou mais.Isto é feito utilizando o recurso WP Rockets que substitui os vídeos do YouTube por miniaturas de visualização clicáveis. É algo muito conveniente!
- Em nossos testes no Google PageSpeed Insights, vimos um aumento em nossa pontuação de 88/100 para 98/100. Entretanto, as pontuações não são tão importantes quanto o tempo geral de carregamento, portanto considere-as com cautela. Discutimos isso em nosso artigo sobre o Google PageSpeed Insights.
Como você pode ver acima, o WP Rocket torna incrivelmente fácil acelerar seu site WordPress com apenas alguns simples cliques!
Resumo
A equipe do WP Rocket lança constantemente novos recursos que se alinham diretamente com as recomendações de desempenho na web que fazemos na Kinsta. Espere ver uma integração ainda mais próxima com o plugin nos próximos meses! Estamos animados em saber que os clientes agora são capazes de usar este plugin sem precisar de qualquer modificação adicional.
Adoraríamos ouvir o que você tem a dizer. Você usa o WP Rocket? Compartilhe conosco nos comentários abaixo.
Brian tem uma enorme paixão pelo WordPress, e tem utilizado há mais de uma década e até desenvolve alguns plugins premium. Brian gosta de blogs, filmes e caminhadas. Conecte-se com Brian no Twitter.
Deixe um comentário