[{"data":1,"prerenderedAt":265},["ShallowReactive",2],{"term-w\u002Fweb-vitals":3,"related-w\u002Fweb-vitals":245},{"id":4,"title":5,"acronym":6,"body":7,"category":225,"description":226,"difficulty":227,"extension":228,"letter":229,"meta":230,"navigation":89,"path":231,"related":232,"seo":239,"sitemap":240,"stem":243,"subcategory":6,"__hash__":244},"terms\u002Fterms\u002Fw\u002Fweb-vitals.md","Web Vitals",null,{"type":8,"value":9,"toc":219},"minimark",[10,15,19,23,26,30,208,212,215],[11,12,14],"h2",{"id":13},"eli5-the-vibe-check","ELI5 — The Vibe Check",[16,17,18],"p",{},"Web Vitals are Google's report card for how good your website feels to use. They measure things like 'how fast does the main content load?', 'does the page randomly jump around?', and 'how quickly does it respond when I click?' Bad scores = unhappy users and lower Google rankings.",[11,20,22],{"id":21},"real-talk","Real Talk",[16,24,25],{},"Web Vitals is a Google initiative that provides a set of quality signals essential to delivering a great user experience. The Core Web Vitals subset (LCP, CLS, INP) are direct Google ranking factors. They are measurable via the web-vitals library, Chrome DevTools, Lighthouse, and Google Search Console.",[11,27,29],{"id":28},"show-me-the-code","Show Me The Code",[31,32,37],"pre",{"className":33,"code":34,"language":35,"meta":36,"style":36},"language-javascript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { getLCP, getCLS, getINP } from 'web-vitals'\n\ngetLCP(metric => console.log('LCP:', metric.value))\ngetCLS(metric => console.log('CLS:', metric.value))\ngetINP(metric => console.log('INP:', metric.value))\n","javascript","",[38,39,40,84,91,138,173],"code",{"__ignoreMap":36},[41,42,45,49,53,57,60,63,65,68,71,74,77,81],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"s7zQu","import",[41,50,52],{"class":51},"sMK4o"," {",[41,54,56],{"class":55},"sTEyZ"," getLCP",[41,58,59],{"class":51},",",[41,61,62],{"class":55}," getCLS",[41,64,59],{"class":51},[41,66,67],{"class":55}," getINP",[41,69,70],{"class":51}," }",[41,72,73],{"class":47}," from",[41,75,76],{"class":51}," '",[41,78,80],{"class":79},"sfazB","web-vitals",[41,82,83],{"class":51},"'\n",[41,85,87],{"class":43,"line":86},2,[41,88,90],{"emptyLinePlaceholder":89},true,"\n",[41,92,94,98,101,105,109,112,115,118,120,123,126,128,130,133,135],{"class":43,"line":93},3,[41,95,97],{"class":96},"s2Zo4","getLCP",[41,99,100],{"class":55},"(",[41,102,104],{"class":103},"sHdIc","metric",[41,106,108],{"class":107},"spNyl"," =>",[41,110,111],{"class":55}," console",[41,113,114],{"class":51},".",[41,116,117],{"class":96},"log",[41,119,100],{"class":55},[41,121,122],{"class":51},"'",[41,124,125],{"class":79},"LCP:",[41,127,122],{"class":51},[41,129,59],{"class":51},[41,131,132],{"class":55}," metric",[41,134,114],{"class":51},[41,136,137],{"class":55},"value))\n",[41,139,141,144,146,148,150,152,154,156,158,160,163,165,167,169,171],{"class":43,"line":140},4,[41,142,143],{"class":96},"getCLS",[41,145,100],{"class":55},[41,147,104],{"class":103},[41,149,108],{"class":107},[41,151,111],{"class":55},[41,153,114],{"class":51},[41,155,117],{"class":96},[41,157,100],{"class":55},[41,159,122],{"class":51},[41,161,162],{"class":79},"CLS:",[41,164,122],{"class":51},[41,166,59],{"class":51},[41,168,132],{"class":55},[41,170,114],{"class":51},[41,172,137],{"class":55},[41,174,176,179,181,183,185,187,189,191,193,195,198,200,202,204,206],{"class":43,"line":175},5,[41,177,178],{"class":96},"getINP",[41,180,100],{"class":55},[41,182,104],{"class":103},[41,184,108],{"class":107},[41,186,111],{"class":55},[41,188,114],{"class":51},[41,190,117],{"class":96},[41,192,100],{"class":55},[41,194,122],{"class":51},[41,196,197],{"class":79},"INP:",[41,199,122],{"class":51},[41,201,59],{"class":51},[41,203,132],{"class":55},[41,205,114],{"class":51},[41,207,137],{"class":55},[11,209,211],{"id":210},"when-youll-hear-this","When You'll Hear This",[16,213,214],{},"Check your Web Vitals in Google Search Console under Core Web Vitals.,The web-vitals npm package lets you track these in analytics.,Poor Web Vitals scores hurt your organic rankings.",[216,217,218],"style",{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}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":36,"searchDepth":86,"depth":86,"links":220},[221,222,223,224],{"id":13,"depth":86,"text":14},{"id":21,"depth":86,"text":22},{"id":28,"depth":86,"text":29},{"id":210,"depth":86,"text":211},"frontend","Web Vitals are Google's report card for how good your website feels to use. They measure things like 'how fast does the main content load?","intermediate","md","w",{},"\u002Fterms\u002Fw\u002Fweb-vitals",[233,234,235,236,237,238],"Core Web Vitals","LCP","CLS","INP","FID","SEO",{"title":5,"description":226},{"changefreq":241,"priority":242},"weekly",0.7,"terms\u002Fw\u002Fweb-vitals","1a4fAh9eoAR5WdSb2D2x07Xr4aQud2FoDvdvTXHJzyU",[246,249,252,255,258,261],{"title":235,"path":247,"acronym":235,"category":225,"difficulty":227,"description":248},"\u002Fterms\u002Fc\u002Fcls","CLS measures how much your page randomly jumps around while loading.",{"title":233,"path":250,"acronym":6,"category":225,"difficulty":227,"description":251},"\u002Fterms\u002Fc\u002Fcore-web-vitals","Core Web Vitals are the three most important Web Vitals that Google actually uses as ranking signals.",{"title":237,"path":253,"acronym":237,"category":225,"difficulty":227,"description":254},"\u002Fterms\u002Ff\u002Ffid","FID measured how long it took for the browser to react after you first clicked something.",{"title":236,"path":256,"acronym":236,"category":225,"difficulty":227,"description":257},"\u002Fterms\u002Fi\u002Finp","INP measures how snappy your website feels every time you interact with it — not just the first click, but every button press, dropdown open, and form subm...",{"title":234,"path":259,"acronym":234,"category":225,"difficulty":227,"description":260},"\u002Fterms\u002Fl\u002Flcp","LCP measures how long it takes for the biggest thing on your page to appear. Usually it's a hero image or a big headline.",{"title":238,"path":262,"acronym":6,"category":225,"difficulty":263,"description":264},"\u002Fterms\u002Fs\u002Fseo","beginner","SEO is the art of convincing Google to rank your website higher than your competitors.",1776518257776]