Fast websites can sometimes perform worse than slow ones.
Yes, you read that right.
No, that doesn’t mean page speed isn’t important. It’s crucial.
But page speed isn’t only about serving content. It’s about providing a visually complete and usable website.
In fact, focusing too much on the visuals and neglecting usability can ruin your visitors’ experience.
We’ll talk about why that is in a bit.
First, let’s discuss Time To Interactive (TTI).
Time To Interactive (TTI) is the time it takes for a page to become fully interactive after a user arrives on it.
PageSpeed Insights (PSI) considers a page fully interactive when:
The page displays useful content
Event handlers are registered for most visible page elements, and
The page responds to user interactions within 50 milliseconds
A few things to unpack here.
First, the First Contentful Paint (FCP) metric measures when a page starts displaying content. You can learn more about FCP in our article here.
TTI is reached only after FCP. Having a huge gap between these two metrics causes serious problems. More on that in a bit.
Second, event handlers are scripts that are automatically executed when an event occurs.
For example, a user clicking on a button is an event. Your website’s event handlers respond to this event by producing the required results.
If event handlers aren’t registered (especially for above-the-fold elements), your website won’t respond to the user input.
Which brings us to the third condition.
Responding to user interactions within 50ms is crucial for providing an awesome user experience. That’s often hard to do, as Long Tasks can block the main thread, causing a delay between user input and the app’s response.
I’ve talked about this issue in a previous article about Total Blocking Time (TBT). You can check it out here.
For now, let’s talk about why neglecting usability can be disastrous.
For most people, website performance equals speed. More specifically, the speed of delivering content to visitors.
And there’s nothing wrong with that. You should aim to serve content as quickly as possible.
But what happens when you only focus on content and neglect usability?
Rage clicks are our way of expressing frustration online. When a button doesn’t work, we spam the hell out of it until it does (or until we bounce).
Why do we do that?
Because when we see a visually complete page, we expect it to be interactive. If it isn’t, we rage click.
These rage clicks quickly lead to increased bounce rates, lower conversions and overall - a bad user experience.
And what’s the number one reason for rage clicks?
The latency of page usability.
Source: UX & Performance: Metrics that Matter - https://bit.ly/3iGMdfl
So, focusing exclusively on load speed can hurt your website if you disregard usability in the process.
That’s why some fast websites do worse than slow ones. They serve content instantly but remain unusable for too long.
As a result, their users see the visually ready UI and start clicking buttons. The buttons don’t work. The visitors get frustrated, they rage click a bunch of times and bounce. End of story.
The interval between having a visually complete page and a usable one can make or break the user experience.
Keep it short.
Before I go into how to do that, you need to understand what causes a slow TTI.
Long Tasks (all tasks longer than 50ms) delay your TTI.
Again, you can refer to our article on TBT for more information, but here’s a quick TL;DR:
When rendering a page, modern browsers rely on the main thread to do a ton of tasks.
All these tasks take up time on the main thread. And while they’re ongoing, the browsers can’t interrupt them.
If a user taps on a button during one of these tasks, the browser can’t respond to his input. Put simply, the page is unresponsive until that task is finished.
So, by finding and optimizing Long Tasks, you can significantly improve your TTI.
Let’s see how you can locate them.
The Chrome Dev Tools Performance audit can give you information about Long Tasks on the main thread.
Go to a page you want to analyze. Right-click, select “Inspect” and click on “Performance”.
Click on the “Reload” button and wait for Chrome to do its thing.
You’ll get a detailed analysis of how the page performed.
In the “Main” section, you’ll see tasks painted in different colors. If you see a gray task with a small red overlay, you’ve found a Long Task.
When you hover over it, you’ll see how much time it takes up on the main thread.
You can also click on “Bottom-Up” to see a detailed description of each task.
From there, you can break down each activity and see what causes delays.
You can also use a few techniques that can help improve your TTI.
Let’s quickly talk about those.
Optimizing for interactivity metrics (TTI, TBT and FID) is harder than optimizing for paint metrics.
In general, a few JS optimizations will yield the biggest results:
Code Splitting. This allows you to send only the code that your visitors need at the very beginning, instead of overloading the browser with all the JS at once.
Preload Critical Assets. With preloading you tell the browser which resources to find and load first. You can do that by adding the link rel="preload" element.
Implement the PRPL Pattern. PRPL is a collection of techniques that involve strategically Pushing, Rendering, Pre-loading and Lazy loading specific resources.
Removing Unused Code. Pretty self-explanatory. Find and remove the code files (or their parts) that aren’t used and remove them.
The Lighthouse team also has a ton of other recommendations for JS optimization. You can (and should) check them out here.
Optimizing your TTI isn’t easy.
You need technical skills and a deep understanding of how JS affects your website.
Unfortunately, there’s no magical tool to solve the usability issue for you, if it’s caused by excessive JS usage. That’s why optimizing your website’s JS for performance can be so challenging.
The results, however, are worth it. Get to optimizing!
If you want to learn more about the other interactivity metrics, check out our article on First Input Delay (FID).