O tempo inteiro chovem dicas de performance pela internet. É bem difícil filtrar tudo que aparece e saber o que realmente importa, o que realmente dá resultado, e mais ainda, o que é fácil de se fazer. Não adianta uma solução mirabolante, em que para ganhar 1 milisegundo tenhamos que envolver toda a equipe de um projeto e consumir um sprint inteiro.

Assistindo uma palestra do Chris Coyier, fiquei impressionado em como ele organizou as dicas. Achei genial a forma como ele resumiu como uma dica de performance deve ser. E a dica de hoje segue esses pontos:

• Eleve a performance de bom à excelente.
• Uma única pessoa pode resolver.
• Não necessite de processos complexos.
• Não precise de manutenção constante.

O objetivo desse post, é explicar como usar o gzip para que os arquivos do seu website sejam comprimidos e fornecidos ao browser quando receber uma requisição. Uma dica simples, mas de altíssimo impacto. Comprimir os arquivos reduz o tempo de transferência de arquivos em 70% em media.

O primeiro passo para ativar a compressão de HTTP é conferir se o seu projeto já está comprimido. Você pode testar a sua url nesse site: http://gzipwtf.com/

Se já tiver comprimido seu trabalho já está feito. Se foi alguem da sua equipe, descubra e dê os parabéns, se não foi, a compressão pode ter sido feita pelo serviço de hospedagem que você está usando, por exemplo. Sei que o Heroku, o serviço que usamos para hospedar os 40+ projetos internos e de clientes aqui na HE:labs já faz isso automáticamente, por exemplo.

Se você constatou que no seu projeto os arquivos não estão comprimidos, a única coisa que precisa fazer é colar esse código no

1 .htaccess

se você usar o Apache.

 1 # ----------------------------------------------------------------------
 2 # Gzip compression
 3 # ----------------------------------------------------------------------
 4 
 5 <IfModule mod_deflate.c>
 6 
 7   # Force deflate for mangled headers developer.yahoo.com/blogs/ydn/posts/2010/12/pushing-beyond-gzipping/
 8   <IfModule mod_setenvif.c>
 9     <IfModule mod_headers.c>
10       SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding
11       RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding
12     </IfModule>
13   </IfModule>
14 
15   # Compress all output labeled with one of the following MIME-types
16   # (for Apache versions below 2.3.7, you don't need to enable `mod_filter`
17   # and can remove the `<IfModule mod_filter.c>` and `</IfModule>` lines as
18   # `AddOutputFilterByType` is still in the core directives)
19   <IfModule mod_filter.c>
20     AddOutputFilterByType DEFLATE application/atom+xml \
21                                   application/javascript \
22                                   application/json \
23                                   application/rss+xml \
24                                   application/vnd.ms-fontobject \
25                                   application/x-font-ttf \
26                                   application/xhtml+xml \
27                                   application/xml \
28                                   font/opentype \
29                                   image/svg+xml \
30                                   image/x-icon \
31                                   text/css \
32                                   text/html \
33                                   text/plain \
34                                   text/x-component \
35                                   text/xml
36   </IfModule>
37 
38 </IfModule>

Simples assim!

Com esse código, a compressão já está habilitada e os arquivos do seu site estarão carregando ridiculamente mais rápido.

Esse conteúdo foi retirado do

1 .htaccess

do HTML5 Boilerplate, que além de ser um excelente boilerplate para iniciar o seu projeto, é um repositório enorme de excelentes dicas e boas práticas.

Espero que essa dica seja útil para você! Em breve postarei outras dicas simples e efetivas.

Aquele abraço, Pedro Marins

Comentários