Google introduced a set of standardized user centric metrics wat back in May 2020 called Core Web Vitals.
These help you understand key aspects of your website’s user experience and improve your website within clear guidelines and data.
These metrics have become an essential aspect of website optimization approaches.
Core web vitals focus on:
- Loading Speed: Measure: Largest Contentful Paint (LCP)
- Interactivity: First Contentful Paing (FCP)
- Visual Stability: Cumulative Layout Shift (CLS)
There are many metrics within this focus but there are three critical measures for search rankings and optimization of user experience:
Largest Contentful Paint (LCP)
This measures the render time of the largest image or text block within the viewport relative to when the page first started loading.
A good user experience is less than 2.5 seconds. A poor performance is 4.0 seconds and above.
First Input Delay FID
This measures the time from when a user first interacts with a page (click a button, click a link etc) to the time the browser can begin processing event handlers in the software in response to this interaction.
A good user experience is 100ms or less. A poor performance would be 300ms and above.
Cumulative Layout Shift (CLS)
This is the measure of the largest burst of layout shift scores for every unexpected layout shift that occurs during the lifespan of a page. A layout shift occurs any time a visible element changes its position from one rendered frame to the next. A burst of layout shifts is known as a layout window. This is a calculation of various measures done to deliver a final score.
A good user experience is a score of 0.1 or less. A poor performance is a score of 0.25 or more.
These are three of the critical measures and in 2024 one of these is going to change.
Interaction to Next Paint (INP) March 2024
In March 2024 Google will take the experimental INP and will make it the new Core Web Vital metric for responsiveness. It will replace First Input Delay (FID).
Google has already started flagging INP issues in the Search console and sending emails to websites that miss the threshold for good responsiveness.
So, the time to act is now and not wait for March 2024.
What is INP?
INP assesses the overall responsiveness to user interactions on a page, by looking at the latency of all qualifying interactions during a user’s visit to a particular page.
Interactions by a user on a page could be:
- Pressing a key
- Tapping a mobile or interactive screen device
- Clicking with a mouse
A good user experience is less than 200ms. A poor performance is 500ms and above.
Interaction Latency
In the definition above there is a key term: Interaction Latency.
This is the delay experienced by a user from the user’s interaction (see above) and the resultant response or output on a screen.
This is both the actual and importantly the user’s perceived performance of the page.
The Interaction Latency is made up of three high level components:
The Input Delay, the Processing Time, and the Presentation Delay.
Improving your page and website’s performance.
To improve the INP we need to search for the causes!
The causes generally fall into these categories:
- Main Thread Long Tasks
- Browsers execute Tasks. There may be many many tasks to be executed on a page. The Main Thread is where most of these are done. In the Main Thread tasks are done one at a time.
- If any task takes over 50ms to execute it is classified as Long Task.
- Long Tasks will lower your INP score.
- Large DOM size
- The Document Object Model or DOM is the HTML of a page in a structured tree.
- A DOM must contain only the necessary elements to execute efficiently.
- The structured tree of a Dom can have ‘branches’ and branches can have ‘nodes’. Nodes can be things like a text string, commentor an element.
- A DOM that exceeds 1,400 nodes is considered a problem.
- Client Side Rendering
- Examination of the Client Side rendering, Server Side Rendering and if a Single Page Application (SPA) needs to be understood to understand the impact of JavaScript tasks on the Main Thread and whether loading and interactions are hurting the INP.
Moving Forward
As INP becomes one of the main measures for optimization and search start to measure your performance now. Here are some questions you may want to ask to help understand and improve your INP:
- What is the INP value?
- What elements are responsible for the interactions.
- When does an interaction occur: during or after page load?
- What is the interaction type (press key etc)
With this knowledge you can drive an improvement plan:
- Optimise the Main Thread and watch for timers that overwork the thread.
- Seek out Long Tasks and break up if possible.
- Optimize user interactions to avoid overlap (watch out for forms which can cause many overlaps from fast keyboard interactions).
- Remove unnecessary callbacks during processing.
- Ensure the renderer can execute pending changes by allowing Long Tasks to yield to the Main Threads sequence.
- Reduce DOM size.
Helpful Tools
The are many packs that can help with speed optimisations. One useful one is NitroPack.
The key message is INP is important so understand and work on it now.
Need to improve your web site and web presence - Talk to us Today!
