in Desenvolvimento

Configurando Header de Expiração em Sites no Azure

Existem diversas técnicas para otimizar a performance de um site, em um livro chamado High Performance Web Sites, Steve Souders mostra que do tempo total de carregamento de uma página, cerca de 10% a 20% são gastos no processamento “server side” do html e os outros 80% a 90% do tempo de carregamento são gastos após o carregamento do html, em atividades como carregamento de css, js, imagens, renderização e execução dos scripts e outras atividades da renderização da página. Com isso, neste livro são abordadas 14 regras para melhorar a performance do front-end.

A 3ª regra deste livro consiste em adicionar um cabeçalho de expiração do recurso que será utilizado pela nossa página, utilizando dois tipos de headers (“Expires” e “Cache-Control”) podemos fazer com que um recurso(css, js, html, img) não tenha que ser baixado novamente do servidor para o navegador do cliente, melhorando assim a performance e diminuindo requisições ao servidor.

Configurando no IIS

Podemos configurar de diversas maneiras a adição dos cabeçalhos de expiração, no IIS, podemos fazer isto pelo console de gerenciamento.

Neste exemplo, vou configurar para qualquer requisição para algum arquivo dentro do diretório Scripts seja enviada com uma expiração de 30 dias.

Primeiro vou abrir o IIS e selecionar o diretório:

image

Para configurar os headers, vou selecionar a opção Cabeçalhos de Resposta HTTP:

image

Na pagina de configuração desta opção, vou selecionar no canto direito, no menu de ações, a opção Definir Cabeçalhos Comuns:

image

Após abrir o dialogo da opção selecionada, vou marcar a opção Expirar conteúdo da Web, e configurar a quantidade de dias que o meu conteúdo expira:

image

Com esse processo, podemos examinar a requisição de um arquivo deste diretório, e ver os headers de expiração:

image

 

Com esta simples configuração, podemos melhorar em muito a performance de nossas aplicações, e diminuir os custos de nossa infraestrutura.

Configurando em Sites no Azure

Recentemente, configurei uma aplicação em um site no Windows Azure, no caso, não existe um console de gerenciamento do IIS no Azure.

Quando fizemos a configuração acima no IIS, ele modifica, ou cria um arquivo web.config dentro do diretório no qual alteramos a configuração dos headers.

No caso do exemplo acima, o arquivo de configuração ficou da seguinte maneira:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <staticContent>
            <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="30.00:00:00" />
        </staticContent>
    </system.webServer>
</configuration>

Para configurar os headers de expiração em um site no Azure basta adicionar um web.config no diretório do projeto que queremos adicionar os headers, e nele utilizar as configuração do clientCache:

image

Após o deploy, podemos analisar a requisição para um conteúdo que está dentro do diretório em que foi adicionado o web.config, notem que já é possível ver o header configurado:

image

 

Bom espero que este post seja útil, estou a disposição para dúvidas, criticas e sugestões.

 

Abs

Rodolfo