Você tem um site mas acha que ele está demorando um pouco pra carregar? Acha que o HTML está muito pesado, ou tem muitos CSSs e muitos JSs na mesma página e tudo parece um inferno? Seus problemas acabaram!
Hoje vou ensinar como fazer para usar recursos do servidor e agilizar o reduzir de página em até 10x.
Primeiro, o mais simples:
Codificando sua página (HTML) com GZip
A codificação com GZip fará o HTML do seu site ser carregado mais rapidamente pelo visitante, é só colocar a seguinte linha no começo do seu PHP, junto do início da sessões, por exemplo:
2 |
ob_start("ob_gzhandler"); |
–
Definindo expire-headers para imagens, Javascript, CSS e etc
Todos os elementos de um site podem ser cacheados (salvos no computador do visitante) para economizar tempo de carregamento. E sempre que esses arquivos são salvos é preciso definir um expire-header, ou seja, quanto tempo o arquivo ficará salvo.
Se você já terminou o seu site, ele está no ar, as imagens têm nomes diferentes e você quer economizar bandwidth (tráfego mensal), essa dica é pra você.
Edite o arquivo .htaccess na raiz do seu site (se o arquivo não existe veja aqui como criá-lo) e coloque o seguinte código nele:
1 |
<filesMatch ".(ico|jpg|jpeg|png|gif|swf|css|js)$"> |
2 |
Header set Expires "Sun, 30 Apr 2090 20:00:00 GMT" |
Aí é só editar na primeira linha quais tipos de arquivos serão cacheados e na segunda linha, até quando eles serão cacheados. Como precisamos definir uma data, coloquei 30 de Abril de 2090, mas acredito que você possa colocar a data que bem entender.
–
Minificando (Reduzindo) arquivos JS e CSS
Você terminou o seu site cheio de folhas de estilos e arquivos JS com vários scripts de jQuery, Prototype e etc? E tachando que tá tudo muito pesado? Não se desespere! Há uma saída:
Existe um recurso chamado Minify: ele compacta arquivos CSS e JS tirando quebras de linhas e espaços para deixar o arquivo muito menor.. E o melhor, além de juntar todos os arquivos em um só, ele faz isso sem alterar o código fonte deles.
1 – Faça o download do Minify aqui: http://code.google.com/p/minify/
2 – Coloque a pasta /min/ dentro da raiz do seu site
3 – Acesse montador de URLs (URL Builder) dele, encontrado no endereço www.seusite.com/min/builder/
4 – Adicione os arquivos que serão reduzidos e depois clique em [Update]
6 – Ele te dará uma linha de HTML de inclusão de CSS ou JS, é só colocar essa linha no seu HTML e pronto! 
Veja um exemplo:
Antes o seu HTML estava assim:
02 |
<title>Meu Site</title> |
03 |
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> |
06 |
<link rel="stylesheet" href="layout.css" type="text/css" /> |
07 |
<link rel="stylesheet" href="noticias.css" type="text/css" /> |
10 |
<script language="JavaScript" src="js/jquery.js" type="text/javascript"></script> |
11 |
<script language="JavaScript" src="js/jquery.cycle.js" type="text/javascript"></script> |
12 |
<script language="JavaScript" src="js/outroscript.js" type="text/javascript"></script> |
Agora, depois de usar o Minify, ele ficou assim:
02 |
<title>Meu Site</title> |
03 |
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> |
06 |
<link type="text/css" rel="stylesheet" href="/min/f=layout.css,noticia.css" /> |
09 |
<script type="text/javascript" src="/min/f=js/jquery.js,js/jquery.cycle.js,outroscript.js"></script> |
Viu só? Você pode dar uma olhada no Guia do Usuário do Minify caso tenha alguma dúvida.
Fonte: Thiago Belem: Otimizando o seu site – Carregamento
Relacionado
