Junte os seus ficheiros CSS e Javascript

04 Maio 2009 Escrito por Gonçalo Martins

Na continuação da onda de artigos sobre optimização da velocidade de websites, vou continuar a falar sobre a redução de pedidos HTTP. Como expliquei no artigo Acelere um website: Reduza os pedidos Http, uma forma eficaz de reduzir os pedidos Http passa por combinar os ficheiros CSS e Javascript num único ficheiro. Mas como realizar tal tarefa sem comprometer a facilidade e simplicidade de edição de um website.

Vamos considerar o caso do Javascript. Digamos que quero possuir 20 efeitos obtiveis através de javascript num determinado website. A forma mais simples de criar a estrutura destes efeitos para uma fácil edição de futuro, seria criar o código HTML do website como algo do género:

Ora bem isto é uma maravilha para de futuro editar/remover os scripts do website. No entanto criamos 20 Pedidos Http que são evitados. Uma forma de contrariar este problema e manter a facilidade de edição de futuro é utilizar PHP, para combinar os ficheiros automaticamente.

Antes de mais realize o download do seguinte script PHP. Download.

1 . Após ter realizado o download deste script combinar.php coloque-o na raiz do seu website.

2 . Crie agora três pastas de nome 'javascript', 'css' e 'cache' na raiz do seu website. E transfira para lá todos os seus ficheiros Css e Javascript. Css para a pasta 'css' e Javascripts para a pasta 'javascript'.

3 . Abra o seu ficheiro .htaccess e cole as seguintes linhas:

RewriteEngine On
RewriteBase /
RewriteRule ^css/(.*\.css) /combinar.php?type=css&files=$1
RewriteRule ^javascript/(.*\.js) /combinar.php?type=javascript&files=$1

4 . Chame no seu HTML os ficheiros Css e Javascript dos quais deseja realizar Load, com o seguinte código:

Javascript:

Css:

Desta forma Reduz os pedidos Http do seu site para dois juntando de forma fácil e de fácil edição no futuro, todos os ficheiros css e javacript do seu website.

_(!)_{Atenção aos possíveis caminhos relativos que se encontrarão dentro dos ficheiros css e javascript.}

10 - Pré-Loading, o que é, como utilizar?;
11 - Atrase o load de ficheiros (Pós-Loading);
12 - PHP Flush, como e porque?;
13 - Use links da maneira correcta;
14 - ETags, quando podem ou não ser uteis!;
15 - Publicidade, uma forma de matar a performance! Soluções?;
16 - Javascript o porque do Google APIS / YUI;
17 - Google Analytics - Aumente o desempenho;
18 - Exemplo prático de implementação;
Subscreva o Feed RSS! Não perca nenhum artigo!

Outros artigos desta série:
0 - Ferramentas para medição de desempenho;
1 - Utilize correctamente imagens no seu website;
2 - O poder da compressão;
3 - Optimize o seu Javascript;
4 - O poder das CDN (Content delivery Network);;
5 - Http Requests (Pedidos Http);
6 - Junte os seus ficheiros CSS e Javascript;
7 - Descubra o cache/Expires Head;
8 - W3C o que é?;
9 - Load Dinamico / Compreenda o funcionamento dos protocolos web;

Artigos Relacionados

Trackback(0)

TrackBack URI for this entry



Rafael Maio 21, 2009	Exelente script que disponiblizas aqui no weblouca. Tinha montes de ficheiros css e javascript. Reduzi o meus pedidos http de 30 para 2!


Tárcio Zemel Junho 17, 2009	Ótimo, hein! Certa vez fui experimentar o plugin do PHP Speedy, mas sempre ele "quebra" o layout/design do site por não gerenciar bem a história com o CSS... Não tem disposição para criar um plugin para WordPress com isso que mostrou? ;-)


GonçaloM Junho 19, 2009	@Tárcio Zemel As minhas experiencias com o PHP speedy tambem não foram as melhores. No entanto existem melhores e menos pesadas técnicas que utilizar o PHP speedy. Esta é uma delas. Eu só agora me estou a familiarizar com wordpress, sou mais fan do Joomla. Plugins deste género existem para Joomla. No entanto para wordpress não sei, uma vez que muitos dos temas e plugins do wordpress possuem os caminhos relativos para os ficheiros css e javascript escritos "directamente no código".


webster Março 18, 2010	Olá, Consegui fazer funcionar aqui no JSAS usando css e js. Tem como fazer isso com arquivos PHP? Costumo usar muito a função require do php para menus, banners, rodape entre outros, mas não estou conseguindo implementar em php. Já alterei o script "combinar.php" Mas estou errando é no tipo


wender Novembro 15, 2010	nao consegui =/

Escreva o seu Comentario

Junte os seus ficheiros CSS e Javascript

Artigos Relacionados

Nuvem de Tags