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.
Sumário
HTML
-
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
Desenvolvimento de Software
Confira outros artigos
WhatsApp Business na sua estratégia: muito além de um chatbot
Podemos dizer adeus a conversas monótonas com chatbots limitados e sem personalidade. Daqui em diante, veremos interfaces conversacionais oferecendo experiências digitais cada vez mais sofisticadas. Em outro artigo, abordamos como mais experiências estão sendo convertidas, progressivamente, em conversas e como essa tendência é potencializada pelos avanços nos modelos de Inteligência Artificial e nos canais de […]
Desenvolvimento de Software
A Inteligência Artificial (IA) e otimização operacional nas empresas
Sumário1 Como a Inteligência Artificial (IA) pode otimizar operações empresariais e aumentar a eficiência? Descubra aqui! 2 Automatização de tarefas repetitivas e demoradas 2.1 Exemplos de IA para economia de tempo2.2 10 exemplos de como utilizar a Inteligência Artificial (IA) para automatizar tarefas repetitivas e/ou demoradas: 3 Melhoria da eficiência e redução de custos com Inteligência Artificial (IA)3.1 […]
Desenvolvimento de Software
Desenvolvimento Android x iOS: 10 recomendações para o desenvolvimento produtivo
Entre agosto de 2022 e junho de 2023, o mercado de aplicativos móveis experimentou um crescimento notável, projetando um aumento anual de 13,4% até 2030, alcançando um mercado estimado em US$ 187,58 bilhões. E, certamente, a tendência é que essa expansão continue exponencialmente nos próximos anos. Portanto, agora é a hora de explorar as oportunidades […]
Desenvolvimento de Software