200 Milliseconds Sound Fast? Interaction To Next Paint Can Help Boost The Responsiveness Of Your Website

200 Milliseconds Sound Fast? Interaction To Next Paint Can Help Boost the Responsiveness Of Your Website
  • 5 min read

May Went Out with a Roar. What a month. Google Core Update, two new Web Vitals User Metrics, and WordPress 6.0!

On May 25, Google announced the start of its broad-based Core Update. The May 2022 Core Update is expected to last two weeks. People were reporting shifts on the search results pages. Did you notice any change in your SERPs?

WordPress 6.0, the second major WordPress release of 2022, also rolled out. WordPress 5.9, released in January 2022, introduced full site editing (FSE) for the block editor. With WordPress 6.0. the focus is once again on the expansion and improvements of the functions of the Block Editor. Are all of your client’s websites updated to WordPress 6.0?

Updates Everywhere! What Happened That’s Important for My Websites?

The big brain move by Google in May was the addition of Time to First Byte (TTFB) and Interaction to Next Paint (INP) to their Web Vitals metrics. Adding new metrics is Google’s way of saying, “keep your focus on what’s vital.”

You can now measure responsiveness. You can see where those grains of sand are slowing down the gears. That’s great for you and your portfolio of client websites. 

That’s why a Tesla is faster than a gas-powered car. In an internal combustion engine, you lose speed through all parts connecting with other parts and the friction. Less moving parts means the energy goes to the wheels.

The Core Web Vitals are growing up! pagespeed.web.dev just got an upgrade, the RUM data now include the Interaction to Next Paint (INP) and the Time to first Byte (TTFB). Both great choices if you ask me! The INP is in my opinion a much better way to measure responsiveness than the First Input Delay which could easily be manipulated. The Time To First Byte should always have been more important since it precedes any performance metic. No response = no paint, no interaction etc!.

Arjen Karel

What is Interaction to Next Paint (INP), and Why is it Important?

In addition to Google Core Web Vitals, Google is measuring a growing number of user-centric response metrics, including Interaction to Next Paint (INP) and Time to First Byte (TTFB). However, before you retool your team, Google says:

These field metrics are currently experimental but are now available for users to try out. Experimental metrics may change or disappear.

Google.com

Interaction to Next Paint (INP) is a new metric that aims to represent a page’s overall interaction latency by selecting one of the single longest interactions when a user visits a page. INP is most often the 98th percentile of interaction latency for pages with many interactions. For pages with less than 50 interactions, INP is the interaction with the worst latency.

There are many UI elements. KeyDown occurs when a key is pressed. KeyUp occurs when a key is released. There is DragOver, Drop, OnFocus, and many more. Each interaction is imputed, processed, and a result presented to the user.

The time between every action is measurable, and a long interval between clicking and receiving can add to a poor User Experience.

Interaction to Next Paint (INP) measures the latency of our website interactions. Some examples of these interactions include:

  • A mouse event – such as clicking on a button to change the colors of a clothing article.
  • An interactive element activated on a touchscreen with a finger —  perhaps on a map. 
  • Pressing a key on either a mobile or a desktop device — to show the answer to a question.

Does your website have a lot of interactions? Are you running eCommerce or eLearning platforms? Since you know users will not want to wait around for that mouse event INP is pretty exciting. 

You can now see what interactions are slowing you down and perhaps see where you may be losing conversions through slow response time.

How much money is your eCommerce site losing because of latency, poor performance, and, to be frank, a Managed WordPress Host whose technology is outdated for today’s customer expectations?

Rocket.net

How Can I Measure Google’s Interaction to Next Paint Metric?

To measure Google’s Interaction to Next Paint, head on over to PageSpeed Insights to measure the INP of your page. Remember. You are measuring that page — not your entire website. 

INP is similar to Cumulative Layout Shift (CLS) in that the measurement values will change as the user remains on your web page. Once the user has left the page, the measurement is made, creating an overall INP value. Some pages will have more interactions than others. Some pages’ interactions may not happen if an action is not chosen.

Just because you pass vitals now doesn’t mean you’ll pass next month. Core web vitals are experimental and changing. Check back regularly and remain curious!

A Responsive Website Means More Than Flexible Blocks in Your CSS

Measuring Interaction to Next Paint is pretty exciting because we can now measure how responsive our website is beneath the fingers of our users. Remember when a responsive website meant our menu collapsed into a hamburger? 

And it’s not just mobile that counts for vitals. Desktop views are just as important – especially if we’re talking about those websites people take their time over.

Interaction to Next Paint means measuring the time it takes for elements on the page to respond to an interaction. Now we can see how long it takes for a product image to change if the user chooses another color or how long the answer takes to appear on the screen. The speed here can be a knockout for many users. Remember – speed wins.

Shortening the latency between the stages of each interaction makes a website truly responsive. With speed problems solved, you can focus where it really counts – bettering your agency clients’ day-to-day experience with their business.

Speed is so important on a website because you want to attract and retain potential customers. And you want them to tell their friends. What keeps people from staying on your site – and converting – is a poor website experience.

Rocket.net

Microinteractions Are the Difference Between an Okay Website and a Great Website

Save the interaction latency. Get rid of the interactions, you say?

Microinteractions are small things that give our users the feeling of being able to do something. It’s the feeling of no longer being an insignificant, rigid participant but being able to move, say, or change something with little effort. The user is engaged playfully without things getting complicated. Gamification, right?

Microinteractions make all the difference to our online experience, so don’t throw out the baby with the bathwater just to save cleaning the bathtub.

More and more, brands are looking to foster connections with their customers. While much attention has been placed on communication channels, it is equally important to take advantage of the micro-moments where you can provide customers with a positive user experience.

UsabilityGeek.com

Talk Is Cheap. Let Rocket Show You What The Fastest WordPress Hosting REALLY Means!

Saving site performance, your agency’s time, and money? Yes. The Rocket Platform has built-in features that eliminate your need for otherwise paid versions of security, image optimization, CDN, and JS content loader plugins. They are features built into your new favorite platform (the product formerly known as Managed WordPress Hosting).


Let’s talk about how we can migrate your site to Rocket.net, the fastest WordPress hosting available anywhere. Launch your Mission today!