The Importance of Optimizing First Input Delay (FID)
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.
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.
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 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.
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.
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.
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.
WordPress 5.4 automatically adds a lazy load feature to images.
Improve the Critical Rendering Path
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.
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.
Originally published at https://parachutedesign.ca on November 18, 2020.