Skip to content

Hello INP! Here's everything you need to know about the newest Core Web Vital

After years of development and testing, Google has added Interaction to Next Paint (INP) to its trifecta of Core Web Vitals – the performance metrics that are a key ingredient in its search ranking algorithm. INP replaces First Input Delay (FID) as the Vitals responsiveness metric.

Not sure what INP means or why it matters? No worries – that's what this post is for. :)

  • What is INP?
  • Why has it replaced First Input Delay?
  • How does INP correlate with user behaviour metrics, such as conversion rate?
  • What you need to know about INP on mobile devices
  • How to debug and optimize INP

And at the bottom of this post, we'll wrap thing up with some inspiring case studies from companies that have found that improving INP has improved sales, pageviews, and bounce rate. 

Let's dive in!

 

Continue reading...

Continuous performance with guardrails and breadcrumbs

The hardest part about web performance isn’t making your site faster – it’s keeping it that fast. Hearing about a company that devoted significant effort into optimizing their site, only to find their performance right back where it started a few months later, is all too familiar.

The reality is that, as critical as site speed is, it’s also very easy to overlook. It doesn’t jump out like a blurry image or a layout issue. And the majority of modern tools and frameworks that are used to build sites today make it all too easy to compound the issue.

Making performance more visible throughout the development process is one of the most critical things a company can do.

I like to think of it as setting up guardrails and breadcrumbs.

  • We need guardrails to help protect us from shipping code that will result in unexpected regressions.
  • We need breadcrumbs that we can follow back to the source to help us identify why a metric may have changed.

Guardrails and breadcrumbs need to work together. Setting up guardrails without the ability to dive in more will lead to frustration. Having proper breadcrumbs without guardrails in place all but assures we will constantly be fighting regressions after they’ve already wreaked havoc on our sites and our users.

Let’s take a look at both of these concepts and how they should work together.

Continue reading...

NEW: On-demand testing in SpeedCurve!

Image by Freepik

On-demand testing has sparked a lot of discussion here at SpeedCurve over the past year. You've always had the ability to manually trigger a round of tests – based on the scheduled tests in your settings – using the 'Test Now' button. But there hasn't been a lot of flexibility to support nuanced use cases, such as...

"I just deployed changes to my site and want to check for any regressions."

"I saw a change to my RUM data and I want to see if I can replicate it with synthetic for further diagnostics."

"I have a paused site that I don't want to test regularly, but would like to test from time to time."

"Please just let me test any URL I want without setting up a site and scheduling testing."

"I need to quickly debug this script without kicking off tests for my entire site."

"I would like to get a first look at a page in order to troubleshoot regressions I saw in RUM."

Based on your feedback, we've just launched new capabilities for on-demand testing. We're pretty excited about these, and we hope you will be, too!

In this post, we'll:

  • Highlight the differences between on-demand and scheduled testing
  • Cover the various types of on-demand testing, including some of the more common use cases we've heard from SpeedCurve users
  • Step you through running an on-demand test

Let's goooooooo!

Continue reading...

Debugging Interaction to Next Paint (INP)

Interaction to Next Paint (INP) will become a Core Web Vital on March 12th. Not surprisingly, most of the conversations I've had with SpeedCurve users over the last few months have focused on improving INP.

INP measures how responsive a page is to visitor interactions. It measures the elapsed time between a tap, a click, or a keypress and the browser next painting to the screen.

Definition of INP

INP breaks down into three sub-parts

  • Input Delay – How long the interaction handler has to wait before executing
  • Processing Time – How long the interaction handler takes to execute
  • Presentation Delay – How long it takes the browser to execute any work it needs to paint updates triggered by the interaction handler

Pages can have multiple interactions, so the INP time you'll see reported by RUM products and other tools, such as Google Search Console and Chrome's UX Report (CrUX), will generally be the worst/highest INP time at the 75th percentile.

Like all Core Web Vitals, INP has a set of thresholds:

INP thresholds for Good, Needs Improvement and Poor
INP thresholds for Good, Needs Improvement, and Poor


Many sites tend to be in the Needs Improvement or Poor categories. My experience over the last few months is that getting to Good is achievable, but it's not always easy.

In this post I'm going to walk through:

  • How I help people identify the causes of poor INP times
  • Examples of some of the most common issues
  • Approaches I've used to help sites improve their INP

Continue reading...

How to use Server Timing to get backend transparency from your CDN

80% of end-user response time is spent on the front end.

That performance golden rule still holds true today. However, that pesky 20% on the back end can have a big impact on downstream metrics like First Contentful Paint (FCP), Largest Contentful Paint (LCP), and any other 'loading' metric you can think of.

Server-timing headers are a key tool in understanding what's happening within that black box of Time to First Byte (TTFB). 

In this post we'll explore a few areas:

  • Look at industry benchmarks to get an idea of how a slow backend influences key metrics, including Core Web Vitals
  • Demonstrate how you can use server-timing headers to break down where that time is being spent
  • Provide examples of how you can use server-timing headers to get more visibility into your content delivery network (CDN)
  • Show how you can capture server-timing headers in SpeedCurve

Continue reading...

The psychology of site speed and human happiness

In the fourteen years that I've been working in the web performance industry, I've done a LOT of research, writing, and speaking about the psychology of page speed – in other words, why we crave fast, seamless online experiences. In fact, the entire first chapter of my book, Time Is Money (reprinted here courtesy of the good folks at O'Reilly), is dedicated to the subject. 

I recently shared some of my favourite research at Beyond Tellerrand (video here) and thought it would be fun to round it up in a post. Here we're going to cover:

  • Why time is a crucial (and often neglected) usability factor
  • How we perceive wait times
  • Why our memory is unreliable
  • How the end of an experience has a disproportionate effect on our perception
  • How fast we expect pages to be (and why)
  • "Flow" and what it means in terms of how we use the web
  • How delays hurt our productivity
  • What we can learn from measuring "web stress"
  • How slowness affects our entire perception of a brand

There's a lot of fascinating material to cover, so let's get started!

Continue reading...

Building the future of web performance with SpeedCurve

I’m beyond excited to announce that I’m joining the SpeedCurve team this year! I’ll still be doing some consulting work, but I’ll be taking on a few less clients this year so I can focus on helping to make an already amazing performance tool even better, working alongside some of my favorite people in the performance community.

Continue reading...

How to find (and fix!) INP interactions on your pages

Andy Davies – fellow SpeedCurver and web performance consultant extraordinaire – recently shared an impressive Interaction to Next Paint (INP) success:

Andy has promised us a more in-depth post on debugging Interaction to Next Paint. While he's working on that, I'll try not to steal his thunder while I share a tip that may help you identify element(s) causing INP issues for your pages.

Continue reading...

2023 recap: This year was all about making performance easy (well, easier)

Every year feels like a big year here at SpeedCurve, and 2023 was no exception.

Among other things, we turned ten! Ten years is a lot of time to reflect, and over this past year our team has been thinking a lot about not just the "what" and "how" of web performance, but also the "why". Why should we – and you – care about delivering a fast, delightful experience to all your users? This "why" informs all the choices we make about the "what" and "how" of our tools.

Looking back over the past year, if I were to pick a word that defined our goals, that word would be "easier". It's no secret that the past couple of years have been challenging for the tech community. In the current landscape of smaller teams, aggressive goals, and an ever-increasing tech stack, how can we make it easier for you to create impact? 

Our biggest achievements this year have centred on making it easier for you to:

  • Fight regressions and keep your sites fast
  • Measure the impact of Core Web Vitals on actual user experience
  • See correlations between site speed and business metrics
  • Visualize your data
  • Leverage synthetic and real user monitoring
  • Focus on what matters
  • Get help when you need it

Keep reading to learn more...

Continue reading...

How to automatically test the performance of your GitHub pull requests

As highlighted in our December product update, we've been making a lot of improvements in the area of CI/CD. In addition to the new Deployments dashboards and Notes updates, we've launched a new GitHub integration. Our purpose in building this integration is to lower the barrier for getting web performance feedback for your code changes, directly in the environment you are working in.

Follow along below for an example of how you can use this integration in practice to fight web performance regressions and keep your pages fast.

Continue reading...