I need to create a webpage that will generate a bad First Input Delay (FID) value.
In case you aren't aware, FID is part of Google's Web Core Vitals.
I want to simulate a bad FID because I am testing a website scanning tool that is supposed to flag a bad FID value. Therefore I want to simulate a bad value on a webpage to make sure it works.
To be clear - I am NOT trying to fix my First Input Delay. I want to create a webpage that gives a bad First Input Delay value on purpose.
But I'm not sure how to do that.
I have a HTML page with <button id="button">Click Me</button>. And in the <head> I have added this script:
<script type="module">
// Get the First Input Delay (FID) Score
import {onFID} from 'https://unpkg.com/web-vitals@3/dist/web-vitals.attribution.js?module';
// Get the button element
const button = document.getElementById('button');
// Add a click event listener to the button
button.addEventListener('click', async () => {
// Make a delay
await new Promise((resolve) => setTimeout(resolve, 5000));
// Print the FID score to the console
onFID(console.log);
});
</script>
The imported onFID method is what Google uses from Web Vitals to report the FID value.
You can see a live version of the above script here: http://seosins.com/extra-pages/first-input-delay/
But when I click the button, 5000 milliseconds later it only prints a FID of about 3 milliseconds.
The 5000 millisecond delay is not included in the FID value.
Why doesn't it report the FID value as 5003 milliseconds?
When I try to simulate a bad FID value I am doing something wrong.
What could it be?
Update:
As suggested in the comments, I have also tried adding a delay on the server using a Cloudflare Worker. That worker delayed the server response by 5000 milliseconds. But it didn't work, because the FID value was unchanged.
Also I do not think this is the correct approach because FID measures the time from when a user first interacts with your site (i.e. when they click a link, tap on a button, etc) to the time when the browser is actually able to respond to that interaction. While the Cloudflare Worker was only slowing down the initial server response. Therefore I have since removed this experiment from the page.
No comments:
Post a Comment