Guide to a very fast website
Performance
I was experimenting with new features for the past few weeks and while i was working on optimizing a website we are working on currently i was wondering what would it take to get a very big score on Yslow. But as Jeff says in this old post: “Yahoo’s Problems Are Not Your Problems”. So i was just doing the usual putting the javascript files at the bottom, minify every single one of them. I usually use this website: YUI Compressor Onlineit always does the job for me.
What Yslow goes round and round is the cache system of the browser. So what you are actually doing is making everything cacheable and as small as possible so that the browser takes everything loading from one bite. The browsers have a limited number of requests that they address at once so if you can get into that margin then you are good. So very important combine every file and make is small! 
What have i done is use the gzip module of the apache server by using php and a .htaccess file. I believe this is one of the most nice ways to take advantage of this feature without making any changes to your website. What it does is adding lines of code at the beginning of txt/html/htm/php files, css files and js files. After we do this we add a closing line at the end and we are good. Gzip is in place up and running.
How do we do it? Well here is the code:
<FilesMatch "\.(css)">
ForceType application/x-httpd-php
php_value auto_prepend_file "address-to-this-file/gzip/gzip-css.php"
php_value auto_append_file "address-to-this-file/gzip/gzip-end.php"
</FilesMatch>
<FilesMatch "\.(txt|html|htm|php)">
ForceType application/x-httpd-php
php_value auto_prepend_file "address-to-this-file/gzip/gzip-gen.php"
php_value auto_append_file "address-to-this-file/gzip/gzip-end.php"
</FilesMatch>
<FilesMatch "\.(js)">
ForceType application/x-httpd-php
php_value auto_prepend_file "address-to-this-file/gzip/gzip-js.php"
php_value auto_append_file "address-to-this-file/gzip/gzip-end.php"
</FilesMatch>The next step is a selective one since what we are doing is telling the browser to not look for a file until we tell it to. So if we set the expiration to 2 years from now the browser will always use the one it has in it’s cache until 2 years pass.
<IfModule mod_expires.c> ExpiresActive On ExpiresDefault A600 ExpiresByType image/x-icon A2592000 ExpiresByType application/x-javascript A604800 ExpiresByType text/javascript A604800 ExpiresByType text/css A604800 ExpiresByType image/gif A2592000 ExpiresByType image/png A2592000 ExpiresByType image/jpeg A2592000 ExpiresByType text/plain A86400 ExpiresByType application/x-shockwave-flash A2592000 ExpiresByType video/x-flv A2592000 ExpiresByType application/pdf A2592000 ExpiresByType text/html A600 </IfModule>
We check for the expires module and if it’s activated then we just set the expiration dates. What does “ExpiresByType text/css A17200″ means? Css files “expire after 4.8 hours”
“A” before the numbers above stands for Access. This means that the stopwatch starts when a client accesses the file. You can also use “M” for modified.
TIME CHEAT SHEET
- 300 5 MIN
- 600 10 MIN
- 900 15 MIN
- 1800 30 MIN
- 2700 45 MIN
- 3600 1 HR
- 7200 2 HR
- 86400 24 HR
- 86400 1 DAY
- 604800 7 DAY
- 604800 1 WEEK
- 2419200 4 WEEK
- 2419200 1 MONTH (FEBRUARY)
- 2505600 1 MONTH (FEBRUARY LEAP YEAR)
- 2592000 1 MONTH (APRIL, JUNE, SEPTEMBER, NOVEMBER)
- 2678400 1 MONTH (JANUARY, MARCH, MAY, JULY, AUGUST, OCTOBER, DECEMBER)
- 31536000 12 MONTH
Now just download this thing and get a faster website. The rest of the Yslow rules are pretty simple to follow so i just felt i would let you know what i use for these 2 because i found them hard to figure out than the rest.
Update
Today I was trying to get the gzip code to work on our server and since we have a shared hosting here we are forced to comply with the rules. And guess what I get a “500″ error. So i found a new way of doing the same thing. This as long as you have Rewrite_module activated if this is not activated then i don’t think you can do much of a thing.
Here it is the .htaccess code:
RewriteRule ^.+\.(css|js|png|jpg|swf)$ gzip/compress.php [NC]
This will pass all files that are css, js, png, jpg, swf trough the compress.php file. And here is what the compress.php file does:
<?php
$basedir = $_SERVER['DOCUMENT_ROOT'];
$file = realpath( $basedir . $_SERVER["REQUEST_URI"] );
if( !file_exists($file) && strpos($file, $basedir) === 0 ) {
header("HTTP/1.0 404 Not Found");
print "File does not exist.";
exit();
}
$path_info = pathinfo($file);
$extension=$path_info['extension'];
switch($extension) {
case 'css':
$mime = "text/css";
break;
case'js':
$mine = "text/javascript";
break;
default:
$mime = "text/plain";
}
if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip'))
ob_start("ob_gzhandler");
else
ob_start();
header( "Content-Type: " . $mime . "; charset: UTF-8");
header ("cache-control: must-revalidate");
readfile($file);
?>
The file checks for the extension of the file that is receives and ads the corresponding headers to it’s top.
Pretty simple. Download the zip file to get both versions.
Awesome website optimizer
About The Author
0 Comments