Otimizando seu site com ASP.NET MVC – Parte 1: Javascript e CSS

Boa noite pessoal,
Este é o post inicial de uma série mostrando técnicas para otimização de sites utilizando ASP.NET MVC.

Montaremos uma aplicação onde realizaremos nossos testes. Vou postar prints do resultado de nossas ações e explicar um pouco mais afundo de cada coisa. Seguindo do mais basico até algumas coisas mais especificas.

CONTEÚDO

Neste post irei tratar a otimização do download de arquivos Javascript (.js) e também de arquivos CSS (.css), onde que o browser efetua 1 requisição para cada um dos seus arquivos. No final deste post voce estará apto a usufruir de técnicas para fazer com que este tempo diminua.

MATERIAIS

O que será utilizado é o Visual Studio 2012, e um projeto MVC 4.

LET’S START!

PROBLEM

Quando fazemos aplicações WEB sempre necessitamos de arquivos CSS e também de bibliotecas Javascript. Quando precisamos disso fazemos uma referencia a eles, usando principalmente uma tag <script> pra cada arquivo que precisamos.

Ao fazer isso fazemos com que o navegador do usuário efetue uma requisição pra cada um destes arquivos, solicitando e efetuando o download. Porém, o navegador pode demorar para efetuar o download por causa de que o limite de downloads simultâneos foi atingido, com isso o navegador espera a liberação de espaço para iniciar um novo download, este tempo de espera é chamado de Latência. Ressaltando que a pagina não é carregada enquanto todos os arquivos forem baixados.

SOLUÇÃO

Usaremos duas técnicas para diminuir o tempo de Latência dos arquivos da aplicação:  BundlingMinification. 

Bundling: É usado para tranformar um conjunto de arquivos em 1 só arquivo, assim minimizando as requisições para somente uma. Exemplo: tenho 3 bibliotecas javascript, ao invés do browser efetuar o download das 3, ele fará o download de 1 arquivo contendo a concatenação das 3 bibliotecas.

Minification: É usado para diminuir o tamanho dos arquivos. Isso é feito modificando o código do arquivo, diminuindo nomes de variáveis, assim o numero de caracteres no script diminui, logo, seu tamanho também diminui. Exemplo: o meu arquivo contem uma função chamada “function mostraValoresPopup(valoresParaSeremMostrados){ … }” depois que o Minification rodar neste arquivo, poderá ficar da seguinte maneira “{function mostraValoresPopup(n){ … }”. Isto sem mudar fisicamente o seu arquivo.

CONFIGURAÇÃO ANTES DE BOTAR A MÃO NA MASSA

Primeiramente vamos criar nossa aplicação MVC 4. É uma aplicação com o template básico, com o nome de Otimizacao_MVC:

print2

Feito isso crie um controller Home e uma view Index:

print1

MÃO NA MASSA

Bundling no ASP.NET MVC é feito no arquivo BundleConfig.cs:

print4

Nele podemos adicionar um conjunto de arquivos para serem adicionados no arquivo html de uma só vez. Por exemplo, o trecho a seguir: (os codigos a seguir já estão por padrão no BundleConfig)

print5

Isto significa que, TODOS os estilos jquery.ui* inseridos dentro do StyleBundle se tornaram somente 1 arquivo que o nome terá como base “/Content/themes/base/css”. Isso e também mais uma chave que o ASP.NET gera.

Como voce pode ver, o bundle inserido anteriormente é um StyleBundle, este só aceita arquivos CSS. Para adicionar arquivos javascript é usado a classe ScriptBundle:

print6

Então voce pode se perguntar: “E como ele é importado dentro do HTML?”. É bem simples, para fazer isto é só fazer uma referencia ao bundle adicionado na classe BundleConfig.cs. Por exemplo, para que a gente insira todos os arquivos CSS do jquery (“/Content/themes/base/css”) na nossa aplicação precisamos colocas a seguinte linha na nossa View _Layout.cshtml: @Scripts.Render(“~/Content/themes/base/css”)

print3

É importante que a referencia dos seus scripts sejam feitas na _Layout.cshtml, por que este arquivo é a mascara de todas as outras Views.

Depois de adicionar esse trecho na nossa pagina vamos executar a aplicação. Abrindo o codigo fonte do html gerado podemos verificar as referencias geradas:

print7

Se abrirmos o Site.css por exemplo veremos que o CSS veio normalmente:

print7

Aqui estão os arquivos CSS gerados pelo trecho @Scripts.Render(“~/Content/themes/base/css”) e também pelo trecho que insere o Site.css,  @Styles.Render(“~/Content/css”).

Porém voce deve estar se perguntando, e o Bundling que concatena todos em um e o Minification que diminui códigos, onde estão?

Pois é, eles aqui acontecem em conjunto. Voce precisa explicitar ou no seu Web.config ou na sua BundleConfig.cs que voce deseja efetuar este procedimento.

Por que não é feito por padrão? Por que isso dificultaria no momento que voce for debugar. Isso é importante somente quando estiver no ambiente de produção e pronto para uso do usuario.

CONFIGURANDO SOLUÇÕES

Existe duas maneiras para configurar o Bundling e o Minification. 

A no BundleConfig.cs voce adiciona a seguinte linha de codigo logo no inicio do Método RegisterBundles: BundleTable.EnableOptimizations = true;

A no Web.config voce altera a seguinte linha de codigo:

<compilation debug=”true” targetFramework=”4.5″ />

Para:

<compilation debug=”false” targetFramework=”4.5″ />

Fazendo de uma forma ou de outra estes padrões serão ativados. E aquele código mostrado anteriormente ficará:

print7

Assim, nosso html agora tem somente 4 referencias de arquivos. Assim o tempo de latencia diminui por que todos os arquivos serão baixados de uma só vez.  E se abrirmos novamente o SIte.css é possível notar a diferença com o anterior:

print7

Ele tranformou todo nosso CSS em uma unica linha.

COMPARAÇÃO DE PERFORMANCE

Vamos comparar o tempo de cada um. Utilizando e não utilizando estas técnicas:

Sem utilizar
Sem utilizar

Podemos ver que foi disparado 16 requisições ao servidor, foi transferido 6.1kb, e todas demoraram 109 milisegundos para completarem o download.

Utilizando
Utilizando

Já no momento que utilizamos estas técnicas vemos que o numero de requisições caiu para 5, foi transferido 2.3kb (menos da metade do anterior), e todas as requisições demoraram 73 milisegundos para completarem o download.

CONCLUSAO

A minha conclusão é que chega ser obrigatório o uso destas técnicas hoje em dia, ainda mais que um dos critérios mais rigidos que fazem com que o usuario use um determinado produto é sua performance. Então lembre-se sempre de agrupar os seus scripts e também os arquivos CSS , lembrando também de configurar o ambiente de produção corretamente.

É isso ai pessoal, eu quis compartilhar esse assunto com voces por que achei muito interessante. Quaisquer dúvidas ou algum erro podem se sentir avontade em comentar que ficarei muito feliz em responder! Então, até a proxima.

🙂

Anúncios

5 comentários sobre “Otimizando seu site com ASP.NET MVC – Parte 1: Javascript e CSS

  1. rodrigo 19/08/2014 / 20:43

    Opa muito bom me ajudo bastante valeu, mas só uma pergunta que sempre fico na duvida, não é perigoso de dar conflito entre outras bibliotecas javascript quando utilizamos desta forma, ou quando “Minification”,?

    • Kelvin Rodrigues 19/08/2014 / 22:36

      Opa Rodrigo. Bom saber que ajudou 😀
      Mas aqui, em que sentido “dar conflito”? quando é adicionado o bundle ou no proprio minification?

  2. Daniel Moura 11/08/2014 / 14:11

    Ótima explicação, valeu por esse post, foi muito útil para mim.

  3. Jonas 20/04/2014 / 11:28

    Ótimo post, Kelvin. É sempre bom esclarecer e aprender novas técnicas. Obrigado!

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s