Por que mudamos o site da Métricas Boss novamente? - Parte 2 [PERFORMANCE]

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.

Grande mudanças certo? Vamos bater uma por uma?

First Byte time|| TTFB

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.

O que pode estar prejudicando seu TTFB?

Geralmente o TTFB é afetado por três motivos:

1. O tempo que leva sua requisição para propagar através da rede até seu servidor web;
2. O tempo que leva para o seu servidor processar a requisição e gerar uma resposta;
3. O tempo que leva para a sua resposta propagar da rede para seu browser;

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:

Compressão de imagens

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.

BONUS - Vamos comparar visualmente?

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:

FALTAM COLOCAR AQUI DUAS IMAGENS QUE NO SITE ESTAVAM COM ERRO

Conclusão

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