Comprimindo arquivos JavaScript e CSS com GZIP

Até agora conhecemos as vantagens de comprimir os arquivos e um primeiro método para comprimir o código de páginas PHP enviadas ao navegador. A ideia da compressão deve ser extendida também a outros tipos de arquivos, e não somente ao código HTML das páginas web, mas aos demais arquivos que são responsáveis por estilizar as páginas e outras funções.

O código da página, como sabemos, é composto por vários elementos, como o próprio HTML do documento, imagens, folhas de estilo, arquivos JavaScript, etc. As imagens na realidade já estão comprimidas, pois os formatos utilizados nas páginas web, como GIF, JPG ou PNG já têm a compressão do próprio fomrato gráfico. Arquivos como as folhas de estilo (css) ou os códigos JavaScript (js) são criados como arquivo de texto plano, que não possui nenhuma compressão. Por esse motivo são ideais para serem enviados comprimidos ao navegador.

Para que fique bem claro, pensemos no código CSS de um site qualquer. O arquivo .css por exemplo tem um tamanho de 40Kb sem compressão, enviando esse arquivo comprimido por GZIP ao navegador, ele passará a ter cerca de 7.5Kb. O certo é que o CSS se transfere uma vez, na primeira visita do usuário, logo as páginas seguintes usam o arquivo que está armazenado no cache ao invés de requisitá-lo novamente ao servidor web. Então, com o arquivo em um tamanho menor, o carregamento da página vai ser muito mais rápido.

Os arquivos JavaScript também podem ser comprimidos para obter vantagens semelhantes, igual às do CSS, conseguindo com a compressão um tamanho entre 60 a 90% menor que os arquivos não comprimidos. Pensando que os sites mais modernos utilizam uma quantidade maior de códigos JavaScript, a compressão GZIP será fundamental para uma carga rápida do site.

Configurar um htaccess para comprimir arquivos CSS/JS ou similares

Agora que já sabemos as vantagens de enviar os arquivos de código comprimidos ao navegador, vejamos como fazer a configuração do Apache para poder executar o processo de compressão. A maneira mais cômoda e ao alcance de mais pessoas, para comprimir os arquivos JS e CSS é definir um arquivo htaccess com as diretrizes de configurção do servidor.

No arquivo htaccess, que contém o texto de configuração do Apache, vamos colocar várias linhas de código para solicitar ao Apache que envie os arquivos comprimidos, conforme as extensões especificadas.

Por exemplo, com o seguinte código estamos informando que os arquivos que tenham a extensão css devem ser enviados comprimidos ao navegador.

<Files *.css>
SetOutputFilter DEFLATE
</Files>

Observe o *.css para indicar os tipos de arquivos a enviar comprimidos. Observe também que está sendo solicitado o uso do método DEFLATE para a compressão dos arquivos.

De uma maneira similar podemos definir a compressão dos arquivos JavaScript.

<Files *.js>
SetOutputFilter DEFLATE
</Files>

Dessse modo, podemos definir qualquer extensão de arquivo e o Apache se encarregará de enviá-lo comprimido ao navegador.

Vejam que o arquivo está comprimido sem que tenha sido necessário fazer rotinas de programação específicas durante o desenvolvimento a não ser configurar o arquivo htaccess.

Até a próxima!!

Bookmark e Compartilhe

Comprimindo páginas PHP com GZIP

Otimizar o carregamento de uma página PHP por meio da compressão GZIP e enviar a página ao cliente.

A compressão por GZIP ou Deflate é uma boa técnica para reduzir o peso, em Kb, das páginas web. Não é nada complicado se sabemos como configurar e as vantagens swão muito representativas. Nos artigos anteriores expliquei em que consiste e quais são as vantagens de utilizar esses métodos de compressão.

Depende de nós, ou da configuração do servidor web, que sejam enviados ou não os arquivos comprimidos aos clientes que solicitaram a página. Assim o primeiro passo para qualquer pessoa interessada em otimizar seu site seria verificar se as páginas do site estão sendo enviadas de forma comprimida ou não.

Neste artigo veremos uma das primeiras configurações qeu podemos fazer, de forma muito fácil e em alguns minutos, sobre o nosso site, para que as páginas PHP dele sejam enviadas comprimidas. Trata-se da edição do arquivo .htaccess para configurar o Apache e fazer com que os arquivos PHP sejam comprimidos com GZIP antes de serem enviados ao cliente.

Código htaccess para comprimir as páginas PHP

Agora vejamos um simples código-fonte que podemos utilizar para configurar o Apache, de modo que os arquivos PHP sejam enviados comprimidos. Quero dizer com isso que o código HTML da página, que é gerado após o processamento dos scripts PHP, será comprimido antes de ser enviado ao cliente.

Isso é colocado em um arquivo htaccess no servidor, ou seja, um arquivo chamado .htaccess, onde colocamos o código necessário para a configuração do Apache.

Os arquivos htaccess possuem sempre o nome “.htaccess”. No Linux os arquivos cujo nome começa com ponto “.” quer dizer que são ocultos. Assim pois o a htaccess é um arquivo oculto dentro do Linux, mas visível no Windows. Nos .htaccess colocamos qualquer configuração para o servidor Apache, não somente as configurações para comprimir arquivos, também para fazer redirecionamentos, bloquear acesso a arquivos, etc.

Como os .htaccess servem para configurar um diretório e todos os subdiretórios onde colocamos o arquivo, o código seguinte será colocado dentro de um arquivo .htaccess que deverá ser colocado na raiz do servidor, de forma que as configurações se expandam pelos demais diretórios e subdiretórios onde ele está.

php_flag zlib.output_compression On
php_value zlib.output_compression_level 2

A primeira linha indica a ativação da compressão GZIP para os arquivos PHP. As egunda linha indica o nível de compressão do arquivo (quanto maior for o nível, de 1 a 10) maior será a compressão, mas também irá requerer mais tempo de processamento ao comprimir os arquivos antes de enviá-los. Com uma compressão nível 2 se comprime bastante e requer menos tempo de processamento que uma compressão de nível superior.

No próximo artigo vamos ver como comprimir arquivos CSS e JavaScript.

Fiquem ligados!!!

Bookmark e Compartilhe

Crie páginas web elegantes e flexíveis com as centenas de receitas CSS do “CSS Cookbook”

CSS Cookbook

CSS Cookbook

Christopher Schmitt arma seus leitores com o conhecimento crítico necessário para que se tornem designers de sucesso em CSS.

Em CSS Cookbook, cada receita explica como customizar uma solução que satisfaça as suas necessidades, e cada capítulo apresenta um modelo de design que exibe os tópicos discutidos. Você aprenderá sobre o comportamento dos navegadores mais recentes e como conciliar as diferenças no modo em que esses navegadores exibem suas páginas web.

“Se eu tivesse lido este livro quando estava começando, tudo seria diferente. Em lugar de tropeçar na solução para estilização de todos os elementos de uma página, poderia apenas ter folheado o CSS Cookbook, encontrado a receita e começado a cozinhar. O trabalho de suposição teria sido eliminado, e eu poderia ter gasto todo o tempo fazendo o que adoro fazer: criando.”
Dan Cederholm
Fundador, SimpleBits

Informações sobre o Livro

Autor: Christopher Schmitt

ISBN: 978-85-7522-230-0

Páginas: 688

Ano: 2010

Preço: R$ 123,00

Editora: Novatec

Bookmark e Compartilhe

  • Copyright © 1996-2010 Jonathan Lamim } jlamim. All rights reserved.
    iDream theme by Templates Next | Powered by WordPress