What you can do to prepare yourself for Google’s new Core Web Vital metric INP?

 

What is INP?

INP is Google’s new Core Web Vital metric used to measure the latency of all interactions on your website. INP stands for Interaction to Next Paint. An interaction being a group of events handlers that all occur during a user action, for example clicking a dropdown menu. Essentially, INP is a measure of how responsive your website is. When a user clicks on a dropdown, does it open almost immediately, or is there a delay? If it opens immediately and the information within is immediately available then this is good responsivity. If all the interactions on your site are quick and snappy then it is highly likely that you will end up with a good INP score.

How is INP measured?

INP is measured by taking the longest event during an interaction and calculating it’s latency or time to completion. Your total INP score is calculated by taking the latency of all the interactions on your site and then picking the longest/slowest interaction on your site.

Why you should care about INP

Every developer and company should care about the user experience on their website, having a quick and responsive website is one of the best way to boost conversions. One of the primary reasons for users bouncing from a website is a lack of responsiveness. Ensuring your site has a good INP score is one way of ensuring that your users will have a good experience.

INP is here to stay. The new Core Web Vital metric will replace FID (First Input Delay) the current metric for measuring responsivity, so it will pay dividends to get familiar with it now, ready for the handover because when FID disappears your website might not rank as well as it used to.

But will INP really be that different to FID? The answer is yes. Despite being a metric with the same purpose; INP is more accurate than FID meaning that is more difficult to get a good INP score when compared to good FID score as a website is less likely to falsely report a good responsivity rating. This is because INP takes the longest interaction rather than the first interaction. This will mean that INP will report worst case scenarios and a more representative score of your user’s actual experience. Just because you have a good FID score doesn’t mean you will have a good INP score, so it will be best to get ahead of the game and ensure all your sites get good INP scores before the INP replaces FID for good.

So what is a good INP score

To put it simply, a good INP score as defined by Google is a latency of less than 200 milliseconds.

A latency score of greater than 200 milliseconds but less than 500 milliseconds means that your site “Needs improvement”.

A latency of greater than 500 milliseconds will mean your site has “poor” responsivity.

Mobile and Desktop scores are not the same

Anyone familiar with Google analytics will know that it is important to keep track of both your desktop and mobile website performance. Arguably it is more important these days to monitor how your site is doing on mobile, as the majority of searches these days are done on mobile.

It is not uncommon to find out that your site has a good INP score on Desktop but “Needs improvements” on mobile. This is often because desktops are usually more powerful than mobile devices and not every mobile user has the latest and greatest phone so boosting your mobile INP score is not only important but also potentially more difficult.

So what can I do in order to boost my sites INP score?

There are many ways you can potentially boost your INP score and for the most part this comes down to following web development and SEO best practices. One of the easiest ways to potentially boost your INP is to optimise your use of images on your website.

Optimising Images:

  • You will want to ensure that you are not loading in huge image file sizes that are not suitable and not necessary for the web. You will really want to keep any large images that take up the full screen to less than 1 MB and small images to less than 300kb.
  • Where possible you should add lazy loading to as many images as possible
  • Another good practice can be to convert images to ".jpg" files as this also helps to reduce the file size.
  • Setting both a width and height for your images is also a good best practice that stops images from being rendered and then having their size adjusted on load which can slow your site down.
  • Avoid loading images in using CSS. If you load images in using CSS you cannot optimise them for the web as you cannot add lazy loading or define the images width and height. If you must load in images using CSS styles like background-image then ensure that you have optimised the file size of the image to a reasonable size before-hand.

Optimizing your CSS

It is often said that the best code is no code. When it comes to CSS this can be very true, it is often better to let the default browser behaviour govern as much of the responsiveness of your site as possible but that being said no website requires 0 lines of CSS, the days of single html pages are long gone.

Animations

    • Avoid large complex layouts and layout thrashing. Complex designs often require a fair amount of complex CSS and if you can achieve the same user experience with a simpler design, that is probably best for your
    • Reducing the amount of CSS can help a sites performance dramatically and can especially help the responsivity of user interactions with your site.
    • Reduce the number of calculations in your CSS as this takes time for the browser to calculate.
    • You might think this is a counter to my previous point but as I mentioned previously, no site requires 0 lines of CSS. It just so happens that more often than not it is more beneficial to handle any animations within CSS over Javascript, and if you can then using CSS transitions for your animation needs is the way to go for speed.

      Optimising your Javascript

      Besides optimizing your images, optimizing your Javascript is probably going to provide you with the most gains when it comes to your INP score. You will want to optimise Input delay but there are many things to optimise than just this.

      • Reducing or removing the number of third-party Scripts is a great way to increase the speed of your site as often they contain code that you end up not using, bloating out your site.
      • Optimise long tasks by reducing them and splitting out functionality into smaller functions.
      • Try to run as much JavaScript off the browsers main thread as possible in order to reduce unnecessary delays for the user and assisting in reducing input delay.

      I would recommend reading up further on each topic in more depth but in general you want to ensure that your website is following coding and web development best practices. If you really want to optimise your JavaScript it may be worth reading up on reducing the load to the browsers main thread before starting a new project.

      Conclusions

      INP is new, you should care about it and yes you may need to some do some optimizing of your websites but, getting a good INP score is about following best practices when developing your site. If you have discovered that your website requires improvement, then it is best to try and optimise the easy things first. Check your images and assets are optimised. Reduce third party Javascript and then see how your website does. After you have done that then optimizing your Javascript by splitting long tasks into a bunch of smaller tasks and running functions off the main browser thread is probably the best way to speed up interactions and improve your INP score.

      For some in-depth guides on how to improve your INP score visit https://web.dev/inp/ for more information.

      Luckily we still have some time to ensure that our sites are up to the new standard set by Google but it’s always good to stay ahead of the game.

      Contact Get in touch