LinkedInGoogle+Facebooktwitter
Orantec - Online Intelligence

Making the web faster

Making the web faster with good codingBy Nick Harding - Web Developer.

They say the average user waits 2 seconds for a web page to load before clicking off somewhere else; I suspect this is largely true. Everyone has suffered that frustration and stabbing of the F5 key to try and get a page to load at some point.

As web developers, we generally try to make our sites load as fast as possible, however, there are a multitude of factors that influence how quickly a web page loads.

Not all connections are equal

The one thing we have no control over is an end user’s internet connection. Whilst most of us now take fast broadband for granted, there are still some users that rely on good old 56kbps dial up connections. This can be a problem if your website is filled with non-optimised images, or if you have a JavaScript heavy front end.

The net result is that a website that takes 1 second to load on your screen could take a few minutes elsewhere. However, as I said, we have no control over this except to make our sites as streamlined as possible.

Location, Location, Location

Another factor that influences load times is the distance to the website’s server; it’s a simple fact that if you are in London and viewing a website hosted in London, it will (should) load faster for you than someone looking at it from Sydney.

One of the ways to resolve this is by using a Content Delivery Network or CDN. This is particularly useful if your website uses a lot of scripts or static files like images.

Basically, a CDN is a network of servers located around the world. Your site’s static files and scripts are cached and distributed to all of these servers. This means that when Mr Sydney loads up the London website (that is now on a CDN) he is still seeing the same website, but the static content is all coming from a server much closer to him, reducing the load time significantly.

Order, Order

When a website loads a page on your computer or device, it does certain things like download and read the HTML code, the stylesheets (CSS) and, as with most modern sites, some JavaScript files. The order it does this is from top to bottom.

Traditionally, links to stylesheets and JavaScript files, external libraries and things such as Google Analytics are added into the head tags at the top of the page. The problem with this comes when the browser starts making external calls to get these analytics files and scripts. These can actually block the page loading until the call is complete.

One popular way to resolve this is to put plugins like JQuery, Google Analytics and other external libraries at the bottom of the page (just before the closing <BODY> tag) allowing the page to render in the browser before making these external calls.

Ditch the Whitespace

We all like nice neat stylesheets, neatly laid out HTML and JavaScript. It’s great, it looks awesome and is easy to read. Unfortunately, all those gaps are actually bytes. A bit like the Internet’s equivalent of Dark Matter.

However, we can resolve this by removing the unused space and using minified files. I usually keep two versions of a CSS or JS file i.e. common.css and common.min.css. The standard one is used in development and the latter in production.

Minification works by removing all the whitespace and comments from a block of code and condensing it effectively into one big long continuous line. The results can be dramatic with large JavaScript files being reduced by up to 70%. The smaller the file size, the faster it loads!

There are loads of tools out there to make minification easy. If you use Visual Studio, then Web Essentials has an easy context tool to get the job done. You can also pop along to CSS Minifier to do it on the web.

Cache Up

Another thing we can do to increase speed and load times is leverage browser caching. Things like logos and header images are unlikely to change often, so why serve them over the server every time when we can ask the browser to remember them, or store them in its cache?

We do this by manipulating the http cache headers to effectively tell the browser that it’s ok to store images as they don’t change often. The length of time can be controlled too, making this a useful vehicle in the speed race.

There are different ways to do this depending on your server, so I won’t go into technical details here but Mobify is a useful place to start, as it will give you a thorough understanding of how http caching works.

Hardware

Taking all of the above into account, this could all fall apart if your server under performs. When hosting a web site, you have a couple of choices. Get your own server or buy shared hosting. Your own server will always outperform shared hosting (with the caveat that you don’t seriously underinvest in hardware) as serving 1 or 2 sites is much easier on the server than serving several hundred sites on a shared server.

In other words, make sure that where your site is hosted is suitable for the service you want to deliver.

Take some time

An hour or so spent making changes to your website to increase its efficiency and page loading time will not only make your visitors happy, it can help with your Google rankings too as Google takes page speed into account. They even built an online tool to help you get an insight into what your page does and what you should think about changing.

We might only be talking about a second or two saved in loading time, but now go back and read the first line again…

Back

You might also like...