Performance front-end

Quando construímos um site muito se pensa em como estrutura-lo, quais cores utilizar, navegabilidade, informação e acabamos esquecendo do fator primordial, a performance. Há tempos atrás, estávamos envolvidos com um grande projeto, a Hizby e conversamos sobre como melhor o tempo de resposta entre o browser e o servidor, foi quando nos interessamos em entender ainda mais como a alta performance front-end funcionava. Existem várias estratégias para os RTTs (Road-trip Time), passos pequenos nos quais farão uma grande diferença. Listaremos aqui, 14 passos para suas páginas carregarem mais rápido.

Requisições HTTP

Este é o primeiro passa para nos preocuparmos, requisições HTTP tomam de 80% a 90% do tempo gasto entre imagens, scripts e folhas de estilo referidos no documento HTML. Sendo assim, o fundamento é diminuirmos o número de componentes e, por consequencia, o de requisições.

Usar estampas CSS, imagens embutidas e scripts e folhas de estilos combinados, reduz o tempo de resposta em até 50%.

Arquivos combinados

É uma forma de reduzir o número de solicitações HTTP, combinando todos os scripts em um único script, e também, combinar todos os CSS em um estilo único. Combinando arquivos é mais desafiador quando os scripts e folhas de estilo variam de página para página. Torne isso algo obrigatório.

CSS sprites

É o método preferido para reduzir o número de pedidos de imagem. Combine suas imagens de fundo em uma única imagem e use o CSS background-image e background-position, propriedades para exibir o segmento de imagem desejada.

Mapas de imagem

Combinam várias imagens em uma única. A dimensão global é aproximadamente a mesma, mas reduz o número de solicitações HTTP da página. Mapas de imagem só funcionam se as imagens estão contidas na página. O tempo de resposta é menor porque existe menos trabalho relativo a requisições HTTP envolvido. Se atualmente você está usando múltiplas imagens numa barra de navegação ou outro tipo de agrupamento de hiperlinks semelhante, mudar para um mapa de imagem é uma forma fácil de acelerar sua página.

Scripts e folhas de estilo combinados

Javascript e CSS são usados em todos os sites hoje em dia. Engenheiros front-end devem escolher se “embutem” seu javascript e CSS ou os incluem usando arquivos externos (do qual é o certo a ser feito). Para desenvolvedores que tenham sido treinados para escrever código modularizado, a idéia de combinar tudo em um único arquivo parece ser um passo para trás, e de fato será ruim para seu ambiente de desenvolvimento combinar todo o Javascript dessa forma. Uma página pode precisar do script1, script2 e script3, enquanto outra pode precisar de script1, script2, script3, script4 e script5. A solução é seguir o modelo das linguagens compiladas e mante-los  modular e ao mesmo tempo criar um mecanismo para gerar arquivos que agrupem módulos especificados.

E por favor, otimize a ordem dos seus arquivos Javascript e CSS, isso ajuda bastante  no carregamento da página. Códigos Javascripts geralmente modificam e alteram o conteúdo da página, logo os browsers demoram mais para rederizá-los, pois é necessário que todas as funções daquele scripts sejam executadas e somente depois ele começa o download de outro arquivo.