{"id":2975,"date":"2014-09-09T21:21:21","date_gmt":"2014-09-09T21:21:21","guid":{"rendered":"http:\/\/www.deuzebranaweb.com.br\/?p=2975"},"modified":"2014-09-09T21:21:21","modified_gmt":"2014-09-09T21:21:21","slug":"otimizando-performance-com-compactacao-gzipdeflate","status":"publish","type":"post","link":"https:\/\/blog.deuzebranaweb.com.br\/index.php\/2014\/09\/09\/otimizando-performance-com-compactacao-gzipdeflate\/","title":{"rendered":"Otimizando Performance com Compacta\u00e7\u00e3o Gzip\/Deflate"},"content":{"rendered":"
\n
\n
\n

Otimizando Performance com Compacta\u00e7\u00e3o Gzip\/Deflate<\/a><\/h1>\n<\/div>\n<\/header>\n
\n
Fala pessoal, beleza?<\/p>\n

Hoje estou aqui para falar de um assunto que pode n\u00e3o ser muito conhecido por alguns, que \u00e9 a compacta\u00e7\u00e3o gzip\/deflate<\/strong>.<\/p>\n

Essa t\u00e9cnica, nada mais \u00e9 do que a compacta\u00e7\u00e3o dos arquivos solicitados pelo navegador (browser) antes deles serem enviados pelo servidor.<\/p>\n

\"gzip-deflate-compression\"<\/a><\/p>\n

<\/span>Fluxo de Requisi\u00e7\u00e3o e Resposta HTTP<\/h2>\n

Primeiro vou come\u00e7ar explicando como funciona quando fazemos uma requisi\u00e7\u00e3o sem utilizar essa compacta\u00e7\u00e3o, veja a imagem abaixo.<\/p>\n

\"fluxo-de-requisi\u00e7\u00e3o-e-resposta-HTTP\"<\/a><\/p>\n

Vamos supor que temos um arquivo CSS em nosso site (http:\/\/site.com.br), atrav\u00e9s do HTML abaixo:<\/p>\n

\n
\n
<link<\/span> rel=<\/span>\"stylesheet\"<\/span> href=<\/span>\"estilo.css\"<\/span> type=<\/span>\"text\/css\"<\/span>\/><\/span>\n<\/pre>\n<\/div>\n<\/div>\n
    \n
  1. navegador solicita o arquivo estilo.css<\/code> ao servidor<\/li>\n
  2. servidor encontra o arquivo e l\u00ea<\/li>\n
  3. servidor retorna o arquivo com c\u00f3digo 200 (OK)<\/li>\n
  4. navegador exibe o resultado da p\u00e1gina aplicada com o estilo CSS<\/li>\n<\/ol>\n
    Otimizando<\/h2>\n
    Acima temos o fluxo de uma requisi\u00e7\u00e3o HTTP, funciona muito bem, mas podemos otimizar usando compacta\u00e7\u00e3o, veja.<\/p>\n
    \"fluxo-de-requisi\u00e7\u00e3o-e-resposta-HTTP-com-compactacao\"<\/a><\/p>\n
      \n
    1. navegador solicita o arquivo estilo.css<\/code> dizendo que aceita compacta\u00e7\u00e3o gzip<\/li>\n
    2. servidor encontra o arquivo e compacta (aqui est\u00e1 a \u201cm\u00e1gica\u201d)<\/li>\n
    3. servidor responde com o arquivo compactado<\/li>\n
    4. navegador descompacta, e exibe a p\u00e1gina com estilo aplicado<\/li>\n<\/ol>\n
      Bem simples n\u00e9? Agora inv\u00e9s de fazermos download de um arquivo de 70KB, baixamos apenas 5KB pois usamos a compress\u00e3o. \u00c9 uma economia incr\u00edvel..<\/p>\n
      Ativando compress\u00e3o no Apache<\/h2>\n
      Como j\u00e1 sabemos o que \u00e9 a compacta\u00e7\u00e3o e seu benef\u00edcio, vamos colocar em pr\u00e1tica ativando ela no servidor web Apache.<\/p>\n
      O Apache tem duas formas de compress\u00e3o, mod_deflate<\/code> e mod_gzip<\/code> (ambos s\u00e3o m\u00f3dulos), irei usar mod_deflate<\/code> por ser mais simples e mais utilizado, mas fica a seu crit\u00e9rio. Para isso precisamos ativar o m\u00f3dulo, caso voc\u00ea esteja no Ubuntu, execute o comando sudo a2enmod deflate<\/code> e pronto, se voc\u00ea usa Windows com WAMP, basta iniciar o gerenciador do WAMP -> Apache -> M\u00f3dulos -> mod_deflate<\/code>, pronto! N\u00e3o esque\u00e7a de reiniciar o Apache ap\u00f3s a ativa\u00e7\u00e3o..<\/p>\n
      Vou usar meu site (http:\/\/glaucocustodio.com<\/a>) como exemplo pr\u00e1tico para ativar a compacta\u00e7\u00e3o. Abaixo temos uma imagem que mostra uma requisi\u00e7\u00e3o ao arquivojquery.js<\/code> sendo feita sem compacta\u00e7\u00e3o gzip\/deflate, temos que fazer download de 91.7KB.\"analise-de-requisi\u00e7\u00e3o-sem-compacta\u00e7\u00e3o\"<\/a><\/p>\n
      Como j\u00e1 sei que no servidor de meu site o mod_deflate<\/code> j\u00e1 est\u00e1 ativo, adiciono o c\u00f3digo abaixo no arquivo .htaccess<\/code> na raiz do meu site para ativar a compacta\u00e7\u00e3o.<\/p>\n
      \n
      \n
      <IfModule<\/span> mod_deflate.c<\/span>><\/span>\n# Insert filter<\/span>\nAddOutputFilterByType<\/span> DEFLATE text\/plain\nAddOutputFilterByType<\/span> DEFLATE text\/xml\nAddOutputFilterByType<\/span> DEFLATE application\/xhtml+xml\nAddOutputFilterByType<\/span> DEFLATE text\/css\nAddOutputFilterByType<\/span> DEFLATE application\/xml\nAddOutputFilterByType<\/span> DEFLATE image\/svg+xml\nAddOutputFilterByType<\/span> DEFLATE application\/rss+xml\nAddOutputFilterByType<\/span> DEFLATE application\/atom_xml\nAddOutputFilterByType<\/span> DEFLATE application\/x-javascript\nAddOutputFilterByType<\/span> DEFLATE application\/javascript\nAddOutputFilterByType<\/span> DEFLATE application\/x-httpd-php\nAddOutputFilterByType<\/span> DEFLATE application\/x-httpd-fastphp\nAddOutputFilterByType<\/span> DEFLATE application\/x-httpd-eruby\nAddOutputFilterByType<\/span> DEFLATE text\/html\n\nSetOutputFilter<\/span> DEFLATE\n\n# Netscape 4.x has some problems...<\/span>\nBrowserMatch<\/span> ^Mozilla\/4 gzip-only-text\/html\n\n# Netscape 4.06-4.08 have some more problems<\/span>\nBrowserMatch<\/span> ^Mozilla\/4.0[678] no-gzip\n\n# MSIE masquerades as Netscape, but it is fine<\/span>\n# BrowserMatch \bMSIE !no-gzip !gzip-only-text\/html<\/span>\n\n# NOTE: Due to a bug in mod_setenvif up to Apache 2.0.48<\/span>\n# the above regex won't work. You can use the following<\/span>\n# workaround to get the desired effect:<\/span>\nBrowserMatch<\/span> \bMSI[E] !no-gzip !gzip-only-text\/html\n\n# Don't compress images<\/span>\nSetEnvIfNoCase<\/span> Request_URI \n.(?:gif|jpe?g|png)$<\/span> no-<\/span>gzip<\/span> dont-vary\n<\/IfModule><\/span>\n<\/pre>\n<\/div>\n<\/div>\n
      Esse c\u00f3digo verifica se o m\u00f3dulo deflate est\u00e1 ativo (IfModule<\/code>), define compacta\u00e7\u00e3o deflate por tipos atrav\u00e9s das linhas AddOutputFilterByType..<\/code>, garante que navegadores antigos (como Netscape 1.0) n\u00e3o ter\u00e3o compacta\u00e7\u00e3o (pois n\u00e3o suportam a descompress\u00e3o) e evita que imagens sejam comprimidas pois a maioria delas j\u00e1 s\u00e3o e n\u00e3o tem necessidade (assim como v\u00eddeos e arquivos de \u00e1udios).<\/p>\n
      Ap\u00f3s subir o arquivo no servidor e analisar as requisi\u00e7\u00f5es, veja o que temos.<\/p>\n
       <\/p>\n
      \"analise-de-requisi\u00e7\u00e3o-com-compacta\u00e7\u00e3o\"<\/a><\/p>\n
      N\u00e3o esque\u00e7a de limpar o cache do navegador para ver o resultado.<\/div>\n
      Observe a linha Content-Encoding<\/code> e veja que a compacta\u00e7\u00e3o deflate\/gzip<\/code> est\u00e1 ativa agora e o mais impressionante \u00e9 o tamanho do arquivo baixado, apenas 32.4KB, ou seja, reduzimos 2\/3 do peso do arquivo apenas com essa t\u00e9cnica..<\/p>\n
      Espero que tenha ajudado e sido claro nesse tutorial.. O que voc\u00eas acharam?<\/p>\n
      At\u00e9 mais!<\/p>\n
      <\/div>\n
      \"Facebook\"<\/a> \"Twitter\"<\/a> \"Google\"<\/a> \"Reddit\"<\/a> \"Email\"<\/a><\/div>\n
      \n
        \n
      • \n
        \n
         <\/p>\n<\/div>\n<\/li>\n
      • \n
        <\/div>\n<\/li>\n<\/ul>\n
        \n
        \n
        http:\/\/blog.glaucocustodio.com\/2012\/09\/22\/otimizando-performance-com-compactacao-gzip-deflate\/<\/h3>\n<\/div>\n<\/div>\n<\/div>\n<\/article>\n<\/section>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
        Otimizando Performance com Compacta\u00e7\u00e3o Gzip\/Deflate Fala pessoal, beleza? Hoje estou aqui para falar de um assunto que pode n\u00e3o ser muito conhecido por alguns, que \u00e9 a compacta\u00e7\u00e3o gzip\/deflate. Essa t\u00e9cnica, nada mais \u00e9 do que a compacta\u00e7\u00e3o dos arquivos solicitados pelo navegador (browser) antes…<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_angie_page":false,"page_builder":"","footnotes":""},"categories":[5,6,7],"tags":[],"class_list":["post-2975","post","type-post","status-publish","format-standard","hentry","category-apache2","category-php","category-wordpress"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/blog.deuzebranaweb.com.br\/index.php\/wp-json\/wp\/v2\/posts\/2975","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.deuzebranaweb.com.br\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.deuzebranaweb.com.br\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.deuzebranaweb.com.br\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.deuzebranaweb.com.br\/index.php\/wp-json\/wp\/v2\/comments?post=2975"}],"version-history":[{"count":0,"href":"https:\/\/blog.deuzebranaweb.com.br\/index.php\/wp-json\/wp\/v2\/posts\/2975\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.deuzebranaweb.com.br\/index.php\/wp-json\/wp\/v2\/media?parent=2975"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.deuzebranaweb.com.br\/index.php\/wp-json\/wp\/v2\/categories?post=2975"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.deuzebranaweb.com.br\/index.php\/wp-json\/wp\/v2\/tags?post=2975"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}