quarta-feira, 11 de maio de 2016

Performance da página no cliente

O nerdtech 03 (Velocidade, performance e otimização), podcast sobre tecnologia de conteúdo muito bem feito patrocinado pela Alura e feito pelo Jovem Nerd, deu uma visão geral de algumas formas de otimizar desempenho do site.

É possível mensurar o custo ou retorno de investimento num site rápido? Há um estudo da Amazon citado no programa na qual ela entende que a cada 100ms de latência maior em seu site impacta em 1% nos resultados da venda (Amazon found every 100ms of latency cost them 1% in sales).

Sites que ajudam na análise

Foi sugerido o site WebPageTest que ajuda na análise da experiência do usuário em um site. Possível inclusive comparativos de análises (No caso de ter sido feita alguma otimização) e a possibilidade de gerar um vídeo comparando o site  antes e depois de qualquer alteração.

Outra site que ajuda na análise é o PageSpeed do Google, que tem o diferencial de também avaliar tags bloqueantes. Outro site também do google é o Ferramenta de teste de sites para dispositivos móveis.



Dicas do Podcast

1) Deixar o servidor próximo do usuário, para diminuir a latência (Fazer CDN)
A latência representa o tempo entre requisição e retorno ao usuário.

2) Otimizar suas imagens
Otimizando a imagem haverá um download menor para o usuário e dessa forma, melhor desempenho no site. Normalmente imagens representam os recursos mais pesados na página.
Você pode fazer essas otimizações em sites como o TinyPNG ou fazendo tarefas automatizadas como o Gulp ImageMin

3) Minificar o CSS/JS
Esta ação também visa diminuir o custo de download, criando um arquivo novo, baseado na versão do desenvolvedor (que não deve ser excluída), removendo caracteres, espaços em branco - que tornam o arquivo de difícil legibilidade para humanos, mas é indiferente para a interpretação da máquina.
É possível fazer em sites CSS Minifier, JS Minifier ou através de tarefas automatizadas como o Gulp Uglify

4) Habilitar a compressão GZip no servidor
Configuração feita no servidor para otimizar o tamanho do download feito pelo cliente

5) Otimizar itens que bloqueiam o carregamendo do site
As tags de bloqueio são aquelas que interrompem o carregamento da página para requisitar novo recurso no servidor (Por exemplo javascript). Alguns arquivos tem bloqueio necessário como CSS.
Este item tem alto impacto no desempenho, mas adaptação ligeiramente mais difícil
Extra) Pensar no usuário

Referências:
Avoid Javascript blocking content download on your website during page load