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.
<div id="toc_container" class="toc_white no_bullets">Sum&aacute;rio<ul class="toc_list"><li><a href="#HTML">1 HTML</a><ul><li><a href="#Inserir-codigo-CSSJavaScript-preferencialmente-via-arquivos-externos">1.1 Inserir código CSS/JavaScript, preferencialmente, via arquivos externos</a></li><li><a href="#2-Inserir-os-arquivos-de-estilos-no-topo-da-pagina-e-os-de-script-ao-final">1.2 2.      Inserir os arquivos de estilos no topo da página e os de script ao final</a></li><li><a href="#3-Evitar-redimensionar-imagens-via-marcacao">1.3 3.      Evitar redimensionar imagens via marcação</a></li></ul></li><li><a href="#CSS">2 CSS</a><ul><li><a href="#4-Minificar-os-arquivos-de-estilo-para-diminuir-o-trafego-de-dados-na-rede">2.1 4.      Minificar os arquivos de estilo para diminuir o tráfego de dados na rede</a></li><li><a href="#5-Concatenar-os-arquivos-CSS-em-um-unico-arquivo">2.2 5.      Concatenar os arquivos CSS em um único arquivo</a></li><li><a href="#6-Evitar-utilizar-a-diretiva-import-para-carregar-arquivos-CSS">2.3 6.      Evitar utilizar a diretiva @import para carregar arquivos CSS</a></li></ul></li><li><a href="#JavaScript">3 JavaScript</a><ul><li><a href="#7-Crie-loops-de-maneira-otimizada">3.1 7.      Crie loops de maneira otimizada</a></li><li><a href="#8-Minimize-quantas-vezes-o-browser-tera-de-redesenhar-elementos-na-pagina">3.2 8.      Minimize quantas vezes o browser terá de redesenhar elementos na página</a></li><li><a href="#9-Evitar-buscar-elementos-do-DOM-desnecessariamente">3.3 9.      Evitar buscar elementos do DOM desnecessariamente</a></li><li><a href="#10-Minificar-e-concatenar-os-arquivos-JavaScript">3.4 10.      Minificar e concatenar os arquivos JavaScript</a><ul><li><a href="#Pronto-Agora-voce-ja-sabe-como-melhorar-o-desempenho-da-sua-aplicacao-web">3.4.1 Pronto! Agora você já sabe como melhorar o desempenho da sua aplicação web!</a><ul><li><a href="#Por-Marco-Tulio-Ferreira-e-Jessica-Saliba">3.4.1.1 Por: Marco Túlio Ferreira e Jéssica Saliba</a></li></ul></li></ul></li></ul></li></ul></div>
<h2>HTML</h2>
&nbsp;
<ol>
<li>
<h3>Inserir código CSS/JavaScript, preferencialmente, via arquivos externos</h3>
</li>
</ol>
Basicamente, há três maneiras pelas quais se pode inserir CSS e JavaScript em uma página web:
<ul>
<li>inline code: utilizando o atributo style para inserir CSS e atributos de eventos, como onclick, para inserir JavaScript;</li>
</ul>
<pre></pre>
<pre style="”background-color: #ffaade;">&lt;div style=”background-color:#ffaade; width:200px;”&gt;&lt;div&gt;
 &lt;input type=”buttom”
 onclick=”document.querySelector(‘#menu’).style.visibility=’hidden’”&gt;Click Me&lt;/input&gt;”</pre>
<ul>
<li>embedded code: definindo css dentro da tag &lt;style&gt; e javascript dentro da tag &lt;script&gt;;
<pre>&lt;style&gt;
.content{
 background-color:#ffaade;
 width:200px;
}
&lt;/style&gt;
&lt;div class=”content”&gt;&lt;div&gt;</pre>
<pre>&lt;input id=”btnClickMe”&gt;Click Me&lt;/input&gt;”
&lt;script&gt;
...
document.querySelector(‘#btnClickMe’).addEventListener(‘click’, function(){
 document.querySelector(‘#menu’).style.visibility = ’hidden’;
});
...
&lt;/script&gt;</pre>
</li>
<li>external code: carregando o css através da tag &lt;link&gt; e o javascript utilizando o atributo src da tag &lt;script&gt;.&nbsp;
<pre>&lt;link rel=”stylesheet” href=”styles.css”&gt;</pre>
<pre>&lt;script src=”main.js”&gt;&lt;/script&gt;</pre>
</li>
</ul>
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.
&nbsp;
<h3>2.      Inserir os arquivos de estilos no topo da página e os de script ao final</h3>
<pre>&lt;html&gt;
   &lt;head&gt;
 ...
 &lt;link rel=”stylesheet” href=”styles.css”&gt;
 ...
   &lt;/head&gt;
 &lt;body&gt;
   ...
 &lt;script src=”main.js”&gt;&lt;/script&gt;
 &lt;/body&gt;
&lt;/html&gt;</pre>
&nbsp;
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.
<h3>3.      Evitar redimensionar imagens via marcação</h3>
Utilizar os atributos width e height  da tag &lt;img&gt; é 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.
<h2>CSS</h2>
&nbsp;
<h3>4.      Minificar os arquivos de estilo para diminuir o tráfego de dados na rede</h3>
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:
<pre>/*</pre>
<pre>*       Página Principal</pre>
<pre>*/</pre>
<pre>.content{</pre>
<pre>    background-color:#ffaade;</pre>
<pre>    width:200px;</pre>
<pre>}</pre>
Produção:
<pre>.content{background-color:#ffaade; width:200px;}

</pre>
&nbsp;
<h3>5.      Concatenar os arquivos CSS em um único arquivo</h3>
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.
&nbsp;
<h3>6.      Evitar utilizar a diretiva @import para carregar arquivos CSS</h3>
Existem duas maneiras de carregar arquivos de CSS externos em uma página, via tag &lt;link&gt; ou utilizando a diretiva de CSS @import. A vantagem de se utilizar &lt;link&gt; consiste em que, ao contrário do método da diretiva, os arquivos inseridos via tag &lt;link&gt; podem ser baixados em paralelo pelos browsers.
<h2>JavaScript</h2>
&nbsp;
<h3>7.      Crie loops de maneira otimizada</h3>
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.
<pre>var vetor = new Array(1000), tam, cont;</pre>
<pre>for (cont = 0; cont &lt; vetor.length; cont++) {</pre>
<pre>  // Maneira ruim de iterar, o tamanho do array será calculado 1000 vezes</pre>
<pre>}</pre>
<pre>for (cont = 0, tam = vetor.length; cont &lt; tam; cont++) {</pre>
<pre>  // Boa maneira de iterar, o tamanho do array será calculado apenas uma vez</pre>
<pre>}</pre>
Essa dica é particularmente interessante quando a lista a ser iterada corresponde a elementos do DOM.
<pre>var itens = document.querySelectorAll('li'), tam, cont;</pre>
<pre>for (cont = 0; cont &lt; itens.length; cont++) {</pre>
<pre>// RUIM – a cada iteração a lista de itens será recalculada para verificar se houve alterações no DOM</pre>
<pre>}</pre>
<pre>for (cont = 0, tam = itens.length; cont &lt; tam; cont++) {</pre>
<pre>  // BOM – o tamanho da lista é armazenado e não precisa ser recalculado a cada iteração</pre>
<pre>}</pre>
<pre></pre>
<pre>// PÉSSIMO: loop infinito</pre>
<pre>for (cont = 0; cont &lt; itens.length; cont++) {</pre>
<pre>  document.body.appendChild(document.createElement('li'));</pre>
<pre>  // 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</pre>
<pre>}</pre>
<h3>8.      Minimize quantas vezes o browser terá de redesenhar elementos na página</h3>
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:
<pre>var div = document.querySelector("#content"),</pre>
<pre>    lis = document. querySelectorAll('li'),</pre>
<pre>    tamDiv = div.offsetWidth, cont, tam;</pre>
<pre>for (cont = 0, tam = lis.length; cont &lt; tam; cont++) {</pre>
<pre>  lis[cont].style.width = tamDiv + 'px';</pre>
<pre>}</pre>
são melhores que essa:
<pre>var div = document.querySelector("#content"),</pre>
<pre>    lis = document. querySelectorAll ('li'), cont, tam;</pre>
<pre>for (cont = 0, tam = lis.length; cont &lt; tam; cont++) {</pre>
<pre>  lis[cont].style.width = div.offsetWidth + 'px';</pre>
<pre>}</pre>
pois a chamada à propriedade offsetWidth obrigará o browser a renderizar a página a cada iteração para recalcular a propriedade.
<h3>9.      Evitar buscar elementos do DOM desnecessariamente</h3>
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:
<pre>// Maneira Ruim!</pre>
<pre>for (var cont = 0; cont &lt; 100; cont++) {</pre>
<pre>  document.querySelector("main").innerHTML += "&lt;span&gt;" + cont + "&lt;/span&gt;";</pre>
<pre>}</pre>
<pre>// Maneira Boa</pre>
<pre>var listaSpan = "";</pre>
<pre>for (var cont = 0; cont &lt; 100; cont++) {</pre>
<pre>  listaSpan = listaSpan + "&lt;span&gt;" + cont + "&lt;/span&gt;";</pre>
<pre>}</pre>
<pre>document.querySelector("main").innerHTML = listaSpan;</pre>
&nbsp;
<h3>10.      Minificar e concatenar os arquivos JavaScript</h3>
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.
<h4>Pronto! Agora você já sabe como melhorar o desempenho da sua aplicação web!</h4>
Você pode saber mais sobre aplicações web <a style="color: #ff6600;" href="https://dtidigital.com.br/blog/compartilhando-sessao-entre-aplicacoes-net-web-em-dominios-diferentes/" target="_blank" rel="noopener">aqui</a>, e <a style="color: #ff6600;" href="https://dtidigital.com.br/blog/web-components-e-polymer-porque-ele-vai-facilitar-sua-vida/" target="_blank" rel="noopener">aqui</a>. Se tiver alguma dúvida, entre em <a style="color: #ff6600;" href="http://www.dtisistemas.com.br/#contato" target="_blank" rel="noopener">contato</a> com a gente.
<h5>Por: Marco Túlio Ferreira e Jéssica Saliba</h5>
&nbsp;
<pre></pre>

Chegou o momento de impulsionar os resultados da sua empresa! Para entrar em contato com a gente, clique no botão abaixo e preencha o formulário.

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

One-stop shop em tecnologia

Confira outros artigos