INP, FID, LCP… All of these acronyms can feel confusing at times. However, it’s worth knowing what they are, particularly if you want your business to be seen when searched for in a web browser.
If you want to speed up your WordPress site, bolster your SEO efforts and site health, learning about INP is going to help. Today, we’ll go through what Google’s INP score is, how to improve your INP score on WordPress, an overview of Core Web Vitals, and tidbits on how developers can support improving a site’s overall INP score.
What is INP?
INP (Interaction to Next Paint) is a metric Google uses to measure how long it takes for the browser to process and respond after a user interaction – like clicking a link or button on a webpage. By tracking INP, developers can discover pain points on a website, find sources of lag, and optimise where appropriate to ensure a smoother user experience.
INP vs FID
INP is somewhat similar to FID (First Input Delay) – but there are a few key differences. The difference between INP vs FID is that the latter specifically measures the time from when a user first interacts with a page (e.g. clicking a link) to when the browser can respond to that interaction.
As of May 2023, Google announced that INP will replace FID as the primary metric for measuring page interaction. This change will become official in March 2024.
While FID focuses on the first user interaction, INP looks at all user interactions on a page. It calculates the time between each user interaction and the next paint (when the browser finishes updating the screen with new content).
Why does INP matter?
There are several reasons why INP scores matter – here are just a few:
1. It improves user experience
A slow INP score negatively impacts site performance, leading to poor user experience with slower load times and laggy interactivity. Good INP scores keep your site feeling fast and responsive and positively signal to Google’s algorithm that your site or online shop is in good health.
2. It can improve your conversion rate (CR)
Fast INP scores have been shown to help with conversion rates. This is because a fast site means quick navigation (among many other things). After all, we want to minimise the steps it takes for customers to convert!
3. Improved SEO
As we touched on previously, Google uses page speed as a ranking factor. Fortunately, fast INP scores help pages rank higher in search results, whereas poor INP scores will do the opposite.
4. Low bounce rate
Slow sites encourage users to bounce and find an alternative. Having a good INP score will help keep visitors on your site (and return in the future).
What causes slow INP scores?
As we established, INP measures how long it takes for the browser to process user interactions before it can move on to display the next lot of content the user is trying to load. A slow INP indicates lag and delays in response when users click, scroll, type or tap on your site. This registers on your Core Web Vitals (which we’ll touch on later) that your site has poor health. Before you can improve the health of your website, it’s important to know the common causes of poor INP performance:
1. Large assets
Large, unoptimised images, video and other forms of multimedia are one of the biggest culprits of slow INP scores. The large file sizes essentially add strain on the browser – increasing load times as a result. This is typically why there are web-friendly file formats such as JPEG and PNG, whereas formats like JPEG 2000, TIFF, and BMP should be avoided.
2. Unnecessary JavaScript
Too much JavaScript code can bottleneck a browser. The more JavaScript you have, the longer it takes the browser to parse and execute sections of code. Plus, too much JavaScript on a webpage can lead to things like slow loading times, decreased performance, poor SEO and compatibility issues for some users. Read more about PHP vs JavaScript and how JavaScript as a server-side language can benefit your website build.
3. Poor caching setup
When assets and media are not cached properly, the website has to request them on every page load which leads to delays and contributes to a slow INP score.
4. Overloaded servers
If your servers are overloaded with traffic, requests will queue up and result in slow response times. This is especially true if you’ve not scaled your server to accommodate high traffic, or fallen victim to a DDoS attack.
5. Complex CSS
CSS is what makes webpages look good and is essential in navigation and branding. However, heavy use of it can increase a website’s “bloat”, and hence add more time to the INP score.
What is a good or bad INP score?
To pass Google’s Core Web Vitals – you need an INP score of 200ms or under for a decent user experience. If the score is above this, it may start to feel slow (and sometimes unresponsive to users). If you want to optimise your INP score – aim for Core Web Vitals INP score between 0-200ms.
In a nutshell:
- An INP below or at 200 milliseconds means that your page has good responsiveness.
- An INP between 200 and 500 milliseconds means that your page's responsiveness needs improvement.
- An INP above 500 milliseconds means that your page has poor responsiveness.
How is INP calculated?
Google calculates INP scores by measuring the time between when a user interacts with a page (e.g. clicking a link, image, tab, or button) and when the browser can respond to that interaction by “painting” new content to display to the user.
It considers two key timestamps: FID and FP (Time to First Paint). The latter is a measurement from the input to the final paint. The longer this time gap, the higher the INP score.
How do I measure my INP score?
Google Pagespeed Insights is the best tool for measuring your site's current INP score. To use it, enter your website’s URL into Pagespeed Insights, click on “Analyse” then scroll down to
"Performance" and "Interaction to next paint".
This will show your current INP score for both mobile and desktop. Here, you’ll be able to identify opportunities where the INP score is higher than ideal. If it’s 200ms or lower – you’re golden!
How do I improve my INP score on WordPress?
If you have a WordPress site (or any site for that matter), improving your INP score should be handled by someone who has web development skills. If this is yourself, then you can get to work right away. Or if you’re unsure, enlist the help of someone who knows code.
After all, INP scores are heavily affected by the time it takes for JavaScript interactions to execute on your website. For instance, when a user clicks a button, JavaScript code runs to execute the expected function, downloaded and executed in the user's web browser. To enhance your INP score, it's important to reduce this delay as much as possible.
If you currently run a slow WordPress site, there are some additional steps you can take to ensure your INP score and overall site speed are optimised.
1. Install the latest version of WordPress
With every patch, WordPress makes important changes to its security as well as performance enhancements. Before doing this, ensure your chosen host supports the latest versions of PHP, MySQL or MariaDB.
To safely install the latest version of WordPress:
- Download the latest version of WordPress
- Unzip the folder
- WordPress will need access to a MySQL (or MariaDB) database:
- Login to your web host and navigate to your chosen database
- Create a new database and make a note of the name
- Create a new user (with a secure password).
- Add this user account to the new database and grant it “All Privileges”.
- Use an FTP client to upload all of your WordPress files
- Navigate to the URL where you uploaded your WordPress files – this starts the installation process
- Proceed with the steps, then when prompted, enter your database details
- Click on Submit, then Run the installation.
2. Reduce and optimise background processes
WordPress is constantly checking for updates, publishing scheduled content, updating plugins and much more. If there are any processes you can stop from automatically updating, do so, as this ensures background scripts and plugins reduce their workload. This then eases the strain on your WordPress site.
Alternatively, consider running these tasks only when necessary rather than keeping them running in the background.
3. Compare changes in PageSpeed Insights
Assuming you checked your INP score before optimising your WordPress site, it’s good to see if it’s made a difference over time. Visit PageSpeed Insights again and place your URL into the search bar to (hopefully!) retrieve a new and improved INP score. If it hasn’t moved by much, there are some more steps you can take…
4. Minify CSS and JavaScript files
Plugins can help speed up your WordPress site, including ones that minify your code. While the latter won’t make any drastic changes (depending on how your site is set up), it can take off a few milliseconds here and there. Small things add up!
If you’re able to – install the WP Rocket plugin and then go to the File Optimisation section. Once there, enable “Minify CSS/Javascript”.
Alternatively, SiteGround can be used too. Their performance tools allow you to easily minify code. Other plugins you can use include:
- Autoptimize
- WP Super Minify
- Merge + Minify + Refresh
If you prefer a more manual approach, sites like minifycode.com can help. Just copy your code there, let it minimise and replace the old code with the new compact version. Remember to back up your site before you upload any changes – otherwise, you may not be able to revert to the original code if something goes wrong.
5. Include lightweight JavaScript on certain functions
When someone clicks a button or activates a process such as a payment, it’s good practice to signal to the user that a process is taking place. Things like payments can take a couple of seconds to process, but if the site appears still with no indication that something is happening, this can make the user wonder if anything is working.
Include some light code to immediately change some on-site copy to something along the lines of “Processing” or “Working on it…”. This way, the user gets instant feedback that a process is happening, which “lessens” the delay of the user’s action.
Now you’re ready to improve your INP score on WordPress! If you require any further assistance with your WordPress Hosting, get in touch and we’ll gladly help.