Performance no Frontend de sua aplicação web

Existem várias coisas que podemos fazer para melhorar a performance de nossas aplicações web. Vamos destacar aqui 2 coisas básicas que devemos implementar no frontend para obter uma melhora na rapidez da aplicação.

1- Não reduza as imagens no HTML
Imagine o cenário: você tem uma imagem em alta de 5 megas com 1000px de altura por 1000px de largura. Mas no seu layout html o espaço reservado para essa imagem é de apenas 200X200. O que você faz?

<img src="imagem.png" width="200" height="200" />

Não faça isso! Eu sei que isso é tentador, mas você estará obrigando o usuario baixar 5 megas sem necessidade.
O correto seria abrir a imagem e um software gráfico e reduzir o tamanho dela. Poderá usar o GIMP para isso. Abra a imagem e no menu Image selecione scale image, então informe o tamanho desejado. Se não possuir transparêcia você poderá ainda exportar para JPG e diminuir a qualidade final para que o tamanho fique menor ainda.

2- Utilize os seletores CSS
Usando bem os seletores css você evita muito código desnecessário, e quanto mais código, mais kbs para baixar. Deve-se evitar código CSS inline nos elementos HTML

Veja um exemplo:


<div style="background-color:#d1d2d4;font-family:Arial, Helvetica, sans-serif;font-size:12px;">
Menu 1
</div>
<div style="background-color:#d1d2d4;font-family:Arial, Helvetica, sans-serif;font-size:12px;">
Menu 2
</div>
<div style="background-color:#d1d2d4;font-family:Arial, Helvetica, sans-serif;font-size:12px;">
Menu 3
</div>

Tudo isso poderia ser evitado usando:


<style>
.menu{
background-color:#d1d2d4;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;

}
</style>
<div class="menu">Menu 1</div>
<div class="menu">Menu 2</div>
<div class="menu">Menu 3</div>


É também interessante que o código CSS ou javascript fiquem em um arquivo externo e referenciado como link no html:

<link rel="stylesheet" type="text/css" href="seu_arquivo.css" />

Isso permitirá que o navegador guarde em cache esse arquivo, minimizando solicitações ao servidor e o tempo necessário para baixar.

Aplicando essas duas dicas, a performance irá melhorar.

Gustavo Marques.