Limitation of First Input Delay (FID)
The limitations of First Input Delay (FID) as a metric:
Limited to Discrete Actions
Dependency on Pre-Trained Models
Reliance on Statistical Analysis
Insensitivity to Global Structure
How does INP Measure Web Performance?
INP (Interaction to Next Paint) is calculated through the following factors:
- Mouse clicks
- Taps on the touchscreen
- Key presses on a keyboard
Interactions that INP cannot count:
- Changes to the INP definition
What is an Ideal INP Score?
According to Google, a score below or equal to 200 milliseconds indicates good responsiveness for Interaction with Next Paint (INP). An INP above 200 milliseconds and below 500 milliseconds means that the page’s responsiveness needs improvement, and an INP above 500 milliseconds is classified as poor, indicating that the page has poor responsiveness.
Note: INP is still an experimental metric, and its definition may change over time.
INP Vs. FID
The main differences between INP and FID are:
INP keeps an eye on everything that happens on a webpage, while FID is mainly concerned with how fast the first action you take on a page is.
For instance, INP generates a metric based on all the buttons you click, forms you fill, and scrolls you make. FID only looks at how quickly the page responds after the first click or tap.
INP wants websites to respond instantly during interactions like clicking a button or typing in a search box. FID is more focused on making sure there’s no annoying delay when you interact with a webpage for the first time.
For example, INP is about making sure the whole website runs smoothly during the whole time, while FID is about making sure the buttons or page doesn’t lag when you click or tap for the first time.
You can make both INP and FID better at the same time. To do this, avoid making the webpage do really long tasks, using too much unnecessary code, or updating the screen in a big way.
Let’s explain this in a simple and easy-to-understand Example: It’s like cleaning up your room. You make sure there’s nothing in the way (like long tasks), throw away stuff you don’t need (unnecessary code), and organize things so you can find them quickly (small updates to the screen).
As of March 2024, Google will focus more on INP and won’t show FID details in its reports. But it’s still important for website owners and developers to make both INP and FID better. This is because they help your website be liked by search engines (good for SEO) and make visitors happier (good for user satisfaction).
How to optimize your website for a good Interaction-To-Next-Paint Score?
Here’s a step-by-step guide on how to implement the optimization strategies mentioned for Interaction-to-Next-Paint (INP) on a website:
- Utilize tools like Webpack to break down large code bundles into smaller, manageable chunks.
- Identify key entry points and split code accordingly for different sections of your website.
- Implement lazy loading for components that are not immediately required.
- Load non-essential assets asynchronously using the async or defer attributes for script tags.
- Use image compression tools to reduce file sizes without compromising quality.
- Convert images to modern formats like WebP for better compression and browser support.
- Set image dimensions in HTML attributes to prevent layout shifts during loading.
- Use browser developer tools and tools like Google Lighthouse to analyze the rendering process.
- Identify and address forced synchronous layouts by optimizing CSS and layout structures.
- Utilize browser performance APIs to capture timestamps for relevant interactions.
Reduce Browser Reflows:
- Design flexible components using CSS flexbox/grid to minimize layout changes.
- Avoid frequently adjusting styles or dimensions after the initial page load.
Server Response Optimization:
- Implement server-side compression (e.g., Gzip) to reduce the size of transmitted data.
- Utilize caching mechanisms to store and retrieve frequently accessed data.
- Consider using a Content Delivery Network (CDN) for faster content delivery to users globally.
- Add <link rel=”preconnect” href=”https://example.com”> in the HTML head to prefetch DNS and establish a TCP connection in parallel.
- Consider using <link rel=”dns-prefetch”> for additional DNS prefetching.
Code Split JS Frameworks:
- Utilize frameworks that support dynamic imports for better control over when code is loaded.
- Implement monitoring tools like Google Analytics or other performance-tracking tools.
- Regularly analyze performance metrics, including Interaction-to-Next-Paint, and identify areas for improvement.
- Actively seek user feedback and address any reported performance issues.