Waiting for the green light at traffic lights is not a very exciting moment. The same applies for waiting until a website loads.
When it comes to web performance there is a consensus that what matters most is perceived performance. In terms of a website loading, it means how fast the content above the fold is displayed so a user can start to consume that content or interact with the UI.
In general you want to display your above fold content as soon as possible. To achieve this you have to master a range of techniques – from simple ones like image optimization to more advanced like avoiding any render blocking resources in your code (which means deferring all JS or inlining a critical CSS).
Speed Index
How do you measure how fast your above fold content is? The WebPagetest service uses a metric called the Speed Index. The lower the Speed Index is, the better. The ideal Speed Index value is 1000 and below (often unreachable by a typical website).
The Speed Index is the average time at which visible parts of the page are displayed. It is expressed in milliseconds and dependent on the size of the view port.
The Speed Index measures how quickly the above fold UI is visually complete so a user can understand it and start using it. WebPagetest can record the video showing how your above fold content loads in 0.1s intervals.
What Speed Index cannot measure
Speed Index is a better concept for measuring perceived performance than any conventional metrics (load time, page size, etc.) however it’s not without its limits. For example, it cannot evaluate importance of individual parts of UI.
Imagine that for some reason your site’s tagline is displayed just a few seconds after the rest of the above fold content was already visible. Since appearance of the text tagline is just a very small change in overall visual completeness of the page, such a change wouldn’t have significantly negative impact on the Speed Index result. However, the missing tagline can make it much harder for user to understand what the page is about.
Paradoxically, such a situation is more likely to happen when we start to mess with the normal progression of the visual completeness (based on how browsers typically render the pages).
Delaying above the fold content
There might be times when you deliberately delay displaying above the fold content because:
- You need to load above the fold assets first. Therefore you display a temporary Loading… state first
- You want to reach the end state of your above fold content through animations
Finding a good balance when doing so is important because we are now adding additional wait time. It means that we are forcing our users to wait until they can start doing what they actually came for (unless they came to admire your loading or intro animation).
No matter how entertaining the waiting time is, it’s still a waiting time.
Before sharing a few tips how to make the waiting time more bearable for our users, let’s verify how the intro or loading animations affect the Speed Index.
Testing intro animations
I have prepared a series of tests with (roughly) recoded above the fold content of the Xfive.co pages. There are 2 types of pages:
- Version 1 shows the X masking the featured image
- Version 2 shows the feature image covering the whole viewport
We have 3 tests for each type of page
- No Animation – displays the featured image right away
- Partial Animation – fades in the featured image in 3 seconds while other parts of the content are visible right away
- Loading Animation – displays a loading state for 2 seconds and then fades in the all content in 1 second
Notice that because the visual changes between the start and end states in Version 2 are bigger than in Version 1, the Speed Index differences between no animation and animations tests are bigger in Version 2 as well.
Further, because the change from the loading state to final state is more dramatic in the Loading Animation, it results in a worse Speed Index score even though the overall loading time is similar to the Partial Animation tests.
No Animation v1
Partial Animation v1
Loading Animation v1
No Animation v2
Partial Animation v2
Loading Animation v2
As we can see, any delay in above fold content appearance caused by animations will result in an increased Speed Index value. However, it’s called a perceived performance because we can trick our users’ perception by making them think that our website loads faster than it actually does.
Here are a few tips what we can use to improve perceived performance when using intro or loading animations:
Catch user’s attention while loading assets
Display something interesting to catch a user’s attention while loading assets instead of just plain and boring loaders or progress bars. For example the Wonderland. website starts a conversation with a quick Wow, you look handsome today! message displayed during the loading state.
Split your website application
Split your website application into more parts and move the asset-heavy portion behind the faster-loading intro page. Sennheiser – Reshaping excellence website first displays a static but visually impressive intro page. Users will have more patience with waiting for the full experience when they get part of that experience fast.
Do not delay displaying important parts
Do not delay displaying important parts of your website like logo, tagline or navigation. C°F website displays the left bar navigation right away and then loads the intro animation. This way users have a chance to skip the intro and explore the other parts of website immediately.
Avoid content jumps on load
Avoid above fold content repaints or jumps when the slower loadings assets like images finally load. For example we use Intrinsic Placeholders at Xfive portfolio page to avoid content jumps when the featured, responsive image loads. We also use progressive JPGs and by using a fallback background color we ensure that the text is visible even before the image starts appearing.
Use a network throttling feature in your browser to give you an idea of how it feels when your website loads slowly. Measure your Speed Index to see how far your website is from the ideal 1000 value.
Do not use animations for animations’ sake
Finally, do not use intro animations just for the animations themselves unless your goal is to impress your users with such animations (which might be a legit goal for design agencies websites or artistic websites).
Websites are not Disney Movies and like apps they don’t need an intro in most cases.
