As you use recommended practices like code splitting and dividing up your Long Tasks, your FID should increase dramatically. While TBT is not a field statistic, it may be used to monitor progress toward ultimately increasing both Time To Interactive (TTI) and FID.
Optimize your page for interactivity.
a. The execution of first-party scripts may cause interaction readiness to be delayed.
- Server-side rendered apps may appear to be rapidly painting pixels on the screen, but be wary of user interactions being stalled by lengthy script executions (e.g. re-hydration to wire up event listeners). If route-based code splitting is employed, this might take several hundred milliseconds, if not seconds. Consider moving more functionality to the server or creating more material statically during the development process.
The TBT scores for an application before and after optimizing first-party script loading are shown below. Users were able to engage with the website considerably sooner after shifting expensive script loading (and execution) for a non-essential component off the critical path.
b. Many characteristics of interaction readiness can be influenced by Data-fetching
Large inline datastores can increase HTML parsing time and have an effect on paint and interaction metrics. Attempt to reduce the amount of data that must be post-processed on the client-side.
c. Third-party script execution might also cause interaction latency to increase.
Many websites incorporate third-party tags and analytics, which can keep the network busy and cause the main thread to become unavailable on a regular basis, affecting interaction latency. Investigate on-demand loading of third-party code (for example, maybe don’t load those below-the-fold adverts until they’re closer to the viewport).
In rare circumstances, third-party scripts might take precedence over first-party ones in terms of priority and bandwidth on the main thread, prolonging the time it takes for a website to become interactive. Prioritize loading what you feel will provide the most value to users first.
Employ a web worker
One of the most common reasons for input delay is a blocked main thread. Web workers
Consider utilizing the following libraries to make utilizing web workers on your site easier:
- Comlink: A utility library that encapsulates and simplifies the usage of postMessage.
- Workway: A web worker exporter with a broad range of capabilities.
- Workerize: Incorporate a module into a web worker
- Minimize unused polyfills
- Code-split your package into many parts.
Unless there is a compelling reason not to, all third-party scripts should be loaded by default with either defer or async.
b. Minimize unused polyfills
But what if new browsers are also downloading this worthless “glue” code, wasting crucial loading microseconds? That is what you must optimize for.
You may prevent unnecessary polyfills from being loaded in the first place by using transpilers like Babel or supplying alternative bundles for various settings.