Desde que o WPML se tornou comercial, o wpml.org está lidando com muito mais tráfego. Duas semanas atrás, nosso servidor estava operando com 95% de carga e o tempo de resposta era superior a 10 segundos. Com o W3TC, nossa carga voltou para 5% e o tempo de resposta é de cerca de 300 ms.
Se você não o conhece, o W3TC é um plugin de desempenho de site. Ele inclui cache de página, mas isso é apenas o começo. Além do cache de página básico, ele também minifica arquivos JS e CSS, comprime tudo e executa uma CDN (rede de distribuição de conteúdo). Juntas, essas funções podem acelerar um site imensamente, permitindo que sites WordPress complexos lidem com tráfego de alto volume.
Por que isso é tão importante para sites WordPress?
Uma imagem vale mais que mil palavras. É assim que nosso site carrega sem nenhum cache (gerado pelo Pingdom Tools):
Se você acha que isso é assustador, tenha em mente que, na realidade, era pior. Este gráfico de tempo de carregamento foi feito quando nosso servidor estava operando com 5% de carga. Quando ele realmente rodava sem cache, o servidor estava fritando em 95% de carga e o tempo de processamento era muito maior. O primeiro byte levou 5 segundos para sair, e não meio segundo como você vê neste gráfico.
Para exibir totalmente nossa página inicial, nosso servidor teve que enviar 77 arquivos. Mesmo este gráfico, rodando a 5% de carga do servidor, termina com um tempo limite aos 30 segundos (veja as linhas vermelhas).
É por causa de programação desleixada e práticas ruins de design? Não.
O poder do WordPress vem da modularidade. Você pode escolher qualquer tema que quiser, com qualquer combinação de plugins. Isso significa que cada um deles é desenvolvido de forma independente e roda com seus próprios recursos. A maioria dos plugins que você ativa inclui vários arquivos CSS e Javascript e contribui para os esforços de processamento de PHP e MySQL. Você poderia otimizar isso manualmente, mas então perderia toda essa grande modularidade e voltaríamos à estaca zero.
Passe o seu site pelas ferramentas do Pingdom, ou por outra medição de tempo de carregamento de página (há um complemento para Firefox para isso). Veja quais arquivos carregam e sua ordem. Você notará que os arquivos CSS carregam imagens e outros CSS, e que há montes de arquivos Javascript carregados para cada página.
Para abrir o seu apetite, aqui está o que alcançamos usando todos os recursos do W3TC:
Os números que você está vendo aqui estão corretos. Um total de 28 arquivos são buscados para exibir a página. 5 arquivos vêm do wpml.org (nosso próprio servidor) e o restante vem da CDN (rede de distribuição de conteúdo). O PHP quase não precisa fazer nada para servir esta página, exceto verificar se ela está no cache e algumas outras pequenas verificações.
A página inteira carrega em menos de 2 segundos e causa uma carga que mal podemos medir no servidor. Nós estamos felizes, os visitantes estão felizes e até o Google está feliz.
Passo 1) Cache de página
A primeira e mais básica coisa que você vai querer fazer é ativar o cache de página. Vá para Performance, ative o W3TC e configure a seção Page Caching.
Para o cache de página, ficamos com as configurações básicas. Uma coisa que adicionamos foi excluir as seções da conta do cliente e de downloads do cache de página, para que o W3TC não interfira nas contas de clientes do WPML e nos downloads do WPML.
Se você estiver usando um cache de opcode, o W3TC vai aproveitar isso para acelerar ainda mais o seu site. Nós não o estamos usando, mas vale a pena se você estiver executando um processamento PHP complexo que não está em cache.
Passo 2) Minificar – empacotar e comprimir CSS e JavaScript
Lembra de todos aqueles arquivos CSS e JS que o tema e os plugins adicionam? Agora é a hora de corrigir a carga que eles estão causando.
A minificação coleta vários arquivos de recursos, os empacota em um único arquivo e o comprime. O resultado é um arquivo maior em vez de dezenas de arquivos minúsculos.
Embora o tamanho total possa encolher apenas 50%, a carga que isso economiza é enorme. Em vez de o navegador ter que emitir várias requisições HTTP e obter muitos arquivos minúsculos, ele emite uma única requisição e os obtém todos juntos. Essa mudança é provavelmente a maior contribuinte para melhorar a capacidade de resposta do seu site – especialmente para novos visitantes (que ainda não têm o seu CSS e JS em cache).
Clique no botão Help no topo da página. O W3TC vai percorrer todo o seu site e procurar por arquivos de recursos. Então, ele permite que você escolha quais combinar. Normalmente, você pode selecionar todos, mas precisa prestar um pouco de atenção ao que está fazendo, pois isso pode mudar a ordem de carregamento.
Depois de selecionar os arquivos CSS e JS para minificar, você precisa se certificar de que a ordem deles está correta.
Para arquivos CSS, arraste os arquivos para cima e para baixo na lista.
A ordem que você vê nesta lista deve corresponder à ordem em que os arquivos CSS são carregados sem a minificação. Você pode ver isso no código-fonte da sua página HTML.
Os arquivos Javascript são um pouco mais complicados. Aqui, a ordem de carregamento é ainda mais crítica, pois a ordem errada resultará em erros de JS e funcionalidades quebradas.
O W3TC permite que você escolha quais arquivos JS vão para a seção do cabeçalho e quais vão para o corpo. Por exemplo, os scripts do Google Analytics iriam logo antes de , enquanto o jQuery vai para o cabeçalho, pois ele precisa ser executado primeiro (e fora da lista de minificação).
Passo 3) Rede de distribuição de conteúdo (CDN)
Para nós, a cereja do bolo vem na forma de uma CDN lindamente funcional.
Configurar e executar uma CDN está fora do escopo deste post, pois requer a configuração de uma conta em um serviço de terceiros.
Para os nossos próprios sites, usamos o Amazon S3 para armazenamento e o CloudFront para distribuição. Existem outras ótimas opções por aí que você pode explorar e comparar.
Depois que a sua conta da CDN estiver configurada, o W3TC envia seus arquivos locais para a CDN e substitui os links do seu servidor para os arquivos na CDN. Então, o seu servidor envia apenas os arquivos HTML e a CDN cuida do resto.
Enquanto o seu servidor é uma única máquina, a CDN é, na verdade, uma rede de servidores. Ela enviará os arquivos do servidor mais próximo para cada visitante. As CDNs podem servir arquivos estáticos muito mais rápido do que qualquer servidor único conseguiria. Ao usar uma CDN, você melhora a experiência dos seus visitantes e reduz drasticamente a largura de banda e a utilização da rede do seu servidor.
Você deve seguir o assistente de configuração da CDN no W3TC. Ele vai ajudar você a transferir a biblioteca de mídia, o tema e os recursos do plugin para a CDN.
Está se divertindo com a otimização de desempenho do site? Diga-nos deixando um comentário aqui!
