Jeremy Wagner malchata

Understanding, Measuring, and Optimizing Interaction to Next Paint (INP)

Did you know that 90% of time spent on most web pages is after page load? In this span of time, users are interacting with your website through a series of interactions such as clicks, taps, and keyboard inputs—and the slower your website is to respond to those interactions, the more likely your users will have a negative user experience with your website.

At Google, we've invested significant time in creating new metrics to assess page responsiveness. One of these metrics is First Input Delay (FID), which is a load responsiveness metric that captures the input delay of the first interaction. However, we discovered that we needed a new responsiveness metric that samples more than just the first interaction—and more than simply that interaction's input delay.

In order to comprehensively assess overall page responsiveness, we've created the new Interaction to Next Paint (INP) metric.

React Bias

It may seem like a bold suggestion that we as web developers can choose the wrong tools for the job because we tend to be swayed by appeals to popularity or authority, but simple statistics imply just that. For example, React (https://reactjs.org/) is a JavaScript framework that emphasizes componentization and simplified state management. It enjoys strong advocacy from a vocal and dedicated userbase within the developer community.

Despite React’s apparent popularity, however, The HTTP Archive observed in 2020 that React only accounted for 4% of all libraries in use across the 7.56 million origins it analyzed (https://almanac.httparchive.org/en/2020/javascript#libraries).

For context, The State of JS 2020 Survey (https://2020.stateofjs.com/en-US/), which surveyed roughly 23,765 respondents, offers the following statistics:

70.8% of respondents identified as white.
91.1% identified as male, whereas 5.8% identified as female and 0.9% identified as non-binary/third gender.

	// Credit to Michal Mocny (https://twitter.com/mmocny)
	let worstInp = 0;

	const observer = new PerformanceObserver((list, obs, options) => {
	for (let entry of list.getEntries()) {
	if (!entry.interactionId) continue;

	entry.renderTime = entry.startTime + entry.duration;
	worstInp = Math.max(entry.duration, worstInp);

	// Cribbed this from:
	// https://web.dev/debug-web-vitals-in-the-field/#usage-with-the-web-vitals-javascript-library
	export function getSelector(node, maxLen = 100) {
	let sel = '';

	try {
	while (node && node.nodeType !== 9) {
	const part = node.id ? '#' + node.id : node.nodeName.toLowerCase() + (
	(node.className && node.className.length) ?
	'.' + Array.from(node.classList.values()).join('.') : '');

	/* global registerPaint */

	const paintName = "chemistreak";

	class Chemistreak {
	static get inputProperties () {
	return [
	`--${paintName}-tile-width`,
	`--${paintName}-alternate-by`,
	`--${paintName}-stroke-weight`,

	<?php

	function SubscribeButton ($subscribed, $currentUserId, $userId, $className = null) {
	if (!isset($userId) \|\| !ctype_digit($userId) \|\| $userId === $currentUserId) {
	return "";
	}

	$subscribeButtonClasses = "subscribe-button";

	if (!is_null($className)) {

	// Click the big cookie
	const bigCookie = document.getElementById("bigCookie");

	var bigCookieInterval = setInterval(() => {
	bigCookie.click();
	}, 10);

	// Pet the dragon
	const dragonPetInterval = setInterval(() => {
	Game.ClickSpecialPic();

	// Vendors
	import React, { Fragment, Component } from "react";

	// Components
	import MenuItem from "../MenuItem/MenuItem.js";

	// CSS
	import "./Menu.css";

	class Menu extends Component {

	console.time("Evaluate script.");

	const menuToggleButton = document.getElementById("menu-toggle");
	const closeMenuButton = document.getElementById("close-menu");
	const menu = document.getElementById("menu");
	const overlay = document.getElementById("menu-overlay");
	let menuVisible = false;

	const openMenu = function () {
	console.time("Menu open.");