惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

Last Week in AI
Last Week in AI
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
博客园_首页
雷峰网
雷峰网
IT之家
IT之家
I
InfoQ
酷 壳 – CoolShell
酷 壳 – CoolShell
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
B
Blog
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
博客园 - 【当耐特】
大猫的无限游戏
大猫的无限游戏
博客园 - 聂微东
Hugging Face - Blog
Hugging Face - Blog
A
About on SuperTechFans
月光博客
月光博客
P
Proofpoint News Feed
博客园 - 三生石上(FineUI控件)
J
Java Code Geeks
G
Google Developers Blog
小众软件
小众软件
宝玉的分享
宝玉的分享
Jina AI
Jina AI
V
Visual Studio Blog

DEV Community

Authentication Security Deep Dive: From Brute Force to Salted Hashing (With Java Examples) Why AI Systems Don’t Fail — They Drift Spilling beans for how i learn for exam😁"Reinforcement Learning Cheat Sheet" I Replaced Chrome with Safari for AI Browser Automation. Here's What Broke (and What Finally Worked) How Python Borrows Other People's Work The $40 Architecture: Processing 1 Billion API Requests with 99.99% Uptime Vibe Coding: A Workflow Guide (From Zero to SaaS) Most webhook security guides protect the wrong side. The scary part is delivery. Headless CMS for TanStack Start: Build a Blog with Cosmic EU Age Verification App "Hacked in 2 Minutes" — What Actually Happened Comfy Cloud’s delete function does not actually remove files Running AI Models on GPU Cloud Servers: A Beginner Guide Event-driven media intelligence with AWS Step Functions and Bedrock I scored 500 AI prompts across 8 quality dimensions — here's what broke How to Call Google Gemini API from Next.js (Free Tier, No Backend Needed) The Portal Protocol: Reclaiming Human Connection in the Age of AI How to Fix Your Team's Scattered Knowledge Problem With a Self-Hosted Forum Intro to tc Cloud Functors: A Graph-First Mental Model for the Modern Cloud Designing Multi-Tenant Backends With Both Ownership and Team Access I Built a Neumorphic CSS Library with 77+ Components — Here's What I Learned PostgreSQL Performance Optimization: Why Connection Pooling Is Critical at Scale Cómo construí un SaaS multi-rubro para gestionar expensas en Argentina con FastAPI + Vue 3 🚀 I Built an Ethical Hacking Scanner Tool – Open Source Project I Replaced /usage and /context in Claude Code With a Single Statusline A Pythonic Way to Handle Emails (IMAP/SMTP) with Auto-Discovery and AI-Ready Design I Collected 8.9 Million Polymarket Price Points — Here's What I Found About How Markets Really Move EcoTrack AI — Carbon Footprint Tracker & Dashboard Everyone's Using AI. No One Agrees How. 5 self-hosted ebook managers worth trying in 2026 Building Your First AI Agent with LangChain: From Chatbot to Autonomous Assistant
INP in production: what we wish we had measured earlier
Apogee Watcher · 2026-05-28 · via DEV Community

We spent years teaching clients to watch Largest Contentful Paint. Hero images, preload tags, CDN moves: the story was easy to tell in a slide deck. When Interaction to Next Paint became a Core Web Vital in March 2024, most of our accounts already had a green LCP on the homepage. What we had not built was a habit of measuring the clicks that happen after that paint.

Interaction to Next Paint (INP) is a field Core Web Vital about responsiveness across a visit, not a single moment at load. That sounds obvious on paper. In production it meant we were auditing the wrong URLs, trusting the wrong proxies, and celebrating fixes that never touched the menu, the cart step, or the filter drawer where users actually waited.

What we measured before INP (and the gaps we left open)

Our default audit pack looked like a loading problem: homepage, maybe a top landing page, PageSpeed Insights, a Lighthouse export, a note on LCP and Cumulative Layout Shift. First Input Delay had rarely failed on those runs anyway, so "interactivity" felt solved once the main thread cleared the first second.

We skipped, or measured only once:

  • Post-load routes on single-page apps (category filters, account areas, checkout steps after the basket).
  • Templates shared across dozens of URLs (global nav, consent banner, chat widget) where one slow handler poisons INP on every page that includes it.
  • Mobile versus desktop separately, even when the business cared about phone traffic for leads.
  • Field data on URLs with modest traffic, because CrUX buckets were thin and lab scores looked reassuring.

None of that is mysterious in hindsight. It is boring portfolio hygiene we had deferred because LCP regressions were louder in client emails.

Where poor INP shows up in production (and why FID looked fine)

The pattern that kept repeating: the first tap after load felt acceptable. The fifth interaction did not. Opening a sticky navigation, applying faceted search, submitting a multi-step form, or hydrating a client-rendered block after an API round trip: those were the gestures INP cares about, and FID never punished us for ignoring them.

Third-party tags were the other recurring villain, but not always on the homepage. A tag manager change on a blog template or a new A/B snippet on checkout could leave INP poor on URLs we had not re-tested because "we already fixed performance last quarter." Shared embeds made it worse: slow interactions inside cross-origin iframes still count toward what users experience, while your own JavaScript cannot inspect the frame. Field data and DevTools frame selection were the only honest witnesses.

We also learned to distrust lab-only confidence. Total Blocking Time during a synthetic load often moved in the same direction as INP problems, but it is not interchangeable. When CrUX said "needs improvement" and Lighthouse looked fine, the argument was almost always JavaScript still busy after the hero painted, not TTFB.

How we monitor INP across client sites today

These are operational choices, not metric definitions. For the 200 ms threshold, interaction phases, and how INP sits next to LCP and CLS, we keep the reference material on the main blog rather than repeating it here:

Five INP monitoring habits for agency portfolios

  1. We name three to six URLs per client that represent revenue or reputation, not only the homepage. At least one URL must be a post-load journey (checkout, signup flow, logged-in area).
  2. We treat INP as field-first. Lab runs still happen before deploys; alerts and client reports lean on field percentiles where CrUX has volume, and on repeated URL-level checks where it does not.
  3. We split mobile and desktop in reviews even when stakeholders only ask for "the score." INP on phone traffic has failed while desktop looked fine on the same template more than once.
  4. We re-baseline after tag manager releases, framework upgrades, and new client themes, because those changes rarely show up as an LCP regression on the homepage alone.
  5. We document which template owns shared chrome (header, footer, consent). When INP moves on many URLs at once, we search there before optimising individual page copy.

For agencies, the portfolio angle matters: one slow pattern in shared JavaScript can drag INP on every property that imports it. That is less visible in a one-off Lighthouse run than in stored history across templates, which is why we layer scheduled tests and budgets onto manual spot checks instead of replacing them.

How to improve INP: an afternoon audit on real user journeys

If you are reading this before your next client QBR, you do not need a new slide on why Interaction to Next Paint exists. You need a short list of interactions real users perform on the URLs you already maintain, and a decision about who owns the alert when field INP slips.

Run this in an afternoon:

  • Pick one client site. List five clicks users actually make after the hero loads (not hover, not scroll).
  • Open Chrome DevTools Performance, record each path on a mid-tier phone profile, and note which step waits on a long task.
  • Compare that list to the URLs in your monitoring tool or spreadsheet. If checkout is not on the list, your governance still thinks performance is a loading problem.

When you are ready to set thresholds and notifications across many sites, treat INP like any other budget metric: agree the number, agree the channel, agree who clears the alert. The guides above walk through fixes once you know which interaction is slow; Google's own long-task and input-delay articles are the right next step after you have a name for the slow gesture.

Next steps for Core Web Vitals responsiveness

We wish we had measured post-load journeys earlier, separated mobile from desktop in reviews, and stopped assuming a healthy first second meant a healthy visit. INP did not create sluggish UIs; it made the ones we had been ignoring visible in Search Console and in client frustration at the same time.

Keep manual traces for the argument in the room. For a portfolio, store field INP on the URLs and templates that matter, re-check after shared script changes, and read the Watcher articles linked above when you need definitions and fix workflows, not another opinion thread about whether responsiveness counts for SEO.