Your website could be the most beautiful site in the world but it does you no good if it takes forever to load. Let’s face it. People are impatient and a slow website prevents potential customers from completing their purchase.
When I go online shopping, I expect pages to load at worst within 5-10 seconds. Any longer than that and I get antsy or I leave the store altogether.
Sure, some people may be more patient than I am but why take the chance? Play it safe and make your business website as fast as possible.
Before you begin however, the first thing you need to determine is how fast is fast enough? This extent of your website optimizations largely depends on the analytics and demographics of your web visitors.
For example, 3 years ago when my wife and I first launched our online store, over 35% of our customers were using dialup. As a result, we had to make drastic cutbacks with our website design in order provide a brisk shopping experience assuming only a 56K download rate.
Today, only 2% of our customers are using dialup (thank goodness!) so we can safely add more multimedia content without affecting the user experience.
To determine the maximum size of any given page, I usually multiply 5 seconds by the weighted average bandwidth of my web visitors. For example, if most of my visitors are using DSL, I might assume a 1Mbit download speed and decide that 5Mbits is the maximum size any given webpage should be.
This isn’t an exact science. Ultimately, you need to decide for yourself how fast your website needs to be.
In all cases however, faster is always better. As I alluded to in my last mailbag article, website speed isn’t always a function of your webhost. In fact most of the time, the webmaster is to blame for a sluggish website and not a slow server. This article will describe some tips on how to speed things up.
Decide What Is Most Important And Reorder The Loading
Making your website faster is not always about cutting out images and content. Sometimes, you might like your site exactly the way it is and you don’t really feel like changing anything.
If this is the case and your website is slow, then often times you can get away with simply prioritizing the way your page loads.
What do you want the user to see first? In most cases, your visitors won’t mind a slower site as long as the important stuff loads first and the fluff finishes later.
For example with MyWifeQuitHerJob.com, I always make sure that all of the juicy content pops up first before the advertisements do. That way if the ads are a bit slow to load, it doesn’t drag down the entire blog.
Webpages always load in sequential order, so you should always place the stuff that you want loaded first at the top of your page and the least important stuff at the end of your html document.
For example, even though my 728×90 leaderboard ad appears at the very top of my MyWifeQuitHerJob.com, I make sure it loads last by performing the following steps.
document.getElementById(“banner728”).innerHTML = “desired ad banner code”;
This code finds the placeholder “banner728” that I set above and inserts the ad banner into the <div>. Because this script is at the very end of the file, it loads last after everything else.
Don’t Use HTML Image Resizing
A common mistake I see that many newbies make is to rely on html to shrink and resize images. While this technique works and seems harmless, it will absolutely kill the performance of your website.
The reason is because the entire original image must be loaded before it is displayed even though you are only showing a much smaller image.
To prevent yourself from falling into this trap, make sure you take the time to shrink the image to the desired dimensions before displaying it on your site. Don’t just pull images straight off of your digital camera.
Optimize Your Images
The human eye is much more forgiving of image quality when looking at a standalone image on a computer monitor. Therefore, you can get away with much lower quality images for your website.
Make sure you optimize and shrink your images as much as you can before displaying them on your page. I often choose a JPEG quality of 50 percent or less using Photoshop with the images on my sites.
If you are using GIFS, make sure you are not using a larger color palette than you really need. If you can get away with only 16 colors, then choose your GIF with only a 16 color palette.
Analyze all of your GIFS to make sure that none of the color slots are being wasted by duplicates.
Host Video And Large Images With A 3rd Party
Unless you are hosting your website on a beefy set of servers, rich multimedia content will slow down your site to a crawl. In general, it is much more economical to host your videos and larger files on a third party service with a more robust infrastructure that better supports streaming.
For example instead of hosting videos on your own server, why not use YouTube or Vimeo? If you want to own the content that you produce, you can also pay and use a service like Amazon’s S3. Leave the high bandwidth content for the big boys.
Avoid Using Third Party Code Or Hotlinked Images
Whenever you hotlink an image or leverage code that is hosted on another server, you are putting the speed of your website at risk. If the third party server is slow or down, it could also take down your own website as well so it is important to minimize the use of 3rd party code.
In addition, every time your site accesses a third party server, a DNS lookup must be made which can take quite a bit of time depending on network congestion.
A few hundred milliseconds of delay may not seem like much but if you are pulling code from 10 different servers, these lookups can add up to several seconds of latency.
Take Advantage Of Caching And Compression
The bulk of most websites are text and text compresses extremely well. That is why if you enable compression on your server, you can reduce download times by up to 75%.
Unfortunately, not all shared webhosts have compression enabled on their servers. If your website is on a shared webhost, be sure to ask them if their servers support mod_deflate or mod_gzip.
If compression is supported by your server, make sure you enable it on your website by following the steps outlined in this article. If you are using WordPress, the WP-SuperCache plugin already handles compression for you.
In addition to compression, you can speed up your site by caching commonly accessed pages on your website. For our online store, I actually take this one step further and create static pages for heavily trafficked webpages that do not change very often.
Chances are, someone out there is probably viewing your website on a much slower connection than your own. And you always need to account for the lowest common denominator in order to maximize the profit potential of your online business.
I was pretty shocked to see that our online store still has dialup customers! If I still have them then you might too.
- 4 Things to Avoid with the Product Pictures on Your Online Store
- The Danger Of Hotlinking – Web Related Lessons I Learned This Week
- An Inside Look At How My Online Store Redesign Has Increased Sales
- How To Prevent Comment Spam From Crashing Your WordPress Blog And Taking Down Your Server