[TUTORIAL] Gzip e Cache via .htaccess
Enviado: 26 Abr 2011, 11:20
Olá Pessoal,
Alguns já devem ter visto que Painel de Administração do Open Cart, na guia Servidor, tem um campo que pede um número de 0 a 9 para compressão do Gzip
Gzip? O que é?
Para quem não sabe, o Gzip é resumidamente um processo executado pelo servidor Web que comprime as páginas e as envia para o navegador, fazendo assim parecer que o seu site é rápido de abrir
É importante ressaltar o Gzip não é um passe de mágica, existem outros detalhes que precisam ser executados para que o Gzip possa ser 100% eficiente, do contrário ele será um recurso ativado porém sub-utilizado, por exemplo, é preciso compactar as imagens principais utilizando o http://www.smushit.com antes de enviar para o site, é preciso criar um subdomínio só para alocar as imagens, é preciso colocar a chamada dos CSS antes da chamada dos Scriptis do Java, é preciso dar o comando para fazer cache da sua página (isso inclui os scripts e as fotos) e dar uma data de expiração, do contrário toda hora que o visitante for acessar uma página será feito a chamada de todos aqueles arquivos que muitas vezes só precisam ser chamados uma única vez pois serão iguais em todas as partes do site, por exemplo, o cabeçalho, o rodapé e os scripts do Java, mas tudo isso também é assunto para outro tópico, se algúem tiver interesse nessas técnicas acima faz o pedido aqui que a gente explica
Vamos ao que interessa:
1 - Procure na pasta raiz da sua loja um arquivo chamado .htaccess ou htaccess.txt (se você não tem o .htaccess é preciso renomear o htaccess.txt para .htaccess, essa renomeção só funciona se você fizer via FTP diretamente dentro do seu servidor, não adianta baixar o arquivo e tentar renomear no Windows porque ele nao deixa, acho que Linux e OSx aceitam)
2 - Com o arquivo renomeado para .htaccess agora você pode baixar para o seu computador ou executar diretamente no seu servidor a edição dele, pode abrir diretamente como Bloco de Notas
3 - Faça backup do seu arquivo .htaccess por segurança
3 - Se encontrar algum código dentro do arquivo, não altere nada, vá para o fim do arquivo, dê uma linha em branco para dar espaço e adicione esse código
5 - Entre no Painel de Administração da sua loja, acesse a guia Servidor e coloque 9 no campo que pede o nível de compressão para Gzip (9 para aqueles que possuem um bom servidor de Hospedagem, quem tiver servidor próprio deve ir testando para não sobrecarregar o servidor de Hospedagem), salve e saia da administração
6 - Limpe o cache e os cookies de todos os navegadores que você tiver na máquina, acesse o seu site como se fosse um cliente e veja se nota diferença
6.1 - Se deu tudo OK até o item 6, ótimo, você poderá ir para o nível 2, vá direto para item 7
6.2 - Caso apareça algum erro no acesso, basta remover do arquivo .htacces a linha
8 - Repita o item 5 para testar a sua loja e ver a diferença
----------------------------------------------------------------------------------------------------
Cache? O que é?
Para quem não sabe o que é cache (que não é cachê, comissão gerada por participação), cache é uma técnica utilizada pelos navegadores para "acelerar" a navegação nos sites quando estes possuem o comando para que isso aconteça.
Como funciona o cache ?
Quando o cache está habilitado o navegador pega o arquivo que possui ordem para fazer cache e coloca uma cópia dele dentro do seu computador numa pasta de arquivos temporários da internet, pois quando este comando não existe o navegador então entende que toda vez que acessar aquela página, mesmo que você já tenha visitado ela, ele fará todo o downlad da página outra vez, sendo assim, é muito mais rápido o navegador buscar dentro do seu computador do que baixar novamente o mesmo arquivo.
Porém o cache é uma faca de dois gumes, pois se o comando para fazer cache não possuir um comando para informar ao navegador quando ele arquivo que ele fez o download deve ser substituído, você correrá o risco de fazer um visitante navegar pelo seu site com informações desatualizadas ou com erros, pois ele estará navegando com arquivos que estão dentro do computador dele e que podem já terem sidos substituídos no seu site, porém pela falta de comando de troca o navegador então não fez um novo download.
O tempo para realizar essa troca deve ser avaliado com cautela para que não sejam realizadas trocas constantes fazendo o recurso do cache perder efeito pois o navegador ficaria fazendo downloads ou ficaria navegando com informações desatualizadas, os grandes portais de notícias e as grandes lojas de comércio eletrônico usam o comando de troca, chamado de expiração, com data de 1 dia, ou seja, a cada 24h que o navegador passar por aquele mesmo endereço ele atualiza as informações.
Vamos ao que interessa:
Abra o arquivo .htaccess e vá ao fim dele para adicionar os dois seguintes módulos:
Estamos as ordens
Alguns já devem ter visto que Painel de Administração do Open Cart, na guia Servidor, tem um campo que pede um número de 0 a 9 para compressão do Gzip
Gzip? O que é?
Para quem não sabe, o Gzip é resumidamente um processo executado pelo servidor Web que comprime as páginas e as envia para o navegador, fazendo assim parecer que o seu site é rápido de abrir
É importante ressaltar o Gzip não é um passe de mágica, existem outros detalhes que precisam ser executados para que o Gzip possa ser 100% eficiente, do contrário ele será um recurso ativado porém sub-utilizado, por exemplo, é preciso compactar as imagens principais utilizando o http://www.smushit.com antes de enviar para o site, é preciso criar um subdomínio só para alocar as imagens, é preciso colocar a chamada dos CSS antes da chamada dos Scriptis do Java, é preciso dar o comando para fazer cache da sua página (isso inclui os scripts e as fotos) e dar uma data de expiração, do contrário toda hora que o visitante for acessar uma página será feito a chamada de todos aqueles arquivos que muitas vezes só precisam ser chamados uma única vez pois serão iguais em todas as partes do site, por exemplo, o cabeçalho, o rodapé e os scripts do Java, mas tudo isso também é assunto para outro tópico, se algúem tiver interesse nessas técnicas acima faz o pedido aqui que a gente explica
Vamos ao que interessa:
1 - Procure na pasta raiz da sua loja um arquivo chamado .htaccess ou htaccess.txt (se você não tem o .htaccess é preciso renomear o htaccess.txt para .htaccess, essa renomeção só funciona se você fizer via FTP diretamente dentro do seu servidor, não adianta baixar o arquivo e tentar renomear no Windows porque ele nao deixa, acho que Linux e OSx aceitam)
2 - Com o arquivo renomeado para .htaccess agora você pode baixar para o seu computador ou executar diretamente no seu servidor a edição dele, pode abrir diretamente como Bloco de Notas
3 - Faça backup do seu arquivo .htaccess por segurança
3 - Se encontrar algum código dentro do arquivo, não altere nada, vá para o fim do arquivo, dê uma linha em branco para dar espaço e adicione esse código
Código: Selecionar todos
4 - Salve o arquivo, feche e envie de volta para o servidor gravando por cimaAddOutputFilterByType DEFLATE text/html text/plain text/xml 5 - Entre no Painel de Administração da sua loja, acesse a guia Servidor e coloque 9 no campo que pede o nível de compressão para Gzip (9 para aqueles que possuem um bom servidor de Hospedagem, quem tiver servidor próprio deve ir testando para não sobrecarregar o servidor de Hospedagem), salve e saia da administração
6 - Limpe o cache e os cookies de todos os navegadores que você tiver na máquina, acesse o seu site como se fosse um cliente e veja se nota diferença
6.1 - Se deu tudo OK até o item 6, ótimo, você poderá ir para o nível 2, vá direto para item 7
6.2 - Caso apareça algum erro no acesso, basta remover do arquivo .htacces a linha
Código: Selecionar todos
6.2.1 - Troque a linha AddOutputFilterByType DEFLATE text/html text/plain text/xml Código: Selecionar todos
por esse código AddOutputFilterByType DEFLATE text/html text/plain text/xml Código: Selecionar todos
7 - Com o recurso Deflate instalado você poderá adicionar um recurso extra na compressão Gzip que é o módulo do próprio Gzip, basta adicionar o código a seguir logo após ter adicionado o item 3
<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>Código: Selecionar todos
<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>8 - Repita o item 5 para testar a sua loja e ver a diferença
----------------------------------------------------------------------------------------------------
Cache? O que é?
Para quem não sabe o que é cache (que não é cachê, comissão gerada por participação), cache é uma técnica utilizada pelos navegadores para "acelerar" a navegação nos sites quando estes possuem o comando para que isso aconteça.
Como funciona o cache ?
Quando o cache está habilitado o navegador pega o arquivo que possui ordem para fazer cache e coloca uma cópia dele dentro do seu computador numa pasta de arquivos temporários da internet, pois quando este comando não existe o navegador então entende que toda vez que acessar aquela página, mesmo que você já tenha visitado ela, ele fará todo o downlad da página outra vez, sendo assim, é muito mais rápido o navegador buscar dentro do seu computador do que baixar novamente o mesmo arquivo.
Porém o cache é uma faca de dois gumes, pois se o comando para fazer cache não possuir um comando para informar ao navegador quando ele arquivo que ele fez o download deve ser substituído, você correrá o risco de fazer um visitante navegar pelo seu site com informações desatualizadas ou com erros, pois ele estará navegando com arquivos que estão dentro do computador dele e que podem já terem sidos substituídos no seu site, porém pela falta de comando de troca o navegador então não fez um novo download.
O tempo para realizar essa troca deve ser avaliado com cautela para que não sejam realizadas trocas constantes fazendo o recurso do cache perder efeito pois o navegador ficaria fazendo downloads ou ficaria navegando com informações desatualizadas, os grandes portais de notícias e as grandes lojas de comércio eletrônico usam o comando de troca, chamado de expiração, com data de 1 dia, ou seja, a cada 24h que o navegador passar por aquele mesmo endereço ele atualiza as informações.
Vamos ao que interessa:
Abra o arquivo .htaccess e vá ao fim dele para adicionar os dois seguintes módulos:
Código: Selecionar todos
Com esse módulo do Gzip, o comando para cache, todos os CSS sendo executado antes do Javascript e as imagens puxadas pelos CSS e PHP em outro subdomínio, minha loja está com 80 pontos de um total de 100 quando analizada pelo Google Page Speed<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 seconds"
ExpiresByType text/html "access plus 1 seconds"
ExpiresByType image/gif "access plus 2592000 seconds"
ExpiresByType image/jpeg "access plus 2592000 seconds"
ExpiresByType image/png "access plus 2592000 seconds"
ExpiresByType text/css "access plus 604800 seconds"
ExpiresByType text/javascript "access plus 216000 seconds"
ExpiresByType application/x-javascript "access plus 216000 seconds"
</ifModule>
<ifModule mod_headers.c>
<filesMatch "\\.(ico|pdf|flv|jpg|jpeg|png|gif|swf)$">
Header set Cache-Control "max-age=2592000, public"
</filesMatch>
<filesMatch "\\.(css)$">
Header set Cache-Control "max-age=604800, public"
</filesMatch>
<filesMatch "\\.(js)$">
Header set Cache-Control "max-age=216000, private"
</filesMatch>
<filesMatch "\\.(xml|txt)$">
Header set Cache-Control "max-age=216000, public, must-revalidate"
</filesMatch>
<filesMatch "\\.(html|htm|php)$">
Header set Cache-Control "max-age=1, private, must-revalidate"
</filesMatch>
</ifModule>Estamos as ordens
