WESSITE

Archives

You are currently viewing archive for November 2008
This is the third part of the article Speeding Up your Web Site. The method is really easy to configure and will drastically increase the speed of your web page. I found this optimizing tip at askapache.com:

A first-time visitor to your page will make several HTTP requests to download all your sites files, but using the Expires header you make those files cacheable. This avoids unnecessary HTTP requests on subsequent page views.

Just put the following lines in your .htaccess file:

<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Expires "Thu, 15 Apr 2010 20:00:00 GMT"
</FilesMatch>

Store the .htaccess file in the directory from where you want to start adding the far future header, so if you store this in the root all the files on your server with the extensions above will get a far future expires header.
Reducing the number of HTTP requests is the key to faster pages. As read in the best practices for speeding up your web site:

80% of the end-user response time is spent on the front-end. Most of this time is tied up in downloading all the components in the page: images, stylesheets, scripts, Flash, etc. Reducing the number of components in turn reduces the number of HTTP requests required to render the page. This is the key to faster pages. Combined files are a way to reduce the number of HTTP requests by combining all scripts into a single script, and similarly combining all CSS into a single stylesheet.

CSS Sprites is another way to reduce the number of requests but we wont be handling sprites in this article.

So combining of the javascript and CSS files, you can do this either by manually putting all the javascript files in one large file or let a script handle the combining for you. I think I'm gonna choose the latter. The combining script I use on this site is created by a dutch programmer called Rakaz and can be found at this link: Make your pages load faster by combining and compressing javascript and css files

This PHP script is awesome, it not only combines your files but also compresses it and stores a cache for instant response time. So just follow the guidelines at the page above and you'll be speeding up your web site in no time. For this site it made a noticeable difference and cut down the load time from 4.69 sec to 3.55 sec.

For Nucleus CMS users I have tweaked the script a little for ultimate usability, read on below.
I have been using the Nucleus content management system for a few years, and I really like it. I once installed the Drupal on my Dreamhost server, and it was really slow compared to nucleus. The nucleus core is lightweight which makes it pretty fast, but not fast enough for my sluggish server though. It still makes a lot of SQL queries and has to read and parse templates which takes a lot of time. So how do we solve this problem you ask? One solution is; by caching your web page server side.

There are 2 plugins available for caching that I know of:


I never used the NP_CacheLite, but I took a look at the code and I didn't really like it. This plugin gives you the possibility of putting dynamic content between no cache tags in your skin, which means it still has to fetch your skin from your database. Maybe it's good for some websites, but not for this one.

I went for the NP_Cache plugin, a fully cached solution for your website. Using a full cache of your web page is great but it comes with some glitches. Everything is static, this means the cache file has to be deleted every time a visitor comments on a item, or gives a rating, or when a user logs in for example. So everything which used to be dynamic has ceased to work. A few examples of plugins which won't work are NP_Captcha, NP_Views, NP_ Refer. You can address this issue by getting some dynamic content through an AJAX request.
I have been wanting to write this article for quite a time now, and today I found the time to do it. First off I want to say I'm not an expert or something when it comes to optimizing websites but I try to do my best, and share my thoughts and findings with you guys. This article will explain how I reduced the load time of this nucleus website from approximately 8.28 sec to 1.74 sec. Why is this important, well because:

Recent research shows that website users will not wait longer than 4 seconds for a website to load. After 4 seconds, customers will leave the site and seek an alternative site. Alarmingly, the research also shows that if a site fails to load within 4 seconds, users will be left with a negative brand perception.

This website is served by the well known hosting service DreamHost. I have been very pleased with their services so far, they provide plenty web space and bandwidth for a blog (for sure) and their customer support is also awesome. The only lack is their servers aren't the fastest around especially when you make a lot of http requests and SQL queries, but hey what can you ask for such a low price.
A few days ago I was looking for a php function that showed the date/time format like on the site Digg (ex: 15 min 20 sec ago). I found two different php functions on the internet that almost achieved what I was looking for, at these links:

woork.blogspot.com/2007/10/time-and-date-difference-using-php.html
drupal.org/node/61565

But it wasn't exactly what I wanted so I wrote my own php function for it, check it out below.

function timeAgo($timestamp, $granularity=2, $format='Y-m-d H:i:s'){

        $difference = time() - $timestamp;
       
        if($difference < 0) return '0 seconds ago';             // if difference is lower than zero check server offset
        elseif($difference < 864000){                                   // if difference is over 10 days show normal time form
       
                $periods = array('week' => 604800,'day' => 86400,'hr' => 3600,'min' => 60,'sec' => 1);
                $output = '';
                foreach($periods as $key => $value){
               
                        if($difference >= $value){
                       
                                $time = round($difference / $value);
                                $difference %= $value;
                               
                                $output .= ($output ? ' ' : '').$time.' ';
                                $output .= (($time > 1 && $key == 'day') ? $key.'s' : $key);
                               
                                $granularity--;
                        }
                        if($granularity == 0) break;
                }
                return ($output ? $output : '0 seconds').' ago';
        }
        else return date($format, $timestamp);
}