How to Improve Google Pagespeed User Interaction Metrics in WordPress

How to Improve Google Pagespeed User Interaction Metrics in WordPress

User Interaction is one of the critical aspects you need to concentrate on if you want to deliver a welcoming user experience. Unfortunately, you can’t sit down in their place and see your site from your visitors’ point-of-view, so you need a way to figure out how your site responds to input.

Enter Google PageSpeed Insights. There are 3 metrics in Google PageSpeed Insights that will help you understand the user interaction experience so you can improve, Time to Interactive, Max First Input Delay, and First CPU idle.

In this post, we’re going to cover the metrics Google PageSpeed Insights uses to measure user interaction. I’m going to show you how to improve Time to Interactive, Max First Input Delay, and First CPU idle so you can deliver the best user experience for your visitors.

What is Interactive Design?

Tell me if this has ever happened to you. You go to a site and as the content is loading, you click on something, but nothing happens. So you click on it again and again and then when the page finally responds, you end up on some random advertisement landing page or somewhere else you didn’t want to be.

That my friends is a negative user interaction.

Interactive design focuses on allowing the user to achieve their goals, whether that’s purchasing a product or signing up for your newsletter, as easily as possible.

There are many dimensions to interactive design. What we’re most concerned with in this article is feedback and how long it takes to deliver, since it helps your visitors assess if their actions are effective.

If the response time between an action (like a click) and the response takes too long, your visitors will lose faith in your site and probably turn to your competitors.

To deliver a positive user interaction as your site loads, we need to focus on several metrics to give us a well-rounded idea of what the user is experiencing. Let’s look at what those are now.

Measuring User Interaction

Google PageSpeed Insights uses Lighthouse to analyze the performance of a web page for both mobile and desktop devices.

Screenshot of Google PageSpeed Insights Results Page
For this site the user interaction metrics are great, but the site still needs some work to improve the other metrics

Lighthouse takes a user-centric approach and measures the following:

  • First Contentful Paint
  • First Meaningful Paint
  • Speed Index
  • First CPU Idle
  • Time to Interactive
  • Estimated Input Latency

Lighthouse collects lab data within a controlled environment with a predefined device and network settings and then assigns each metric a score. Scores in the ideal range are shown in green, while low scores are shown in red. Yellow scores fall in the average range.

These six metrics each tell you something different about what your user experiences as they’re waiting for your site to load and together they form a more complete picture.

First CPU Idle, Time to Interactive, and Estimated Input Latency are the three that will tell us about user interaction. For more about First Contentful Paint and First Meaningful Paint, and the Speed Index, check out those posts.

What is Lighthouse Time to Interactive?

The Time to Interactive metric, or TTI, measures how long it takes before the user can reliably interact with the content on the page by doing things like clicking links or entering text into input fields.

A TTI score of less than 100ms is ideal because when your visitor takes an action, the response feels almost instantaneous. Any longer than that and the user will perceive the lag as something wrong with your site.

While the ideal Time to Interactive in WordPress should be under 100ms, you do have some flexibility. On a landing page with a web form, the Time to Interactive benchmark would be very important. On a blog page, with only a couple of links, TTI would be less important than content visibility. Each site has different priorities, so you should only sacrifice content visibility for interactivity if it makes sense.

How is Time to Interactive Measured?

Time to Interactive is tricky to measure because there isn’t an exact and clearly defined point when the page is ready for interaction.

Think of it like measuring how long it takes to make stovetop popcorn. It’s impossible to say exactly how long it will take because you can’t see inside the pot and don’t know how many kernels still need to pop. So to make popcorn without burning it, you need to listen. When there’s a long enough delay of a few seconds between pops, you can safely assume that the popcorn is about ready.

Measuring Time to Interactive is a similar process. Lighthouse observes the main thread and network activity to figure out what is taking place. It is looking for a big enough time window on the browsing context event loop and a 5-second sub-window of network quiet where the probability of long tasks or heavy processing taking place are low.

It knows when to pay attention by looking for the First Contentful Paint and detecting when event handlers are registered for most visible page elements.

How to Improve Time to Interactive

To improve your TTI score, focus on improving your site’s JavaScript code. Downloading, parsing and executing JavaScript consumes more CPU than all other browser activities combined.

While mobile devices and computers now have more CPU, the amount of JavaScript on webpages has ballooned, increasing 3 fold in the last 6 years.

JavaScript operates in a single-threaded environment which forms a bottleneck when one process takes too long to perform. When one process blocks the single thread, everything else has to wait including other processes and user feedback.

This is even worse on mobile. Tasks can take 3-5x longer and the high CPU load drains batteries. Not to mention that the site will appear janky so it doesn’t make for the best user experience.

Tasks that take longer than 50ms are considered long tasks. To improve your TTI score, remove unnecessary JavaScript or defer it until the page is finished loading. You should also break up large files to prevent a bottleneck.

FREE EBOOK
Your step-by-step roadmap to a profitable web dev business. From landing more clients to scaling like crazy.

By downloading this ebook I consent to occasionally receive emails from WPMU DEV.
We keep your email 100% private and do not spam.

FREE EBOOK
Plan, build, and launch your next WP site without a hitch. Our checklist makes the process easy and repeatable.

By downloading this ebook I consent to occasionally receive emails from WPMU DEV.
We keep your email 100% private and do not spam.

What is First Input Delay?

The Google First Input Delay metric measures how long it takes for the browser to respond to the user’s input, such as clicking a button. An ideal First Input Delay of 10ms is ideal.

While Time to Interactive, can be measured in a lab setting, First Input Delay or FID, requires users to be calculated accurately. A Google PageSpeed Insights test does include a metric for Max Potential First Input Delay, but an analytics tool, such as Google Analytics will give you more accurate results.

If you are collecting First Input Delay data from your analytics tool, then you’re capturing real user pain. If the wait time is long, then you know your visitors are probably frustrated because they have to wait every time they interact with the page. If that wait time is especially long and your bounce rate is high, then guess what? You’re losing visitors because of a poor site experience. Ouch.

What counts as a first input?

Let’s define the first input delay meaning because it doesn’t include all user interactions.

FID measures actions like clicks, key presses and entering text in fields. It does not include scrolling or zooming since they can be run on a separate thread by the browser.

This is why if your site doesn’t have any actions the user can take, other than scrolling or zooming, you won’t have a First Input Delay metric to deliver.

How to Fix First Input Delay

TTI and FID are closely related, so if you work on delivering your JavaScript more efficiently to improve your Time to Interactive, it will also improve First Input Delay.

If the browser’s main thread is busy then it won’t be able to respond to user input so you should work to split up long tasks or not run them on the main thread. This will keep the main thread open.

Third party ads and social widgets have a reputation for being greedy when it comes to consuming resources on their host pages so you should aim to include the fewest third-party iframes possible.

One approach to improve First Input Delay is by deferring non-critical tasks until they’re called for. This method is called “Idle Until Urgent” if you’d like to learn more about how to use it.

What is First CPU Idle in Lighthouse?

The First CPU Idle in Lighthouse measures when a page is minimally interactive and most but not all of the elements are ready for interaction. If you do interact with elements on the page, there may be a delay, but the page will respond.

First CPU Idle in PageSpeed Insights was originally called Time to First Interactive. It indicates when there is the first span of 5 seconds in the main thread when tasks so not take longer than 50ms after the First Contentful Paint.

The First CPU Idle is similar to Time to Interactive because both listen for JavaScript event handlers in order to return an accurate measurement, but First CPU Idle does not require the browser to respond to user input in less than 50 milliseconds.

A value of 2-4 seconds for the First CPU Idle in WordPress is about average.

How to Improve First CPU Idle?

An easy First CPU Idle fix is to minimize the number of resources that need to be executed before a page can load and reduce the size of the remaining resources.

These are the same strategies to improve TTI and FID, optimize the critical rendering path and optimize content efficiency.

User Experience Interaction Guidelines

Lighthouse does not assess your whole site. It audits one page at a time, so to understand how your site performs, you need to test a variety of page types on your site. Test a blog page, a product page, checkout, etc. Pay special attention to important conversion pages, like your landing pages and shopping cart.

Lighthouse evaluates six test metrics, but it doesn’t weigh them all the same when coming up with an overall score. Each is weighted differently.

The metric with the most weight is Time to Interactive because it has a greater impact on the page’s overall performance. This is followed by Speed Index, First Contentful Paint, First CPU Idle and First Meaningful Paint, in that order.

How to Improve Your Score

You may have noticed a pattern in the suggestions to improve Time to Interactive, First CPU Idle, and First Input Delay. Since these three metrics are closely related, you take a holistic approach to improving them. By improving your interactions for your users, you’ll improve all three.

Here are actions you can take to improve your scores:

  • Optimize the Critical Rendering Path
    • Minimize or eliminate critical resources in the main thread.
    • Defer their download or load them asynchronously if you can.
    • Optimize the size of assets by compressing or minifying to reduce the download time.
    • Download all critical assets as soon as possible to shorten the critical path length.
  • Lazy Load Your Images – If an image is below the fold, wait to load it until you need to. Prioritize loading the page first, then when you have idle time in the main thread, you can load the image once the visitor scrolls down the page.
  • Enable browser caching – Caching files dramatically cuts down the loading time for additional pages by storing assets in a cache for faster retrieval. With HTTP caching, the browser stores a copy of assets downloaded via HTTP by the user in its cache so it will be able to retrieve them without making an additional trip to the server. We recently compared Hummingbird to other popular caching plugins and Hummingbird out optimized all of them.
  • Use a CDN – Intermediary caches such as content delivery networks can help you serve assets faster from a closer data center to the user.
  • Use JavaScript Wisely
    • Remove unnecessary JavaScript files and unused portions within files.
    • Split up large JavaScript files.
    • Defer loading of low-priority JavaScript files.
    • Minify and compress JavaScript files

Smush Pro has a CDN that can help you lazy load your images. Hummingbird can assist with enabling browser caching. You can get a free trial for both right here to improve your Google PageSpeed Insights score.

Over to you, let me know in the comments if you found this article helpful or have any additional tips about improving your site's user experience.

Tags:

Felicia Ceballos-Marroquin Felicia is a WordPress expert, specializing in web design/development, search engine optimization, Genesis, and enterprise WordPress multisite. She is a former WPMU DEV author, where she put her decade-plus of WordPress expertise to good use, writing friendly tutorials with soul.