[{"data":1,"prerenderedAt":467},["ShallowReactive",2],{"page-\u002Fblog\u002Fcore-web-vitals-2026-inp-ai-sites":3,"\u002Fblog\u002Fcore-web-vitals-2026-inp-ai-sites-surround":458},{"id":4,"title":5,"author":6,"body":11,"category":436,"date":437,"description":438,"extension":439,"image":440,"meta":441,"navigation":449,"ogImage":450,"path":451,"published":449,"robots":450,"schemaOrg":450,"seo":452,"seoDescription":453,"seoTitle":454,"sitemap":455,"stem":456,"__hash__":457},"blog\u002Fblog\u002Fcore-web-vitals-2026-inp-ai-sites.md","Core Web Vitals in 2026: INP, AI-Generated Sites, and the Performance Mistakes Costing You Customers",{"name":7,"role":8,"imageUrl":9,"href":10},"Bret Oreta","Admin","https:\u002F\u002Fbretoreta.me\u002Fimages\u002Fopt\u002Favatar-96.webp","https:\u002F\u002Fbretoreta.me\u002Fabout",{"type":12,"value":13,"toc":419},"minimark",[14,18,29,52,55,60,63,66,86,89,93,96,110,113,116,120,125,137,244,247,251,254,257,261,264,267,281,285,288,291,295,302,306,309,313,316,319,323,326,349,352,356,377,380,384,387,390,394,397,415],[15,16,17],"p",{},"Core Web Vitals are still a useful proxy for the experience your visitors actually have. In 2026, the hard part is no longer just making images smaller. It is keeping a page responsive while it runs analytics, chat widgets, personalization, AI components, and a large JavaScript framework.",[15,19,20,21,28],{},"Google’s three ",[22,23,27],"a",{"href":24,"rel":25},"https:\u002F\u002Fweb.dev\u002Farticles\u002Fvitals",[26],"nofollow","Core Web Vitals"," remain:",[30,31,32,40,46],"ul",{},[33,34,35,39],"li",{},[36,37,38],"strong",{},"LCP"," — largest contentful paint, ideally 2.5 seconds or less.",[33,41,42,45],{},[36,43,44],{},"INP"," — interaction to next paint, ideally 200 milliseconds or less.",[33,47,48,51],{},[36,49,50],{},"CLS"," — cumulative layout shift, ideally 0.1 or less.",[15,53,54],{},"Google evaluates field data at the 75th percentile. That means the slowest quarter of your visitors matters. A fast office laptop is not the benchmark.",[56,57,59],"h2",{"id":58},"why-inp-gets-teams-in-trouble","Why INP gets teams in trouble",[15,61,62],{},"INP measures the delay between a user interaction and the next visual update. A page can load quickly and still feel broken if clicking a button does nothing for half a second.",[15,64,65],{},"Common causes:",[30,67,68,71,74,77,80,83],{},[33,69,70],{},"long JavaScript tasks blocking the main thread,",[33,72,73],{},"heavy hydration on pages that do not need it,",[33,75,76],{},"third-party scripts loading late,",[33,78,79],{},"chat and analytics widgets,",[33,81,82],{},"large client-side data requests triggered by a click,",[33,84,85],{},"unnecessary animation work.",[15,87,88],{},"AI-generated front ends often add all of these at once: a chat widget, a motion library, a component framework, a state store, and a dozen third-party scripts.",[56,90,92],{"id":91},"measure-the-right-data-first","Measure the right data first",[15,94,95],{},"Start with field data:",[30,97,98,101,104,107],{},[33,99,100],{},"Chrome UX Report (CrUX) in PageSpeed Insights,",[33,102,103],{},"Search Console’s Core Web Vitals report,",[33,105,106],{},"a real-user monitoring tool such as your analytics provider,",[33,108,109],{},"custom Web Vitals events sent to your own endpoint.",[15,111,112],{},"Then use lab tools for diagnosis. Lighthouse and WebPageTest are useful, but they are not a substitute for what real users experience on real devices.",[15,114,115],{},"For INP, identify the interactions that matter: navigation, add to cart, form submit, filters, chat open, and menu toggles. Optimize the interactions that support revenue.",[56,117,119],{"id":118},"the-highest-impact-fixes","The highest-impact fixes",[121,122,124],"h3",{"id":123},"break-up-long-tasks","Break up long tasks",[15,126,127,128,132,133,136],{},"If a click handler does heavy work, split it. Yield to the main thread between chunks. Use ",[129,130,131],"code",{},"scheduler.yield()"," where supported, or a small ",[129,134,135],{},"setTimeout"," fallback.",[138,139,144],"pre",{"className":140,"code":141,"language":142,"meta":143,"style":143},"language-js shiki shiki-themes material-theme-lighter github-light github-dark","async function handleFilter() {\n  renderSkeleton()\n  await new Promise(requestAnimationFrame)\n  const results = await fetchResults()\n  renderResults(results)\n}\n","js","",[129,145,146,169,179,204,225,238],{"__ignoreMap":143},[147,148,151,155,158,162,166],"span",{"class":149,"line":150},"line",1,[147,152,154],{"class":153},"sbsja","async",[147,156,157],{"class":153}," function",[147,159,161],{"class":160},"sGLFI"," handleFilter",[147,163,165],{"class":164},"sP7_E","()",[147,167,168],{"class":164}," {\n",[147,170,172,175],{"class":149,"line":171},2,[147,173,174],{"class":160},"  renderSkeleton",[147,176,178],{"class":177},"skxfh","()\n",[147,180,182,186,190,194,197,201],{"class":149,"line":181},3,[147,183,185],{"class":184},"sVHd0","  await",[147,187,189],{"class":188},"smGrS"," new",[147,191,193],{"class":192},"sZMiF"," Promise",[147,195,196],{"class":177},"(",[147,198,200],{"class":199},"su5hD","requestAnimationFrame",[147,202,203],{"class":177},")\n",[147,205,207,210,214,217,220,223],{"class":149,"line":206},4,[147,208,209],{"class":153},"  const",[147,211,213],{"class":212},"s_hVV"," results",[147,215,216],{"class":188}," =",[147,218,219],{"class":184}," await",[147,221,222],{"class":160}," fetchResults",[147,224,178],{"class":177},[147,226,228,231,233,236],{"class":149,"line":227},5,[147,229,230],{"class":160},"  renderResults",[147,232,196],{"class":177},[147,234,235],{"class":199},"results",[147,237,203],{"class":177},[147,239,241],{"class":149,"line":240},6,[147,242,243],{"class":164},"}\n",[15,245,246],{},"The goal is feedback first, expensive work second.",[121,248,250],{"id":249},"defer-non-critical-javascript","Defer non-critical JavaScript",[15,252,253],{},"Load analytics, chat, and marketing tags after the page is interactive. Do not let a third-party widget block the hero or the first click.",[15,255,256],{},"Audit every script. Remove what you cannot justify. A tag manager does not make a tag free.",[121,258,260],{"id":259},"render-critical-content-on-the-server","Render critical content on the server",[15,262,263],{},"If the hero, navigation, and primary content are client-rendered, you are paying for hydration before the user can interact. Use SSR or prerendering for content pages.",[15,265,266],{},"In Nuxt, that often means:",[30,268,269,272,275,278],{},[33,270,271],{},"prerender marketing pages,",[33,273,274],{},"use server components or islands for interactive widgets,",[33,276,277],{},"lazy-hydrate below-the-fold components,",[33,279,280],{},"keep the page payload small.",[121,282,284],{"id":283},"optimize-images-properly","Optimize images properly",[15,286,287],{},"Use responsive formats and dimensions. Do not ship a 2400px image into a 400px card. Explicit width and height prevent layout shift.",[15,289,290],{},"If you run Nuxt, the image module and build-time variants help, but the source asset still matters.",[121,292,294],{"id":293},"control-fonts","Control fonts",[15,296,297,298,301],{},"Self-host or preload the critical font. Use ",[129,299,300],{},"font-display: swap"," or optional. Avoid loading five weights when two will do.",[121,303,305],{"id":304},"reserve-space-for-dynamic-content","Reserve space for dynamic content",[15,307,308],{},"Ads, embeds, cookie banners, and chat widgets should have reserved dimensions. CLS is usually a layout discipline problem, not a framework problem.",[121,310,312],{"id":311},"audit-ai-chat-widgets","Audit AI chat widgets",[15,314,315],{},"A chat widget can be the heaviest thing on the page. Load it on interaction, not on initial render. Do not mount the whole chat application for a closed bubble.",[15,317,318],{},"This is especially important on mobile, where CPU and memory are limited.",[56,320,322],{"id":321},"ai-generated-sites-need-extra-scrutiny","AI-generated sites need extra scrutiny",[15,324,325],{},"AI can generate a page that looks finished while hiding expensive mistakes:",[30,327,328,331,334,337,340,343,346],{},[33,329,330],{},"duplicated component libraries,",[33,332,333],{},"unused dependencies,",[33,335,336],{},"excessive animation,",[33,338,339],{},"large unoptimized images,",[33,341,342],{},"client-side fetching for SEO content,",[33,344,345],{},"scripts loaded from three different providers,",[33,347,348],{},"no measurement plan.",[15,350,351],{},"Review the output like a performance engineer, not a demo viewer. Run a production build, inspect the bundle, and test on a mid-range Android phone.",[56,353,355],{"id":354},"a-practical-core-web-vitals-workflow","A practical Core Web Vitals workflow",[357,358,359,362,365,368,371,374],"ol",{},[33,360,361],{},"Pull field data from CrUX and Search Console.",[33,363,364],{},"Identify the worst templates, not just the homepage.",[33,366,367],{},"Measure the key interactions on those templates.",[33,369,370],{},"Fix the largest long tasks and render-blocking resources.",[33,372,373],{},"Re-measure with real users after deployment.",[33,375,376],{},"Add performance budgets to CI.",[15,378,379],{},"Performance is not a one-time audit. It regresses every time someone adds a script.",[56,381,383],{"id":382},"does-this-still-affect-seo","Does this still affect SEO?",[15,385,386],{},"Core Web Vitals are not a magic ranking switch, but page experience is part of a broader quality picture. More importantly, slow pages lose conversions before SEO gets a chance to help.",[15,388,389],{},"A site that loads fast, responds immediately, and does not jump around is easier to use, easier to crawl, and easier to trust.",[56,391,393],{"id":392},"the-bottom-line","The bottom line",[15,395,396],{},"In 2026, performance work is mostly about restraint. Ship less JavaScript, defer what you can, render the important content early, and make every interaction respond immediately.",[15,398,399,400,404,405,409,410,414],{},"If you want a performance review of an existing site, ",[22,401,403],{"href":402},"\u002Fproject","see how I work"," or ",[22,406,408],{"href":407},"\u002Fcontact","book a free 15-minute call",". For the search side, read ",[22,411,413],{"href":412},"\u002Fblog\u002Fgenerative-engine-optimization-2026","Generative Engine Optimization in 2026",".",[416,417,418],"style",{},"html pre.shiki code .sbsja, html code.shiki .sbsja{--shiki-light:#9C3EDA;--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sGLFI, html code.shiki .sGLFI{--shiki-light:#6182B8;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sP7_E, html code.shiki .sP7_E{--shiki-light:#39ADB5;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .skxfh, html code.shiki .skxfh{--shiki-light:#E53935;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sVHd0, html code.shiki .sVHd0{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#D73A49;--shiki-default-font-style:inherit;--shiki-dark:#F97583;--shiki-dark-font-style:inherit}html pre.shiki code .smGrS, html code.shiki .smGrS{--shiki-light:#39ADB5;--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sZMiF, html code.shiki .sZMiF{--shiki-light:#E2931D;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .su5hD, html code.shiki .su5hD{--shiki-light:#90A4AE;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s_hVV, html code.shiki .s_hVV{--shiki-light:#90A4AE;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":143,"searchDepth":171,"depth":181,"links":420},[421,422,423,432,433,434,435],{"id":58,"depth":171,"text":59},{"id":91,"depth":171,"text":92},{"id":118,"depth":171,"text":119,"children":424},[425,426,427,428,429,430,431],{"id":123,"depth":181,"text":124},{"id":249,"depth":181,"text":250},{"id":259,"depth":181,"text":260},{"id":283,"depth":181,"text":284},{"id":293,"depth":181,"text":294},{"id":304,"depth":181,"text":305},{"id":311,"depth":181,"text":312},{"id":321,"depth":171,"text":322},{"id":354,"depth":171,"text":355},{"id":382,"depth":171,"text":383},{"id":392,"depth":171,"text":393},"Performance","2026-10-14","A 2026 Core Web Vitals guide focused on INP, AI-generated front ends, third-party scripts, and the fixes that improve real user experience.","md","\u002Fimages\u002Fblog\u002Fcore-web-vitals-2026-inp-ai-sites.png",{"tags":442},[443,444,445,446,447,448],"core-web-vitals","inp","performance","seo","nuxt","web-development",true,null,"\u002Fblog\u002Fcore-web-vitals-2026-inp-ai-sites",{"title":5,"description":438},"How to pass Core Web Vitals in 2026: measure INP, fix long tasks, tame AI chat widgets and third-party scripts, and keep AI-generated sites fast.","Core Web Vitals in 2026: INP and AI Site Performance",{"loc":451},"blog\u002Fcore-web-vitals-2026-inp-ai-sites","r__G8x0MxDQur6iY0wfA_kizfC0LQMP5kiTFM8ElplQ",[459,463],{"title":460,"path":461,"stem":462,"children":-1},"Cloudflare Workers AI in 2026: Shipping AI Features Without a GPU Bill","\u002Fblog\u002Fcloudflare-workers-ai-edge-2026","blog\u002Fcloudflare-workers-ai-edge-2026",{"title":464,"path":465,"stem":466,"children":-1},"AI Voice Agents for Lead Qualification in 2026: A Practical Playbook","\u002Fblog\u002Fai-voice-agents-lead-qualification-2026","blog\u002Fai-voice-agents-lead-qualification-2026",1793181057671]