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:
Just put the following lines in your
Store the
By adding these headers I've reduced the load time of this website for the second page view from 3.55 sec to 1.74 seconds. Actually the page rendered completely in 1.16 seconds, but the loading of the video playlists which is asynchronous added some to the total time. At the left you can see a speed graph created by Safari.
For Nucleus users I also have an additional tip to make maintaining your website even easier. Check it out below.
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>
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.Note: if you use a far future Expires header you have to change the component’s file name whenever the file changes.
For Nucleus users I also have an additional tip to make maintaining your website even easier. Check it out below.
Reducing the number of HTTP requests is the key to faster pages. As read in the best practices for speeding up your web site:
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.
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.
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:
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.
I thought it would be better to split this article in a few parts because some of the methods that will be used are only for nucleus CMS users and others are for all web designers. On the left you will see an image of the load time of my website without using any of the optimizing methods, it fully loaded in a time of 8.28 seconds (measured with Safari).
The following links are the parts of the complete article:
Resources you should explore if you are serious about optimizing your website:
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.
The following links are the parts of the complete article:
- Caching Solutions for Nucleus CMS
- Combining and Compressing Javascript and CSS Files
- Add Far Future Expires Headers
Resources you should explore if you are serious about optimizing your website:
22/11: Blog Tips
Here's a great compilation of blog tips from three bloggers with some experience. The video was created by problogger.net at the Blog World Expo 08.
Recently I was writing some javascript code for my new BMX website, where I had to check several times whether a certain string occurred in a larger string. The best way I know to do this is by using the indexOf() method which returns the position of the first occurrence of a specified string value in a string, and if the string value to search for never occurs it returns -1. You get something like:
Ok, all good. Not to me apparently at the time :), the minus ones were bugging me. I had heard before that it was possible to add custom properties to both prebuilt and custom objects (with the prototype object), so I thought I'll give it a try and this is the function it resulted in.
The function returns true when the string value occurs in the larger string. It's probably useless to most of you, but it was a good lesson in javascript to me about how the prototype object works. Check the clean code example:
var str = "Hello world!";
if(str.indexOf("world") != -1) {
alert("Whoohoo, world occurred in the string");
} else {
alert("It never occurred");
}
if(str.indexOf("world") != -1) {
alert("Whoohoo, world occurred in the string");
} else {
alert("It never occurred");
}
Ok, all good. Not to me apparently at the time :), the minus ones were bugging me. I had heard before that it was possible to add custom properties to both prebuilt and custom objects (with the prototype object), so I thought I'll give it a try and this is the function it resulted in.
String.prototype.inStr = function(str) { return (this.indexOf(str) == -1) ? false : true; }
The function returns true when the string value occurs in the larger string. It's probably useless to most of you, but it was a good lesson in javascript to me about how the prototype object works. Check the clean code example:
var str = "Hello world!";
if(str.inStr("world")) {
alert("Whoohoo, world occurred in the string");
} else {
alert("It never occurred");
}
if(str.inStr("world")) {
alert("Whoohoo, world occurred in the string");
} else {
alert("It never occurred");
}
13/11: Tropic Thunder Trailer
Get Flash to see this video. Item URL: Tropic Thunder Trailer
This movie is just hilarious, it's created by Ben Stiller who is also starring in the movie. The part with the panda bear is just too funny for words, couldn't find it on the internet though.Plot: Ben Stiller, Jack Black and Robert Downey Jr. lead an ensemble cast in "Tropic Thunder,' an action comedy about a group of self-absorbed actors who set out to make the most expensive war film. After ballooning costs force the studio to cancel the movie, the frustrated director refuses to stop shooting, leading his cast into the jungles of Southeast Asia, where they encounter real bad guys.
Website: www.tropicthunder.com
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.
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);
}
$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);
}
Get Flash to see this video. Item URL: You Don't Mess with the Zohan
Check out the trailer for Adam Sandler's new movie "You Don't Mess With The Zohan". It's hilarious; “smell it, smell it, smell it, now take it”
Your website is just one of the billion sites parked on the World Wide Web. Chances are, you don’t think yours will ever get noticed. We hear your cries for cyber attention. Here are five ways to get people clicking on to your site.
1. Make sure it’s professional looking
No one likes looking at website that reminds them of a book report they wrote back in school. Invest in learning a good web design program (Dreamweaver MX and Microsoft Frontpage are good picks), and let your creative juices flow. Make sure it’s compelling, well-designed, and organized. People don’t exactly find it fun to weed through haystacks of cyberfiles to get the information that they want. On that note, don’t make it a heavy site. Putting up some flash intros may be great eye candy, but the average internet surfer only waits 10 seconds for a page to load, and then they’re off to the next.
I am Wesley Luyten, on the net I'm also known as wessite. I am born and raised in Belgium, but I also have Canadian blood running through my body. I'm currently learning for my degree in engineer ICT, and I'm pretty much web addicted. I use a macbook pro to handle my computer business.