Como Tornamos o WordPress Mais Rápido Que Geradores de Sites Estáticos (Estudo de Caso – Acelerando o WPBeginner)

No 10º aniversário do WPBeginner, compartilhei que nossa infraestrutura de hospedagem recebeu uma grande atualização graças ao nosso parceiro de hospedagem, HostGator. Depois disso, muitos de nossos leitores se perguntaram exatamente como tornamos o WPBeginner incrivelmente rápido, e comecei a receber e-mails pedindo os detalhes.

Sim, o WPBeginner carrega mais rápido que a maioria dos geradores de sites estáticos e, em alguns casos, mais rápido que sites Google AMP também. Isso não é apenas para ter direito de se gabar; é sobre compartilhar as técnicas exatas que usamos para fazer o WordPress ter o desempenho máximo absoluto.

Neste artigo, darei a você uma visão exclusiva dos bastidores de como otimizamos o WordPress para ser mais rápido que geradores de sites estáticos e plataformas de CMS headless.

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.

Histórico

Recentemente, o WordPress tem recebido uma má reputação de desenvolvedores "modernos", que dizem que o WordPress é lento.

A afirmação geralmente é seguida por: você deve mudar para um gerador de sites estáticos JAMstack como o GatsbyJS. Outros no mundo corporativo dirão que você deve mudar para um CMS headless como o Contentful.

Vários dos meus amigos empreendedores de muito sucesso 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 outros obtiveram enormes 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 custos de personalização intermináveis que se acumularão no futuro.

Então, aceitei como um desafio provar que um grande site de conteúdo WordPress como o WPBeginner pode carregar tão rápido quanto, se não mais rápido do que, a maioria dos geradores de sites estáticos modernos.

Você pode me chamar de velho, mas no final do dia, um site estático é apenas uma página carregando do cache.

Resultados

Antes de pular para a infraestrutura exata de hospedagem WordPress, configurações de servidor e plugins, acho que é útil compartilhar os resultados.

Veja a rapidez com que a página inicial do WPBeginner carrega no Pingdom a partir do servidor deles em Washington, DC:

Dependendo da hora do dia e da localização de onde você verifica, este resultado variará de 400ms a 700ms, o que é bem rápido para uma página inicial.

Aqui está um teste que executei para 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 melhorias na pontuação móvel.

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

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

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

A velocidade da página inicial do Contentful, o CMS headless que é "como as empresas oferecem melhores experiências digitais", simplesmente não é otimizado. Este foi o site mais lento que testamos.

Estou compartilhando essas estatísticas não para desacreditar os outros frameworks, mas sim para dar uma perspectiva de que nem tudo que é novo é tão brilhante quanto pode parecer.

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 negócios através de seu vasto ecossistema de plugins e temas.

Infraestrutura de Hospedagem do WPBeginner

Quando se trata de velocidade do site, nada desempenha um papel mais importante do que a sua infraestrutura de hospedagem 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 cresceu, atualizamos para a hospedagem VPS deles e depois para servidores dedicados.

Na última década, tive a oportunidade de trabalhar de perto com muitos membros da equipe deles, e eles se tornaram uma extensão da família WPBeginner.

Então, quando aceitei o desafio de tornar o WPBeginner mais rápido que os geradores de sites estáticos, recorri a eles para obter ajuda.

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

Eles colocaram os melhores engenheiros das equipes da Bluehost e da HostGator para trabalhar em estreita colaboração comigo para tornar o WPBeginner incrivelmente rápido.

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

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

Estamos usando a plataforma de balanceamento de carga na nuvem do Google, para que possamos ter escalonamento automático e balanceamento de carga perfeitos, em todo o mundo.

Once the hardware was set up with proper data syncing in place, the Bluehost and HostGator teams worked together to optimize the server configurations for WordPress. My hope is that some of these optimizations will soon make it into future WordPress hosting plans

Resumo da Configuração do Servidor

Resumir as configurações de servidor desta configuração complexa em apenas alguns parágrafos é muito difícil, mas tentarei o meu melhor.

Estamos usando Apache como nosso software de servidor web porque a equipe está mais familiarizada com ele. Não entrarei no debate NGINX vs Apache.

Estamos usando PHP 7.2 junto com pools PHP-FPM, para que possamos lidar com altas cargas de processos e requisições. Se sua empresa de hospedagem não estiver usando PHP 7+, você está perdendo otimizações de velocidade sérias.

Estamos usando cache de Opcode com um aquecedor de cache avançado para garantir que nenhum usuário real experimente uma visualização de página não cacheada.

Também estamos usando cache de Objeto com memcache, para que possamos melhorar o tempo de resposta para acessos a páginas não cacheadas e outros tempos de resposta de API na área de administração do WordPress para usuários logados (nossos redatores). Aqui está uma aba de carga de rede da nossa tela “Todos os Posts” na área de administração do WordPress:

Para colocar em perspectiva, a experiência da nossa área de administração agora é 2X mais rápida do que tínhamos anteriormente.

Para 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 nossa replicação de banco de dados, failover e balanceamento de carga.

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

Sinto que não estou fazendo justiça à configuração incrível que a equipe construiu, mas por favor, saibam que minha principal força é o marketing. Sim, sou um blogueiro que escreve sobre WordPress, mas muitas das otimizações técnicas aqui estão muito acima da minha capacidade.

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

CDN, WAF e DNS

Além da hospedagem web, as outras áreas que desempenham um papel significativo na velocidade do seu site são seu provedor de DNS, sua rede de entrega de conteúdo (também conhecida como CDN) e seu firewall de aplicativo web (WAF).

Embora eu tenha listado como três coisas separadas, muitas empresas agora oferecem essas soluções em um plano agrupado, como Sucuri, Cloudflare, MaxCDN (agora StackPath CDN), etc.

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

O DNS do WPBeginner é alimentado por DNS Made Easy (a mesma empresa que a 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 direcionamento de tráfego global quando um data center específico na minha CDN ou WAF não está funcionando corretamente para garantir o tempo de atividade máximo.

Nossa CDN é alimentada pela MaxCDN (agora StackPath CDN). Eles basicamente nos permitem servir nossos ativos estáticos (imagens, arquivos CSS e JavaScripts) de sua grande rede de servidores em todo o mundo.

Estamos usando Sucuri como nosso firewall de aplicação 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 tenham a melhor solução de firewall WordPress do mercado.

Ao trabalhar em otimizações de velocidade de sites, cada milissegundo economizado importa. É por isso que usar esses provedores de solução combinados com nossa nova infraestrutura de hospedagem web faz uma grande diferença.

Para ilustrar, aqui está a análise em cascata do WPBeginner.com vs GatsbyJS.org vs CloudFlare.com:

Observe que o tempo de DNS, tempo de SSL, tempo de conexão e tempo de espera do WPBeginner estão todos em primeiro lugar quando comparados a esses outros sites populares. Cada uma dessas melhorias se acumula para entregar os melhores resultados.

Instant.page, Imagens Otimizadas e Outras Melhores Práticas

Uma das coisas que você pode ter notado é o tempo de carregamento quase instantâneo ao navegar pelas postagens e páginas do WPBeginner.

Além de todas as coisas que mencionei acima, também estamos enganando a latência usando um script chamado instant.page que utiliza pré-carregamento just-in-time.

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

O script Instant.page começa a pré-carregar essa página neste momento, então, 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 habilitar o Instant.page em seu site, você pode simplesmente instalar e ativar o plugin Instant Page para WordPress.

Este script é muito legal. Eu recomendo fortemente que você visite o site deles e clique no botão “teste sua velocidade de clique” para ver como ele engana o cérebro.

Otimizando Imagens para a Web

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

Você também pode automatizar a compressão de imagens usando plugins como Optimole ou EWWW Image Optimizer.

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

Atualmente, não estamos fazendo nenhum lazy loading para imagens, mas planejo adicioná-lo em breve, agora que o Google tem suporte a lazy loading integrado ao Chrome 76.

Há também um ticket no core do WordPress para adicionar este recurso a todos os sites (realmente espero que isso aconteça em breve), para que eu não precise escrever um plugin personalizado.

Limitando Consultas HTTP + Melhores Práticas

Dependendo dos plugins do WordPress que você usa, alguns adicionarão arquivos CSS e JavaScript adicionais a cada carregamento de página. Essas requisições HTTP adicionais podem sair do controle se você tiver muitos plugins em seu site.

Para mais detalhes, veja como os plugins do WordPress podem afetar o tempo de carregamento do seu site.

Agora, antes que você chegue à conclusão errada de que muitos plugins do WordPress são ruins, quero que saiba que há 62 plugins ativos rodando no site WPBeginner.

O que você precisa fazer é combinar arquivos CSS e JavaScript sempre que possível para reduzir as requisições HTTP. Alguns plugins 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 em este artigo para fazer isso manualmente, que é o que nossa equipe no WPBeginner fez.

Além das requisições HTTP que plugins e temas adicionam, você também quer estar ciente de outros scripts de terceiros que você adiciona ao seu site, pois cada script impactará a velocidade do seu site.

Por exemplo, se você estiver executando muitos scripts de publicidade ou scripts de retargeting, eles deixarão seu site mais lento. Você pode querer usar uma ferramenta como o Gerenciador de Tags do Google para carregar scripts condicionalmente apenas quando eles forem necessários.

Se você tem um site com suporte de publicidade como o TechCrunch ou o TheNextWeb, então há muito pouco que você pode fazer a respeito, já que remover 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 meu post no blog sobre renda do WPBeginner.

Lições Aprendidas (até agora) + Meus Pensamentos Finais

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

Até agora, adoro as melhorias de velocidade porque elas nos ajudaram a impulsionar nossos rankings de SEO, e nossa área administrativa está muito mais rápida.

Com a nova configuração de múltiplos servidores, introduzimos um novo fluxo de trabalho de implantação para colocar o WPBeginner no mesmo nível do restante dos sites de produtos da Awesome Motive.

O que isso significa é que agora temos controle de versão adequado integrado, e há medidas em vigor para me impedir de ser imprudente (ou seja, adicionar plugins sem testes adequados, atualizar plugins do painel sem testes, etc).

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

Eu tenho resistido a isso por anos, mas acho que o momento está chegando, e eu só preciso aceitar.

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

Até agora aprendemos duas grandes lições:

Primeiro, atualizar o 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 sincronizaram corretamente em um dos nós da web, e a depuração demorou muito mais do que o esperado. Estamos trabalhando para construir um processo de build/teste melhor para isso.

Segundo, precisamos ter uma melhor comunicação entre as equipes, pois tivemos uma pequena crise com configurações incorretas do balanceador de carga, o que resultou em algum tempo de inatividade. Para piorar, eu estava em um voo transatlântico na Turkish Airlines, e o Wi-Fi não estava funcionando.

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

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

Acho que isso é óbvio, mas se você está apenas começando um site, blog, ou uma loja online, então você NÃO precisa dessa configuração sofisticada de nível empresarial.

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

Você pode aplicar muitas das otimizações que compartilhei acima aos 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 uma CDN + WAF como a Sucuri para acelerar significativamente seu site.

Agora, se você é uma empresa de médio porte / corporativa que deseja uma configuração de hospedagem semelhante, entre em contato comigo através do nosso formulário de contato. Posso ajudar a te direcionar para o caminho certo.

Agradecimentos Especiais + Créditos

Embora no artigo acima eu tenha dado muitos elogios às marcas HostGator e Bluehost, quero reservar um momento para reconhecer e apreciar as pessoas individuais que trabalharam nos bastidores para tornar isso possível.

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.

Quero também 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 fazerem o trabalho árduo e tornarem isso realidade.

Quero dar um agradecimento especial a Steven Job (fundador da DNSMadeEasy) por responder rapidamente às minhas perguntas e me ajudar a entender melhor algumas configurações. Também quero agradecer a Tony Perez e Daniel Cid da Sucuri por sempre me darem suporte.

Por último, mas não menos importante, quero dar um reconhecimento especial a Chris Christoff. Ele é o cofundador da MonsterInsights e foi gentil o suficiente para me ajudar com muitos dos testes e implantação.

Perguntas Frequentes (FAQ)

Entendemos que esta é muita informação técnica para absorver. Aqui estão as respostas para algumas das perguntas mais comuns que recebemos sobre velocidade e desempenho do WordPress.

Preciso de uma configuração de hospedagem complexa como a do WPBeginner para ter um site rápido?

Absolutamente não. Este estudo de caso mostra o que é possível em nível empresarial. Para a maioria dos usuários, começar com um plano de hospedagem compartilhada de qualidade da Bluehost ou HostGator é o ponto de partida perfeito. Você sempre pode fazer um upgrade conforme seu site cresce.

Quais são os fatores mais importantes para a velocidade do WordPress?

Os três pilares da velocidade de um site são sua infraestrutura de hospedagem web, cache e uma Rede de Distribuição de Conteúdo (CDN). Acertar essas três coisas resolverá os maiores gargalos de desempenho para a maioria dos sites WordPress.

Posso tornar meu site WordPress rápido sem ser um especialista técnico?

Sim. Embora este artigo seja técnico, você não precisa entender tudo nele. Seguindo guias fáceis para iniciantes, usando um bom plugin de cache como WP Rocket e otimizando suas imagens, você pode ter um grande impacto na velocidade do seu site sem nenhum conhecimento de codificação.

Usar muitos plugins deixa o WordPress lento?

Não é a quantidade de plugins, mas a qualidade deles que importa. Um plugin bem codificado terá um impacto mínimo. No entanto, plugins mal codificados podem adicionar código desnecessário e consultas ao banco de dados que deixam seu site lento.

Recursos Adicionais para Melhorar o Desempenho do Site

Se você achou este estudo de caso útil, temos outros guias que mostram o processo passo a passo para tornar seu site WordPress mais rápido. Confira-os para obter mais dicas práticas:

• O Guia Definitivo para Aumentar a Velocidade e o Desempenho do WordPress – Nosso guia mais completo para usuários de todos os níveis de habilidade melhorarem a velocidade do site.
• Como Escolher a Melhor Hospedagem WordPress – Aprenda a escolher o provedor de hospedagem certo para suas necessidades e orçamento.
• Por que você precisa de uma CDN para o seu blog WordPress – Uma explicação detalhada de como uma CDN funciona e por que ela é essencial para a velocidade.
• O Blueprint da WPBeginner – Veja a lista completa de ferramentas e plugins que usamos para gerenciar a WPBeginner hoje.

Bônus: Aqui estão os melhores plugins do WordPress e ferramentas que recomendo para todos os sites WordPress. Você também pode querer dar uma olhada em WPBeginner’s Blueprint, que lista os plugins e ferramentas que usamos para gerenciar o site WPBeginner hoje.

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