Atlantic Business Technologies, Inc.

Author: Connor Mooneyhan

  • What is Interaction to Next Paint (INP)?

    What is Interaction to Next Paint (INP)?

    In March of 2024, the Google Chrome Team replaced one of their original Core Web Vitals with one they had been testing for two years: Interaction to Next Paint (INP). With this move, INP became the new gold standard for testing the “snappiness” of users’ experience on the web. But what is a Core Web Vital, and why does it matter?

    What is a Core Web Vital?

    Web Vitals are metrics put out by Google intended to help website owners understand the quality of experience they are delivering to their users. Some of these metrics apply less to some websites than others, so Google has designated three of these which they consider to be relevant to every website as Core Web Vitals. These cover three categories of user experience: loading, interactivity, and visual stability. INP is the metric corresponding to “interactivity.” Importantly, this is not just about user experience; Core Web Vitals also affect a site’s page ranking in Google. 

    What is INP?

    INP measures (with a couple technical exceptions) the duration of the longest interaction on a page. Interactions primarily consist of clicks (or taps on mobile) and key presses, and the interaction length is measured as how long the page takes to do what it needs to do after the user initiates the interaction. Thus, if a page has a bad INP, this does not mean that all interaction lengths are long, but rather that there exists some interaction which takes an inordinately long amount of time.

    How can I measure and improve my site’s INP?

    As a site owner, though there are many ways to measure INP, all you need to do is enter your site URL into Pagespeed Insights, which is a tool run by Google themselves that will tell you how your site performs across all three Core Web Vitals. If they tell you that you have a good score, you should have nothing to worry about. If not, you may need to do some digging on what exactly the issue is that they’re detecting. There is no one-size-fits-all resolution to this sort of issue, but a competent developer (like those at Atlantic BT!) should be able to investigate where the slow interactions are and determine both why they’re slow and how they can be made faster. They’ll comb through the site, looking at every interaction the user has with the page, including input delays, button clicks, and more. These links might be a good place to start if you’re introducing the issue to a developer:

    1. Optimize Interaction to Next Paint
    2. Measure And Optimize Interaction to Next Paint (INP)
    3. All about Core Web Vitals: INP (Interaction to Next Paint)

    While fixing INP may not be simple, it is certainly worth the effort put into improving user experience and search result ranking. Since INP just replaced another related-but-different Core Web Vital, now is a good time to re-evaluate your site and see if anything needs to be done. If there is something you need to fix, and you don’t have the capacity to handle it in-house, consider letting us know! We’d love to figure out how we can help.

  • WordPress WebP Conversion

    WordPress WebP Conversion

    Looking to resolve the “Serve images in next-gen formats” warning in PageSpeed Insights? This is a step-by-step guide for a WordPress website. This is for sites that are using S3 to host all media. The implementation that inspired this post used WP Offload Media, but the steps involving that tool are likely simple enough that they’ll carry over to other offloading plugins, so I’ve abstracted that part of the instructions to be plugin-agnostic.

    Instructions

    1. Add the EWWW Image Optimizer plugin to your project (WP Packagist has it at the time of writing).
    2. Activate EWWW and go to its settings page
    3. Turn on Ludicrous Mode so you can see all settings
    4. Ensure both WebP Conversion and Force WebP are turned on (Force WebP is regrettable, but it’s necessary if you don’t have local copies of your images, as specified in the linked article).
    5. Save your settings changes.
    6. If you have pre-existing media, you’ll want to run a Bulk Optimize as outlined below to make sure all your images have a WebP version available.
      1. Use your media offloading plugin to copy all media from the bucket to the server if they aren’t there already.
      2. Run EWWW’s Bulk Optimize tool (Media > Bulk Optimize) with the WebP Only and Force re-optimize options checked. Theoretically, it should work without these checked, but both seem to skip over some items unnecessarily when unchecked, leading to an incomplete bulk optimization. If you want to compress as well, it may be best to do that in a separate optimization step.
      3. After all media has been converted, copy everything back to the bucket from the server.
    7. Now you need to choose a WebP delivery method. Go back to the EWWW settings and scroll to the bottom of the Basic tab where it says “WebP Delivery Method”. Picture WebP Rewriting was chosen for my implementation since it uses native browser functionality designed for exactly this purpose and requires no JS injection. If you have extra URL patterns that you want to be rewritten, add them to the WebP URLs section as described in this article, which is the same as the one linked for the Force WebP option above.

    Hopefully, if you followed these instructions, you should now be serving WebP images to customers whose browsers support the format, all from your S3 bucket. You can delete the images from the server now if you want them only stored on the bucket.