Publicidade (Anuncie Aqui)

Otimizando o seu site – Carregamento

Otimizando o seu site – Carregamento

publicado em 22 de abril de 2009 com View Comments

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:

<?php
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:

<filesMatch ".(ico|jpg|jpeg|png|gif|swf|css|js)$">
Header set Expires "Sun, 30 Apr 2090 20:00:00 GMT"
</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:

<head>
<title>Meu Site</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

<!-- CSS -->
<link rel="stylesheet" href="layout.css" type="text/css" />
<link rel="stylesheet" href="noticias.css" type="text/css" />

<!-- JS -->
<script language="JavaScript" src="js/jquery.js" type="text/javascript"></script>
<script language="JavaScript" src="js/jquery.cycle.js" type="text/javascript"></script>
<script language="JavaScript" src="js/outroscript.js" type="text/javascript"></script>
</head>

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

<head>
<title>Meu Site</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

<!-- CSS -->
<link type="text/css" rel="stylesheet" href="/min/f=layout.css,noticia.css" />

<!-- JS -->
<script type="text/javascript" src="/min/f=js/jquery.js,js/jquery.cycle.js,outroscript.js"></script>
</head>

Viu só? Você pode dar uma olhada no Guia do Usuário do Minify caso tenha alguma dúvida.

–

Espero que tenham gostado e que essas dicas deixem o seu site mais rápido! :)

Se você gostou das dicas e usou esses recursos no seu site, não esqueça de deixar um comentário dizendo como ficou e com o endereço do site para eu ver.

Abraços!

Você também vai gostar de ler:

Postado em Artigos, CSS, HTML, PHP

Com as tags , , , , , , , , , , , , , , , , , , , , , ,

Escrito por Thiago Belem

Gostou desse artigo?

Não se esqueça de assinar o RSS e divulgue-o para o mundo:

  • hugo leonardo
    trago uma sugestão e uma dúvida. (:

    sugestão: o minify alteraria a indentação dos códigos e deixaria um pouco mais trabalhoso pra poder modificar isso depois. você teria que usar o recurso toda vez que fosse fazer alguma modificação e upar pro servidor. sendo assim, eu utilizei aquela historinha do Gzip alí junto com a dica de outro post seu aqui. eu defini que meus arquivos .js e .css seriam agora .php e uso o recurso Gzip neles também. funcionou muuuito bem! reduziu bastante o tamanho deles =D

    dúvida: setando esses expire headers quer dizer também que se eu fizer alguma modificação nos arquivos, o usuário só vai perceber depois que o prazo vencer? porque isso seria bem nocivo pra um site...a menos que se coloque um prazo curto tipo 2 semanas, e se renove esse prazo constantemente.
    ou será que o sistema reconhece que o arquivo mudou e não usa mais o que está cacheado?

    obrigado. (:
  • Pedro Vidal
    Hugo, achei um artigo interessante do Yahoo falando sobre isso.
    A resposta para tua pergunta: Sim, se vc tem expire-headers o navegador só vai baixar a nova versão depois que o expire-header vencer seu prazo, portanto, uma solução que a própria Yahoo usa é modificar o nome dos arquivos quando há uma alteração a fazer nos seus sites, usando um tipo de "controle de versão" dos arquivos...

    aqui o link do artigo:
    http://developer.yahoo.com/performance/rules.html
  • @Hugo
    Sim, se o expire estiver "setado" o visitante só carregará o arquivo novamente após o prazo expirar ou quando ele limpar o cache do navegador dele... Esse é um dos motivos que recomenda-se que só se use expire e minify depois do arquivo pronto, quando não houverem mais mudanças a serem feitas. Caso o arquivo já esteja cacheado e mude, você pode colocar um parâmetro adicional na chamada dele no HTML, por exemplo:

    Antes era:
    <link type="text/css" href=estilo.css" rel="stylesheet" />

    Depois vai ser:
    <link type="text/css" href=estilo.css?1" rel="stylesheet" />

    Isso fará com que o navegador pense que é um arquivo novo, fazendo assim uma nova requisição ao servidor, pegando a última versão e cacheando-a (usando o expire).. Ai sempre que mudar é só aumentar o numero depois da interrogação. :)
  • Pedro Vidal
    Olá Thiago, uma dúvida:
    Se uso os headers no meu site:


    a modificação no .htaccess para "cachear" as imagens vai funcionar mesmo assim?
    Abraço!
  • Pedro Vidal
    Testado Thiago, realmente os headers do .htaccess sobreescrevem os headers da página.
  • @Pedro Vital
    Infelizmente você só vai saber testando e analisando os headers finais.. Creio que os headers do Apache (htaccess) sobrescrevam os headers enviados pelo PHP.
  • hugo leonardo
    "Note: You cannot use both ob_gzhandler() and zlib.output_compression. Also note that using zlib.output_compression is preferred over ob_gzhandler()."

    isso tava escrito na documentação do ob_gzhandler(). aparentemente o zlib.output_compression é mais aconselhável de se usar. e não dá pra usar os dois juntos.

    pelo que eu entendi esse zlib.output_compression é alguma configuração (no servidor ou em algum arquivo) que já avisa o servidor que é pra enviar os dados codificados.

    infelizmente eu não entendi direito como trabalhar com essa zlib.output_compression. você saberia algo sobre essa funcionalidade do php? bem, qualquer coisa eu vou de ob_gzhandler mesmo que já é uma ótima dica. obrigado (:
  • Interessante. Não sei se você conhece o livro "High Performance Web Sites", que traz 14 dicas de otimização para web, incluindo as que você apresentou:

    http://stevesouders.com/hpws/rules.php
blog comments powered by Disqus