Share This Post
Every website owner’s dream is to grow their business, increase sales, and earn customers’ trust. This can be done when the first interaction of the user goes straight.
When a user lands on the website, there is a chance for the website owner to earn the trust or either lose the trust. Various factors can have an impact on building trust. But one of the most crucial factor is making the user experience delightful.
When the user first interacts with the website, this is the moment to grab the user’s attention. In the blog, you’ll explore how a simple First Input Delay (FID) can attract the customers to take valuable action on your website.
First Input Delay (FID) is a user-performance metric that tracks when the user’s first interaction is made while entering the browser to the time the browser starts processing that interaction.
In simple words, FID is the delay that you have between the moment you click on something, like a button or a link, to the moment the browser starts responding to it.
The FID is measured in milliseconds (ms).
In FID, events are finite. Continuous interactions like scrolling, zooming doesn’t count as FID because it is impossible to measure these events. They don’t operate on the browser’s main thread and often have other constraints.
What counts as a first input?
FID measures the responsiveness of the page during the load time. The events that count under the FID metric are clicks, taps, or any critical process that a user makes.
Other interactions like zooming, scrolling which are counted as continuous actions, are not considered under FID.
If we explain it further, FID follows an R (responsiveness) model while the scrolling, zooming follows an A (animation) model, and both the performance of these models are separately noted.
Experimenting with First Input Delay in the Chrome UX Report
In the past few months, a lot has been experimented with FID. One of these explorations was done by Google engineers where they tried different codes to explore FID deeply.
Here is the first code that was used:
SELECT
ROUND(SUM(IF(fid.start < 100, fid.density, 0)), 4) AS fast_fid
FROM
`chrome-ux-report.all.201806`,
UNNEST(experimental.first_input_delay.histogram.bin) AS fid
WHERE
origin = ‘https://developers.google.com‘
Code courtesy: Google
This code tells that the instances felt by FID are quick. They just respond to this code pretty fast.
Another query that Google Engineers tested was this:
SELECT
ROUND(SUM(IF(fid.start < 100, fid.density, 0)) / SUM(fid.density), 4) AS fast_fid
FROM
`chrome-ux-report.all.201806`,
UNNEST(experimental.first_input_delay.histogram.bin) AS fid
Code courtesy: Google
This query reveals that 84% of the FID experiences were done under 100ms.
The next query was there to test the mobile, desktop tests, which were fascinating as well.
SELECT
form_factor.name AS form_factor,
ROUND(SUM(IF(fid.start < 100, fid.density, 0)) / SUM(fid.density), 4) AS fast_fid
FROM
`chrome-ux-report.all.201806`,
UNNEST(experimental.first_input_delay.histogram.bin) AS fid
GROUP BY
form_factor
The results concluded that the desktop has a higher density of FID than a mobile or tablet.
The tests were mentioned deeply on their page.
How is FID measured?
There are several tools that allow you to measure FID. But before that, you need to ensure that the user made an interaction. The simplest way is to measure FID with Javascript. A simple code can help you measure FID:
new PerformanceObserver((entryList) => {
for (const entry of entryList.getEntries()) {
const delay = entry.processingStart – entry.startTime;
console.log(‘FID candidate:’, delay, entry);
}
}).observe({type: ‘first-input’, buffered: true});
This code takes the start time and the processing start and measures the delay created between those times.
Or you can measure FID with the following tools too:
- Chrome User Experience Report
- PageSpeed Insights
- Search Console (Core Web Vitals report)
- web-vitals JavaScript library
Different ways you can track FID
There are several ways to track FID manually, but the simplest way is to use Philip Walton’s code.
let firstHiddenTime = document.visibilityState === ‘hidden’ ? 0 : Infinity;
document.addEventListener(‘visibilitychange’, (event) => {
firstHiddenTime = Math.min(firstHiddenTime, event.timeStamp);
}, {once: true});
function sendToAnalytics(data) {
const body = JSON.stringify(data);
(navigator.sendBeacon && navigator.sendBeacon(‘/analytics’, body)) ||
fetch(‘/analytics’, {body, method: ‘POST’, keepalive: true});
}
try {
function onFirstInputEntry(entry, po) {
if (entry.startTime < firstHiddenTime) {
const fid = entry.processingStart – entry.startTime;
po.disconnect();
sendToAnalytics({fid});
}
}
const po = new PerformanceObserver((entryList, po) => {
entryList.getEntries().forEach((entry) => onFirstInputEntry(entry, po));
});
po.observe({
type: ‘first-input’,
buffered: true,
});
} catch (e) {
}
What Factors Affect the First Input Delay?
The thing to note here is that not everyone who visits your website will interact in the first go. And maybe FID might occur at the wrong time, which means the user is just browsing and had no intention of going further.
When this happens, there will be low FID values which means nothing will be noted.
If there is a delay, it will be noted. The delay will not affect the experience of the user, but it will indeed affect the FID.
The website speed might affect the FID because if the website is slow, the user will not take the step forward and continue browsing; they’ll just leave the website.
Sometimes, an annoying animation forces the user to close the website and browse something else. As a website owner, you need to think of such things while developing the website. Because a good FID will add value to your website performance, Google will consider it a positive sign.
What causes a slow First Input Delay?
This happens when the browser gets busy executing the Javascript even after the page content is loaded. When the user tries to interact with the content on the page, the browser doesn’t respond to it because it is already busy dealing with Javascript.
It reminds us about the old single-page applications where nothing meaningful can be done before the Javascript is fully loaded.
Other times where server-rendered page applications are used, it helps First Input Delay because they load the Javascript before loading the whole content on the website.
How to improve the first input delay?
There are several ways in which you can optimize and improve your FID. Let’s talk about some of the most popular ways in which you can easily improve the FID.
How can BionicWP help?
BionicWP is a Managed Cloud Hosting that can optimize your website speed. When you optimize your website’s speed, it will load faster, and the user will have an excellent chance to interact with the website.
The only thing that prevents a user from making an interaction is speed. And BionicWP guarantees 90+ google page speed score. With BionicWP, you’ll be able to massively improve your website’s performance and make the necessary suggestions to make it load faster. Sign up for a free trial today!
Improve FID by Optimizing Your CSS Code
One of the most common factors that impact the FID is the CSS code. Once you improve and optimize the CSS files, it gets easy for FID. You need to download them so that they can quickly render as soon as the page loads.
This will play an essential role in impacting the First Input Delay. You can take help from best practices like removing the unnecessary CSS, compressing it, or even magnifying the files in which CSS is not used.
Improve FID by Optimizing Your Javascript Code
Usually, it is the Javascript that needs to be corrected. They are the ones that block the main thread of the browser and create a delay for a more extended period.
You can improve that by minimizing the thread time that Javascript creates for the browser.
If you divide the longer tasks into small asynchronous tasks, it will be easy to process them. Once you break the processes into smaller tasks, try to make your tasks 50ms.
Moreover, when you generate content from the server-side, it gets easy to process things from the client-side. It will reduce the amount of time a browser takes to render the page.
Improve FID by Reducing Third Party Code Impacts
Usually, third-party tools like tags or analytics block the unnecessary main thread. When the analytics loads first, you need to ensure that it is properly tracked so that other things load smoothly.
When the third-party tools load, you prioritize either the analytics or the third-party tools load that provides value to the user.
When you delegate the work to the main thread, this reduces the load of the main thread. The web workers will allow you to delegate the work – the JavaScript that will unload some of the main thread’s work.
By using async, you’ll just use JavaScript when necessary. The modern JS only loads on demand.
The polyfills are required with the old browser. The developers use these to develop modern websites, retaining the functionality of old websites or outdated browsers. Disable these polyfills or run themes separately.
What is a good FID score?
An FID score that is less than 100ms is considered a good score. However, any score between 100-300ms is also considered good enough.
Why Improve FID?
FID is the first interaction of the customer with your website. When you improve that interaction, there is a good chance that the customer will keep browsing the website to get what they are looking for.
Once you start improving the FID, your website will be optimized for speed as well as performance. You don’t have to worry about anything else because a good FID will ensure that more users visit your website.
Reducing First Input Delay for a Better User Experience
The user experience is all about providing a user with a delightful and fast web experience. When the user makes the first contact with the website – the FID is the matric that tracks it, you’ll understand the importance of reducing the FID.
Because once you reduce the delay caused, the user experience will automatically improve. So, you need to work on reducing the FID with the tips mentioned above.
Better performance
As you might have guessed, reducing the delay that the user faces while interacting with the website will create a better user experience. If you optimize the website with BionicWP, there is a good chance that the website’s performance will improve, resulting in more traffic on the website.
It all starts with working on the tips mentioned above to reduce the FID as much as you can.
Because once you reduce the delay caused, the user experience will automatically improve. So, you need to work on reducing the FID with the tips mentioned above.
Let us manage your WordPress Website and attain true peace of mind.
Scale your business today.
Sign up
