RSS Directory

As I brought out in chapter 2 of Blog Traffic Made Easy, statistics show that you only have about 3 seconds to capture the attention of your website visitors before they get bored and go somewhere else. You have a lot to do within those first 3 seconds, and you don’t want to waste it all on having to wait for your page to load. I’ve received a few emails from people telling me that they’ve done all they could think of, but their site still takes too long to load. Even John Chow is tweaking his new theme as much as possible to improve its load time.

As I was designing SiteFever’s new theme, I wanted to optimize it for speed as much as possible. I ran speed tests during each stage of the optimization process to record the effects it had on my site. Here’s what I came up with:

NOTE: To test my page load time, I used Numion’s stopwatch tool. The average page load time before I did any optimization was 4.268 seconds.

1. Cache static objects
The first time a person visits your site, the page requested may have to make many HTTP requests for stylesheets, images, flash, etc. By instructing your site to cache certain static objects, a browser will only have to load these objects once. Subsequent pageviews by the same visitor will require much less requests, thus significantly reducing your page load time. 

Here’s what I inserted in my .htaccess file:

ExpiresActive On
ExpiresByType text/css “access plus 2 weeks”
ExpiresByType text/javascript “access plus 2 weeks”
ExpiresByType image/png “access plus 1 month”
ExpiresByType image/gif “access plus 1 month”
ExpiresByType image/jpg “access plus 1 month”

The above code will cache my stylesheet and all javascript for 2 weeks and all .png, .gif and .jpg images for 1 month.

After making this optimization, my average page load time took 3.214 seconds.

2. Merge all stylesheets
It’s a proven fact that a browser will load one large stylesheet much faster than multiple smaller stylesheets. I noticed that the threaded comments plugin came with its own comments.php file and stylesheet. This meant all of the comment styles in my original stylesheet were no longer being used. I removed all of the unused styles and moved the new threaded comments styles from briansthreadedcomments.php to style.css so that I now only have one stylesheet to call.

After making this optimization, my average page load time took 2.637 seconds.

3. Display 7 posts per page
This is a technique that John Chow also mentioned he used to help reduce his page load time. I was displaying 10 posts per page (including my homepage), now I am only displaying 7.

To change these settings using WordPress, login to your admin panel and go to Options > Reading > Blog Pages.

After making this optimization, my average page load time took 1.811 seconds.

4. Compress images
Using XAT’s Image Optimizer program, I was able to reduce many of my image sizes by about 40%. I then re-uploaded the newly compressed images and measured my load time.

After making this optimization, my average page load time took 1.653 seconds.

5. Cleanup code
Lastly, I simply went through all of my theme’s files removing duplicate and unused code. I also removed unnecessary comments and line breaks throughout the files thus reducing the size of each file. I would only recommend you try this step if you are familiar with PHP and HTML, otherwise you could really mess up your blog! Even if you do feel comfortable doing this, you should always backup your files anyway.

After making this optimization, my average page load time took 1.493 seconds.

In the end, five simple optimization techniques that took me no longer than an hour reduced my average page load time by 35%! Not bad.

Be sure that you optimize your blog to load as fast as possible. Doing so will allow you more time for the real “meat and potatoes” of your site to make a good first impression and will keep your regular visitors happy.


Category: Search Engine Optimization (SEO)
Article posted by: Neon on September 2nd, 2007



Trackback URI | Comments RSS

16 Comments to “Tips to Speed up Your Load Time” »

Comment by Blogs For Money
Sep 02 2007 at 3:13 pm

Good tips.

It’s worth noting the comment about stylesheets applies to external javascript files too – if you have loads of them, consider combining them so your browser doesn’t have to fetch so many seperate files (each request has quite an overhead).

I like to work with multiple files to keep my CSS and Javascript maintainable, so I usually create an ASP script (PHP could do the same) that just includes all the other CSS files, so I can work with them in 10 files, but the website only serves 1 up. If you do something like this, be sure to make sure you send the correct headers for caching, since by default dynamic scripts will be refetched every time!

(Comments wont nest below this level)
 
Comment by jeni
Sep 02 2007 at 5:45 pm

Wow that’s impressive! I just checked my site and it took 5 seconds to load:( guess I have a lot of work ahead of me! I have a problem where it seems like my Google ads “hang” and cause my site to load really slowly on some computers. I have no idea how to fix that.

(Comments wont nest below this level)
Comment by J. Robinson
Sep 02 2007 at 5:51 pm

Your site seemed to load pretty quickly to me. As with any blog, the content on the homepage changes a lot. For example, sometimes I may have some posts with lots of pictures and sometimes I will have some with lots of text. Obviouslly, the load time for your site will vary depending on the content at that time.

Are your Google ads called through a plugin or did you code them right into the template? If they are called through a plugin, that may be what is slowing it down. I have not really heard of Google ads taking a long time to load.

Comment by jeni
Sep 03 2007 at 5:17 am

My google ads are pasted right into the site template. They load fine on my computer, but when I check things out at my boyfriend’s house, they usually take several seconds to load, and since they are near the top of the page, the whole site hangs until they load. Very annoying. Not sure if it’s the ads, or if it’s something else on the site. I’m still learning! I’ve taken a lot of other widgets and banners off my site since they caused my site to hang as well.

 
 
 
Comment by Pranjal
Sep 02 2007 at 11:36 pm

well thats great, mine i tested around 00.27.00 secs not bad for a content rich site. ill optimize the Css to a singlesheet and the javascripts problem is todays javascript from technorati and social networks are like bloatware.

(Comments wont nest below this level)
 
Comment by Pranjal
Sep 02 2007 at 11:38 pm

i also suggest a little better logo, this one really sucks, like the web 2.0 i made few days back. ;))

(Comments wont nest below this level)
 
Comment by Mikael
Sep 03 2007 at 5:26 pm

Doesn’t the load time depend on the speed of your connection? I’m currently at a slow hotel connection and my blog takes around 1min 30sec to load 😀 And I know that isn’t a standard :)

(Comments wont nest below this level)
Comment by J. Robinson
Sep 03 2007 at 5:38 pm

Yes, of course the load time depends on your connection as well. Last month I was skipping around to different hotels and I know how difficult it can be to get a decent connection there, so I feel your pain.

When you measure your page load time, you want to use the same speed connection that you assume most of your visitors will have. For example, DSL or Cable.

It’s best to use it when “plugged in” and not on a wireless connection because your connection speed can vary over a wireless connection.

 
 
Comment by Sucker
Sep 03 2007 at 5:30 pm

I got a 3.875. Not too bad, but I’ll be making some changes – thanks for the tips!

(Comments wont nest below this level)
 
Comment by Mikael
Sep 05 2007 at 2:58 am

I’m not that technical. Where in the htaccess file do you add that code John? I’ve tried and got an 500 error so I had to remove it again.

(Comments wont nest below this level)
Comment by J. Robinson
Sep 05 2007 at 8:28 am

Mikael,

You should just be able to add it to the end of the file. Copy and paste the code quoted above exactly as it appears. If it’s still giving you a 500 error, you can try looking at your server’s error logs to try to find out what’s going on.

 
 
Sep 06 2007 at 2:55 pm

[…] new Sitefever custom theme is very easy on the eyes and has been optimized for fast loading time. Despite all the revenue generation it appears surprisingly uncluttered. I tested the theme in […]

(Comments wont nest below this level)
 
Sep 15 2007 at 11:36 pm

[…] a nice article with some tips on speeding up your load time, where I learned about Numion’s Stopwatch tool — a nifty utility that can show you how […]

(Comments wont nest below this level)
 
Name (required)
E-mail (required - never shown publicly)
URI
Your Comment (smaller size | larger size)
You may use <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> in your comment.

© 2017 SiteFever.com c/o Neon.