I’ll start with a short story;
Around five or six years ago, Eurostar invested around £6B into knocking 15 minutes off the journey time between London & Paris.
I first heard of this from a Ted Talk from Rory Sutherland.
They obviously believed that shortening the journey from 2:15 hours down to 2 hours was the best way of making their service better (and were happy to spend billions in making it happen).
In the video linked above, Rory goes on to suggest that perhaps they could have improved their service more wisely, concentrating instead on making the journey slightly more enjoyable rather than spending an obscene amount of money trying to shortening it.
An example is adding WiFi to the trains. At a fraction of the cost and time, it would create a more noticeable positive change in user experience.
Hardly anybody notices the 15 minute difference in journey time, but by making the journey more enjoyable, the perceived length of time spent on the journey would have been shortened.
Perception is Everything
The mistake that Eurostar made is a mistake that seems to happen a lot with websites. That is, thinking about the problem in the wrong way and forgetting the overall goal – delivering the best user experience.
In regards to websites, it can matter very little if the site fully loads after 1 second or 0.8 seconds. If the users feel that the site is sluggish, or that they had to wait for an important part of the content to become visible, that is the experience they will walk away with.
The perception of how a site is performing can be very different to the true values, but this is something we can use to our advantage.
Actual Page Speed is Still Important
I want to make clear that I am not insinuating that the actual page loading speed doesn’t play an important factor.
I will assume that anybody half interested in creating a better user experience for their site visitors is already using a managed host (like these guys) and an optimised theme/framework for WordPress (we all know who we’re talking about here).
Also, if you’re experiencing loading times of over 2 – 5 seconds consistently, then you really ought to really have a closer look at what is going on before you even consider applying these tips.
In short, increasing the perceived performance of your site should not be a substitute for increasing the actual performance, but if you do them both, you’re golden!
Let’s Get Into It
When I think about perceived performance, I’m thinking about three things to try and improve on…
- Improving the perceived initial loading time of the site
- Improving the perceived performance once the visitor is navigating/scrolling/reading
- Improving the perceived performance specifically for mobile visitors in terms of the site feeling as smooth as a native app
For this post, I will talk about point number 1. Part 2 coming soon.
1. Perceived Initial Loading
The great thing about perceived performance is that it is all in the eye of the user. Right or wrong, it is their experience of what is happening that counts.
Most of the time it won’t be anything particularly technical that needs changing. Designing a better user experience can be as simple as rearranging content, changing colors or adding subtle effects to hide the fact the user is waiting for something to happen.
So what does the average user of your site look for when thinking about how fast the site loaded?
Here are some ideas;
- Can they read the main content of the site almost immediately?
- Has the loading bar in the browser stopped moving?
- Is it instantly obvious how they can find other pages on the site?
One of the simplest ways of making a site seem to load instantaneously is to ensure that the main content is visible straight away. There are some current design trends that can unintentionally stop this happening.
It is common today to see a large ‘hero’ image on a front page of a site, or a medium-esque style blog post with a large image at the top and with the post titles on top the image.
This style can look great, modern and really give a great introduction to your website or pages.
The problem arises when you accidentally choose the same font color as the background color behind the background image. The image is likely to be the last thing to become visible on the screen, so until that image has finished loading the user is stuck looking at a blank screen with no way of reading the main content.
Try temporarily removing the image to make sure that you can still read the content, the navigation is clear and the design still works well without it.
Use Lazy Loading
The loading bar on mobile devices is another important factor that causes people to think a page is taking a long time to load. Lazy Loading is a great way of stopping this taking too long. Images are usually the largest things to download and are the biggest cause of the problem.
With lazy loading, only the images at the top of the page are called to start with and the rest aren’t called until the user starts scrolling the page to see them.
In our experience, we have found Unveil to be the best solution for automatically lazy loading images as it works well with the retina images plugin.
Tip: For retina images, we use WP Retina 2X to do the hard work using setting ‘IMG Rewrite’ instead of retina.js. This seemed to be the only option that worked well with the lazy loading in place, the others would only load non-retina images.
The ‘IMG Rewrite’, unlike ‘retina.js’, prevents the images being loaded twice and even though it mentions that it doesn’t work with most cache solutions, if you’re on WPEngine like us, it works beautifully!
The last part is to make sure that the navigation of the site, or the burger menu, is visible from the start. This is important as visitors don’t always want the page they have landed on and will be wanting a quick escape route to their preferred page, ideally without having to wait for the current page to finish loading.
Is your menu visible straight away or is the user having to wait for something or having to scroll to be able to find it? Again, it could be the same color as the background-color before your large hero image loads, which can cause a unnecessary wait.
Part 2 Coming Soon
I hope these simple ideas for creating the illusion of a faster loading site have been an inspiration for your own projects.
Next, I’ll be writing about improving the perceived performance once the visitor is navigating/scrolling/reading. This will include ways of preventing ‘janky’ scrolling and ensuring subtle animations are silky smooth.