Optimize First Input Delay (FID)

The FID is about how fast can user interact with the content, if the browser takes time to respond to user click, tap or scroll events then it is going to have higher FID and it will reduce user engagement over the time. 

The main cause of a poor FID is heavy JavaScript execution. Optimizing how JavaScript parses, compiles, and executes on your web page will directly reduce FID.

We would need to perform following operations:

  • Clean up or reduce Javascripts on the page
  • Do the code splitting and load Javascripts conditionally only where they are needed.
  • Load Javascripts by using defer attribute, you can use async if the javascript is needed to be loaded early.

Possible Solutions

1. Code splitting

Common javascript files that are getting loaded on all pages may not be utilized or executed. Some pages would need it some pages might not. Instead of concatenating all Javascripts into one file and loading them on all pages. Try splitting the codes based on conditions and for the pages or modules it is needed for.

For example:

Lets say you have one big javascript file main.js and you have slider only on homepage, in this case you can split the main.js javascript into two files, such as main.js and slider.js. Here main.js can be used for common javascript that is required on all pages and slider.js can be only loaded if the page is homepage.

2. Reduce unwanted Javascripts

This is very simple to do as it involves only checks for javascripts in use or not. Some vendor libraries or third-party libraries might not be needed at all but it will affect the page speed score. So you can identify the files and remove them.

Also, there can be many unwanted javascript code execution on some pages. You can use code coverage tool in chrome to find out which codes are actually executing and which are not required for a certain page.

You can learn more about code coverage tool here – https://developer.chrome.com/docs/devtools/coverage/

For a deep dive on how to improve FID, see Optimize FID. For additional guidance on individual performance techniques that can also improve FID, see:

Quizzes