Acelere o Seu WebSite ou Blog

15 Agosto 2008 Escrito por Gonçalo Martins

Um website em que o load das páginas ocorram de forma fluida e sem grandes interrupções temporais, é quase meio caminho andado para o sucesso de determinado projecto. Infelizmente com o aparecer da Web2.0 os sites tornaram-se cada vez mais pesados, quer em termos de imagens, scripts ou outros.

Com este guia irei tentar transmitir-lhe algumas técnicas em como acelerar o seu web site ou blog, quer seja criado em wordpress quer seja criado em Joomla (e não só).

Antes de mais recomendo-lhe que instale o Firefox, juntamente com as seguintes extensões: Firebug, YSlow.

Após isto limpe o cache do seu browser e actualize a sua página web. Verifique o tempo que esta demora a realizar o load completo.

_{Nota: O tempo que uma página demora a abrir não depende só de si e do que você possa fazer no servidor. A distancia do servidor ao utilizador que pretende aceder à página é também importante.}

Se você não tiver realizado nenhuma alteração, no passado, ao seu website é provável que possa melhorar o tempo que lhe apareceu.

1#Editar o ficheiro .htaccess

Este ficheiro encontra-se na pasta de raiz do seu website. Para o poder editar necessita de um programa FTP, aconselho-lhe o SmartFTP. E de um editor, por exemplo o Notepad++.

Depois de introduzir e configurar o seus dados no SmartFTP descarregue para o seu disco o ficheiro .htaccess que se encontra no seu servidor, crie uma copia de segurança e abra-o com o Netepad++. Introduza as seguintes linhas no final:

Para obter compressão:

php_value output_handler ob_gzhandler

A linha anterior diz ao seu servidor para servir todas as páginas .PHP no formato .gzip.

<FilesMatch ".js$">
AddHandler application/x-httpd-php .js
</FilesMatch>

O código anterior diz ao seu servidor para servir todos os ficheiros externos com a extensão .js no formato .gzip.

Cache:

# 1 ANO
<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|swf|mp3|mp4)$">
Header set Cache-Control "public"
Header set Expires "Thu, 15 Apr 2010 20:00:00 GMT"
Header unset Last-Modified
</FilesMatch>

# 2 HORAS
<FilesMatch "\.(html|htm|xml|txt|xsl)$">
Header set Cache-Control "max-age=7200, must-revalidate"
</FilesMatch>

# EM CACHE PARA SEMPRE
<FilesMatch "\.(js|css)$">
Header set Cache-Control "public"
Header set Expires "Thu, 15 Apr 2010 20:00:00 GMT"
Header unset Last-Modified
</FilesMatch>

O código acima faz com que os elementos do seu website fiquem em cache no browser do cliente, fazendo com que o browser não faça download deles de cada vez que uma página carrega.

Etags:

A seguinte opção depende se o seu site se encontra ou não estabilizado em termos de desenvolvimento. As Etags são tags únicas ao servidor que este adiciona a cada ficheiro. Sempre que quando o ficheiro é mudado a etag muda, e o cliente (browser) actualiza o ficheiro ao detectar uma etag diferente. Eu gosto de deixar as etag ligadas. No entanto se as quiser desligar coloque o seguinte código no seu .htaccess

Header unset ETag
FileETag None

2# Comprima os ficheiros .css (stylesheets)

Para comprimir estes ficheiro podemos optar por eliminar todos os espaços em branco que os ficheiros css contem ou mesmo reduzir linhas do código css.

Para tal pode exprimentar um dos seguintes compressores e ver qual melhor faz o serviço.

Note que os ficheiros após a compressão ficarão elegíveis, pelo que é boa politica guardar o original, se mais tarde quiser editar.

Muitas das vezes a compressão dos ficheiros anda na ordem dos 70%.

CSSDRIVE | CLEANCSS | CSS Compressor

3# Comprima os ficheiros .js (javascript)

Tal como para os ficheiros css existem algumas aplicações online que lhe permitem comprimir de forma bastante efectiva ficheiros .js. Um muito conhecido é o YUI, no entanto eu prefiro utilizar outros dois compressores, que se complementam muito bem um ao outro.

São eles o Dojo e o Dean Packeer.

Comece por carregar o seu ficheiro .js para o DojoToolkit e faça o download do ficheiro que este lhe vai fornecer. Após isto abra o ficheiro do dojo no Notepad++ copie todo o seu conteúdo e introduza no Packer, copie o codigo do Packer e crie um novo ficheiro .js.

Este método permite por exemplo comprimir o Mootools a 50Kb sendo que o compressor que o Mootools fornece no seu site (YUI) só permite compressão até 60Kb. Utilizando este método e a compressão no .htaccess conseguem-se tamanhos de ficheiros relativamente reduzidos.

4# Coloque o Css e o Javascript em ficheiros externos

Colocar o Css e o javascript em ficheiros externos melhora consideravelmente o tempo que uma pagina demora a abrir, devido ao facto do browser os colocar em cache. Para tal faça o load dos seus ficheiros .js os .css com o seguinte codigo

5# Faça chamadas relativas

Em vez de utilizar <a href="http://www.URL.com/ficheiro/pag.html"> utilize <a href="/ficheiro/pag.html">

    * <a href="/"> - Chama http://www.URL.com
    * <a href="/ficheiro.html"> - Chama http://www.URL.com/ficheiro.html
    * <a href="/pasta/ficheiro.html"> - Chama http://www.URL.com/pasta/ficheiro.html
    * <a href='./"> - Chama o index.html dentro da directoria
    * <a href='../"> - Chama o index.html uma directoria abaixo
    * <a href='../ficheiro.html"> - Chama ficheiro.html uma directoria abaixo
    * <a href='../../"> - Chama o index.html duas directorias baixo

Isto deve-se aos espaço que 'http://www.URL.com' ocupa, uma vez pode não fazer diferença no load de uma página no entanto 80 vezes pode ser preocupante.

6# Faça o load de imagens através de CSS

As imagens que são chamadas através do Css são sempre o último conteúdo que o Browser carrega. Sendo assim para não obrigar o utilizador do site a esperar que todas as imagens carreguem antes que apareça o conteúdo (o que realmente interessa ao utilizador) carregue as imagens decorativas através de CSS.

para tál pode utilizar

XHTML:

<div class="imagem_decorativa"></div>

CSS:

.imagem_decorativa{background: url(nomeimagem.jpg);}

7#Dicas orientadas para CMS's

Wordpress:

* Instale o wp-cache

No entanto o wp-cache não permite a opção gzip do wordpress, sendo assim aplique o seguinte hack ao wp-cache.

Edite o ficheiro wp-cache-phase1.php

coloque a seguinte linha:

if ( extension_loaded('zlib') ) ob_start('ob_gzhandler');

acima desta linha:

foreach ($meta-»headers as $header) {

* Ligue o gzip nas opções do wordpress

* Abra o ficheiro wp-config.php e modifique a seguinte linha:

//Enable the WordPress Object Cache:
define(ENABLE_CACHE, true);

Joomla:

* Ligue a opção GZIP nas opções do joomla.

* Existem diversas extensões que pode instalar:

Cache Acellerate | Content Static | Query Cache

Utilize o Yslow, para verificar se as suas alterações surtiram efeito.



Jon Agosto 16, 2008	Dicas uteis para acelerar website essas ai ver como isso se comporta no meu site depois digo


Pedro Rafael Agosto 16, 2008	Tenho diversos sites em wordpress, algumas das dicas já conhecia, outras não fazia a minima ideia. Ver se consigo optimizar ainda mais o wordpress!


-RJ- Agosto 20, 2008	Muito bom este artigo, com estas dicas consegui perceber melhor os carregamentos de páginas e consequentemente criar sites mais rápidos a abrirem... Isto pode ajudar a quem usa tráfego internacional principalmente. :)


leonardo Agosto 26, 2008	Muito boa as dicas. Abraço.


Tárcio Zemel Junho 17, 2009	Grande artigo! O melhor que já vi sobre o assunto apresentado de forma simples e direta!


O Blog do seu PC Abril 14, 2010	Muito boas dicas! Vou ler mais detalhadamente e ver se coloco em meu blog.


Diogo Abril 16, 2010	Explica melhor, como colocar o css e o js em ficheiro externo, o que eu faço, eu coloco aquele código lá endereçado para onde está um ficheiro?? Dá um exemplo


Acid Abril 21, 2010	Colocar em ficheiro externo é linká-los como arquivos, exatamente como está na no exemplo. COloca-los internamente é colocar o codigo DENTRO do html ou do template. (coisa q pouca gente ainda faz)


Diego Soares Maio 13, 2010	Ótimas dicas, muito prático em suas definições... Para complementar este artigo quero deixar aqui um artigo que escrevi sobre plugins WordPress para Cache http://www.professionalblogger...ara-cache/ Abraços!