Junte os seus ficheiros CSS e Javascript

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:

javascript
<script type="text/javascript" src="http://www.weblouca.com/js/script1.js"></script>
<script type="text/javascript" src="http://www.weblouca.com/js/script2.js"></script>
<script type="text/javascript" src="http://www.weblouca.com/js/script3.js"></script>
(...)
<script type="text/javascript" src="http://www.weblouca.com/js/script20.js"></script>

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:

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

javascript
<script type="text/javascript" src="http://www.oseusite.com/combinar.php?type=javascript&files=script1.js,script2.js,script3.js,(...),script20.js"></script>

Css:

html
<link rel="stylesheet" href="http://www.oseusite.com/combinar.php?type=css&files=css1.css,css2.css,css3.css"" type="text/css" />

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 http://desenvolvimentoparaweb.com	Ó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 http://weblouca.com	@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 http://em construção	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