Perceived Speed Optimization

Picture this: Your Lighthouse score may be 95, but analysis shows a high bounce rate. And your users start to complain about speed, so what's wrong? 

Well, when it comes to web performance, speed is everything, but the only exception to that rule is perceived performance. It's not just about your website loading fast; your users need to feel it. It's much better to provide status updates than make your user wait till an operation is completed. And that's why it's crucial to conduct perceived speed optimization for your applications. 

This article will explain the psychology behind perceived speed performance and steps you can take to make your website feel instant. 

What is Perceived Speed? The Psychology Behind It

Perceived speed or performance refers to how fast a website feels compared to the actual speed. Perceived performance is a combination of design choices based of the psychology of how people perceive and think about speed and time. 

Though described as such, in actual reality, perceived speed is very dependent on external factors because it can be a complex subject. Like how the time on the clock doesn't reflect our brain's time. Or the popular saying, "Time flies faster when you're having fun" – that's the psychological effect. 

Perceived vs. Actual Loading Time 

Now time can be analyzed in two points: objective (the actual loading time) or psychological (perceived). Time that can be measured using a clock or stopwatch – that's objective. Perceived Speed is basically the time spent when a user is waiting for something to load on a website or interacting with elements on the website. What we want is to make sure that users are in the flow, and don't slip into the dreaded passive state. 

Active vs. Passive User Modes 

Humans perceive time depending on the activity and are prone to geting bored and tired easily – which means considering different modes a person experiences when using an application. During Active mode, users don't realize their waiting, but as soon as the brain activity switches to passive mode, they start feeling bored. 

The thing is, we switch between these 2 states frequently when browsing the web, and the only time we enter the passive state is the dreaded page loading time. But not to fear, we don't immediately transition to this state; it takes approximately 1 second for that to occur. But longer than 1 second risks users entering the passive state – so if the page loads for 3.5 seconds, users might experience this as 6 seconds. 

If a page takes longer than 3 seconds to load, 53% of users will abandon the website. Even a 2-second delay can result in abandonment rates of up to 87%.

So, how fast should your website even load? Looking at time objectively, here are some guidelines by Jakob Nielsen you should consider when conducting perceived speed optimization for your site. 

• 0.1 seconds: Operations completed in 100ms or less will feel very instantaneous to your user. This is the ultimate golden standard you should aim for when optimizing websites. 
• 1-3 seconds: Delay is slightly felt by the user, and if all operations take 1 second to complete, your site will feel slow. 
• 5-10 seconds: If the operation takes 5-10 seconds or more, you'll definitely lose the user's attention span. They may go to another webpage except in rare scenarios where they'll linger – for example, cashing out at an e-commerce platform

The Business Impact of Perceived Speed  

Now, let's look at the business impacts of perceived speed on key performance indicators (KPIs) 

• Conversion Rates: A faster site leads to higher conversion rates – whether you're selling custom wedding cakes or offering travel group tours. According to Cloudflare, if your site loads 2.4 seconds, the conversion rate is 1.9% but more than 5.4 seconds and the rate drops to 0.6%.
• Bounce Rates: As the load time for your site increase, so does the bounce rate of your users. A finding from Google, showed the bounce rate increased by 32% as page load time went from 1 second to 3 seconds – a slow site impacts users from using your services, which means high bounce rates and that leads to fewer conversions.

• Visitor Retention: A Good user experience (UX) also encourages visitors to keep coming back.From a report by Forrester, a good UI can increase conversion rates by 200% and a superior UX design can launch conversions up to 400%. These show that even a slight change to improve site performance can have a significant effect. 
• Higher Ranking: Google's algorithm prioritizes serving users the best search results – that means the happier your users are with your site speed, the more you will rank. As confirmed by Google, page speed is still important since it affects how a user will engage with your website as part of the page experience factor.   

Perceived Speed Optimization: Strategies to Follow

Provide Immediate Feedback 

Users like getting instant feedback as soon as an action is carried out. Though this doesn't reduce the actual waiting time, it definitely has an impact on perceived speed. And providing feedback can help decrease the user's time perception and the stress associated with waiting. 

Loaders or activity indicators can help keep users in an active state, but we also need to be mindful. Showing loaders like spinners, loading bars, progress bars, etc, when the loading time is below 1 second, can harm the perceived speed. 

Optimise Loading States

Optimising loading states, such as showing a text saying "Processing/Loading" or showing a tiny spinner, gives the illusion of providing immediate feedback. For extended loading periods, be sure animations do not affect the performance. You can consider using looped or pulsing animation (like a skeleton loader) to give the impression that the content is loading faster. 

Implement Skeleton Loaders 

Despite the name, skeleton loader is basically an animation placeholder that imitates the content that's being loaded – typical gray colour with a pulse animation effect. They look like the image below, and you often see them on big applications like Facebook or Instagram. However, you must ensure they match the real user interface by showing incremental progress.

Add :active selector to UI 

Adding this active pseudo-class shows when an element, like a button, is activated by the user. By changing the shadow, border/background colour, etc of the button when the user selects the button, it provides immediate feedback that something is happening. 

  This paragraph contains a link:

  This link will turn red while you click on it.

  The paragraph will get a gray background while you click on it or the link.

Prioritize Content in the Viewport 

Preloading 

Like the name implies, this means prioritizing the loading of content on the page. Using the attribute rel="preload" instructs the browser to download specific resources with high priority, which are preloaded early before the page's rendering process starts.  

https://example.com">

For example, on various streaming platforms such as YouTube, videos start streaming despite not being downloaded fully. Instead, it will estimate how fast we can stream, load the rest, and only buffer when needed. This is the same concept as loading above-the-fold content first on sites – we want users to interact instantly. 

Lazy Loading

Using the native loading="lazy" attribute defers the loading of elements so that the page is usable – users can explore content, while the remaining content loads in the background. This is mainly for images, and needs to be implemented carefully as it might cause performance issues with large datasets.

Keep Users Engaged During Load Times 

Custom Progress Bars 

If your app has a multistep process that's going to take time (more than 4-5 seconds), telling the user in the form of a progress bar is better than just saying loading. Doing so helps users remain calm as they get to see how much longer they need to wait for the task to be completed. 

Optimise Animations

To keep your users distracted from the waiting time, optimise your animations so they feel natural and flow smoothly. A slight lag or delay can cause users to transition to the passive state. To achieve this, render your animations at 60 fps and consider using the will-change CSS property when needed. 

const el = document.getElementById("element");

// Set will-change when the element is hovered

el.addEventListener("mouseenter", hintBrowser);

el.addEventListener("animationEnd", removeHint);

function hintBrowser()

function removeHint()

Distract the Users 

Another way to make loading engaging during long processes is to distract the users in the form of trivia, statistics, quizzes, mini-game play, etc. For instance, Google's famous mini dinosaur game which can be played when the Chrome browser is offline. 

Prevent and Manage Page Movements

Sudden page movements or shifts in layout can be quite frustrating. Let's say you're scrolling an online platform and you click on a product listing, only for it to shift up and down unexpectedly. These shifts destroy the illusion of your site's loading speed and mess with the user's perceived performance. To optimise for that, the following tips are listed: 

Cumulative Layout Shift  

Create smooth transitions between pages, as content that's jumping around causes poor Cumulative Layout Shift (CLS) – you should aim for CLS of 0.1 or less for 75% of site visits. These jumps occur when content like images and ads without dimensions or when customized fonts are loaded. To prevent abrupt jumps, size your image elements accordingly and preload your custom font along with a fallback font that matches the custom image size. 

Predict the next action

While predicting the next action a user takes sounds like playing with magic, if your workflow is straightforward, then it's quite easy to guess. Pre-load content that you think the user will choose, such as the main page or product page. If the user decides on the predicted action, the content can be displayed immediately. 

Optimize WebFonts 

Flash of Unstyled Text (FOUT) can occur when you move CSS for Google fonts to the footer –  though it fixes render blocking issues, it creates FOUT because the fonts are loading towards the end of the DOC load. Flash of Invisible Text (FOIT) can also cause text-loading shifts. To combat this, use link rel="preload", font-display, or the Font Loading API

var font = new FontFace("Awesome Font", "url(/fonts/awesome.woff2)", );

// don't wait for the render tree, initiate an immediate fetch!

font.load().then(function() );

How to Measure Perceived Speed 

Perceived speed is a "feeling" thus making it hard to measure quantitatively. One foolproof way to measure is to survey your users and ask them how long it took for the page to load. However, this may not be feasible for smaller businesses, as you need to ensure that your sample size is large enough to get a more accurate average. 

Although no single test can actually evaluate how a user truly feels about a site, the following tools can indicate that:  

• Google Lighthouse: Free and built into Chrome DevTools, gives scores on performance, accessibility, SEO, and best practices.
• PageSpeed Insights: Google's web tool to measure mobile and desktop performance with optimization suggestions.
• WebPageTest: Provides detailed insights and allows testing from different locations around the globe to show how your website performs. 
• GTmetrix: Combines and analyzes performance data from Google Lighthouse and WebPageTest. Provides visual reports and allows you to compare metrics over time. 
• Pingdom: Offers simple speed tests with detailed waterfall charts – shows which requests are slow and what's contributing to the load time. 

The following metrics (including some Core Web Vitals) are also helpful indicators: 

• • First Paint: this is the time between navigation and when the browser first renders pixels to the screen, basically anything different from the default background colour of the body. It doesn't show full completeness, just measures when nothing visible is painted. 
  • First Contentful Paint (FCP): This refers to when the browser first renders content, including images, video, or non-empty SVG. This is the first time for users to consume page content. 

• First Meaningful Paint (FMP): This is the time when useful content is rendered to the screen – after the biggest above-the-fold layout change occurs and web fonts have loaded. 

• Largest Contentful Paint (LCP): The rendering time for the largest content element that is visible in the viewport 

• Speed Index: Measures the average time taken for pixels to be painted on the screen, ie, reaching a complete state. It can be used to approximate user perception, but it's hard to account for content that's important to the user. 

• Time to Interactive: This is the time until the UI is fully available for the user to interact with, basically when the last task of the load process finishes. 

Conclusion 

At the end of the day, perceived speed optimization is as important as the actual loading time. Your website may be fast, but if it doesn't "feel fast", users will not be happy with the experience. By combining both technical and psychological design choices, you help your users stay in the active state by playing with time perception. 

Implementation doesn't have to be complicated. Optimize for metrics like core web vitals (LCP or CLS), and utilise optimization techniques such as skeleton loaders, above-the-fold content, or using smooth animations. These can make your website feel speedy – something that users love, even if background processes take longer to complete. Both are equally important, and neglecting either one could hurt your website's performance.

Speaking of speed, reach out to Nascenia to explore ways to optimize your application's perceived speed.