While it may seem that the speed of your website doesn’t matter much when you’ve on a fast internet connection, around 40% of the US still doesn’t have a broadband connection and mobile data rates can be quite bad, especially if you live in big cities.
You’re probably already aware that the load time of a web site became a ranking factor for Google some time ago (albeit a minor factor) . However, that’s not the only way a faster site can see better search engine rankings, gain more traffic and increase it’s income.
Research has shown that the faster a web site loads, the more likely users are to stay on the site longer and interact with it more. This is important to search engine rankings as Google takes into account the number of people who click on a search result, then return to Google to try a different search result. This bounce rate can affect your rankings and if your site is slow, people are more likely to use the back button and try a different site. So a faster site can help to reduce this bounce rate and over time, increase your rankings.
Search engine ranking isn’t the only reason to improve the speed of a site though. A faster site is more likely to leave visitors with a better overall impression. This can improve trust which can lead to more sales if you’re selling a product or service or more repeat visitors for content sites which generate revenue from selling ad space.
There are many ways to decrease the load time of a web site. Some make sense only in certain cases such as sites with high volumes of traffic or large amounts of video or other high bandwidth content which can make use of Content Delivery/Distribution Networks. Some sites can see big performance increases by loading content on demand using AJAX, however, this can require extensive work to redesign the site.
What I’ll focus on here are the fastest, simplest things you or your webmaster can do to improve the speed of your website with the least amount of effort.
Turning On Compression On Your Web Server
Compressing and minifying script and style sheet files is extremely easy and can result in a significant decrease to load times. There are many free tools online that will do this for you. Minifying is the process of combining multiple files into as few as possible and optimizing the way the code is written so that it’s as small as possible. Compressing is the same as when you compress any other file, basically condensing repetitive data.
Do you use WordPress? You’re in luck, you can skip this section and just use one of the following plug-ins to do all the work for you:
Before you minify and compress your script files, combine them into as few files as possible. A web browser has to check each file that a web page references to see if it already has the most current copy or not, this increases load times. Fewer files means fewer times the browser has to make a request to your web server.
Because minifying to the smallest size possible results in files that are difficult if not impossible to read and work on later, you’ll want to keep copies of your original files and use them in your development site. Keep the minified versions for use in your public site.
Once you’ve merged your files, if possible, use the tools below to compress and/or minify them. I’ve tried many of the tools available and found the YUI Compressor to produce the smallest files which still maintain a wide range of web browser compatibility.
Minimizing Image File Sizes
For many web sites, images will be the largest contributor to load times. Making sure your images are as small as possible and also in the correct format for the number of colors they use and how they are used can greatly speed up your web site. Without getting too deep into the topic and explaining when to use which format and how to pick the best color depth, I’ll point you to a free online tool that will not only compress your images very well but decide if it’s best to save them as a GIF or PNG file and automatically change them where needed.
If any file’s have changed from PNG to GIF or vice versa, you’ll need to update any references to these files in your site’s code. If this is too big of a pain, I’ve got another tool which won’t change any file formats. I’ve also listed what is probably the best image compressor tool you can find but it’s not free, it’ll cost you $35 and up depending on the license you need. It’s an excellent tool though and results in smaller file sizes than any free tool I’ve found.
Advanced Minimizing Image File Sizes – CSS Sprites
Optimizing the compression of your images will probably get you the biggest bang for your buck in terms of reducing the amount of data that needs to be downloaded to load your web site. There is, however, another way to optimize your images even more and reduce the number of images that need to be downloaded; a CSS feature called CSS Sprites.
I don’t recommend using CSS Sprites unless you have the time or resources to do a bit of HTML modification on your site. There are free tools which can do a lot of the work for you but you’ll still have to make changes to the HTML of your site. Depending on how your site is designed, how much of your HTML is generated on the web server and how many images your site uses, this can be a little work or a lot.
CSS Sprites basically allow you to place multiple images into a single image file, then use CSS to tell the web browser how to extract each of those individual images again. This helps your site’s performance in two way: First, combining multiple images into a single image will almost always result in a smaller image file, usually significantly smaller. Second, a visitor’s web browser only has to download a single image instead of many. If your site has many images, this can speed things up quite a bit as the browser doesn’t have to download each individual one or check that it has the latest version.
Implementing CSS Sprites manually can be a pain and for existing sites, it can require a lot of work to redesign the HTML and CSS. Luckily, there are some free, online tools that can do the work for you. Depending on how your site is designed, you may still need to manually modify some code.
There are also some older browsers and mobile browsers which don’t handle CSS Sprites propery or at all so that’s something to keep in mind if you’re going to use them.
If you want to give CSS Sprites a try, probably the best online tool to take care of the grunt work for you is SpriteMe. SpriteMe will take the web page you’re on, gather up all the images it can use and combine them into one or two sprite images. It will also do the dirty work of building all the CSS for you which you then incorporate back into your site and replace the image tags for the images used in the CSS sprite(s) with DIV tags that have the proper CSS class name.
Finding Other Performance Issues The Easy Way
There are a couple of good add-on’s for FireFox and Chrome that will check for a wide range of performance issues and suggest how to fix them. Personally I like to use FireFox for this. Start by downloading FireBug from FireFox. Then, grab either the Yahoo YSlow or Page Speed add ons. Page Speed is also available for Chrome.