The Importance of First Input Delay

What Is First Input Delay and How Can You Optimize it?

A well-designed website will engage visitors and convert them into loyal customers. Crafting a successful website, however, requires much more than a beautiful interface and a well-executed UX strategy.

One of the most overlooked aspects of a successful website design lies in the website’s analytics and Core Web Vitals report. Unfortunately, many businesses overlook First Input Delay (FID) because it’s a tricky metric. However, if you want to take your website to the next level, it’s important to understand what First Input Delay is and how to optimize it.

Update! As of March 2024 Google will replace First Input Delay with Interaction to Next Paint (INP).

Defining First Input Delay

First Input Delay measures the responsiveness of a web page based on the time it takes until the user first interacts with your site. First Contentful Paint or FCP, which is often confused with FID, measures the time it takes for the page content to load. The FID metric focuses on the users and when they interact with the page, capturing their first impressions by how they interact with your site.

FID specifically measures the time between a user’s first interaction with the webpage and how long it takes for the browser to respond to that interaction. The lower the FID time, the more usable and better the website is ranked. A good FID score is around 100ms or less while anything above this benchmark requires changes to improve FID.

This improves user experience and helps to boost the site’s overall SEO performance and SERP rankings.

Google is constantly tweaking its search engine algorithm to force website owners to constantly work to create a smarter, faster web. The Chrome user experience report, Google Search Console and Google PageSpeed Insights offer tools to measure Core Web Vitals; a set of optimization metrics designed to improve the ease and speed with which users can surf the web. First input delay is one of the core metrics within this set of experience measurements.

The First Entry Task

What exactly do web designers, developers, and analytics tools consider to be user input? If you’re like most small and medium-sized businesses, you may be unfamiliar with what exactly a user input is. Unlike scrolling and zooming which are ongoing tasks within a normal browsing experience, input tasks are distinct actions made by the user. These include keystrokes, clicks, and taps on touchscreen devices. Ongoing tasks typically have less latency as browsers will run them separately to free up the browser’s main thread so they are able to respond much faster.

The Main Thread and First Input Delay

Nearly every website has some form of delay when loading. As the site loads, it makes several network requests and main thread tasks, such as running the code to display the webpage.

The main thread is what does the heavy lifting involved to render a web page. The browser is actually able to rely on the main thread for many tasks, which also includes responding to a user’s interactions.

The main thread includes all the JavaScript used on the website. When the browser initiates a Long Task, a task that takes longer than 50ms can cause a delay. The Long Tasks can, and will, block the browser from performing the user’s input task. This scenario is s the Max Potential First Input Delay or MPFID. It occurs when a user clicks a button at the same time the browser starts executing the longest task and slows the site’s perceived Time to Interactive. This occurs when the page has some content loaded but that content isn’t interactive yet. The page will remain inactive until the page finishes completing the larger task.

For example, imagine a user opens a site and clicks a button while the page is still loading. They’ll have to wait for the browser to finish loading before it can respond to the user input. This wait time is precisely what First Input Delay measures.

I should note a user can click and initiate an input at any time, however. If a user clicks before or after this long task, there’s often very little or no real user delay.

Measuring FID requires real-life users while MPFID doesn’t need real users as it focuses on measuring the main thread. Sites with a greater FID measure will have larger delays between the FCP and the Time to Interactive or TTI of the user.

Understanding The Importance of First Input Delay

The most apparent reason measuring first input delay is important is that it improves the user experience of a website – what we all feel in every user interaction. There are, however, several more reasons why you should be measuring your website’s FID and other Core Web Vitals like First Contentful Paint (FCP) and CLS or Cumulative Layout Shift.

FID will be an SEO ranking factor in 2021. Google will start ranking sites based on how users experience and interact with the website. Optimizing your site’s First Input Delay now will give you a head start over the competition while making your site much more enjoyable to use as well.

First Impressions

First impressions are what make or break a new relationship in all aspects of life, especially business interactions with a potential client. Professionally designed websites are impactful, user-friendly, and create positive long-lasting first impressions.

The responsiveness of your website is what drives one of the user’s first impressions of the site and your brand. A longer FID and FCP are likely to lead to an increased bounce rate as user frustration grows.

This makes the first impression an important metric in demonstrating a website’s quality and reliability. If you want to grow your business through organic lead generation and conversions, you’ll need to improve FID.

The User Interaction

The majority of interactivity issues that users face occur while the web page is loading. This means improving the site’s first user interactions will improve usability and experience. In turn, this will boost the site’s performance, SEO and help improve the interactivity of the web.

Nearly every user will have a different first entry input. Some users won’t have any FID as they don’t interact with your site. They may simply arrive, scroll, and leave.

Some users will have a low FID as their first interaction will occur at a “good” time when the browser is resting. Other users will have a high FID when their first interaction occurs at the same time the main thread is working.

Due to this variation, analyzing, reporting, and tracking your FID is a little different from other Core Web Vitals and website metrics. There’s more than one method of fixing a long FID. The most common method of shortening FID time is by using less third party JavaScript upfront and code splitting.

There are, however, first input delays that occur after the webpage loads which require different solutions. Google offers different metrics to measure these different delays to give web developers a better idea of a site’s true performance. From there, they can identify and fix the issues causing the delay.

Measuring and Analyzing First Input Delay

Google has a handy Google PageSpeed Insights tool designed to measure and collect user interactions on WordPress websites. Google’s new Search Console can also give you website speed reports, while Google’s Chrome User Experience Report (CrUX) and Chrome Lighthouse also collect valuable web performance metrics.

The Search Console collects and measures FID times of real users. If you want more accurate MPFID metrics, you may want to consider a more robust analytics tool like Google Analytics. Using analytics tools to collect FID data will show you real user pain points within your website that you can work to address with code updates.

When analyzing your FID data, you’ll have a range of values. You should focus on the higher FID percentiles first as you’ll make the largest gains there.

The 95th to 99th percentiles reveal the particularly bad first experiences users have with your site. They also show the areas with the need for greatest improvement. This is true for both desktop and mobile users.

Why We Measure First Input Delay

First input delay only measures the length of the delay when an event is processing. It doesn’t measure the time it takes a browser to update a site’s UI after running the event. Nor does the FID measure the processing time or page speed of the event.

You may be asking, all three times are important and affect the page experience, right? The answer is yes, but focusing on all three can make the overall experience worse.

Developers may feel encouraged to create workarounds to separate the task associated with an event. While this may improve metric scores, it can make the response times feel slower to the user.

How to Optimize First Input Delay (FID)

You have the tools and the data to measure your WordPress site’s First Input Delay at your finger tips. As you use these tools, you find may that your website has a few FID issues flagged for improvement. What can you do?

There are several ways you can optimize First Input Delay. Many do require you or your web developer to clean up the page code. However, there are also several great WordPress plugins designed to optimize your website to improve the FID on WordPress sites.

Clean Up Your JavaScript

Cleaning up your website’s JavaScript and using it wisely will help improve TTI and FID. You can do this by splitting up long tasks or removing them from the main thread of your website altogether. Doing so will reduce the workload on the main thread and make it more available responsive to user interactions. This method is often recommended in the Core Web Vitals report.

A few more items slowing down your main thread include social widgets and third-party ads if you run them. They can consume a lot of your page’s resources and increase your FID times. If possible, try to use very few, if any at all, third-party iframes.

You may also consider postponing non-critical tasks. This means they won’t initiate until called upon by the web browser which helps keep the main thread open and able to respond quickly.

Remove any unused JavaScript snippets to improve loading and delay times. Minimizing and compressing JavaScript files will also improve your FID score.

The good news is you don’t need to be a web developer to clean your JavaScript. WordPress has several plugins including Hummingbird and SmushPro that can do this for you.

Lazy Load Page Images

Many websites have several beautiful, but large images placed throughout the user interface. These images can be loaded as they’re needed if they are below the page fold to improve FID. The user cannot see beyond the page fold initially, so these images can wait while the main thread is busy.

Lazy loading images allow the webpage to load first speeding up overall speed and performance which reduces FID. The images placed below will load in real-time as the user scrolls through the page. Be careful with the JavaScript used to lazy load images as it can eat away at page resources. Most modern browsers are able to handle lazy loading on their own and plugins like Hummingbird can defer the JavaScript from running if it detects the browser is able to perform the lazy load function on its own.

WordPress 5.4 automatically adds a lazy load feature to images.

Improve the Critical Rendering Path

The critical rendering path is the set of steps a browser follows to change HTML, CSS, and JavaScript from code to pixels on your screen. Optimizing this path will decrease rendering times and can reduce FID.

You can optimize the critical rendering path by:

• Asynchronously or defer resource downloading and loading
• Compress or minimize page assets to improve downloading times
• Eliminate or minimize important resources from the main thread
• Having critical assets download as soon as possible

Many WordPress optimization plugins will optimize the critical rendering path for you.

Allow Browser Caching

Web caching is the temporary storage of data for reuse. When a visitor visits a site for the first time, the browser will save a copy of the webpage’s data downloaded via HTTP. The next time the user visits the site, the browser will retrieve this data without having to access the origin server.

This reduces the work on the server and the main thread allowing the page to load faster. There are many WordPress optimization plugins designed to leverage browser caching.

Use a CDN

A CDN or content delivery network is a group of geographically placed servers that work together to speed up the delivery of content. CDN uses data centers that are closer to users to load site assets.

A CDN can quickly transfer data such as HTML, JavaScript, images, stylesheets, and videos. Many sites, including major social and eCommerce sites, use CDNs to improve loading times and UX.

Improve Your First Input Delay and Your Website

There’s no reason you should be settling for a drab and slow-loading website. Improving your site’s First Input Delay will drastically boost the user experience and help convert more visitors into customers.

Contact us to learn how we can take your website to the next level with a professional web design.