As aplicações web estão cada vez mais robustas – muitas delas recebem milhões de usuários por dia -, mas será que elas realmente aguentam essa quantidade de requisições mantendo a qualidade de seus serviços?

Nosso objetivo hoje é aprender a otimizar nossas aplicações front-end para que o usuário tenha a melhor experiência possível.

Configurando nosso servidor

Para configurar nossos servidores, utilizaremos exemplos no apache, mas tudo que será explicado é valido para outros servidores, como IIS e Nginx.

Gzip

O Gzip é um software para compressão e descompressão de arquivos. Ele é altamente utilizado em websites para aumentar a performance. Sites que utilizam o o Gzip podem ser até 80% mais rápidos.

Como configuramos nossos servidores para utilizar o Gzip? Muito simples, basta informarmos ao .htaccess que queremos utilizá-lo. Exemplo:

  <IfModule mod_filter.c>

    AddOutputFilterByType DEFLATE application/atom+xml \

                                  application/javascript \

                                  application/json \

                                  application/rss+xml \

                                  application/vnd.ms-fontobject \

                                  application/x-font-ttf \

                                  application/xhtml+xml \

                                  application/xml \

                                  font/opentype \

                                  image/svg+xml \

                                  image/x-icon \

                                  text/css \

                                  text/html \

                                  text/plain \

                                  text/x-component \

                                  text/xml

  </IfModule>

Configurando o cache

Muitas vezes pensamos que o browser do cliente irá fazer o cache automático de nossa aplicação, mas precisamos informá-lo de como fazer o cache da maneira correta. Para isso utilizamos os recursos do response headers.

ETags

• A Etag é um mecanismo para identificação de um componente em cache. Em outras palavras, um componente é identificado por uma string única e o browser pode verificar se ela foi modificada ou não;
• O problema das Etags é que elas são geradas para um único servidor sendo inviável validá-la em outro servidor;
• A melhor solução então é cancelar o uso da Etag, dessa forma o browser não irá verificar o componente. Isso trás uma performance significativa para o website.

# FileETag None is not enough for every server.

<IfModule mod_headers.c>
    Header unset ETag
</IfModule>

# Since we're sending far-future expires, we don't need ETags for static content.

FileETag None

<IfModule mod_expires.c>
 ExpiresActive on

# Favicon (cannot be renamed)
 ExpiresByType image/x-icon "access plus 1 week"

# Media: images, video, audio
 ExpiresByType image/gif "access plus 1 month"
 ExpiresByType image/png "access plus 1 month"
 ExpiresByType image/jpeg "access plus 1 month"
 ExpiresByType video/ogg "access plus 1 month"
 ExpiresByType audio/ogg "access plus 1 month"
 ExpiresByType video/mp4 "access plus 1 month"
 ExpiresByType video/webm "access plus 1 month"

# CSS and JavaScript
 ExpiresByType text/css "access plus 1 year"
 ExpiresByType application/javascript "access plus 1 year"

</IfModule>

{background-color: expression((new Date().getHours()%2 ? “#00000” : “#FFFFF”))}

require(["jquery", "jquery.alpha", "jquery.beta"], function($) {

    //the jquery.alpha.js and jquery.beta.js plugins have been loaded.

    $(function() {

        $('body').alpha().beta();

    });

});