8 Things You Can Do to Improve INP Right Now

An illustration of a cute, happy, blue dog, wearing glasses. She is cleaning up and organizing her toys. There are toys scattered in front of her, and other toys are neatly arranged in a box on the side. The background color tones are magenta and purple, adding to the charming and friendly aesthetic.
A little bit of tidying goes a long way!

Interaction to Next Paint (INP) replaced First Input Delay (FID) as one of the Core Web Vitals in March of 2024. For both of these, the general idea is that a web page should respond quickly to user inputs — clicks, taps, and keyboard interactions — and both are designed to measure just how “zippy” the page feels.

INP is a more challenging metric than FID, since it looks at every interaction for the entire page view — but don’t worry, we’ve got your back! 😎

In general, the bigger and more complicated a site’s pages are, the more processing a visitor’s device has to do, making it harder for it to respond quickly.

Display advertising is one of the biggest contributors to INP. The big ad networks have been working to roll out improvements in order to mitigate their impact, and they’re making good progress. But it’s not only ads — which means there are some things you can do right now to help improve your site’s INP scores overall. Ready? Let’s go!

1. Paginate comments

Having lots of (legitimate) comments is a great sign that your visitors are digging your content and sticking around to give you feedback. But the more you have on the page, the more work the browser has to do when it needs to respond to an interaction — which means elevated INP scores. To mitigate this, paginate your comments following our quick step-by-step instructions.

An example of the older and new comment link pagination style for paginated comments for WordPress.
An example of the older and new comment link pagination style for paginated comments for WordPress.

2. Reduce or remove duplicate widgets

More elements on a web page (aka more DOM Nodes) can be directly related to higher INP numbers, since it’s more for the browser to redraw after an interaction. Removing duplicate widgets can help reduce the DOM and, therefore, your INP.

There’s no need to totally remove all of these widgets or elements, but if you have multiples, remove duplicates.

Examples of widgets we commonly see duplicated include:

  • “Related Posts” widgets or sections
  • Social profile link icons
    • We often see these in the header, sidebar, and footer – you really only need them once.
  • Social sharing buttons
    • For mobile, we recommend them after the content and/or the sticky buttons. Avoid those at the top of the content, as readers are unlikely to share before they’ve read your post — unless you are displaying high share counts, which may entice people to continue reading once they land on your content (“social proof”).

Bonus Tip: The top recommended widgets for your sidebar include your Author Bio widget, a Popular Posts list widget displaying six posts, and a Seasonal Posts list widget, also displaying six posts.

If you have any other widgets in your sidebar, consider removing them, or hiding other widgets on mobile (where INP is more challenging). If you use the Feast plugin, you can add the class .feast-desktop-only to the Advanced Class settings on a block. The Block Visibility Plugin is another good option.

3. Do a plugin and script audit

Find plugins on your site that do the same thing, and remove any extras. For example, if you have three plugins for newsletter opt-in forms, see if you can consolidate them and use just one.

Also, be on the lookout for plugins that you’re not using anymore. Many plugins load scripts and other code on your site even when you’re not actively using the plugin features.

Finally, remove old scripts like the old Google Analytics Universal Analytics (UA) tags. This article can help you find where your Google Analytics scripts live.

When modifying your Google Analytics code, please be careful not to remove your GA4 tag or code. When in doubt, please ask your support team for clarification before editing.

4. Reduce or remove extra elements

This is another way to help tidy up the additional elements on your pages that can lead to increased INP.

Some widgets or blocks allow you to display “extras” below the thumbnail, such as Recipe Rating Stars or Cook Times. While you don’t want to remove recipe ratings altogether, nor do away with recipe cook time information in the recipe card, removing these extra elements from the sidebar or homepage can help reduce INP.

Example of a post list block with "extra" elements like ratings stars and cook times.
Example of a post list block with “extra” elements like rating stars and cook times.

5. Simplify menus

Streamlining your menus can help improve INP, so see if you can pare down the number of links in your navigation.

However, menu links are an important SEO signal, so please don’t go overboard and remove your menus or reduce them to just one or two links. Instead, if you have the same links twice in two menus, such as in both a header and footer menu, remove one of the links and only leave the link in the menu that is most appropriate. For example, put your Terms of Service and Privacy Policy links in the footer menu while keeping links like your Recipe Index or other major Category archives in the header menu where they belong.

In general, it’s also best to avoid overly complex mega menus or extensive drop-down menus.

6. Disable sticky menus

Sticky menus are menus that cling to the top of the screen when you scroll down or up on a web page.

Now, not all sticky menus are created equal. Some are driven purely by CSS and aren’t an issue. The Feast Design Co. sticky menus are an example of this style of sticky menu and aren’t problematic. Similarly, CultivateWP sticky menus are performant and generally not a worry for INP.

Be on the lookout for sticky menus that appear after you’ve scrolled down the page a bit or only appear when you scroll back up the page. These are typically powered by JavaScript and can negatively impact INP.

7. Consider removing scroll-to-top buttons

Like sticky menus, back-to-top buttons aren’t created equal. Some are powered solely by CSS and are generally fine, including those from Feast Design Co. and CultivateWP.

Example of a back-to-top button.
Example of a back-to-top button. In this case, a Feast Design Co. button that’s purely driven by CSS and not a general INP concern like some other scroll-to-top buttons may be.

Others are driven by JavaScript and may include features like “smooth scrolling” which require even more processing power.

As always, we encourage you to be mindful of your users and their experience. If you use a heatmap tool like Microsoft Clarity and it shows that your users are actively using this button to scroll to the top of the page, definitely consider leaving this feature. The INP impact is generally not so large that it would outweigh providing this feature for readers who find it useful.

8. Remove underperforming opt-in forms

Building your mailing list is something every publisher should do, of course. However, opt-in forms are notoriously challenging for site speed. If you have a popup plus multiple opt-in forms on your pages, do a review to see which forms really are performing and getting lots of signups.

If you have any forms that aren’t keeping up with the rest, ditch ’em!

Wrapping Up

We hope you find these actionable INP tips helpful to start improving your site’s INP right now. As with all Core Web Vitals, keep in mind that it can take up to 28 days for changes to show up in Google’s reports (in PageSpeed Insights or Search Console).

While more sites are struggling with INP than they were for FID, the good news is that the majority of the sites that we’ve see that aren’t “Good” are in the 201 – 230ms range, which is very close to the target threshold of 200ms. If your site is one of those, applying even one or two of these recommendations could help it get across the finish line! 🏃‍♀️

Filed Under:

Tagged With:

Related Posts

Comments

  1. I understand why you are recommending enabling pagination for comments yet in doing so, Yoast throws a flag on the play and recommends against this under site health as it is “bad” for SEO. Thoughts?

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.