Quicker load times for a better user experience

Categories Articles

Recently I found a very intriguing article discussing load times impacting Google rankings. It mentions that people were put-off by 1st page results that took forever to load. So now Google’s ranking algorithm takes into account the total loading time for each webpage. It’s an interesting theory and it is fair to say all of us despise waiting around for a website to finish loading.

In this article I’d like to share a few pointers for speeding up your website. Often times you’ll run a site for years without bothering to clean it up. This often leads to bulky performance which could be avoided using some routine maintenance. If you run a CMS then the process becomes a whole lot simpler.

Research and Testing

There are some great tools available to web developers who wish to run some tests on their website(s) first. You can figure out the general loading time of each asset which helps you nail down problematic areas. Often times advertising networks run external scripts which can lag during high-volume traffic. It’s not always possible to switch onto new advertisers but at least you can be aware of the problem.

Yahoo! YSlow is great and works on nearly every modern browser. You can debug over many different operating systems too. If you’d prefer an online solution try Pingdom or the Google PageSpeed extensions. Browse through the Internet until you find a trustworthy speed testing tool that you enjoy using.

The point is you need to discover troublesome areas before trying to solve anything. How else could you pinpoint the exact reasons for your lag time?

Expanded Hosting & CDNs

Not everyone will feel the urge to improve their server resources. But if you are handling large bursts of traffic this really is a powerful solution. Many web hosts can offer upgraded plans while keeping your existing architecture in place. This means you would have greater CPU performance and read/write times for a bit of extra money.

Alternatively you might consider dividing website resources into two sections – the assets and the content. Page content is typically loaded from a database or parsed through a local HTML file. External resources like stylesheets, scripts, images, or videos could be offloaded to another server to reduce the number of consecutive requests.

One of the most popular choices, MaxCDN, has a wide array of plans for webmasters. Their caching network is global so you know resources are being delivered from the closest possible node. MaxCDN has some of the highest reviews out of many other competitors and the infrastructure is constantly expanding.

Any large CDN(Content Delivery Network) behaves in the same fashion. Assets are loaded onto the primary server which then get copied and distributed to every other node in the CDN network. When a visitor accesses your website the content/database is pulled from your server while the assets are loaded from a separate server – usually much closer to the visitor’s physical location. Webpage load times are improved dramatically and the effects are quite noticeable for desktop and mobile visitors.

Server Caching

If you’re driving 50k unique visitors or more each month it is worth setting up a website cache. WordPress users might try out W3 Total Cache or WP Super Cache which can also tie into CDN networks. Caching doesn’t require an external CDN, it’s just a potential bonus feature if you have many separate page assets.

When a user loads your page the server needs to query the database and then render the page in the browser. With caching all of the DB content is stored locally on the server, and so each new pageload is just reading from a typical HTML file. This is much faster than continual database requests and you will be shocked at the performance difference.

If you do not run any CMS then it’ll be tougher to setup caching on your website. Try consulting the help desk at your hosting company and gauge their suggestions. I do know of some Apache-based server caching extensions but I have never used them before. If you’re serious about speeding up your website please look into solutions for page caching – I promise you won’t regret it.

Combining Assets

This might seem like an obvious choice, but webmasters rarely go back into the filesystem to combine extraneous resources. If you have multiple small PNG icons why not combine them into a single sprite sheet? This behaves as 1 PNG image where you’d change the CSS background position for whichever icon needs to be displayed.

Now instead of many separate HTTP requests for each image you only need one request to obtain all the icons together.

It might also help to combine external CSS/JS objects into one big file. Many jQuery plugins are small yet still require their own separate document. Why not combine and compress everything together? You’ll have less HTTP requests and no extra whitespace.

Basic Spring Cleaning

If you’d like to get started with something easy then look over every nook and cranny in your code. HTML/CSS/JS can be tricky when you let it pile up over the years. Try to avoid overuse of plugins with CMS engines like Drupal or WordPress. These plugins often include their own CSS files which increase HTTP requests and also require more work from the server.

Also check out the filesize of your biggest images, especially the ones which appear on a majority of your pages. Could these images be compressed to a much smaller size? Imagine how 100kb less on every page could affect your website loading times. Then extrapolate this idea to include dozens of re-compressed images. You might also find completely unnecessary HTML elements coded into the layout. Rendering these blocks is unnecessary and a large waste of resources.

General spring cleaning means to look closely at each aspect of your website. Determine anything – even tiny changes – that could be adjusted to increase performance. Sometimes you will notice improvements by performing many small changes compared to one big change.

I know these aren’t completely perfect solutions to execute on every website. But it is crucial to investigate each of your projects, then determine and fix any serious latency problems. I can only recommend what I have seen work on other websites in the past. But if you have any similar ideas or suggestions you should try them out and see what happens! User experience is built around creativity and experimentation – don’t be afraid to push new boundaries and see what’s possible.

Author bio: Jake is a creative writer, designer, and developer. He frequently publishes articles related to design trends and digital projects. These ideas revolve around an era of Internet technology with a rapidly-advancing platform for designers & developers. You can find his articles all throughout Google or follow him on Twitter @jakerocheleau.

Catalin is the founder of Mostash - a social marketing boutique - and he's always happy to share his passion for graphic design & social media.