[{"data":1,"prerenderedAt":2119},["ShallowReactive",2],{"en-article-\u002Fen\u002Fblog\u002Fcore-web-vitals-how-user-experience-affects-seo":3,"en-related-posts-\u002Fen\u002Fblog\u002Fcore-web-vitals-how-user-experience-affects-seo":2014},{"id":4,"title":5,"articleCover":6,"articleCoverEmbed":7,"articleCoverEmbedUploadDate":7,"articleCoverHeight":8,"articleCoverWidth":9,"authorId":10,"body":11,"categoriesIds":1994,"description":1996,"enAlternateSlug":1997,"extension":1998,"meta":1999,"navigation":422,"path":2000,"ptBrAlternateSlug":2001,"publishedAt":2002,"seo":2003,"sitemap":2004,"stem":2011,"updatedAt":2010,"wordCount":2012,"__hash__":2013},"blogEn\u002Fen\u002Fblog\u002Fcore-web-vitals-how-user-experience-affects-seo.md","Core Web Vitals and SEO: How User Experience Affects Your Site","\u002Fimages\u002Fen\u002Fblog\u002Fseo\u002Fweb-vitals\u002Fcore-web-vitals-how-user-experience-affects-seo.webp",null,720,1280,"thiago-nunes-batista",{"type":12,"value":13,"toc":1972},"minimark",[14,23,39,50,53,71,76,79,82,85,89,92,103,106,117,121,129,132,139,144,147,212,215,237,329,584,596,603,610,681,742,749,753,758,765,776,780,783,810,813,817,835,839,846,931,941,944,1024,1039,1201,1205,1212,1219,1228,1235,1239,1250,1254,1261,1445,1451,1609,1612,1669,1673,1683,1686,1693,1699,1707,1710,1714,1721,1724,1735,1744,1748,1751,1759,1766,1770,1784,1934,1937,1941,1944,1959,1965,1968],[15,16,17,18,22],"p",{},"Before getting into Web Vitals, it helps to remember ",[19,20,21],"strong",{},"what SEO is",".",[15,24,25,26,30,31,34,35,38],{},"SEO stands for Search Engine Optimization. It is a set of techniques that make a site easier for search crawlers (the bots behind ",[27,28,29],"code",{},"Google",", ",[27,32,33],{},"Bing"," and ",[27,36,37],{},"DuckDuckGo",") to discover and index.",[15,40,41,42,45,46,49],{},"The better optimized a site is, the greater the ",[19,43,44],{},"chance"," it shows up in the top positions of the ",[27,47,48],{},"SERPs (Search Engine Result Pages)"," and gets more visits.",[15,51,52],{},"SEO has three main areas:",[54,55,56,60,63],"ul",{},[57,58,59],"li",{},"On-Page: content, keywords, meta tags and site structure.",[57,61,62],{},"Off-Page: external signals, such as backlinks from other sites.",[57,64,65,66,22],{},"Technical: performance, load time, security (HTTPS) and ",[67,68,70],"a",{"href":69},"\u002Fen\u002Fblog\u002Fhow-to-create-structured-data-with-nuxtjs","structured data",[72,73,75],"h2",{"id":74},"what-about-web-vitals","What about Web Vitals?",[15,77,78],{},"Google launched Web Vitals in 2020. They are a set of metrics that put numbers on the quality of the experience people have on a site.",[15,80,81],{},"They belong to technical SEO. When you optimize them, the site loads faster, reacts quicker to clicks and gives users a better experience.",[15,83,84],{},"SEO is about visibility in search engines, and Core Web Vitals are about the page being fast and stable once the visitor arrives. Working on both raises your chances of ranking well and of keeping people on the page.",[72,86,88],{"id":87},"core-web-vitals","Core Web Vitals",[15,90,91],{},"Core Web Vitals are a subset of Web Vitals. Today they are three metrics:",[54,93,94,97,100],{},[57,95,96],{},"CLS, Cumulative Layout Shift",[57,98,99],{},"LCP, Largest Contentful Paint",[57,101,102],{},"INP, Interaction to Next Paint",[15,104,105],{},"Google separates the main metrics from the rest for three reasons:",[54,107,108,111,114],{},[57,109,110],{},"Prioritization: with the main metrics defined, developers know where to start optimizing.",[57,112,113],{},"Simplicity: with only a few metrics, it is easier to see which optimizations to make.",[57,115,116],{},"Alignment with Google: Google is the most used search engine in the world and wants to send users to good pages. Core Web Vitals are part of that, so a page that passes them delivers the kind of experience Google is looking for.",[72,118,120],{"id":119},"cumulative-layout-shift-cls","Cumulative Layout Shift (CLS)",[122,123],"img",{":copyright":124,"alt":125,"height":126,"src":127,"width":128},"{\"title\": \"CLS Web Vitals metric\", \"licenseId\": \"cc4\", \"author\": {\"name\": \"web.dev\", \"url\": \"https:\u002F\u002Fweb.dev\" }}","CLS illustration showing page elements moving around while the page loads",210,"\u002Fimages\u002Fblog\u002Fseo\u002Fweb-vitals\u002Fcls-cumulative-layout-shift.webp",240,[15,130,131],{},"CLS measures the visual stability of a page: how much elements move unexpectedly while it loads. A high CLS means the layout changes suddenly, and readers end up tapping the wrong thing.",[15,133,134,135,138],{},"For a good experience, your site should keep CLS at ",[19,136,137],{},"0.1 or less"," for at least 75% of visits.",[140,141,143],"h3",{"id":142},"examples-of-cls-problems","Examples of CLS problems",[15,145,146],{},"The first and most common case is an image that loads after the rest of the page. It \"pushes\" the content down to make room for itself. The fix is to set width and height on the image, so the browser reserves the space before downloading it.",[148,149,154],"pre",{"className":150,"code":151,"language":152,"meta":153,"style":153},"language-html shiki shiki-themes dracula","\u003Cimg src=\"\u002Fcodigo-ao-ponto.jpg\" width=\"600\" height=\"400\" \u002F>\n","html","",[27,155,156],{"__ignoreMap":153},[157,158,161,165,168,172,175,179,183,185,188,190,192,195,197,200,202,204,207,209],"span",{"class":159,"line":160},"line",1,[157,162,164],{"class":163},"sCdxs","\u003C",[157,166,122],{"class":167},"s0Tla",[157,169,171],{"class":170},"sY_PY"," src",[157,173,174],{"class":167},"=",[157,176,178],{"class":177},"seVfx","\"",[157,180,182],{"class":181},"s-mGx","\u002Fcodigo-ao-ponto.jpg",[157,184,178],{"class":177},[157,186,187],{"class":170}," width",[157,189,174],{"class":167},[157,191,178],{"class":177},[157,193,194],{"class":181},"600",[157,196,178],{"class":177},[157,198,199],{"class":170}," height",[157,201,174],{"class":167},[157,203,178],{"class":177},[157,205,206],{"class":181},"400",[157,208,178],{"class":177},[157,210,211],{"class":163}," \u002F>\n",[15,213,214],{},"The second case is custom fonts. The browser has to download them before it can render the text properly, which causes a shift when the web font arrives and replaces the fallback font.",[15,216,217,218,221,222,225,226,229,230,233,234,22],{},"To fix it, preload the font with a ",[27,219,220],{},"link"," tag and ",[27,223,224],{},"rel=\"preload\"",", use ",[27,227,228],{},"font-display"," in ",[27,231,232],{},"@font-face"," and adjust the fallback font metrics with ",[27,235,236],{},"size-adjust",[148,238,240],{"className":150,"code":239,"language":152,"meta":153,"style":153},"\u003C!-- Preload the critical above-the-fold font -->\n\u003Clink\n  rel=\"preload\"\n  href=\"\u002Ffonts\u002Finter.woff2\"\n  as=\"font\"\n  type=\"font\u002Fwoff2\"\n  crossorigin\n\u002F>\n",[27,241,242,248,256,272,287,302,317,323],{"__ignoreMap":153},[157,243,244],{"class":159,"line":160},[157,245,247],{"class":246},"shSDL","\u003C!-- Preload the critical above-the-fold font -->\n",[157,249,251,253],{"class":159,"line":250},2,[157,252,164],{"class":163},[157,254,255],{"class":167},"link\n",[157,257,259,262,264,266,269],{"class":159,"line":258},3,[157,260,261],{"class":170},"  rel",[157,263,174],{"class":167},[157,265,178],{"class":177},[157,267,268],{"class":181},"preload",[157,270,271],{"class":177},"\"\n",[157,273,275,278,280,282,285],{"class":159,"line":274},4,[157,276,277],{"class":170},"  href",[157,279,174],{"class":167},[157,281,178],{"class":177},[157,283,284],{"class":181},"\u002Ffonts\u002Finter.woff2",[157,286,271],{"class":177},[157,288,290,293,295,297,300],{"class":159,"line":289},5,[157,291,292],{"class":170},"  as",[157,294,174],{"class":167},[157,296,178],{"class":177},[157,298,299],{"class":181},"font",[157,301,271],{"class":177},[157,303,305,308,310,312,315],{"class":159,"line":304},6,[157,306,307],{"class":170},"  type",[157,309,174],{"class":167},[157,311,178],{"class":177},[157,313,314],{"class":181},"font\u002Fwoff2",[157,316,271],{"class":177},[157,318,320],{"class":159,"line":319},7,[157,321,322],{"class":170},"  crossorigin\n",[157,324,326],{"class":159,"line":325},8,[157,327,328],{"class":163},"\u002F>\n",[148,330,334],{"className":331,"code":332,"language":333,"meta":153,"style":153},"language-css shiki shiki-themes dracula","@font-face {\n  font-family: \"Inter\";\n  src: url(\"\u002Ffonts\u002Finter.woff2\") format(\"woff2\");\n  font-display: swap;\n}\n\n\u002F* Fallback with adjusted metrics to avoid CLS *\u002F\n@font-face {\n  font-family: \"Inter Fallback\";\n  src: local(\"Arial\");\n  size-adjust: 107%;\n  ascent-override: 90%;\n  descent-override: 22%;\n  line-gap-override: 0%;\n}\n\nbody {\n  font-family: \"Inter\", \"Inter Fallback\", sans-serif;\n}\n","css",[27,335,336,343,363,400,413,418,424,429,435,451,472,488,503,518,533,538,543,551,579],{"__ignoreMap":153},[157,337,338,340],{"class":159,"line":160},[157,339,232],{"class":167},[157,341,342],{"class":163}," {\n",[157,344,345,349,352,355,358,360],{"class":159,"line":250},[157,346,348],{"class":347},"sLL85","  font-family",[157,350,351],{"class":167},":",[157,353,354],{"class":177}," \"",[157,356,357],{"class":181},"Inter",[157,359,178],{"class":177},[157,361,362],{"class":163},";\n",[157,364,365,368,370,373,376,378,380,382,385,388,390,392,395,397],{"class":159,"line":258},[157,366,367],{"class":347},"  src",[157,369,351],{"class":167},[157,371,372],{"class":347}," url",[157,374,375],{"class":163},"(",[157,377,178],{"class":177},[157,379,284],{"class":181},[157,381,178],{"class":177},[157,383,384],{"class":163},") ",[157,386,387],{"class":347},"format",[157,389,375],{"class":163},[157,391,178],{"class":177},[157,393,394],{"class":181},"woff2",[157,396,178],{"class":177},[157,398,399],{"class":163},");\n",[157,401,402,405,407,411],{"class":159,"line":274},[157,403,404],{"class":347},"  font-display",[157,406,351],{"class":167},[157,408,410],{"class":409},"sIQBb"," swap",[157,412,362],{"class":163},[157,414,415],{"class":159,"line":289},[157,416,417],{"class":163},"}\n",[157,419,420],{"class":159,"line":304},[157,421,423],{"emptyLinePlaceholder":422},true,"\n",[157,425,426],{"class":159,"line":319},[157,427,428],{"class":246},"\u002F* Fallback with adjusted metrics to avoid CLS *\u002F\n",[157,430,431,433],{"class":159,"line":325},[157,432,232],{"class":167},[157,434,342],{"class":163},[157,436,438,440,442,444,447,449],{"class":159,"line":437},9,[157,439,348],{"class":347},[157,441,351],{"class":167},[157,443,354],{"class":177},[157,445,446],{"class":181},"Inter Fallback",[157,448,178],{"class":177},[157,450,362],{"class":163},[157,452,454,456,458,461,463,465,468,470],{"class":159,"line":453},10,[157,455,367],{"class":347},[157,457,351],{"class":167},[157,459,460],{"class":347}," local",[157,462,375],{"class":163},[157,464,178],{"class":177},[157,466,467],{"class":181},"Arial",[157,469,178],{"class":177},[157,471,399],{"class":163},[157,473,475,478,480,483,486],{"class":159,"line":474},11,[157,476,477],{"class":347},"  size-adjust",[157,479,351],{"class":167},[157,481,482],{"class":409}," 107",[157,484,485],{"class":167},"%",[157,487,362],{"class":163},[157,489,491,494,496,499,501],{"class":159,"line":490},12,[157,492,493],{"class":163},"  ascent-override",[157,495,351],{"class":167},[157,497,498],{"class":409}," 90",[157,500,485],{"class":167},[157,502,362],{"class":163},[157,504,506,509,511,514,516],{"class":159,"line":505},13,[157,507,508],{"class":163},"  descent-override",[157,510,351],{"class":167},[157,512,513],{"class":409}," 22",[157,515,485],{"class":167},[157,517,362],{"class":163},[157,519,521,524,526,529,531],{"class":159,"line":520},14,[157,522,523],{"class":163},"  line-gap-override",[157,525,351],{"class":167},[157,527,528],{"class":409}," 0",[157,530,485],{"class":167},[157,532,362],{"class":163},[157,534,536],{"class":159,"line":535},15,[157,537,417],{"class":163},[157,539,541],{"class":159,"line":540},16,[157,542,423],{"emptyLinePlaceholder":422},[157,544,546,549],{"class":159,"line":545},17,[157,547,548],{"class":167},"body",[157,550,342],{"class":163},[157,552,554,556,558,560,562,564,566,568,570,572,574,577],{"class":159,"line":553},18,[157,555,348],{"class":347},[157,557,351],{"class":167},[157,559,354],{"class":177},[157,561,357],{"class":181},[157,563,178],{"class":177},[157,565,30],{"class":163},[157,567,178],{"class":177},[157,569,446],{"class":181},[157,571,178],{"class":177},[157,573,30],{"class":163},[157,575,576],{"class":409},"sans-serif",[157,578,362],{"class":163},[157,580,582],{"class":159,"line":581},19,[157,583,417],{"class":163},[15,585,586,589,590,30,592,595],{},[27,587,588],{},"font-display: swap"," shows the text right away in the fallback font and switches to the web font once it loads. To keep that switch from moving anything, you adjust the fallback font metrics (",[27,591,236],{},[27,593,594],{},"ascent-override"," and the others) so it takes up the same space as the web font.",[15,597,598,599,602],{},"If the font is not critical, use ",[27,600,601],{},"font-display: optional",". The web font is then used only if it loads within about 100 ms. If it takes longer, the browser keeps the fallback for that navigation, and the font swap stops being a source of CLS.",[15,604,605,606,609],{},"The third case is ",[19,607,608],{},"banners, ads and embeds injected without reserved space",". When a third-party script inserts an ad after the page has already rendered, everything below it gets pushed down.",[148,611,613],{"className":150,"code":612,"language":152,"meta":153,"style":153},"\u003C!-- Bad: ad slot without dimensions -->\n\u003Cdiv id=\"ad-slot\">\u003C\u002Fdiv>\n\u003Cscript>\n  loadAd(\"ad-slot\");\n\u003C\u002Fscript>\n",[27,614,615,620,647,656,672],{"__ignoreMap":153},[157,616,617],{"class":159,"line":160},[157,618,619],{"class":246},"\u003C!-- Bad: ad slot without dimensions -->\n",[157,621,622,624,627,630,632,634,637,639,642,644],{"class":159,"line":250},[157,623,164],{"class":163},[157,625,626],{"class":167},"div",[157,628,629],{"class":170}," id",[157,631,174],{"class":167},[157,633,178],{"class":177},[157,635,636],{"class":181},"ad-slot",[157,638,178],{"class":177},[157,640,641],{"class":163},">\u003C\u002F",[157,643,626],{"class":167},[157,645,646],{"class":163},">\n",[157,648,649,651,654],{"class":159,"line":258},[157,650,164],{"class":163},[157,652,653],{"class":167},"script",[157,655,646],{"class":163},[157,657,658,662,664,666,668,670],{"class":159,"line":274},[157,659,661],{"class":660},"sAOxA","  loadAd",[157,663,375],{"class":163},[157,665,178],{"class":177},[157,667,636],{"class":181},[157,669,178],{"class":177},[157,671,399],{"class":163},[157,673,674,677,679],{"class":159,"line":289},[157,675,676],{"class":163},"\u003C\u002F",[157,678,653],{"class":167},[157,680,646],{"class":163},[148,682,684],{"className":150,"code":683,"language":152,"meta":153,"style":153},"\u003C!-- Good: reserved space with min-height or aspect-ratio -->\n\u003Cdiv\n  id=\"ad-slot\"\n  style=\"min-height: 250px; width: 300px; background-color: #f3f4f6;\"\n>\n  \u003C!-- The ad will be injected here -->\n\u003C\u002Fdiv>\n",[27,685,686,691,698,711,725,729,734],{"__ignoreMap":153},[157,687,688],{"class":159,"line":160},[157,689,690],{"class":246},"\u003C!-- Good: reserved space with min-height or aspect-ratio -->\n",[157,692,693,695],{"class":159,"line":250},[157,694,164],{"class":163},[157,696,697],{"class":167},"div\n",[157,699,700,703,705,707,709],{"class":159,"line":258},[157,701,702],{"class":170},"  id",[157,704,174],{"class":167},[157,706,178],{"class":177},[157,708,636],{"class":181},[157,710,271],{"class":177},[157,712,713,716,718,720,723],{"class":159,"line":274},[157,714,715],{"class":170},"  style",[157,717,174],{"class":167},[157,719,178],{"class":177},[157,721,722],{"class":181},"min-height: 250px; width: 300px; background-color: #f3f4f6;",[157,724,271],{"class":177},[157,726,727],{"class":159,"line":289},[157,728,646],{"class":163},[157,730,731],{"class":159,"line":304},[157,732,733],{"class":246},"  \u003C!-- The ad will be injected here -->\n",[157,735,736,738,740],{"class":159,"line":319},[157,737,676],{"class":163},[157,739,626],{"class":167},[157,741,646],{"class":163},[15,743,744,745,748],{},"For responsive embeds, such as YouTube videos, use ",[27,746,747],{},"aspect-ratio"," in CSS to reserve proportional space before they load.",[72,750,752],{"id":751},"largest-contentful-paint-lcp","Largest Contentful Paint (LCP)",[122,754],{":copyright":755,"alt":756,"height":126,"src":757,"width":128},"{\"title\": \"LCP Web Vitals metric\", \"licenseId\": \"cc4\", \"author\": {\"name\": \"web.dev\", \"url\": \"https:\u002F\u002Fweb.dev\" }}","LCP illustration highlighting the largest content element visible in the viewport","\u002Fimages\u002Fblog\u002Fseo\u002Fweb-vitals\u002Flcp-largest-contentful-paint.webp",[15,759,760,761,764],{},"LCP measures how long the page takes to render the ",[19,762,763],{},"largest visible content element"," in the viewport. That element can be an image, a block of text, a video or an SVG.",[15,766,767,768,771,772,775],{},"A ",[19,769,770],{},"good"," LCP is ",[19,773,774],{},"2.5 seconds or less"," at the 75th percentile of real visits.",[140,777,779],{"id":778},"what-counts-as-lcp","What counts as LCP",[15,781,782],{},"The browser considers these as LCP candidates:",[54,784,785,795,801,807],{},[57,786,787,788,30,791,794],{},"Images (",[27,789,790],{},"\u003Cimg>",[27,792,793],{},"\u003Cpicture>",")",[57,796,797,800],{},[27,798,799],{},"\u003Cvideo>"," elements",[57,802,803,804,794],{},"Elements with a CSS background image (",[27,805,806],{},"background-image",[57,808,809],{},"Blocks of text (paragraphs and headings)",[15,811,812],{},"On most pages, the LCP is the main image (hero image) or the heading.",[140,814,816],{"id":815},"common-causes-of-a-high-lcp","Common causes of a high LCP",[54,818,819,822,829,832],{},[57,820,821],{},"High TTFB: the server takes a long time to answer the initial request.",[57,823,824,825,828],{},"Lazy-loaded hero image: using ",[27,826,827],{},"loading=\"lazy\""," on an above-the-fold image delays the LCP.",[57,830,831],{},"Render-blocking resources: heavy CSS or JS before the critical content.",[57,833,834],{},"Heavy images: large files in unoptimized formats.",[140,836,838],{"id":837},"how-to-improve-lcp","How to improve LCP",[15,840,841,842,845],{},"Use ",[27,843,844],{},"fetchpriority=\"high\""," on the main image to prioritize its download.",[148,847,849],{"className":150,"code":848,"language":152,"meta":153,"style":153},"\u003Cimg\n  src=\"\u002Fhero.webp\"\n  fetchpriority=\"high\"\n  width=\"1600\"\n  height=\"900\"\n  alt=\"Description of the main image\"\n\u002F>\n",[27,850,851,858,871,885,899,913,927],{"__ignoreMap":153},[157,852,853,855],{"class":159,"line":160},[157,854,164],{"class":163},[157,856,857],{"class":167},"img\n",[157,859,860,862,864,866,869],{"class":159,"line":250},[157,861,367],{"class":170},[157,863,174],{"class":167},[157,865,178],{"class":177},[157,867,868],{"class":181},"\u002Fhero.webp",[157,870,271],{"class":177},[157,872,873,876,878,880,883],{"class":159,"line":258},[157,874,875],{"class":170},"  fetchpriority",[157,877,174],{"class":167},[157,879,178],{"class":177},[157,881,882],{"class":181},"high",[157,884,271],{"class":177},[157,886,887,890,892,894,897],{"class":159,"line":274},[157,888,889],{"class":170},"  width",[157,891,174],{"class":167},[157,893,178],{"class":177},[157,895,896],{"class":181},"1600",[157,898,271],{"class":177},[157,900,901,904,906,908,911],{"class":159,"line":289},[157,902,903],{"class":170},"  height",[157,905,174],{"class":167},[157,907,178],{"class":177},[157,909,910],{"class":181},"900",[157,912,271],{"class":177},[157,914,915,918,920,922,925],{"class":159,"line":304},[157,916,917],{"class":170},"  alt",[157,919,174],{"class":167},[157,921,178],{"class":177},[157,923,924],{"class":181},"Description of the main image",[157,926,271],{"class":177},[157,928,929],{"class":159,"line":319},[157,930,328],{"class":163},[15,932,933,934,936,937,940],{},"Do not use ",[27,935,827],{}," on the LCP image. Let it load right away (or set ",[27,938,939],{},"loading=\"eager\""," explicitly).",[15,942,943],{},"If the browser does not discover the main image early, preload it.",[148,945,947],{"className":150,"code":946,"language":152,"meta":153,"style":153},"\u003Clink\n  rel=\"preload\"\n  as=\"image\"\n  href=\"\u002Fhero.webp\"\n  imagesrcset=\"\u002Fhero-400.webp 400w, \u002Fhero-800.webp 800w, \u002Fhero-1200.webp 1200w\"\n  imagesizes=\"(max-width: 600px) 100vw, 50vw\"\n\u002F>\n",[27,948,949,955,967,980,992,1006,1020],{"__ignoreMap":153},[157,950,951,953],{"class":159,"line":160},[157,952,164],{"class":163},[157,954,255],{"class":167},[157,956,957,959,961,963,965],{"class":159,"line":250},[157,958,261],{"class":170},[157,960,174],{"class":167},[157,962,178],{"class":177},[157,964,268],{"class":181},[157,966,271],{"class":177},[157,968,969,971,973,975,978],{"class":159,"line":258},[157,970,292],{"class":170},[157,972,174],{"class":167},[157,974,178],{"class":177},[157,976,977],{"class":181},"image",[157,979,271],{"class":177},[157,981,982,984,986,988,990],{"class":159,"line":274},[157,983,277],{"class":170},[157,985,174],{"class":167},[157,987,178],{"class":177},[157,989,868],{"class":181},[157,991,271],{"class":177},[157,993,994,997,999,1001,1004],{"class":159,"line":289},[157,995,996],{"class":170},"  imagesrcset",[157,998,174],{"class":167},[157,1000,178],{"class":177},[157,1002,1003],{"class":181},"\u002Fhero-400.webp 400w, \u002Fhero-800.webp 800w, \u002Fhero-1200.webp 1200w",[157,1005,271],{"class":177},[157,1007,1008,1011,1013,1015,1018],{"class":159,"line":304},[157,1009,1010],{"class":170},"  imagesizes",[157,1012,174],{"class":167},[157,1014,178],{"class":177},[157,1016,1017],{"class":181},"(max-width: 600px) 100vw, 50vw",[157,1019,271],{"class":177},[157,1021,1022],{"class":159,"line":319},[157,1023,328],{"class":163},[15,1025,1026,1027,1030,1031,1034,1035,1038],{},"Convert images to ",[19,1028,1029],{},"AVIF"," or ",[19,1032,1033],{},"WebP"," and use ",[27,1036,1037],{},"srcset"," to serve the right size to each device.",[148,1040,1042],{"className":150,"code":1041,"language":152,"meta":153,"style":153},"\u003Cpicture>\n  \u003Csource srcset=\"\u002Fhero.avif\" type=\"image\u002Favif\" \u002F>\n  \u003Csource srcset=\"\u002Fhero.webp\" type=\"image\u002Fwebp\" \u002F>\n  \u003Cimg\n    src=\"\u002Fhero.jpg\"\n    fetchpriority=\"high\"\n    width=\"1600\"\n    height=\"900\"\n    alt=\"Description of the main image\"\n  \u002F>\n\u003C\u002Fpicture>\n",[27,1043,1044,1053,1087,1116,1122,1136,1149,1162,1175,1188,1193],{"__ignoreMap":153},[157,1045,1046,1048,1051],{"class":159,"line":160},[157,1047,164],{"class":163},[157,1049,1050],{"class":167},"picture",[157,1052,646],{"class":163},[157,1054,1055,1058,1061,1064,1066,1068,1071,1073,1076,1078,1080,1083,1085],{"class":159,"line":250},[157,1056,1057],{"class":163},"  \u003C",[157,1059,1060],{"class":167},"source",[157,1062,1063],{"class":170}," srcset",[157,1065,174],{"class":167},[157,1067,178],{"class":177},[157,1069,1070],{"class":181},"\u002Fhero.avif",[157,1072,178],{"class":177},[157,1074,1075],{"class":170}," type",[157,1077,174],{"class":167},[157,1079,178],{"class":177},[157,1081,1082],{"class":181},"image\u002Favif",[157,1084,178],{"class":177},[157,1086,211],{"class":163},[157,1088,1089,1091,1093,1095,1097,1099,1101,1103,1105,1107,1109,1112,1114],{"class":159,"line":258},[157,1090,1057],{"class":163},[157,1092,1060],{"class":167},[157,1094,1063],{"class":170},[157,1096,174],{"class":167},[157,1098,178],{"class":177},[157,1100,868],{"class":181},[157,1102,178],{"class":177},[157,1104,1075],{"class":170},[157,1106,174],{"class":167},[157,1108,178],{"class":177},[157,1110,1111],{"class":181},"image\u002Fwebp",[157,1113,178],{"class":177},[157,1115,211],{"class":163},[157,1117,1118,1120],{"class":159,"line":274},[157,1119,1057],{"class":163},[157,1121,857],{"class":167},[157,1123,1124,1127,1129,1131,1134],{"class":159,"line":289},[157,1125,1126],{"class":170},"    src",[157,1128,174],{"class":167},[157,1130,178],{"class":177},[157,1132,1133],{"class":181},"\u002Fhero.jpg",[157,1135,271],{"class":177},[157,1137,1138,1141,1143,1145,1147],{"class":159,"line":304},[157,1139,1140],{"class":170},"    fetchpriority",[157,1142,174],{"class":167},[157,1144,178],{"class":177},[157,1146,882],{"class":181},[157,1148,271],{"class":177},[157,1150,1151,1154,1156,1158,1160],{"class":159,"line":319},[157,1152,1153],{"class":170},"    width",[157,1155,174],{"class":167},[157,1157,178],{"class":177},[157,1159,896],{"class":181},[157,1161,271],{"class":177},[157,1163,1164,1167,1169,1171,1173],{"class":159,"line":325},[157,1165,1166],{"class":170},"    height",[157,1168,174],{"class":167},[157,1170,178],{"class":177},[157,1172,910],{"class":181},[157,1174,271],{"class":177},[157,1176,1177,1180,1182,1184,1186],{"class":159,"line":437},[157,1178,1179],{"class":170},"    alt",[157,1181,174],{"class":167},[157,1183,178],{"class":177},[157,1185,924],{"class":181},[157,1187,271],{"class":177},[157,1189,1190],{"class":159,"line":453},[157,1191,1192],{"class":163},"  \u002F>\n",[157,1194,1195,1197,1199],{"class":159,"line":474},[157,1196,676],{"class":163},[157,1198,1050],{"class":167},[157,1200,646],{"class":163},[72,1202,1204],{"id":1203},"interaction-to-next-paint-inp","Interaction to Next Paint (INP)",[122,1206],{":copyright":1207,"alt":1208,"height":1209,"src":1210,"width":1211},"{\"title\": \"INP Web Vitals metric\", \"licenseId\": \"cc4\", \"author\": {\"name\": \"web.dev\", \"url\": \"https:\u002F\u002Fweb.dev\" }}","INP illustration showing the time between a user interaction and the next paint on screen",194,"\u002Fimages\u002Fblog\u002Fseo\u002Fweb-vitals\u002Finp-interaction-to-next-paint.webp",259,[15,1213,1214,1215,1218],{},"INP measures the ",[19,1216,1217],{},"responsiveness"," of the page. It looks at the latency of every interaction (clicks, taps and key presses) during the visit and reports the slowest one, setting aside isolated extreme cases.",[15,1220,767,1221,1223,1224,1227],{},[19,1222,770],{}," INP is ",[19,1225,1226],{},"200 ms or less"," at the 75th percentile.",[15,1229,1230,1231,1234],{},"INP replaced FID (First Input Delay) as a Core Web Vital in ",[19,1232,1233],{},"March 2024",". FID measured only the delay of the first interaction. INP looks at all interactions and measures the full time, from the start of the interaction to the next paint with visual feedback.",[140,1236,1238],{"id":1237},"what-causes-a-high-inp","What causes a high INP",[54,1240,1241,1244,1247],{},[57,1242,1243],{},"Long tasks: JavaScript tasks that block the main thread for more than 50 ms.",[57,1245,1246],{},"Heavy input handlers: code that runs on every click, keystroke or scroll.",[57,1248,1249],{},"Third-party scripts: analytics, ads and social widgets competing for the main thread.",[140,1251,1253],{"id":1252},"how-to-improve-inp","How to improve INP",[15,1255,1256,1257,1260],{},"Break long tasks into smaller chunks and use ",[27,1258,1259],{},"scheduler.yield()"," to hand control back to the browser between them.",[148,1262,1266],{"className":1263,"code":1264,"language":1265,"meta":153,"style":153},"language-js shiki shiki-themes dracula","\u002F\u002F Helper with a fallback for browsers without scheduler.yield()\nfunction yieldToMain() {\n  if (\"scheduler\" in window && \"yield\" in scheduler) {\n    return scheduler.yield();\n  }\n  return new Promise((resolve) => setTimeout(resolve, 0));\n}\n\nasync function processJobs(jobQueue) {\n  for (const job of jobQueue) {\n    job();\n    await yieldToMain();\n  }\n}\n","js",[27,1267,1268,1273,1284,1320,1333,1338,1375,1379,1383,1402,1421,1428,1437,1441],{"__ignoreMap":153},[157,1269,1270],{"class":159,"line":160},[157,1271,1272],{"class":246},"\u002F\u002F Helper with a fallback for browsers without scheduler.yield()\n",[157,1274,1275,1278,1281],{"class":159,"line":250},[157,1276,1277],{"class":167},"function",[157,1279,1280],{"class":660}," yieldToMain",[157,1282,1283],{"class":163},"() {\n",[157,1285,1286,1289,1292,1294,1297,1299,1302,1305,1308,1310,1313,1315,1317],{"class":159,"line":258},[157,1287,1288],{"class":167},"  if",[157,1290,1291],{"class":163}," (",[157,1293,178],{"class":177},[157,1295,1296],{"class":181},"scheduler",[157,1298,178],{"class":177},[157,1300,1301],{"class":167}," in",[157,1303,1304],{"class":163}," window ",[157,1306,1307],{"class":167},"&&",[157,1309,354],{"class":177},[157,1311,1312],{"class":181},"yield",[157,1314,178],{"class":177},[157,1316,1301],{"class":167},[157,1318,1319],{"class":163}," scheduler) {\n",[157,1321,1322,1325,1328,1330],{"class":159,"line":274},[157,1323,1324],{"class":167},"    return",[157,1326,1327],{"class":163}," scheduler.",[157,1329,1312],{"class":660},[157,1331,1332],{"class":163},"();\n",[157,1334,1335],{"class":159,"line":289},[157,1336,1337],{"class":163},"  }\n",[157,1339,1340,1343,1347,1351,1354,1358,1360,1363,1366,1369,1372],{"class":159,"line":304},[157,1341,1342],{"class":167},"  return",[157,1344,1346],{"class":1345},"sviCg"," new",[157,1348,1350],{"class":1349},"sCp4m"," Promise",[157,1352,1353],{"class":163},"((",[157,1355,1357],{"class":1356},"sGEwX","resolve",[157,1359,384],{"class":163},[157,1361,1362],{"class":167},"=>",[157,1364,1365],{"class":660}," setTimeout",[157,1367,1368],{"class":163},"(resolve, ",[157,1370,1371],{"class":409},"0",[157,1373,1374],{"class":163},"));\n",[157,1376,1377],{"class":159,"line":319},[157,1378,417],{"class":163},[157,1380,1381],{"class":159,"line":325},[157,1382,423],{"emptyLinePlaceholder":422},[157,1384,1385,1388,1391,1394,1396,1399],{"class":159,"line":437},[157,1386,1387],{"class":167},"async",[157,1389,1390],{"class":167}," function",[157,1392,1393],{"class":660}," processJobs",[157,1395,375],{"class":163},[157,1397,1398],{"class":1356},"jobQueue",[157,1400,1401],{"class":163},") {\n",[157,1403,1404,1407,1409,1412,1415,1418],{"class":159,"line":453},[157,1405,1406],{"class":167},"  for",[157,1408,1291],{"class":163},[157,1410,1411],{"class":167},"const",[157,1413,1414],{"class":163}," job ",[157,1416,1417],{"class":167},"of",[157,1419,1420],{"class":163}," jobQueue) {\n",[157,1422,1423,1426],{"class":159,"line":474},[157,1424,1425],{"class":660},"    job",[157,1427,1332],{"class":163},[157,1429,1430,1433,1435],{"class":159,"line":490},[157,1431,1432],{"class":167},"    await",[157,1434,1280],{"class":660},[157,1436,1332],{"class":163},[157,1438,1439],{"class":159,"line":505},[157,1440,1337],{"class":163},[157,1442,1443],{"class":159,"line":520},[157,1444,417],{"class":163},[15,1446,841,1447,1450],{},[19,1448,1449],{},"debounce"," on input handlers that fire often.",[148,1452,1454],{"className":1263,"code":1453,"language":1265,"meta":153,"style":153},"function debounce(fn, delay) {\n  let timeout;\n  return (...args) => {\n    clearTimeout(timeout);\n    timeout = setTimeout(() => fn(...args), delay);\n  };\n}\n\ninput.addEventListener(\n  \"input\",\n  debounce((e) => {\n    searchAPI(e.target.value);\n  }, 300)\n);\n",[27,1455,1456,1475,1483,1501,1509,1533,1538,1542,1546,1557,1570,1586,1594,1605],{"__ignoreMap":153},[157,1457,1458,1460,1463,1465,1468,1470,1473],{"class":159,"line":160},[157,1459,1277],{"class":167},[157,1461,1462],{"class":660}," debounce",[157,1464,375],{"class":163},[157,1466,1467],{"class":1356},"fn",[157,1469,30],{"class":163},[157,1471,1472],{"class":1356},"delay",[157,1474,1401],{"class":163},[157,1476,1477,1480],{"class":159,"line":250},[157,1478,1479],{"class":167},"  let",[157,1481,1482],{"class":163}," timeout;\n",[157,1484,1485,1487,1489,1492,1495,1497,1499],{"class":159,"line":258},[157,1486,1342],{"class":167},[157,1488,1291],{"class":163},[157,1490,1491],{"class":167},"...",[157,1493,1494],{"class":1356},"args",[157,1496,384],{"class":163},[157,1498,1362],{"class":167},[157,1500,342],{"class":163},[157,1502,1503,1506],{"class":159,"line":274},[157,1504,1505],{"class":660},"    clearTimeout",[157,1507,1508],{"class":163},"(timeout);\n",[157,1510,1511,1514,1516,1518,1521,1523,1526,1528,1530],{"class":159,"line":289},[157,1512,1513],{"class":163},"    timeout ",[157,1515,174],{"class":167},[157,1517,1365],{"class":660},[157,1519,1520],{"class":163},"(() ",[157,1522,1362],{"class":167},[157,1524,1525],{"class":660}," fn",[157,1527,375],{"class":163},[157,1529,1491],{"class":167},[157,1531,1532],{"class":163},"args), delay);\n",[157,1534,1535],{"class":159,"line":304},[157,1536,1537],{"class":163},"  };\n",[157,1539,1540],{"class":159,"line":319},[157,1541,417],{"class":163},[157,1543,1544],{"class":159,"line":325},[157,1545,423],{"emptyLinePlaceholder":422},[157,1547,1548,1551,1554],{"class":159,"line":437},[157,1549,1550],{"class":163},"input.",[157,1552,1553],{"class":660},"addEventListener",[157,1555,1556],{"class":163},"(\n",[157,1558,1559,1562,1565,1567],{"class":159,"line":453},[157,1560,1561],{"class":177},"  \"",[157,1563,1564],{"class":181},"input",[157,1566,178],{"class":177},[157,1568,1569],{"class":163},",\n",[157,1571,1572,1575,1577,1580,1582,1584],{"class":159,"line":474},[157,1573,1574],{"class":660},"  debounce",[157,1576,1353],{"class":163},[157,1578,1579],{"class":1356},"e",[157,1581,384],{"class":163},[157,1583,1362],{"class":167},[157,1585,342],{"class":163},[157,1587,1588,1591],{"class":159,"line":490},[157,1589,1590],{"class":660},"    searchAPI",[157,1592,1593],{"class":163},"(e.target.value);\n",[157,1595,1596,1599,1602],{"class":159,"line":505},[157,1597,1598],{"class":163},"  }, ",[157,1600,1601],{"class":409},"300",[157,1603,1604],{"class":163},")\n",[157,1606,1607],{"class":159,"line":520},[157,1608,399],{"class":163},[15,1610,1611],{},"Defer non-critical JavaScript until after the page is interactive.",[148,1613,1615],{"className":150,"code":1614,"language":152,"meta":153,"style":153},"\u003Cscript src=\"\u002Fanalytics.js\" defer>\u003C\u002Fscript>\n\u003Cscript src=\"\u002Fchat-widget.js\" async>\u003C\u002Fscript>\n",[27,1616,1617,1643],{"__ignoreMap":153},[157,1618,1619,1621,1623,1625,1627,1629,1632,1634,1637,1639,1641],{"class":159,"line":160},[157,1620,164],{"class":163},[157,1622,653],{"class":167},[157,1624,171],{"class":170},[157,1626,174],{"class":167},[157,1628,178],{"class":177},[157,1630,1631],{"class":181},"\u002Fanalytics.js",[157,1633,178],{"class":177},[157,1635,1636],{"class":170}," defer",[157,1638,641],{"class":163},[157,1640,653],{"class":167},[157,1642,646],{"class":163},[157,1644,1645,1647,1649,1651,1653,1655,1658,1660,1663,1665,1667],{"class":159,"line":250},[157,1646,164],{"class":163},[157,1648,653],{"class":167},[157,1650,171],{"class":170},[157,1652,174],{"class":167},[157,1654,178],{"class":177},[157,1656,1657],{"class":181},"\u002Fchat-widget.js",[157,1659,178],{"class":177},[157,1661,1662],{"class":170}," async",[157,1664,641],{"class":163},[157,1666,653],{"class":167},[157,1668,646],{"class":163},[72,1670,1672],{"id":1671},"tbt","TBT",[15,1674,1675,1678,1679,1682],{},[19,1676,1677],{},"TBT (Total Blocking Time)"," is not a Core Web Vital. It is a ",[19,1680,1681],{},"lab"," metric that Lighthouse uses to assess performance in controlled tests.",[15,1684,1685],{},"TBT adds up the time the main thread was blocked by long tasks (over 50 ms) between FCP (First Contentful Paint) and the moment the page becomes interactive.",[15,1687,1688,1689,1692],{},"It works as an ",[19,1690,1691],{},"indicator for INP"," when you do not have enough field data. If TBT is high in Lighthouse, your INP in production is probably poor too.",[15,1694,1695,1696,351],{},"Other Web Vitals that are ",[19,1697,1698],{},"not Core",[54,1700,1701,1704],{},[57,1702,1703],{},"TTFB (Time to First Byte): time until the first byte of the server response.",[57,1705,1706],{},"FCP (First Contentful Paint): time until the first content is rendered.",[15,1708,1709],{},"They help with diagnosis, but they do not count toward the pass or fail assessment of Core Web Vitals.",[72,1711,1713],{"id":1712},"the-lifecycle-of-web-vitals-metrics","The lifecycle of Web Vitals metrics",[122,1715],{":copyright":1716,"alt":1717,"height":1718,"src":1719,"width":1720},"{\"title\": \"The stages of the Core Web Vitals lifecycle\", \"licenseId\": \"cc4\", \"author\": {\"name\": \"web.dev\", \"url\": \"https:\u002F\u002Fweb.dev\" }}","The lifecycle of Web Vitals metrics, with the Experimental, Pending and Stable stages",61,"\u002Fimages\u002Fblog\u002Fseo\u002Fweb-vitals\u002Fo-ciclo-de-vida-dos-web-vitals.webp",600,[15,1722,1723],{},"Metrics go through three stages before becoming stable Core Web Vitals:",[54,1725,1726,1729,1732],{},[57,1727,1728],{},"Experimental: the metric is being tested and collecting data. It is not yet recommended as a production performance indicator.",[57,1730,1731],{},"Pending: the metric proved useful and is ready to replace an existing one, but Google gives the community time to adjust.",[57,1733,1734],{},"Stable: the metric is officially a Core Web Vital.",[15,1736,1737,1738,1741,1742,22],{},"The swap of ",[19,1739,1740],{},"FID for INP"," is the most recent example. INP started as experimental, moved to pending in 2023 and became stable in ",[19,1743,1233],{},[72,1745,1747],{"id":1746},"how-to-measure","How to measure",[15,1749,1750],{},"There are two ways to measure Core Web Vitals:",[54,1752,1753,1756],{},[57,1754,1755],{},"Field data: metrics collected from real users through the Chrome User Experience Report (CrUX). This is what Google uses for the assessment.",[57,1757,1758],{},"Lab data: metrics collected in a controlled environment with Lighthouse or Chrome DevTools. Useful for diagnosis and for testing before you ship.",[15,1760,1761,1762,1765],{},"Google assesses Core Web Vitals at the ",[19,1763,1764],{},"75th percentile"," of visits. In practice, 75% of real experiences need to fall in the \"good\" range for the page to pass.",[140,1767,1769],{"id":1768},"tools-to-measure","Tools to measure",[54,1771,1772,1775,1778,1781],{},[57,1773,1774],{},"PageSpeed Insights: shows field data (CrUX) and lab data (Lighthouse) for a URL.",[57,1776,1777],{},"Google Search Console: the Core Web Vitals report shows which pages on your site pass or fail, based on real user data.",[57,1779,1780],{},"Lighthouse: the audit tool in Chrome DevTools. It produces lab metrics, including TBT.",[57,1782,1783],{},"web-vitals library: an npm package for collecting the metrics in production.",[148,1785,1787],{"className":1263,"code":1786,"language":1265,"meta":153,"style":153},"import { onLCP, onINP, onCLS } from \"web-vitals\";\n\nonLCP((metric) => {\n  console.log(\"LCP:\", metric.value);\n});\n\nonINP((metric) => {\n  console.log(\"INP:\", metric.value);\n});\n\nonCLS((metric) => {\n  console.log(\"CLS:\", metric.value);\n});\n",[27,1788,1789,1809,1813,1829,1849,1854,1858,1873,1890,1894,1898,1913,1930],{"__ignoreMap":153},[157,1790,1791,1794,1797,1800,1802,1805,1807],{"class":159,"line":160},[157,1792,1793],{"class":167},"import",[157,1795,1796],{"class":163}," { onLCP, onINP, onCLS } ",[157,1798,1799],{"class":167},"from",[157,1801,354],{"class":177},[157,1803,1804],{"class":181},"web-vitals",[157,1806,178],{"class":177},[157,1808,362],{"class":163},[157,1810,1811],{"class":159,"line":250},[157,1812,423],{"emptyLinePlaceholder":422},[157,1814,1815,1818,1820,1823,1825,1827],{"class":159,"line":258},[157,1816,1817],{"class":660},"onLCP",[157,1819,1353],{"class":163},[157,1821,1822],{"class":1356},"metric",[157,1824,384],{"class":163},[157,1826,1362],{"class":167},[157,1828,342],{"class":163},[157,1830,1831,1834,1837,1839,1841,1844,1846],{"class":159,"line":274},[157,1832,1833],{"class":163},"  console.",[157,1835,1836],{"class":660},"log",[157,1838,375],{"class":163},[157,1840,178],{"class":177},[157,1842,1843],{"class":181},"LCP:",[157,1845,178],{"class":177},[157,1847,1848],{"class":163},", metric.value);\n",[157,1850,1851],{"class":159,"line":289},[157,1852,1853],{"class":163},"});\n",[157,1855,1856],{"class":159,"line":304},[157,1857,423],{"emptyLinePlaceholder":422},[157,1859,1860,1863,1865,1867,1869,1871],{"class":159,"line":319},[157,1861,1862],{"class":660},"onINP",[157,1864,1353],{"class":163},[157,1866,1822],{"class":1356},[157,1868,384],{"class":163},[157,1870,1362],{"class":167},[157,1872,342],{"class":163},[157,1874,1875,1877,1879,1881,1883,1886,1888],{"class":159,"line":325},[157,1876,1833],{"class":163},[157,1878,1836],{"class":660},[157,1880,375],{"class":163},[157,1882,178],{"class":177},[157,1884,1885],{"class":181},"INP:",[157,1887,178],{"class":177},[157,1889,1848],{"class":163},[157,1891,1892],{"class":159,"line":437},[157,1893,1853],{"class":163},[157,1895,1896],{"class":159,"line":453},[157,1897,423],{"emptyLinePlaceholder":422},[157,1899,1900,1903,1905,1907,1909,1911],{"class":159,"line":474},[157,1901,1902],{"class":660},"onCLS",[157,1904,1353],{"class":163},[157,1906,1822],{"class":1356},[157,1908,384],{"class":163},[157,1910,1362],{"class":167},[157,1912,342],{"class":163},[157,1914,1915,1917,1919,1921,1923,1926,1928],{"class":159,"line":490},[157,1916,1833],{"class":163},[157,1918,1836],{"class":660},[157,1920,375],{"class":163},[157,1922,178],{"class":177},[157,1924,1925],{"class":181},"CLS:",[157,1927,178],{"class":177},[157,1929,1848],{"class":163},[157,1931,1932],{"class":159,"line":505},[157,1933,1853],{"class":163},[15,1935,1936],{},"The library gives you the real value of each metric, and you decide what to do with it, for example send it to your monitoring system.",[72,1938,1940],{"id":1939},"conclusion","Conclusion",[15,1942,1943],{},"Back to the question in the title: does user experience affect your site's SEO?",[15,1945,1946,1947,1950,1951,1954,1955,1958],{},"It does, but less than content does. Page experience is a ",[19,1948,1949],{},"ranking signal"," on Google, but ",[19,1952,1953],{},"relevance and content quality weigh more",". Good Core Web Vitals work as a ",[19,1956,1957],{},"tiebreaker"," between pages with similar content, and they also improve conversion and retention.",[15,1960,1961,1962,1964],{},"On ",[19,1963,33],{},", page performance also counts, with less emphasis than on Google. It considers load speed and user experience, but puts relevance and domain authority first.",[15,1966,1967],{},"A fast, stable page also converts more and keeps people reading longer, which is reason enough to work on Core Web Vitals.",[1969,1970,1971],"style",{},"html pre.shiki code .sCdxs, html code.shiki .sCdxs{--shiki-default:#F8F8F2}html pre.shiki code .s0Tla, html code.shiki .s0Tla{--shiki-default:#FF79C6}html pre.shiki code .sY_PY, html code.shiki .sY_PY{--shiki-default:#50FA7B;--shiki-default-font-style:italic}html pre.shiki code .seVfx, html code.shiki .seVfx{--shiki-default:#E9F284}html pre.shiki code .s-mGx, html code.shiki .s-mGx{--shiki-default:#F1FA8C}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 pre.shiki code .shSDL, html code.shiki .shSDL{--shiki-default:#6272A4}html pre.shiki code .sLL85, html code.shiki .sLL85{--shiki-default:#8BE9FD}html pre.shiki code .sIQBb, html code.shiki .sIQBb{--shiki-default:#BD93F9}html pre.shiki code .sAOxA, html code.shiki .sAOxA{--shiki-default:#50FA7B}html pre.shiki code .sviCg, html code.shiki .sviCg{--shiki-default:#FF79C6;--shiki-default-font-weight:bold}html pre.shiki code .sCp4m, html code.shiki .sCp4m{--shiki-default:#8BE9FD;--shiki-default-font-style:italic}html pre.shiki code .sGEwX, html code.shiki .sGEwX{--shiki-default:#FFB86C;--shiki-default-font-style:italic}",{"title":153,"searchDepth":250,"depth":250,"links":1973},[1974,1975,1976,1979,1984,1988,1989,1990,1993],{"id":74,"depth":250,"text":75},{"id":87,"depth":250,"text":88},{"id":119,"depth":250,"text":120,"children":1977},[1978],{"id":142,"depth":258,"text":143},{"id":751,"depth":250,"text":752,"children":1980},[1981,1982,1983],{"id":778,"depth":258,"text":779},{"id":815,"depth":258,"text":816},{"id":837,"depth":258,"text":838},{"id":1203,"depth":250,"text":1204,"children":1985},[1986,1987],{"id":1237,"depth":258,"text":1238},{"id":1252,"depth":258,"text":1253},{"id":1671,"depth":250,"text":1672},{"id":1712,"depth":250,"text":1713},{"id":1746,"depth":250,"text":1747,"children":1991},[1992],{"id":1768,"depth":258,"text":1769},{"id":1939,"depth":250,"text":1940},[1995,1804],"seo","Learn what Core Web Vitals are and how to measure and improve LCP, INP and CLS to give visitors a better experience and help your site's SEO, step by step.","core-web-vitals-how-user-experience-affects-seo","md",{},"\u002Fen\u002Fblog\u002Fcore-web-vitals-how-user-experience-affects-seo","web-vitals-como-a-experiencia-do-usuario-vai-afetar-o-seo-do-seu-site","2024-10-25",{"title":5,"description":1996},{"loc":2000,"images":2005,"lastmod":2010},[2006,2007,2008,2009],{"loc":127},{"loc":757},{"loc":1210},{"loc":1719},"2026-10-06","en\u002Fblog\u002Fcore-web-vitals-how-user-experience-affects-seo",1677,"L3hm4FbnWENIlKO8xefatTM-yP_5wt5AadGS8F4FCSQ",[2015,2017,2025,2034,2041,2049,2055,2063,2070,2078,2084,2092,2099,2105,2112],{"id":4,"path":2000,"title":5,"articleCover":6,"categoriesIds":2016,"publishedAt":2002},[1995,1804],{"id":2018,"path":2019,"title":2020,"articleCover":2021,"categoriesIds":2022,"publishedAt":2024},"blogEn\u002Fen\u002Fblog\u002Ffree-developer-tools-hub.md","\u002Fen\u002Fblog\u002Ffree-developer-tools-hub","I Built a Free Web Tools Hub for Developers","\u002Fimages\u002Fen\u002Fblog\u002Ftools\u002Ffree-developer-tools-hub.webp",[2023],"tools","2026-01-06",{"id":2026,"path":2027,"title":2028,"articleCover":2029,"categoriesIds":2030,"publishedAt":2033},"blogEn\u002Fen\u002Fblog\u002Fhow-the-routing-system-works-in-nuxt.md","\u002Fen\u002Fblog\u002Fhow-the-routing-system-works-in-nuxt","Nuxt Routing: Dynamic, Nested and Catch-All Routes","\u002Fimages\u002Fblog\u002Fnuxt\u002Fnuxt-routing-thumb.webp",[2031,2032],"nuxt","vuejs","2025-03-12",{"id":2035,"path":2036,"title":2037,"articleCover":2038,"categoriesIds":2039,"publishedAt":2040},"blogEn\u002Fen\u002Fblog\u002Fhow-to-add-special-characters-on-i18n.md","\u002Fen\u002Fblog\u002Fhow-to-add-special-characters-on-i18n","How to Add Special Characters in i18N Translations","\u002Fimages\u002Fblog\u002Fi18n\u002Fi18n-special-characters-on-nuxtjs-thumb.webp",[2031,2032],"2025-02-02",{"id":2042,"path":2043,"title":2044,"articleCover":2045,"categoriesIds":2046,"publishedAt":2048},"blogEn\u002Fen\u002Fblog\u002Fhow-to-create-and-set-up-ssh-key-github.md","\u002Fen\u002Fblog\u002Fhow-to-create-and-set-up-ssh-key-github","SSH Key in Git: How to Set Up an SSH Key for GitHub","\u002Fimages\u002Fen\u002Fblog\u002Fgit\u002Fhow-to-create-and-set-up-ssh-key-github-thumb.webp",[2047],"git","2025-02-04",{"id":2050,"path":69,"title":2051,"articleCover":2052,"categoriesIds":2053,"publishedAt":2054},"blogEn\u002Fen\u002Fblog\u002Fhow-to-create-structured-data-with-nuxtjs.md","What is Structured Data and How to Add it in Nuxt.JS","\u002Fimages\u002Fen\u002Fblog\u002Fseo\u002Fstructured-data\u002Fstructured-data-thumb-1.webp",[2031,2032,1995],"2025-01-22",{"id":2056,"path":2057,"title":2058,"articleCover":2059,"categoriesIds":2060,"publishedAt":2062},"blogEn\u002Fen\u002Fblog\u002Fhow-to-deal-with-envy-from-other-programmers.md","\u002Fen\u002Fblog\u002Fhow-to-deal-with-envy-from-other-programmers","How to Deal with Envy from Other Programmers in Your Career","\u002Fimages\u002Fen\u002Fblog\u002Fcareer\u002Fa-nail-that-stands-out-gets-hammered.webp",[2061],"career","2025-08-29",{"id":2064,"path":2065,"title":2066,"articleCover":2067,"categoriesIds":2068,"publishedAt":2069},"blogEn\u002Fen\u002Fblog\u002Fhow-to-use-middlewares-nuxtjs.md","\u002Fen\u002Fblog\u002Fhow-to-use-middlewares-nuxtjs","Middlewares: What They Are and How to Use Them in Nuxt.JS","\u002Fimages\u002Fblog\u002Fnuxt\u002Ffront-end-middlewares-thumb.webp",[2031,2032],"2025-02-03",{"id":2071,"path":2072,"title":2073,"articleCover":2074,"categoriesIds":2075,"publishedAt":2077},"blogEn\u002Fen\u002Fblog\u002Fhow-to-validate-cpf-with-javascript.md","\u002Fen\u002Fblog\u002Fhow-to-validate-cpf-with-javascript","How to validate a CPF with JavaScript","\u002Fimages\u002Fen\u002Fblog\u002Fjavascript\u002Fhow-to-validate-cpf-with-javascript.webp",[2076,2023],"javascript","2026-10-04",{"id":2079,"path":2080,"title":2081,"articleCover":2082,"categoriesIds":2083,"publishedAt":2077},"blogEn\u002Fen\u002Fblog\u002Fhow-to-validate-credit-card-with-javascript.md","\u002Fen\u002Fblog\u002Fhow-to-validate-credit-card-with-javascript","How to validate a credit card with JavaScript (Luhn algorithm)","\u002Fimages\u002Fen\u002Fblog\u002Fjavascript\u002Fhow-to-validate-credit-card-with-javascript.webp",[2076,2023],{"id":2085,"path":2086,"title":2087,"articleCover":2088,"categoriesIds":2089,"publishedAt":2091},"blogEn\u002Fen\u002Fblog\u002Frecovering-lost-files-in-git-with-vscode.md","\u002Fen\u002Fblog\u002Frecovering-lost-files-in-git-with-vscode","Recover Lost Files in Git Without a Commit Using VS Code Local History","\u002Fimages\u002Fen\u002Fblog\u002Fvscode\u002Fhow-to-recover-lost-files-in-git-using-vscode.webp",[2047,2090],"vscode","2025-01-21",{"id":2093,"path":2094,"title":2095,"articleCover":2096,"categoriesIds":2097,"publishedAt":2098},"blogEn\u002Fen\u002Fblog\u002Fvercel-buys-nuxt-labs.md","\u002Fen\u002Fblog\u002Fvercel-buys-nuxt-labs","Vercel Acquired Nuxt Labs! What Does This Mean for Nuxt?","\u002Fimages\u002Fen\u002Fblog\u002Fnuxt\u002Fvercel-buys-nuxt-labs.webp",[2031],"2025-07-17",{"id":2100,"path":2101,"title":2102,"articleCover":2103,"categoriesIds":2104,"publishedAt":2010},"blogEn\u002Fen\u002Fblog\u002Fvue-vapor-mode-what-it-is-and-how-to-use-it.md","\u002Fen\u002Fblog\u002Fvue-vapor-mode-what-it-is-and-how-to-use-it","Vue Vapor Mode: what it is and what changes in Vue 3.6","\u002Fimages\u002Fen\u002Fblog\u002Fvue\u002Fvue-vapor-mode-what-it-is-and-how-to-use-it.webp",[2032,2031],{"id":2106,"path":2107,"title":2108,"articleCover":2109,"categoriesIds":2110,"publishedAt":2111},"blogEn\u002Fen\u002Fblog\u002Fwhat-are-directives-in-vue-and-how-to-implement-them.md","\u002Fen\u002Fblog\u002Fwhat-are-directives-in-vue-and-how-to-implement-them","Vue 3 Directives: Built-in and Custom","\u002Fimages\u002Fen\u002Fblog\u002Fvue\u002Fwhat-are-directives-in-vue-and-how-to-implement-them.webp",[2032],"2025-03-21",{"id":2113,"path":2114,"title":2115,"articleCover":2116,"categoriesIds":2117,"publishedAt":2118},"blogEn\u002Fen\u002Fblog\u002Fwhat-is-the-difference-between-composition-api-and-options-api-in-vuejs.md","\u002Fen\u002Fblog\u002Fwhat-is-the-difference-between-composition-api-and-options-api-in-vuejs","Composition API vs Options API in Vue.js: What's the Difference?","\u002Fimages\u002Fen\u002Fblog\u002Fvue\u002Fwhat-is-the-difference-between-composition-api-and-options-api-in-vuejs.webp",[2032],"2025-02-20",1791682334532]