Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Faster page loading by combining & compressing javascript & css files
I’m stuck incorporating a very useful custom php-script/.htaccess-config technique to my TXP installation.
The script combines all those multiple css and js requests into a single, gzipped request – which results in vastly improved load speeds, particularly when used with complex sites using code libraries like JQuery and Blueprint
The technique works perfectly for me until I try and combine it into my TXP 4.05 installation: something about my .htaccess customisations just don’t work (I’m not very cluey about .htaccess files):
The default TXP .htaccess:
#DirectoryIndex index.php index.html
#Options +FollowSymLinks
#Options -Indexes
<IfModule mod_rewrite.c>
RewriteEngine On
#RewriteBase /relative/web/path/
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^(.+) - [PT,L]
RewriteRule ^(.*) index.php
</IfModule>
#php_value register_globals 0My modified .htaccess, which causes TXP to deliver a 404 in place of any css or js:
#DirectoryIndex index.php index.html
#Options +FollowSymLinks
#Options -Indexes
<IfModule mod_rewrite.c>
RewriteEngine On
#RewriteBase /relative/web/path/
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^(.+) - [PT,L]
RewriteRule ^(.*) index.php
RewriteRule ^includes/(.*\.css) /combine.php?type=css&files=$1
RewriteRule ^includes/(.*\.js) /combine.php?type=javascript&files=$1
</IfModule>
#php_value register_globals 0If I omit the line "RewriteRule ^(.*) index.php" everything is fine, and so I figure it is simply over-riding my two new rules.
Can anyone help? If this can be made to work I think it would be a worthy addition to future TXP releases… but thats another post!
Thanks, all.
Last edited by giz (2007-08-11 02:16:13)
Offline
Re: Faster page loading by combining & compressing javascript & css files
I’m quite rusty when it comes to rewrite rules, but I think if you put your rules above the .* rule, it should work. That one serves as the catch all to send any URLs to TXP to be processed.
Offline
Re: Faster page loading by combining & compressing javascript & css files
Thanks, Manfre.
I tried that – it made no difference, though. There appears to be something about the wildcard (.*) that really does mean everything…
Offline
#4 2007-08-11 03:57:44
- Mary
- Sock Enthusiast
- Registered: 2004-06-27
- Posts: 6,236
Re: Faster page loading by combining & compressing javascript & css files
# DirectoryIndex index.php index.html
# Options +FollowSymLinks
# Options -Indexes
<IfModule mod_rewrite.c>
RewriteEngine On
# RewriteBase /relative/web/path/
RewriteRule ^includes/(.*\.css)$ /combine.php?type=css&files=$1 [L]
RewriteRule ^includes/(.*\.js)$ /combine.php?type=javascript&files=$1 [L]
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^(.+) - [PT,L]
RewriteRule ^(.*) index.php
</IfModule>
# php_value register_globals 0Offline
Re: Faster page loading by combining & compressing javascript & css files
Ah-ha! I knew it had to be moved up. I was just off by a little bit. The problem with rewrite rules are that once you get them set up, you rarely have to modify them…then knowledge decays.
Offline
Re: Faster page loading by combining & compressing javascript & css files
Fantastic: works a treat!
Thanks, Mary.
Offline
Re: Faster page loading by combining & compressing javascript & css files
is this something that can be recommended to do? any downsides to this method?
Offline
Re: Faster page loading by combining & compressing javascript & css files
So, i don’t understand – does it handles javascripts provided as
<script type="text/javascript" src="http://www.okoshki.by/?file=livesearch"></script>
and what about css-styles, implented into the code like
<link rel="stylesheet" href="http://www.okoshki.by/textpattern/css.php?s=default" media="screen" type="text/css"/>
<link rel="stylesheet" href="http://www.okoshki.by/textpattern/css.php?n=tips" media="screen" type="text/css"/>
?
Please, show the step-by-step manual :) It would be great to save for free about 40% of bandwidth by using gzip.
Providing help in hacking ATM! Come to courses and don’t forget to bring us notebook and hammer! What for notebook? What a kind of hacker you are without notebok?
Offline
Re: Faster page loading by combining & compressing javascript & css files
The technique described at custom php-script/.htaccess-config will only work with files with a .js or .css extension. If you’re cluey with php/.htaccess directives you should be able to customise the script so that it can work with Victor’s examples, including Textpattern’s default way of dealing with css.
The technique is of little use for the average site where a single css or js document is served per web-page – even though you might enjoy some gzip compression benefits. The primary advantage of the technique is for when you include multiple instances of css and js files into the page; only a single request is made on the server for each file type, instead of multiple requests to the server for each file. Most browsers limit the number of concurrent http requests to 2 at a time, and so the multiple requests really slow down page access, even if the individual css and js files are relatively small in size (or even if you are on a super-fast net connection). See What the 80/20 Rule Tells Us about Reducing HTTP Requests
One thing to note about the technique: it ignores @import directives in css & dynamic script-loading in js files.
Last edited by giz (2007-08-14 21:20:42)
Offline