Making the web faster
By 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 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.
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
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.
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.
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.
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…