Optimizing for Speed: How & Why

Categories Articles

The changes in technology have created a bell curve in terms of typical access speeds, and the unfortunate problem is that most designers are still stuck at the top of the curve.  They don’t seem to have noticed its downward plunge.

What happened is that in the earliest days of the web, most home-based users were stuck with dial-up connections, where it could take up to 15 minutes to load a single image that by today’s standards would be considered low resolution.  A truly high resolution image could take an hour or more, and may have required multiple attempts to download completely.

Then suddenly ADSL arrived and within less than 2 years, most of the developed world was connected via ADSL.  Those who could not obtain an ADSL connection due to geographic location were largely forgotten by designers who were keen to exploit the greater access speeds that were now possible.

This eventually led to the emergence of a “digital divide”, where people from rural areas and undeveloped nations were left behind, unable to reasonably access a majority of the available websites.  Savvy designers, aware not only of the existence of this problem, but also the enormous buying power available from the Third World (at around this time, the new, more open China was still emerging from the womb and India had still not yet tasted the sweet joy of operating a majority of the world’s English language call centers), and were still developing speed-optimized sites for non-ADSL users.

One of the dirty little secrets of the web design industry, however, is that most designers are not the least bit savvy when it comes to the needs of users.  Many of those designers and developers who fearlessly faced the challenge of the 9.6K connection have retired.  They belong to another era, but the need for the speed optimization skills they developed has suddenly returned to us at full swing.

Why?  It’s because that steep downward stroke of the curve coincided with the massive uptake of smart phones.  Yes, we have developed 4G technology that allows fast internet connection to mobile users, but it isn’t flawless, most of the world still doesn’t have access to it, and many communication providers severely limit download speed once a certain data limit has been reached.

Most people won’t wait for a site that’s not loading quickly enough, even a site as awesome as yours.  Once they’re gone, the usually won’t ever come back.  That’s why you can’t afford to lose them due to your site taking too long to load, or operating sluggishly.

Now that it’s clear why we need to optimize for speed, let’s take a look at how we can do that.

Advertisements

Third party advertisements are usually the main offender when it comes to slowing down page loading.  Unfortunately they are usually served from offsite, so you don’t have a lot of control over what gets loaded and there’s a natural drop in speed due to content being fetched from multiple locations.

If your ads are served on a pay-per-click basis, if you have a unique affiliate or tracking code, and if your contract allows you to make a local copy of the ad, you should contact the ad provider and ask if you can serve the ad from your own server, explaining the reasons why.

It would also be a good idea to serve up the fewest number of ads you possibly can, with zero being the ideal number.  Not everyone can afford the luxury of an ad-free website, however, so just do what you can.  And under no circumstances ever display those annoying video ads unless your site is a dedicated video site where people are expecting to see them.  Nothing is more aggravating than connecting to a website and finding it is plastered with dozens of video ads when your phone company has already slowed your bandwidth to a crawl.

All those video ads contribute to a user’s download limit, and they’re not going to appreciate it.  You might as well be taking money straight out of their pocket, because it’s the exact same thing.  Apart from that, though, those video ads are slowing your site down to the point of it being ridiculous.

Images

There are plenty of image optimizers online, but they don’t really do a better job than optimizing the image on your own computer, and they don’t always give ideal results.  The Linux version of GIMP does an excellent job of processing images, usually shrinking the byte count to an impressive degree.

  • Resize or crop the image to the maximum size you need to display it at
  • Crop out any unnecessary parts of the image
  • Set image pixel depth to not more than 72 ppi
  • Experiment with different compression settings until you find the sweet spot where there is no significant visible loss of quality but the file size is still really small.

The actual number of bytes in a bitmap will be determined by the physical size of the image and the type of compression applied to it.

Videos

You should never autoload or autoplay video content unless the user is expecting it.  It is unwise to display more than one video player per page, as each one will consume resources.  If you want to offer a choice of different videos to play, it is better to have one player and use thumbnail images to allow the user to choose which video to play.

Video content should always offer a choice of compression levels.  Not every user will appreciate being forced to watch your 1080px masterpiece at full resolution.

Code

It’s always a good idea to optimize your code, especially if it comes from a third party source.  Many developers are extremely lazy and simply plug in some JavaScript that was written by somebody else without performing any editing at all.  This is a mistake because there are nearly always some functions that your application doesn’t need, so including them is just slowing down your page for no reason.

The interesting thing is that the popular pass-time of minification probably isn’t necessary in most cases and will often not make a lot of difference.  The exception is when you have a big, sprawling application with thousands of lines of code, but in general white space characters will still take up only about 5% of the byte count.  You have to weigh up whether the loss of easy debugging and code review is worth any speed gain you get from stripping out white space.

When your code is unminified, users can report errors they encounter at the specific line the error occurred on.  This is impossible if all your code is minified into a single line.

Summing Up

Optimizing your website is extremely easy and mostly just a matter or common courtesy.  Good manners are about making people feel as comfortable as possible in all situations.  Every user will appreciate a well-mannered website that doesn’t get in the way of what they are trying to do by pushing unwanted or unnecessary content onto their screens without a good reason.  Taking the time to speed up your website will repay you with better traffic flow and possibly a better conversion rate.

header image courtesy of  Ivan Bobrov

Emma Grant is a professional freelance content writer from Ireland. Over the past three years she has travelled the world while running her business from her laptop. You find her at www.florencewritinggale.com