Login

07-22-2010, 06:07 AM

[eluser]Spir[/eluser]
On my projects I usually make a sub domain for static content : js, css and images.
I have something like this :

/system
/application
/static → static content goes here (http://static.example.com)
/www → index.php goes here (http://example.com)

So I have 2 htaccess

one for static content, another for www (my CI app)

Here is an example of what I usually put in htacces for static content (could be better):

Code:
# Add deflate to static content

AddOutputFilterByType DEFLATE text/css text/plain text/xml application/javascript application/json

# remove ETag from images

Header unset ETag

FileETag none

# Add cace expire to files

<IfModule mod_expires.c>

    ExpiresActive On

    ExpiresDefault A86400

    ExpiresByType image/x-icon A2419200

    ExpiresByType image/gif A604800

    ExpiresByType image/png A604800

    ExpiresByType image/jpeg A604800

    ExpiresByType text/css A604800

    ExpiresByType application/x-javascript A604800

    ExpiresByType text/plain A604800

    ExpiresByType application/x-shockwave-flash A604800

    ExpiresByType application/pdf A604800

    ExpiresByType text/html A900

    ExpiresByType text/php "access plus 6 hours"

</IfModule>

Now If I want my css and js to be minify I use that awesome script :
http://code.google.com/p/minify

It permits to minify my CSS and JS on the fly and cache the result so it will be quicker next time.
Example : you have 4 js files :
jquery-1.3.2.min.js
jquery-ui-1.7.2.min.js
jquery-ui-1.7.2.datepicker.min.js
my_script.js

You may have put all files in one JS file : great. But fomr some maintenance and reusage you may keep them in one file. This will result in calling 4 files like this :

Code:
type="text/javascript" src="http://static.example.com/js/jquery-1.3.2.min.js"

Using that code (http://code.google.com/p/minify) you could dynamically minify them in one file like this :

Code:
type="text/javascript" src="http://static.example.com/min/?f=js/jquery-1.3.2.min.js,js/jquery-ui-1.7.2.min.js,js/jquery-ui-1.7.2.datepicker.min.js,js/my_script.js"

Same goes for CSS.

Here is what I have for my www/ folder :

Code:
<IfModule mod_rewrite.c>

    RewriteEngine on

    RewriteCond $1 !^(index\.php|robots\.txt)

    RewriteRule ^(.*)$ /index.php/$1 [L]

</IfModule>

<IfModule !mod_rewrite.c>

    # If we don't have mod_rewrite installed, all 404's

    # can be sent to index.php, and everything works as normal.

    ErrorDocument 404 /index.php

</IfModule>

But you see my content delivered by my app do not use deflate.
Before printing my <html> tag I put this :
ob_start("ob_gzhandler");
and then right after my </head> tag I put this :
ob_flush(); flush();

You can learn more about this there : http://www.phpied.com/progressive-render...e-flushes/
Now this is not all, I should also minify my html code. Here are some tips :
http://maestric.com/doc/php/codeigniter_compress_html

This few tasks will make your website quicker.