Escolha uma Página

Case Velocidade + Migração de Servidor: MGAPress

Case MGAPress – Velocidade e Migração

por | 13 jan, 2018 | 0 Comentários

Cliente: Michel, dono da MGAPress

Objetivo: site mais rápido, posicionando na primeira página do Google para [Assessoria de Imprensa]

Roteiro de ação: migração de servidor + otimização de conteúdo da página (Home e /assessoria-de-imprensa)

Detalhamento abaixo.

Os próximos 3 parágrafos são explicando o que uma Assessoria de Imprensa pode fazer. Se não quiser ler, pule direto pro tópico “O que a MGAPress precisava?”.

A MGAPress é uma Assessoria de Imprensa em São Paulo que trabalha clientes de várias áreas: Franquias, Saúde, Startups, Agências e até mesmo freelancers. (Eu mesmo estou bem inclinado em contratá-los para melhorar minha imagem profissional e fazer com que meu trabalho seja divulgado em mais locais do que eu conseguiria fazer sozinho.)

Por exemplo, eu posso facilmente criar uma campanha de Facebook, Adwords e Bing. Mas como fazer que grandes veículos como Exame, Folha de São Paulo e Pequenas Empresas Grandes Negócios saibam que eu existo? Esse é, basicamente, o papel de uma Assessoria de Imprensa: ser a ponte entre uma empresa e a imprensa.

Com relacionamento com vários jornalistas, as Assessorias comunicam novidades interessantes para os jornalistas que, obviamente, estão sempre atrás de uma boa matéria. Assim, se você tem algo interessante a falar, contratar uma Assessoria de Imprensa pode ser o ideal para você.

O que a MGAPress precisava?

O site da MGAPress tem um bom conteúdo, ótimas imagens e era voltado à conversão. Tanto que em minha prospecção abri a eles que eu trabalharia basicamente com LinkBuilding, haja visto que o site era bom e traria clientes desde que ficasse conhecido. Veja a ironia: eu faria a Assessoria de Imprensa deles no Google, hehe.

O problema inicial é que o site foi criado em uma hospedagem compartilhada e isso afetava diretamente a experiência do usuário (UX). Decidimos então mudar de hospedagem e logo de cara sugeri a Cloudways (quer saber mais sobre a Cloudways? Veja o post dedicado ao serviço clicando aqui) pela facilidade em migrar um WordPress para lá.

Para convencer o Michel a topar essa migração, eu criei uma cópia do site da empresa no meu servidor da Cloudways e mostrei que só de fazer a migração sem otimizar nada o site já carregaria 50% mais rápido (de 22 segundos para 11 segundos). Ainda era muito, mas já era um bom começo.  Com esse comparativo ganhei carta branca para criar um servidor de teste para a MGA no nome do Michel.

Como foi a migração?

Começou simples e depois se complicou um pouco. O motivo é que o site era um WordPress e o Blog outro tema do WordPress separado, instalado dentro da pasta /blog.

Geralmente, para migrações comuns, em questões de minutos você já está dentro da Cloudways com seu site cópia pronto. Mas, para duas instalações distintas, eu e o Rafael Coltro precisamos fazer a migração na mão, mas não foi difícil.

Para isso, criamos uma aplicação extra dentro do servidor. (lá no post da Cloudways eu explico melhor o que são servidores, aplicações e como eles funcionam) de PHP puro e instalamos um WordPress na mão, já que o domínio mgapress.com.br já estava sendo utilizado na aplicação principal.

Migração completa, apontamos o DNS da hospedagem antiga para a nova e voilá´: o site já estava estava carregando em 7 segundos. Mas ainda queríamos mais.

Ainda mais: compressão de imagens

Depois de migrar o servidor, percebemos uma melhora significativa na queda do TTFB (Time to First Byte) e no carregamento geral da página. Além disso, ativamos a CDN da Cloudflare.

Depois, exportamos todas as imagens da Biblioteca do WordPress para o computador e, de lá, usamos o Caesium para comprimir todas as imagens.

Algumas passaram de 3MB para 45kb, graças ao dimensionamento correto e compressão proporcional. Um bom exemplo eram imagens que estavam como PNG sem precisar, pois tinham fundo branco.

Na opção de compressão com JPG o Caesium é muito mais eficaz. Por isso, bastou ordenar as imagens por extensão e separar as PNG. Vimos, de uma em uma, quais eram necessariamente PNG’s.

Como compactar as imagens no Caesium?

O primeiro passo é fazer o download do software no link Download Caesium.

O processo de instalação é bem simples, então eu acho que nem vale a pena passar por ele aqui.
Após instalar, você verá uma imagem como essa, abaixo.

Clique no primeiro ícone da esquerda ou arraste as imagens que você deseja compactar para a área do software.

Depois, use as configurações da parte inferior do painel para escolher como deseja comprimir suas imagens:

  1. Qualidade: eu sempre deixo entre 20 e 40, depende do tamanho da foto e onde vou usá-la. Por exemplo, para imagens que vão ficar em um background que eu vou aplicar uma máscara escura por cima, comprimo ao máximo possível.
  2. Clico em “Same For All” principalmente quando pego várias imagens para um post e salvo em uma pasta. No caso desse post, eu criei uma pasta chamada “velocidade” e salvei todas essas imagens dentro. Depois, joguei todas no Caesium e comprimi com qualidade 40;
  3. Ao clicar em Estabelecer Qualidade você aplica todas as Opções de Compressão para as imagens selecionadas (no caso, como você recém-clicou Same For All, todas as imagens;
  4. Se você quiser redimensionar as imagens, aí existe o painel Resize, onde você escolhe se os valores são absolutos ou por porcentagem. Você então deve clicar em Apply e Same for all.
  5. Vale destacar que se você marcar Keep Aspect Ratio a imagem continua proporcional como estava;
  6. Em Pasta de Saída você escolhe onde as imagens comprimidas vão parar e como vão se chamar.

Manda bala, agora é só apertar Comprimir

Pronto! Na pasta que você escolheu as novas imagens aparecerão já comprimidas. Eu gosto de ordenar por data para ver as mais recentes!

Depois de todas as mudanças, aplicamos 3 configurações básicas no WordPress:

  • Cache;
  • Minificação;
  • Tiramos 10 plugins desativados e outros 3 inúteis.

Pronto! Passamos de uma página que carregava em 20 absurdos segundos para 4 segundos e o trabalho de otimizaçao de velocidade continua!