Como tornamos o WordPress mais rápido do que os geradores de sites estáticos (Estudo de caso – Acelerando o WPBeginner)

No 10º aniversário do WPBeginner, compartilhei que a infraestrutura de hospedagem do WPBeginner recebeu uma grande atualização graças ao nosso parceiro de hospedagem na Web, a HostGator.

Pouco tempo depois, comecei a receber e-mails de leitores pedindo que eu compartilhasse os detalhes sobre como fizemos o WPBeginner carregar rapidamente.

Sim, o WPBeginner carrega mais rápido do que a maioria dos geradores de sites estáticos e, em alguns casos, mais rápido do que os sites AMP do Google também.

Neste artigo, darei uma olhada nos bastidores de como tornamos o WordPress mais rápido do que os geradores de sites estáticos e as plataformas CMS sem cabeça.

Observação: Este artigo é um pouco mais técnico do que o que normalmente publicamos no WPBeginner. Para usuários não técnicos, recomendo seguir nosso guia definitivo sobre como acelerar o WordPress.

Atualização: Não estamos mais usando a configuração compartilhada neste artigo. Em vez disso, mudamos totalmente para a plataforma Google Cloud gerenciada pela SiteGround. Temos os mesmos resultados de velocidade e conseguimos um desempenho de back-end ainda mais rápido. Leia por que mudamos para o SiteGround.

Histórico

Ultimamente, o WordPress tem recebido muita má reputação dos desenvolvedores “modernos”, que dizem que o WordPress é lento.

A afirmação geralmente é seguida de que você deve mudar para um gerador de site estático JAMstack, como o GatsbyJS. Outros no mundo corporativo dirão que você deve mudar para um CMS sem cabeça, como o Contentful.

Vários de meus amigos empreendedores bem-sucedidos começaram a me perguntar se isso era verdade.

Alguns até iniciaram o processo de migração para um CMS headless porque leram estudos de caso sobre como outras pessoas obtiveram grandes melhorias de velocidade ao mudar do WordPress para geradores de sites estáticos.

Isso foi muito frustrante para mim porque eu sabia que eles estavam desperdiçando dezenas de milhares de dólares em custos de migração. Sem mencionar os infinitos custos de personalização que se acumularão no futuro.

Por isso, aceitei o desafio de provar que um grande site de conteúdo do WordPress, como o WPBeginner, pode ser carregado com a mesma rapidez, se não mais, do que a maioria dos geradores de sites estáticos modernos.

Você pode me chamar de antiquado, mas, no final das contas, um site estático é apenas uma página sendo carregada do cache.

Resultados

Antes de abordar a infraestrutura exata de hospedagem do WordPress, as configurações de servidor e os plug-ins, acho que é útil compartilhar os resultados.

Veja a velocidade de carregamento da página inicial do WPBeginner no Pingdom a partir do servidor de Washington, DC:

Dependendo da hora do dia e do local de onde você está verificando, esse resultado varia entre 400ms e 700ms, o que é bastante rápido para uma página inicial.

Aqui está um teste que executei em uma página de postagem única, pois ela tem imagens maiores e mais conteúdo:

Também obtivemos uma pontuação perfeita de “100” no teste de velocidade de página do Google para desktop. Embora tenhamos espaço para melhorar a pontuação em dispositivos móveis.

Os resultados acima são para páginas em cache, que é o que nossos leitores e bots de mecanismos de pesquisa obtêm quando visualizam nosso site. O tempo de carregamento percebido do WPBeginner é quase instantâneo (mais sobre isso adiante).

Para fins de comparação, aqui está o resultado de um teste de velocidade para a página inicial do Gatsby. Esse é um gerador de site estático popular que muitos desenvolvedores estão adorando:

Aqui está o resultado do teste de velocidade da página inicial do Netlify, um host de site estático popular, que muitos desenvolvedores recomendam. Observe que eles têm a metade da quantidade de solicitações e o tamanho da página é 30% do WPBeginner, mas ainda assim ela carrega mais lentamente do que a nossa página inicial.

A velocidade da página inicial do Contentful, o CMS sem cabeça que é “como as empresas oferecem melhores experiências digitais”, simplesmente não é otimizada. Esse foi o site mais lento que testamos.

Estou compartilhando essas estatísticas não para desacreditar as outras estruturas, mas sim para dar uma perspectiva de que nem todas as coisas novas são tão brilhantes quanto parecem.

O WordPress, com uma infraestrutura de hospedagem adequada e otimizações, pode ser tão rápido quanto qualquer gerador de site estático. Além disso, nenhuma outra plataforma chegará perto do nível de flexibilidade que o WordPress oferece aos proprietários de empresas por meio de seu grande ecossistema de plugins e temas.

Infraestrutura de hospedagem do WPBeginner

Quando se trata da velocidade do site, nada desempenha um papel mais importante do que sua infraestrutura de hospedagem na Web.

Como muitos de vocês já sabem, sou cliente da HostGator desde 2007. Comecei o blog WPBeginner em 2009 em uma pequena conta de hospedagem compartilhada da HostGator.

À medida que nosso site crescia, fizemos um upgrade para a hospedagem VPS e, depois, para servidores dedicados.

Na última década, tive a oportunidade de trabalhar em estreita colaboração com muitos dos membros da equipe e eles se tornaram uma parte extensa da família WPBeginner.

Assim, quando aceitei o desafio de tornar o WPBeginner mais rápido do que os geradores de sites estáticos, pedi ajuda a eles.

Compartilhei minha visão com a equipe de liderança deles e eles se ofereceram para me ajudar a criar uma configuração de hospedagem empresarial única para o WPBeginner.

Eles colocaram os melhores engenheiros das equipes da Bluehost e da HostGator para trabalhar junto comigo para tornar o WPBeginner extremamente rápido.

Aqui está uma visão geral de como é a configuração de hospedagem do WPBeginner:

Como você pode ver, essa é uma configuração de vários servidores espalhados por duas regiões geográficas (Texas e Utah). Há um total de 9 servidores, sem incluir a nuvem do balanceador de carga. Cada servidor é uma CPU Xeon-D com 8 núcleos (16 threads) com 32 GB de RAM e 2 SSDs de 1 TB (configuração RAID).

Estamos usando a plataforma de balanceamento de carga na nuvem do Google, para que possamos ter um dimensionamento automático e um balanceamento de carga contínuos em todo o mundo.

Depois que o hardware foi configurado com a sincronização de dados adequada, a equipe da Bluehost e da HostGator trabalhou em conjunto para otimizar as configurações do servidor para o WordPress. Minha esperança é que algumas dessas otimizações sejam incluídas em breve nos futuros planos de hospedagem do WordPress

Resumo da configuração do servidor

Resumir as configurações de servidor dessa configuração complexa em apenas alguns parágrafos é muito difícil, mas farei o possível.

Estamos usando o Apache como nosso software de servidor da Web porque a equipe está mais familiarizada com ele. Não vou entrar no debate entre NGINX e Apache.

Estamos usando o PHP 7.2 junto com pools PHP-FPM, para que possamos lidar com altas cargas de processos e solicitações. Se a sua empresa de hospedagem não estiver usando o PHP 7+, você estará perdendo uma grande otimização de velocidade.

Estamos usando o cache de Opcode com um avançado gerenciador de cache para garantir que nenhum usuário real tenha uma visualização de página sem cache.

Também estamos usando o cache de objeto com memcache, para que possamos melhorar o tempo de resposta para acessos a páginas sem cache e outros tempos de resposta de API na área de administração do WordPress para usuários conectados (nossos redatores). Aqui está uma guia de carga de rede da nossa tela “All Posts” (Todas as publicações) na administração do WordPress:

Para se ter uma ideia, nossa experiência na área de administração agora é duas vezes mais rápida do que a que tínhamos anteriormente.

Para o nosso servidor de banco de dados, mudamos do MySQL para o MariaDB, que é um clone do MySQL, mas mais rápido e melhor. Também mudamos do HyperDB para o LudicrousDB porque ele nos ajuda a melhorar a replicação, o failover e o balanceamento de carga do nosso banco de dados.

Há também muitas outras configurações que nos ajudam com o desempenho e a escalabilidade, como HTTP/2 e HSTS para conexão mais rápida + criptografia, capacidade de ativar servidores adicionais em novas regiões em caso de interrupção do data center etc.

Sinto que não estou fazendo justiça à incrível configuração que a equipe criou, mas saiba que meu ponto forte é o marketing. Sim, sou um blogueiro que escreve sobre o WordPress, mas muitas das otimizações técnicas aqui estão muito acima do meu nível de remuneração.

Elas foram feitas por engenheiros super inteligentes da equipe do Endurance, incluindo David Collins (arquiteto-chefe do Endurance / CTO da HostGator), Mike Hansen (desenvolvedor principal do WordPress) e outros a quem agradecerei na seção de créditos abaixo.

CDN, WAF e DNS

Além da hospedagem na Web, as outras áreas que desempenham um papel importante na velocidade do seu site são o provedor de DNS, a rede de distribuição de conteúdo (também conhecida como CDN) e o firewall de aplicativos da Web (WAF).

Embora eu as tenha listado como três coisas separadas, muitas empresas agora estão oferecendo essas soluções em um plano integrado, como Sucuri, Cloudflare, MaxCDN (StackPath) etc.

Como quero ter o máximo de controle e distribuir os riscos, estou usando três empresas separadas para lidar com cada parte de forma eficiente.

O DNS do WPBeginner é fornecido pela DNS Made Easy (a mesma empresa da Constellix). Eles são consistentemente classificados como os provedores de DNS mais rápidos do mundo. A vantagem do DNS Made Easy é que posso fazer o direcionamento do tráfego global quando um data center específico em meu CDN ou WAF não estiver funcionando corretamente para garantir o máximo de tempo de atividade.

Nossa CDN é alimentada pelo MaxCDN (StackPath). Basicamente, eles nos permitem servir nossos ativos estáticos (imagens, arquivos CSS e JavaScripts) a partir de sua grande rede de servidores em todo o mundo.

Estamos usando o Sucuri como nosso firewall de aplicativo da Web. Além de bloquear ataques, eles também atuam como outra camada de CDN, e seu desempenho geral é simplesmente incrível. Acredito que eles têm a melhor solução de firewall para WordPress do mercado.

Ao trabalhar na otimização da velocidade do site, é importante reduzir cada milissegundo. É por isso que usar esses provedores de soluções combinados com nossa nova infraestrutura de hospedagem na Web faz uma enorme diferença.

Para ilustrar, aqui está o detalhamento em cascata de WPBeginner.com vs GatsbyJS.org vs CloudFlare.com:

Observe que o tempo de DNS, o tempo de SSL, o tempo de conexão e o tempo de espera do WPBeginner são todos de alto nível quando comparados a esses outros sites populares. Cada uma dessas melhorias é composta para fornecer os melhores resultados.

Instant.page, imagens otimizadas e outras práticas recomendadas

Uma das coisas que você deve ter notado é o tempo de carregamento quase instantâneo quando você navega pelos posts e páginas do WPBeginner.

Além de tudo o que mencionei acima, também estamos burlando a latência usando um script chamado instant.page que usa pré-carregamento just-in-time.

Basicamente, antes de um usuário clicar em um link, ele precisa passar o mouse sobre esse link. Quando o usuário passa o mouse por 65 ms (período muito curto), um em cada dois usuários realmente clica no link.

O scriptInstant.page começa a pré-carregar a página nesse momento, portanto, quando o usuário realmente clica no link, grande parte do trabalho pesado já foi feito. Isso faz com que o cérebro humano perceba o tempo de carregamento do site como quase instantâneo.

Para ativar o Instant.page em seu site, basta instalar e ativar o plug-in Instant Page WordPress.

Esse script é muito legal. Recomendo enfaticamente que visite o site deles e clique no botão “test your clicking speed” (teste sua velocidade de clique) para ver como ele engana o cérebro.

Atualização: Desativei o instant.page por enquanto e vou testar o plug-in FlyingPages em um futuro próximo. Gijo Varghese compartilhou seu novo plug-in comigo no grupo do WPBeginner Engage no Facebook, e ele parece combinar o melhor do instant.page e do script de link rápido.

Otimização de imagens para a Web

Embora existam novos formatos de imagem sendo desenvolvidos, como webp, ainda não os estamos usando. Em vez disso, pedimos a todos os nossos redatores que otimizem cada imagem usando a ferramenta TinyPNG.

Você também pode automatizar a compactação da imagem usando plug-ins como o Optimole ou o EWWW Image Optimizer.

No entanto, eu pessoalmente prefiro que a equipe faça isso manualmente, para que não carreguemos arquivos grandes no servidor.

No momento, não estamos fazendo nenhum carregamento lento para imagens, mas planejo adicioná-lo em um futuro próximo, agora que o Google tem suporte para carregamento lento incorporado ao Chrome 76.

Há também um tíquete no núcleo do WordPress para adicionar esse recurso em todos os sites (espero que isso aconteça em breve), para que eu não precise escrever um plug-in personalizado.

Atualização: Poucas horas depois de eu ter publicado a postagem no blog, o Google lançou o plug-in Native Lazy Load para WordPress.

Limitação de consultas HTTP + práticas recomendadas

Dependendo dos plug-ins do WordPress que você usa, alguns adicionarão arquivos CSS e JavaScript adicionais em cada carregamento de página. Essas solicitações HTTP adicionais podem ficar fora de controle se você tiver muitos plug-ins no seu site.

Para obter mais detalhes, consulte como os plug-ins do WordPress podem afetar o tempo de carregamento do seu site.

Agora, antes que você chegue à conclusão errada de que muitos plug-ins do WordPress são ruins, quero informá-lo de que há 62 plug-ins ativos em execução no site do WPBeginner.

O que você precisa fazer é combinar arquivos CSS e JavaScript sempre que possível para reduzir as solicitações HTTP. Alguns plug-ins de cache do WordPress, como o WP Rocket, podem fazer isso automaticamente com seu recurso de minificação.

Você também pode seguir as instruções deste artigo para fazer isso manualmente, que foi o que nossa equipe do WPBeginner fez.

Além das solicitações HTTP que os plug-ins e temas adicionam, você também deve estar atento a outros scripts de terceiros que adiciona ao seu site, pois cada script afetará a velocidade do site.

Por exemplo, se estiver executando muitos scripts de publicidade ou scripts de redirecionamento, eles tornarão seu site mais lento. Talvez você queira usar uma ferramenta como o Google Tag Manager para carregar scripts condicionalmente somente quando forem necessários.

Se você for um site com suporte de anúncios, como o TechCrunch ou o TheNextWeb, não há muito o que fazer a respeito, pois remover os anúncios não é uma opção.

Felizmente, o WPBeginner não depende de scripts de anúncios de terceiros para ganhar dinheiro. Quer ver como o WPBeginner ganha dinheiro? Veja minha postagem no blog sobre a renda do WPBeginner.

Lições aprendidas (até agora) + Minhas considerações finais

Esta é uma infraestrutura de hospedagem totalmente nova, e tenho certeza de que há muitas lições que aprenderei ao longo do tempo.

Até o momento, estou adorando as melhorias de velocidade, pois elas nos ajudaram a aumentar nossas classificações de SEO e nossa área administrativa está muito mais rápida.

Com a nova configuração de vários servidores, introduzimos um novo fluxo de trabalho de implantação para equiparar o WPBeginner ao restante dos sites de produtos da Awesome Motive.

Isso significa que agora temos um controle de versão adequado incorporado, e há medidas implementadas para evitar que eu seja imprudente (ou seja, adicionar plug-ins sem testar adequadamente, atualizar plug-ins do painel sem testar etc.).

Essas mudanças também definiram o caminho para que eu finalmente saia do desenvolvimento e entregue as rédeas do site WPBeginner à nossa equipe de desenvolvimento.

Venho resistindo a isso há anos, mas acho que está chegando a hora, e só preciso aceitá-la.

A nova configuração não tem cPanel ou WHM, portanto, isso me torna praticamente inútil, já que não sou mais muito fluente com a linha de comando.

Até agora, aprendemos duas grandes lições:

Primeiro, a atualização do WordPress não é tão simples devido à sincronização/replicação do servidor. Quando atualizamos meu blog pessoal(SyedBalkhi.com) para o WordPress 5.2, os arquivos de atualização não foram sincronizados corretamente em um dos nós da Web, e a depuração levou muito mais tempo do que o previsto. Estamos trabalhando para criar um processo melhor de criação/teste para isso.

Em segundo lugar, precisamos ter uma melhor comunicação entre as equipes porque tivemos uma pequena crise com configurações incorretas do balanceador de carga que resultou em algum tempo de inatividade. Para piorar a situação, eu estava em um voo transatlântico da Turkish Airlines e o WiFi não estava funcionando.

Felizmente, tudo foi resolvido graças ao rápido tempo de resposta da equipe de hospedagem, mas isso nos ajudou a criar vários novos Procedimentos Operacionais Padrão (SOPs) para lidar melhor com o incidente no futuro.

No geral, estou muito satisfeito com a configuração e sei que algumas das configurações/otimizações de cache feitas para o WPBeginner se tornarão uma parte padrão dos planos de hospedagem WordPress da HostGator Cloud e da Bluehost.

Acho que não é preciso dizer que, se você está apenas começando um site, blog ou loja on-line, NÃO precisa dessa configuração empresarial sofisticada.

Eu sempre recomendo que você comece pequeno com os planos compartilhados da HostGator ou da Bluehost, como eu fiz, e depois atualize sua infraestrutura de hospedagem à medida que sua empresa cresce.

Você pode aplicar muitas das otimizações que compartilhei acima em seus planos atuais de hospedagem WordPress.

Por exemplo, o plano padrão da Bluehost já vem com um plugin de cache integrado que você pode usar, e eles também oferecem PHP 7 por padrão.

Você pode combinar isso com um CDN + WAF como o Sucuri para acelerar significativamente seu site.

Agora, se você for uma empresa de médio porte/empresa que deseja uma configuração de hospedagem semelhante, entre em contato comigo por meio do nosso formulário de contato. Posso ajudá-lo a encontrar a direção certa.

Agradecimentos especiais + créditos

Embora no artigo acima eu tenha feito muitos elogios às marcas HostGator e Bluehost, quero reservar um momento para reconhecer e apreciar as pessoas que trabalharam nos bastidores para que isso acontecesse.

Primeiro, quero agradecer à equipe de liderança da Endurance, Suhaib, Mitch, John Orlando, Mike Lillie e Brady Nord, por concordarem em me ajudar com o desafio.

Também gostaria de agradecer a Mike Hansen, David Collins, Rick Radinger, Chris Miles, David Ryan, Jesse Cook, David Foster, Micah Wood, William Earnhardt, Robin Mendieta, Rod Johnson, Alfred Najem e outros da equipe do data center por realmente trabalharem duro e fazerem isso acontecer.

Gostaria de fazer uma menção especial a Steven Job (fundador do DNSMadeEasy) por responder rapidamente às minhas perguntas e me ajudar a entender melhor algumas configurações. Também gostaria de agradecer a Tony Perez e Daniel Cid, da Sucuri, por sempre me apoiarem.

Por último, mas não menos importante, gostaria de dar um reconhecimento especial a Chris Christoff. Ele é o cofundador da MonsterInsights e teve a gentileza de me ajudar com muitos dos testes e da implementação.

Espero que você tenha achado útil esse estudo de caso dos bastidores sobre a infraestrutura de hospedagem do WPBeginner. Talvez você também queira ver nosso guia definitivo sobre como acelerar o WordPress, que é muito mais amigável para iniciantes.

Bônus: Aqui estão os melhores plugins e ferramentas para WordPress que recomendo para todos os sites WordPress.

Se você gostou deste artigo, inscreva-se em nosso canal do YouTube para receber tutoriais em vídeo sobre o WordPress. Você também pode nos encontrar no Twitter e no Facebook.