First Input Delay (FID) measures interactivity, its time of first user interaction with a web page element to the time when the browser is able to begin processing event handlers in response to that interaction.
What is Good FID Score?
- Good <= 100 milliseconds
- Needs improvement 100 milliseconds till 300 milliseconds
- Poor > 300 milliseconds
Types of HTML Elements Considered for First Input Delay
- HTML Elements that users can interact with
- For example: when they click a link on a navigation menu, tap on a contact form send button, press on Add to Cart button, or use a custom JavaScript powered control
Video Lesson Showing What First Input Delay Is
Best Way to Optimize for Good FID Score
Imagine that a web page fully loads within 2.5 seconds. This will ensure good Largest Contentful Paint score. And yet, if, a user interact with a web page element (let’s say “Add to Cart”) and the server response back in 301 milliseconds. This is considered bad user experience because the interaction should have been smooth.
How can you ensure that smooth and fast interaction response? There are many ways to accomplish this, since there are diverse set of websites and Content Management Systems. Let me share some ideas for you to consider (use all or any depending on your website setup).
- Use HTTP/2 Protocol (most modern servers already use HTTP/2 Protocol, if yours isn’t then, consider upgrading)
- Reduce server response times
- Consider VPS instead of shared server
- Remove un-needed JavaScript (or group them to reduce HTTP Requests)
- Remove un-needed Cascading Style Sheet (CSS) rules (or group them to reduce HTTP Requests)
- Separate Critical Path CSS Rules
- If using JavaScript to accomplish certain functionality, consider CSS3 rules which may accomplish the same (but much faster) responses
- Optimize and Minimize JavaScript code
- Stop using heavy CDN JS libraries (for example: you may need just 2 lines of code form a file on CDN, you could easily inline the JS)
Google is expected to update Core Web Vitals on an annual basis, that means its best to start fully optimizing your website so that its ready to take advantage of latest Google updates.
I really like FID; here you’ve mentioned how to optimize to get a GOOD SCORE :like— separate critical path CSS rules and optimize and minimize JavaScript code, among others.
This video is a goldmine for me.
Thanks
Nice article on First Input Delay Thank you so much for this rare information.