How to Make Your Website Insanely Fast

-

Get with the program!  It isn’t 1996 anymore – website visitors today are about as tolerant of slow-loading websites as they are of the old dial-up modem sounds we all used to listen to in order to connect.

But the thing is, it isn’t just visitors that hate slow sites – Google and other major search engines now use site speed as a ranking factor.  In other words, you’ll tick off readers as well as the search engines if you force both groups to wait on overly-large images, excess HTTP requests and other site elements that can slow down load times.

So, with all of this mind, if you undertake only one SEO task this week, make it putting the following site speed best practices into effect in order to make your website insanely fast:

Reduce HTTP requests by combining images into CSS sprites

A major factor that determines your site speed is how many HTTP requests need to be sent before your website is fully loaded. Given the complex layout of most websites these days, it’s not uncommon to have dozens of images that must be loaded whenever you try to access the site.

For each image loaded, an HTTP request is sent. As a result, using more images in your website’s layout leads to more HTTP requests – which adds to the time it takes to load your website, as the total size of all the images downloaded together is much larger than if only one image is requested.

The solution here is to compress and combine all of your website layout images using CSS sprites.  Using this technique, you can significantly reduce the amount of communication that occurs between a visitor’s browser and your server by addressing the number of HTTP requests that are sent, as well as the overall size of the image that must be downloaded before your website is loaded.

To get started with this technique, check out the Spriteme tool, as well as the instructions found on this page that explain the process of combining images into CSS sprites.

Optimize images used on your website

There’s no doubt that using images on your website makes your pages more visually appealing – but it’s also clear that every picture you add to your site has the potential to slow it down.  Since returning to pages composed entirely of text is pretty much out of the question at this point, it’s important to understand how to optimize your site’s images according to SEO best practices.

A study by The Poynter Institute, The Estlow Center for Journalism & New Media, and Eyetools.com revealed that bigger images are more likely to draw in visitors and hold their attention, compared to smaller images. In fact, according to the study, an experiment on smaller images vs. larger images showed that 600% more people pay attention when bigger images are used.

Unfortunately, while using big images on your website can be effective in drawing people to your content; the bigger the images you use, the more bandwidth is required to access your site and the slower it becomes. When you use too many images, your site becomes so slow that people will close it even before they have the chance to view the images.

In most cases, the solution lies in optimizing your images using smaller file sizes that still retain their quality and impact.  You can significantly reduce the size of each image on your site by compressing, resizing or optimizing your picture files before uploading them to your server.

However, it’s that “before” part that many webmasters miss.  If you use WordPress, you’re probably aware that this popular site management tool allows you to upload full-size images to your site and then display a resized version in your articles.  These changes are made on the fly and don’t require any extra effort on the webmaster’s part in terms of modifying or compressing image files.

But unbeknownst to most WordPress users, most browsers will first load the full image before noticing WordPress’ command to resize the image – eventually adding to the time it takes to load your site. As you might expect, you can prevent this by resizing your images to the exact sizes you want before uploading them to your site.  Specifically, you can:

  • Resize your images with this tool provided at ImageOptimizer.net.
  • Optimize your images to remove unnecessary bytes with Yahoo Smush.it
  • If you’re a WordPress user, you can install the WP Smush.it, a WordPress plugin that automatically optimizes and reduce the size of each WordPress image you use.

Use a CDN

You can also speed up your website by making use of Content Delivery Networks (CDNs) – large collections of servers housed in multiple locations all over the world.  Basically, when you upload your content to a CDN, several copies of your website will be stored on different servers in different countries – ready to be served to people visiting your website from nearby locations.

As a rule, one of the factors that influences how fast users will be able to access your website is their location.  For example, a user in the US will be able to access a website hosted in the US much faster than a user based in Germany will be able to load the same US-based pages.

By using a CDN, your server network will automatically serve up the version of your site that’s hosted on the nearest server, instead of serving up the same, locally-hosted version of your website to everybody.  The result?  Faster website load times and happier users overall.

If you’re intrigued by the potential of CDNs, check out MaxCDN and Amazon CloudFront – two great services that can help walk you through the process of transitioning to a CDN.

Reduce the number of plugins you use

Another step towards making your website lightning fast is to significantly reduce the number of plugins you use on your site.

Not only will multiple plugins slow down your website, they actually make your site more vulnerable to potential security threats. This is especially true if you use an open source CMS system like WordPress, as each plugin is coded by a different person – resulting in inconsistent code and new security loopholes.

Besides, the majority of the things you use plugins for could be coded into your theme, including:

  • Social sharing buttons
  • Opt-in forms
  • Calls-to-action
  • Archives
  • Comments

Whenever you think about installing a plugin, ask yourself these two questions first:

  • Is it necessary to have the feature the plugin provides?
  • If it’s necessary, can it be coded into my theme?

If it’s possible to add your desired functionality to your site’s theme – rather than install yet another plugin – talk to your web developer about adding the necessary code in order to keep your load times fast.

Avoid hot-linking or linking to external images

One bad habit that plenty of webmasters fall into is embedding images that are hosted on other sites or servers into their articles – often because seems easier to do than to go about downloading, resizing and uploading images on their own.

Unfortunately, hosting your images on another server won’t benefit you. Not only can doing so set you up for potential copyright violations (especially if you don’t have permission to hot-link to the images in question), doing so can actually make your site slower.  When a reader visits a page on your site that uses a hot-linked image, the server will have to request content from your website first before requesting the image from the other server.

As a result, any of the following situations could occur:

  • If a large number of people are trying to access the server where your image is loaded, it could slow down or even block access to people who are trying to access files from external sources. This, in turn, results in your website running extremely slowly.
  • The external server could be down; in which case, your visitor’s browser will keep trying to pull images from a server that isn’t working, ultimately affecting your own site’s speed.

The obvious solution to this problem is to avoid hot-linking altogether and to host all of your site’s images on your server (following the tips outlined earlier in this article to optimize these images for site speed).

Cache your website

Finally, you can speed up your website by implementing caching system.  Essentially, this means that, when a certain page on your website is accessed by a user, a version of that page is automatically saved on the users’ computer so that it can be served up immediately – instead of being reloaded – should it be accessed again in the future.

When set up correctly, this prevents new requests being made to your server every time the same page is loaded, making your site faster for new and returning visitors as a result.

If you don’t yet have a caching solution installed, check out the Varnish program, which can be easily uploaded to your server.  Or, if you’re a WordPress user, you can install the W3 Total Cache plugin which will handle several different caching functions automatically.

Certainly, these are only a few of the different steps you can take in pursuit of an insanely fast website.  The science behind site speed is complex and highly-technical; though, by making these recommended changes, you should be able to improve your site’s load times sufficiently to satisfy both discerning visitors and the search engines’ indexing programs.

Image: JD Hancock

3 Responses

  1. Michiel

    Thanks for the tips Sujan! I am planning to redesign my site soon and these are some helpful suggestions in improving the load time. I heard about CSS sprites before and it seemed too technical for me to implement, but the SpriteMe tool you link to here looks like a good tool to try and build a sprite with.

  2. Vishal Taragi

    nice post Sujan! I was looking for some tips to reduce my web load time and came across your blog.
    Thanks again and keep posting more tips.

  3. Lorenzo

    Another tip is to take a look at your existing plugins with the P3 Performance profiler plugin. It is an easy way to gain insight on the slow plugins on your site. Then you can deactivate these plugins in favor of alternatives that are faster and use less resources.