Otimizando o seu site – Carregamento

Sem Comentários

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:

1 <?php
2 ob_start("ob_gzhandler");
3 ?>

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"
3 </filesMatch>

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! :D

Veja um exemplo:

Antes o seu HTML estava assim:

01 <head>
02 <title>Meu Site</title>
03 <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
04  
05 <!-- CSS -->
06 <link rel="stylesheet" href="layout.css" type="text/css" />
07 <link rel="stylesheet" href="noticias.css" type="text/css" />
08  
09 <!-- JS -->
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>
13 </head>

Agora, depois de usar o Minify, ele ficou assim:

01 <head>
02 <title>Meu Site</title>
03 <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
04  
05 <!-- CSS -->
06 <link type="text/css" rel="stylesheet" href="/min/f=layout.css,noticia.css" />
07  
08 <!-- JS -->
09 <script type="text/javascript" src="/min/f=js/jquery.js,js/jquery.cycle.js,outroscript.js"></script>
10 </head>

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

Sobre o blog

Este Blog tem o objetivo de divulgar as novidades da WebinHost e compartilhar notícias sobre hosting, servidores, empreendedorismo e todo universo tecnológico.

Arquivos

Comente via Facebook
Sem Comentários
 

Deixe um Comentário

Digite o código. (obrigatório)