No último post da série porque mudamos novamente o site da Métricas Boss falamos um pouco sobre as dificuldades e soluções sobre como mudar a plataforma de conteúdo, se você ainda não leu o post é só clicar aqui.
Pois bem, mas não é só custo de servidor e escalabilidade que foram os fatores chaves da nossa migração. Um dos os grandes pontos que influenciaram nossa mudança foi melhorar a performance que tínhamos enquanto usávamos o wordpress.
Como vocês vão ver abaixo da uma olhada na diferença da nossa pontuação antes e depois da migração.
SITE ANTIGO
SITE NOVO
Grande mudanças certo? Vamos bater uma por uma?
Antes de tudo vamos explicar rapidamente o TTFB (Time to first byte), como métrica o TTFB captura o tempo que o navegador leva para receber o primeiro byte de resposta do seu servidor web.
Geralmente o TTFB é afetado por três motivos:
primeiro passo para se melhorar o seu TTFB é mensurar e foi o que fizemos, uma excelente ferramenta que utilizamos para mensurar performance como um todo é o webpagetest.org.
Como podemos ver o site antigo tinha 1117ms para o first byte, ou seja, 1 segundo a mais no carregamento do site, e como resolvemos isso? A resposta é bem simples, a partir do momento que passamos a hospedar somente os arquivos estáticos, tiramos toda a tranqueira do nosso pré-processamento :D Com isso chegamos ao seguinte cenário:
Outro ponto que ganhamos um grade foi na compressão de imagens subindo de D para C, Como melhoramos isso? Voltando ao básico, entendemos que existem 3 maneiras hoje que otimizam bastante o carregamento das imagens:
1️⃣ Salvar a mesma direto do photoshop como jpg progressivo;
2️⃣Utilizar ferramentas de compressão de imagem como o tinny png, ou acoplar ao seu deploy uma ferramenta de minificação de imagem.
3️⃣ Utilizar bibliotecas (lazyloadLoad) que fazem o carregamento das imagens somente quando elas são necessárias na tela do usuário;
Da maneira conforme vamos falando de performance percebemos que é muito mais planejamento do que execução propriamente, certo? Uma simples mudança no workflow de post, ganhamos um grade em performance :D
A quantidade de requisições também foi um ponto bem importante nessa mudança do site, na versão anterior como podemos ver tínhamos o total de 112 requisições, e muito dessas requisições eram devido ao nosso tema do wordpress, com o site novo além de re-estruturar o nosso código fonte, limpamos a quantidade excessiva de bibliotecas e limitamos os nossos templates a carregar somente o que ele precisasse. Diferente da versão antiga que carrega todos os assets para todas as páginas conseguindo a marca de 71 requisições nesse novo site.
E não foi só em número de requisições que a nossa re-estruturação de código nos trouxe benefícios, ganhamos muito em quantidade de elementos no DOM com essa re-fatoração, veja a diferença:
Diminuímos quase em 50% a quantidade de elementos da nossa página, isso além de nos dar uma manutenibilidade muito grande no projeto como um todo daqui pra frente, diminui bastante nosso tamanho do HTML.
Um dos motivos de utilizarmos o webpagetest.org é a possibilidade de visualizar de uma maneira bem mais intuitiva o carregamento da nossa página, até existe um modelo de vídeo que podemos comparar diretamente, da uma olhada no carregamento do nosso site antigo e do site novo:
O processo de melhorias de performance do nosso site novo acabou? NÃO! Existem ainda algumas coisas que podemos fazer que nos daria bastante pontos, por exemplo o uso de um CDN para distribuição dos nossos assets, a utilização do cache do navegador para alguns arquivos. O processo de melhoria é constante e sempre está em beta. Espero que esse post tenha te ajudado a esclarecer algumas dúvidas e até o próximo post da serie por que mudamos o site da Métricas Boss novamete! Ahhh, estou deixando os links dos testes do site antigo e do site novo para quer quiser visualizar mais detalhadamente as diferenças :D
Dúvidas? Comentários? Sugestões?
Mande um e-mail para gente contato@metricasboss.com.br, até a próxima :D