5862664_700b_v1
Share on facebook
Share on twitter
Share on linkedin

10 Dicas para melhorar o desempenho da sua aplicação web

Qualquer um fica estressado ao acessar um site que seja muito lento. Se o acesso for via smartphone ou tablet a experiência é ainda pior. É lugar comum afirmar que bom desempenho na Web é fundamental, mas o que nós desenvolvedores podemos fazer para melhorar a performance de nossas aplicações Web?

Nesses artigo seguem 10 dicas simples porém úteis para aumentar a velocidade e melhorar o desempenho de suas aplicações Web.

HTML

 

  1. Inserir código CSS/JavaScript, preferencialmente, via arquivos externos

Basicamente, há três maneiras pelas quais se pode inserir CSS e JavaScript em uma página web:

  • inline code: utilizando o atributo style para inserir CSS e atributos de eventos, como onclick, para inserir JavaScript;
 
<div style=”background-color:#ffaade; width:200px;”><div>
 <input type=”buttom”
 onclick=”document.querySelector(‘#menu’).style.visibility=’hidden’”>Click Me</input>”
  • embedded code: definindo css dentro da tag <style> e javascript dentro da tag <script>;
    <style>
    .content{
     background-color:#ffaade;
     width:200px;
    }
    </style>
    <div class=”content”><div>
    <input id=”btnClickMe”>Click Me</input>”
    <script>
    ...
    document.querySelector(‘#btnClickMe’).addEventListener(‘click’, function(){
     document.querySelector(‘#menu’).style.visibility = ’hidden’;
    });
    ...
    </script>
  • external code: carregando o css através da tag <link> e o javascript utilizando o atributo src da tag <script>.

     

    <link rel=”stylesheet” href=”styles.css”>
    <script src=”main.js”></script>

Os dois primeiros modos permitem diminuir o número total de requisições HTTP, o que pode ser desejável quando o tamanho total do código (css/javascript) é pequeno. Por outro lado, para trechos de códigos maiores a terceira maneira tende a ser preferível, pois, além de possibilitar fazer uso de mecanismos de cache do browser, diminui o tamanho do arquivo de marcação (e consequentemente o seu tempo de carregamento) e aumenta a organização do código.

 

2.      Inserir os arquivos de estilos no topo da página e os de script ao final

<html>
   <head>
      ...
      <link rel=”stylesheet” href=”styles.css”>
      ...
   </head>
   <body>
      ...
      <script src=”main.js”></script>
   </body>
</html>

 

Ao colocar os arquivos CSS no topo da página permite-se que a página seja renderizada aplicando-se os estilos definidos progressivamente, o que gera a percepção de carregamento rápido da página. Por outro lado, se colocados na parte inferior, a página será renderizada sem a aplicação de estilos, e, somente após o carregamento dos arquivos CSS, os estilos serão aplicados.

Já com relação aos scripts (JavaScript) é desejável o oposto, pois caso os mesmos estejam no topo da página, a mesma só será renderizada após todo o código ser baixado e carregado.

3.      Evitar redimensionar imagens via marcação

Utilizar os atributos width e height  da tag <img> é sempre uma boa prática, pois evita que elementos do DOM sejam redesenhadas durante a renderização. Todavia, esses atributos não devem ser utilizados para reduzir o tamanho das imagens. Ex: Se você deseja colocar uma imagem em um espaço 100x100px, carregue uma imagem de tamanho apropriado, ao invés de carregar uma imagem maior e redimensioná-la via HTML.

Deve-se ter em mente que há um custo elevado de tráfego de dados para carregar imagens grandes (vários kilobytes). Esse custo deverá ser levado em consideração, sobretudo quando a página for ser acessada via dispositivos móveis.

CSS

 

4.      Minificar os arquivos de estilo para diminuir o tráfego de dados na rede

Para garantir boa legibilidade e mantenibilidade ao código, é uma boa prática manter o código devidamente comentado e identado. Todavia, ao menos em tese, código de desenvolvimento não é o mesmo que entra em produção. Minificar o código CSS permite diminuir o tamanho em bytes do código, possibilitando mais velocidade tanto no download quanto no parsing e na execução dos mesmos.

Desenvolvimento:

/*
*       Página Principal
*/
.content{
    background-color:#ffaade;
    width:200px;
}

Produção:

.content{background-color:#ffaade; width:200px;}

 

5.      Concatenar os arquivos CSS em um único arquivo

Assim como inserir comentários e identar o código, dividir o código CSS em vários arquivos (ex: um arquivo para cada componente) costuma ser uma boa prática para organizar o código. Porém, quanto mais arquivos CSS forem referenciados pela página, mais requisições HTTP serão necessárias para carregá-la.  Reduzir o número de requisições HTTP através da concatenação de arquivos CSS é uma boa maneira de melhorar a velocidade de carregamento das páginas.

 

6.      Evitar utilizar a diretiva @import para carregar arquivos CSS

Existem duas maneiras de carregar arquivos de CSS externos em uma página, via tag <link> ou utilizando a diretiva de CSS @import. A vantagem de se utilizar <link> consiste em que, ao contrário do método da diretiva, os arquivos inseridos via tag <link> podem ser baixados em paralelo pelos browsers.

JavaScript

 

7.      Crie loops de maneira otimizada

Loops em javascript costumam ser bons pontos de atenção quando se deseja melhorar a performance de uma página Web. Uma boa prática quando da utilização de for para iterar sobre arrays é sempre armazenar em variável o tamanho do array a ser iterado.

var vetor = new Array(1000), tam, cont;
for (cont = 0; cont < vetor.length; cont++) {
  // Maneira ruim de iterar, o tamanho do array será calculado 1000 vezes
}
for (cont = 0, tam = vetor.length; cont < tam; cont++) {
  // Boa maneira de iterar, o tamanho do array será calculado apenas uma vez
}

Essa dica é particularmente interessante quando a lista a ser iterada corresponde a elementos do DOM.

var itens = document.querySelectorAll('li'), tam, cont;
for (cont = 0; cont < itens.length; cont++) {
// RUIM – a cada iteração a lista de itens será recalculada para verificar se houve alterações no DOM
}
for (cont = 0, tam = itens.length; cont < tam; cont++) {
  // BOM – o tamanho da lista é armazenado e não precisa ser recalculado a cada iteração
}
 
// PÉSSIMO: loop infinito
for (cont = 0; cont < itens.length; cont++) {
  document.body.appendChild(document.createElement('li'));
  // a cada iteração um novo item de enumeração é inserido, e como o tamanho da lista é recalculado sempre, a condição de parada nunca é alcançada. Se o tamanho da lista tivesse sido armazenado, o loop infinito não ocorreria
}

8.      Minimize quantas vezes o browser terá de redesenhar elementos na página

Quando atributos de estilo (background-color, width, height, etc.) de um elemento do DOM são alterados o browser torna a renderizar o elemento e, quando necessário, recalcula e ajusta o tamanho dos elementos na página. Portanto, para ter um bom desempenho, é interessante que tal processo ocorra estritamente quando necessário.

Nos browsers modernos esse comportamento costuma ser otimizado, assim, quando ocorrem alterações de estilo em diversos elementos, o processo de renderização é postergado para ocorrer apenas uma vez. Porém algumas construções podem impedir que o browser consiga fazer essa otimização.

Construções tais como essa:

var div = document.querySelector("#content"),
    lis = document. querySelectorAll('li'),
    tamDiv = div.offsetWidth, cont, tam;
for (cont = 0, tam = lis.length; cont < tam; cont++) {
  lis[cont].style.width = tamDiv + 'px';
}

são melhores que essa:

var div = document.querySelector("#content"),
    lis = document. querySelectorAll ('li'), cont, tam;
for (cont = 0, tam = lis.length; cont < tam; cont++) {
  lis[cont].style.width = div.offsetWidth + 'px';
}

pois a chamada à propriedade offsetWidth obrigará o browser a renderizar a página a cada iteração para recalcular a propriedade.

9.      Evitar buscar elementos do DOM desnecessariamente

Embora os browsers atuais sejam bastante otimizados, buscar elementos do DOM é sempre uma operação mais custosa. Portanto, é sempre bom evitar manipular desnecessariamente elementos do DOM. Ex:

// Maneira Ruim!
for (var cont = 0; cont < 100; cont++) {
  document.querySelector("main").innerHTML += "<span>" + cont + "</span>";
}
// Maneira Boa
var listaSpan = "";
for (var cont = 0; cont < 100; cont++) {
  listaSpan = listaSpan + "<span>" + cont + "</span>";
}
document.querySelector("main").innerHTML = listaSpan;

 

10.      Minificar e concatenar os arquivos JavaScript

Assim como em CSS, durante o desenvolvimento, é comum escrever comentários, identar e separar o código JavaScript em arquivos diferentes para aumentar a legibilidade e a manutenibilidade. Porém, para os browsers, legibilidade de código não faz nenhuma diferença. Além disso, minificar os arquivos e concatená-los pode levar a um aumento considerável de performance ao diminuir a quantidade de dados a ser trafegada na rede e o número de requisições feitas ao servidor.

Pronto! Agora você já sabe como melhorar o desempenho da sua aplicação web!

Você pode saber mais sobre aplicações web aqui, e aqui. Se tiver alguma dúvida, entre em contato com a gente. 

Por: Marco Túlio Ferreira e Jéssica Saliba

 

 

Tá na dúvida?

[email protected]

R. Antônio de Albuquerque, 330 – 14° andar
Savassi, Belo Horizonte – MG, 30112-010