No último [post](https://metricasboss.com.br/porque-mudamos-o-site-da-metricas-boss-novamente-parte-1.html) 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.](https://metricasboss.com.br/porque-mudamos-o-site-da-metricas-boss-novamente-parte-1.html)

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



![porque-mudamos-novamente-performance-2.jpg](https://s3.amazonaws.com/imagens.metricasboss.com.br/porque_mudamos_novamente_performance_2_618dd54dd8.jpg)



SITE NOVO



![porque-mudamos-novamente-performance.jpg](https://s3.amazonaws.com/imagens.metricasboss.com.br/porque_mudamos_novamente_performance_7e0b2db2fe.jpg)



**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.



![porque-mudamos-novamente-performance-3.jpg](https://s3.amazonaws.com/imagens.metricasboss.com.br/porque_mudamos_novamente_performance_3_4ee6be0185.jpg)



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:



![porque-mudamos-novamente-performance-4.jpg](https://s3.amazonaws.com/imagens.metricasboss.com.br/porque_mudamos_novamente_performance_4_5fd35b8762.jpg)


## 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


![porque-mudamos-novamente-performance-5.jpg](https://s3.amazonaws.com/imagens.metricasboss.com.br/porque_mudamos_novamente_performance_5_9804c9e1ee.jpg)



![porque-mudamos-novamente-performance-6.jpg](https://s3.amazonaws.com/imagens.metricasboss.com.br/porque_mudamos_novamente_performance_6_30ac8ce3b4.jpg)



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:



![porque-mudamos-novamente-performance-7.jpg](https://s3.amazonaws.com/imagens.metricasboss.com.br/porque_mudamos_novamente_performance_7_8f05e217e8.jpg)
![porque-mudamos-novamente-performance-8.jpg](https://s3.amazonaws.com/imagens.metricasboss.com.br/porque_mudamos_novamente_performance_8_58e1af5f96.jpg)



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](https://www.webpagetest.org/result/160909_GY_10Z1/) e do [site novo](https://www.webpagetest.org/result/160909_GY_10Z1/) 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

Descubra todo o passo a passo que gerou a mudança do site da Métricas Boss e confira como aumentamos a performance do nosso carregamento!

small_papel-do-desenvolvedor-no-web-analytics-600x403.jpg

thumbnail_papel-do-desenvolvedor-no-web-analytics-600x403.jpg

papel-do-desenvolvedor-no-web-analytics-600x403.jpg

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

A Métricas Boss é uma agência de Web Analytics e usabilidade. Conte com uma empresa certificada Google Analytics para sua gestão de web analytics.

O que você irá aprender?