Optimize your page for speed

A couple of years ago, Google commissioned several UX agencies around the world to study hundreds of websites on a few usability metrics. The high-trafficked Asian websites generally scored on par if not higher than their counterparts and the industry standards in the world. All metrics but one: Page Speed.

A note before we start, Page Speed is arguably the least important UX metric. If your information architecture is messy, if your content is hard-to-find, read, and understand, If your visitors think your website is not useful, you need to fix these first. 

We don’t want to scare you about the Page Speed. It is not that important as many SEO companies want you to believe, and you probably have bigger problems to solve for a better user experience, but it should not be ignored as well. 

Another important note, while we are talking about Page Speed, we are not saying that “you should not use videos”, or “nice hi-res images to help you showcase your products better”. In fact, probably you should use more of them to engage and educate the visitors better. All you need to do is ensure these videos and images are optimized for the web.

For example, Apple.com is one of the websites with videos and hi-res images. The visuals on the pages are optimized very well and so it scores really good on the page speed analysis. Another good example would be McDonald’s and Burger King. While the US sites are scoring good -“B”, SG sites of the same companies are scoring poorly – “F”, because of insufficient optimization.

It is all about optimization, and it can be easily achieved these days, there is no excuse for not doing it. It mostly lies on the developers’ shoulders. 

Optimize your visuals

Be sure that your images are no larger than they need to be, and they are in the right format. And they are compressed for the web. One of the good practices of a better UX is to prevent your users to do mistakes. So consider auto compressing the images on upload.

Minify CSS, JavaScript and HTML

By optimizing your code, including removing spaces, commas, and other unnecessary characters, you can dramatically increase your page speed. Also remove code comments, formatting, and unused code. There are plenty of solutions, CSSNano and UglifyJS are common tools for the job.

Remove render-blocking JavaScript

Browsers have to build a DOM tree by parsing HTML before they can render a page. If the browser encounters a script during this process, it has to stop and execute it before it can continue. 

Leverage browser caching

Browsers cache a lot of information like stylesheets, images, JavaScript files, and more, so that when a visitor comes back to your site, the browser doesn’t have to reload the entire page. Unless your site design changes frequently, caching your pages for a few weeks is a good practice to have.

Use a content distribution network

Content distribution networks (CDNs), also called content delivery networks, are networks of servers that are used to distribute the load of delivering content. Essentially, copies of your site are stored at multiple, geographically diverse data centers so that users have faster and more reliable access to your site.