[{"data":1,"prerenderedAt":2179},["ShallowReactive",2],{"pt-BR-article-\u002Fblog\u002Fweb-vitals-como-a-experiencia-do-usuario-vai-afetar-o-seo-do-seu-site":3,"pt-BR-related-posts-\u002Fblog\u002Fweb-vitals-como-a-experiencia-do-usuario-vai-afetar-o-seo-do-seu-site":2023},{"id":4,"title":5,"articleCover":6,"articleCoverEmbed":7,"articleCoverEmbedUploadDate":7,"articleCoverHeight":8,"articleCoverWidth":9,"authorId":10,"body":11,"categoriesIds":2003,"description":2005,"enAlternateSlug":2006,"extension":2007,"meta":2008,"navigation":430,"path":2009,"ptBrAlternateSlug":2010,"publishedAt":2011,"seo":2012,"sitemap":2013,"stem":2020,"updatedAt":2019,"wordCount":2021,"__hash__":2022},"blog\u002Fblog\u002Fweb-vitals-como-a-experiencia-do-usuario-vai-afetar-o-seo-do-seu-site.md","Web Vitals e SEO: como a experiência do usuário afeta o seu site","\u002Fimages\u002Fblog\u002Fseo\u002Fweb-vitals\u002Fweb-vitals-como-a-experiencia-do-usuario-vai-afetar-o-seo-do-seu-site.webp",null,720,1280,"thiago-nunes-batista",{"type":12,"value":13,"toc":1981},"minimark",[14,23,43,54,57,80,85,88,91,94,98,101,112,115,126,130,138,141,148,153,156,221,224,245,337,592,605,612,619,690,751,758,762,767,774,785,789,792,819,822,826,844,848,855,940,950,953,1033,1048,1210,1214,1221,1228,1237,1244,1248,1259,1263,1270,1454,1460,1618,1621,1678,1682,1692,1695,1702,1708,1716,1719,1723,1730,1733,1744,1753,1757,1760,1768,1775,1779,1793,1943,1946,1950,1953,1968,1974,1977],[15,16,17,18,22],"p",{},"Antes de falar de Web Vitals, vale lembrar ",[19,20,21],"strong",{},"o que é SEO",".",[15,24,25,26,30,31,34,35,38,39,42],{},"SEO, sigla para Search Engine Optimization (Otimização para Motores de Busca), é um conjunto de técnicas para otimizar um site de modo que os ",[27,28,29],"code",{},"Search Crawlers"," (os robôs de busca de ",[27,32,33],{},"Google",", ",[27,36,37],{},"Bing"," e ",[27,40,41],{},"DuckDuckGo",") consigam conhecer e indexar as páginas dele.",[15,44,45,46,49,50,53],{},"Quanto mais otimizado o site, maior a ",[19,47,48],{},"chance"," de ele aparecer nas primeiras posições dos ",[27,51,52],{},"SERPs (Search Engine Result Pages)",", os resultados de busca, e de receber mais acessos.",[15,55,56],{},"Dá para dividir o SEO em três frentes:",[58,59,60,70,73],"ul",{},[61,62,63,64,69],"li",{},"On-Page: conteúdo, palavras-chave, meta tags (como as ",[65,66,68],"a",{"href":67},"\u002Fblog\u002Fog-tags-o-que-sao-e-como-adicionar-no-seu-site","OG tags",") e estrutura do site.",[61,71,72],{},"Off-Page: estratégias externas, como backlinks vindos de outros sites.",[61,74,75,76,22],{},"Técnico: performance, tempo de carregamento, segurança (HTTPS) e ",[65,77,79],{"href":78},"\u002Fblog\u002Fcomo-criar-dados-estruturados-com-nuxtjs","dados estruturados",[81,82,84],"h2",{"id":83},"e-os-web-vitals","E os Web Vitals?",[15,86,87],{},"O Google criou os Web Vitals em 2020. Eles são um conjunto de métricas que medem, com números, a qualidade da experiência de quem usa um site.",[15,89,90],{},"Eles entram no SEO técnico. Ao otimizá-los, o site carrega mais rápido, responde melhor aos cliques e dá uma experiência melhor ao usuário.",[15,92,93],{},"O SEO cuida da visibilidade nos buscadores, e os Core Web Vitals cuidam de a página ser rápida e estável quando o visitante chega. Trabalhar as duas coisas juntas aumenta a chance de ranquear bem e de manter o visitante na página.",[81,95,97],{"id":96},"core-web-vitals","Core Web Vitals",[15,99,100],{},"Os Core Web Vitals são um subconjunto dos Web Vitals. Hoje eles são três métricas:",[58,102,103,106,109],{},[61,104,105],{},"CLS, Cumulative Layout Shift",[61,107,108],{},"LCP, Largest Contentful Paint",[61,110,111],{},"INP, Interaction to Next Paint",[15,113,114],{},"O Google separa as principais das demais por três motivos:",[58,116,117,120,123],{},[61,118,119],{},"Priorização: com as métricas principais definidas, fica claro onde a pessoa desenvolvedora deve começar a otimizar.",[61,121,122],{},"Simplicidade: com poucas métricas, é mais fácil entender quais otimizações fazer.",[61,124,125],{},"Alinhamento com o Google: o Google é o buscador mais usado do mundo e quer entregar boas páginas aos seus usuários. Os Core Web Vitals fazem parte disso, e uma página que passa neles entrega o tipo de experiência que o Google procura.",[81,127,129],{"id":128},"cumulative-layout-shift-cls","Cumulative Layout Shift (CLS)",[131,132],"img",{":copyright":133,"alt":134,"height":135,"src":136,"width":137},"{\"title\": \"Métrica de CLS do Web Vitals\", \"licenseId\": \"cc4\", \"author\": {\"name\": \"web.dev\", \"url\": \"https:\u002F\u002Fweb.dev\" }}","Ilustração do CLS mostrando elementos da página se movendo durante o carregamento",210,"\u002Fimages\u002Fblog\u002Fseo\u002Fweb-vitals\u002Fcls-cumulative-layout-shift.webp",240,[15,139,140],{},"O CLS mede a estabilidade visual de uma página, ou seja, o quanto os elementos se mexem de forma inesperada durante o carregamento. Um CLS alto indica que o layout muda de repente, e quem está lendo acaba clicando no lugar errado.",[15,142,143,144,147],{},"Para ter uma boa experiência, o site deve manter o CLS em ",[19,145,146],{},"0,1 ou menos"," em pelo menos 75% das visitas.",[149,150,152],"h3",{"id":151},"exemplos-de-erros-de-cls","Exemplos de erros de CLS",[15,154,155],{},"O primeiro caso, bem comum, é a imagem que carrega depois do resto da página. Ela \"empurra\" o conteúdo para baixo para abrir espaço. A solução é definir largura e altura na imagem, para o navegador reservar o espaço antes de baixá-la.",[157,158,163],"pre",{"className":159,"code":160,"language":161,"meta":162,"style":162},"language-html shiki shiki-themes dracula","\u003Cimg src=\"\u002Fcodigo-ao-ponto.jpg\" width=\"600\" height=\"400\" \u002F>\n","html","",[27,164,165],{"__ignoreMap":162},[166,167,170,174,177,181,184,188,192,194,197,199,201,204,206,209,211,213,216,218],"span",{"class":168,"line":169},"line",1,[166,171,173],{"class":172},"sCdxs","\u003C",[166,175,131],{"class":176},"s0Tla",[166,178,180],{"class":179},"sY_PY"," src",[166,182,183],{"class":176},"=",[166,185,187],{"class":186},"seVfx","\"",[166,189,191],{"class":190},"s-mGx","\u002Fcodigo-ao-ponto.jpg",[166,193,187],{"class":186},[166,195,196],{"class":179}," width",[166,198,183],{"class":176},[166,200,187],{"class":186},[166,202,203],{"class":190},"600",[166,205,187],{"class":186},[166,207,208],{"class":179}," height",[166,210,183],{"class":176},[166,212,187],{"class":186},[166,214,215],{"class":190},"400",[166,217,187],{"class":186},[166,219,220],{"class":172}," \u002F>\n",[15,222,223],{},"O segundo caso são as fontes personalizadas. O navegador precisa baixá-las antes de renderizar o texto corretamente, e isso causa um deslocamento quando a fonte web chega e substitui a fonte de fallback.",[15,225,226,227,38,230,233,234,237,238,241,242,22],{},"Para resolver, pré-carregue a fonte com a tag ",[27,228,229],{},"link",[27,231,232],{},"rel=\"preload\"",", use ",[27,235,236],{},"font-display"," no ",[27,239,240],{},"@font-face"," e ajuste as métricas da fonte de fallback com ",[27,243,244],{},"size-adjust",[157,246,248],{"className":159,"code":247,"language":161,"meta":162,"style":162},"\u003C!-- Pré-carregar a fonte crítica acima da dobra -->\n\u003Clink\n  rel=\"preload\"\n  href=\"\u002Ffonts\u002Finter.woff2\"\n  as=\"font\"\n  type=\"font\u002Fwoff2\"\n  crossorigin\n\u002F>\n",[27,249,250,256,264,280,295,310,325,331],{"__ignoreMap":162},[166,251,252],{"class":168,"line":169},[166,253,255],{"class":254},"shSDL","\u003C!-- Pré-carregar a fonte crítica acima da dobra -->\n",[166,257,259,261],{"class":168,"line":258},2,[166,260,173],{"class":172},[166,262,263],{"class":176},"link\n",[166,265,267,270,272,274,277],{"class":168,"line":266},3,[166,268,269],{"class":179},"  rel",[166,271,183],{"class":176},[166,273,187],{"class":186},[166,275,276],{"class":190},"preload",[166,278,279],{"class":186},"\"\n",[166,281,283,286,288,290,293],{"class":168,"line":282},4,[166,284,285],{"class":179},"  href",[166,287,183],{"class":176},[166,289,187],{"class":186},[166,291,292],{"class":190},"\u002Ffonts\u002Finter.woff2",[166,294,279],{"class":186},[166,296,298,301,303,305,308],{"class":168,"line":297},5,[166,299,300],{"class":179},"  as",[166,302,183],{"class":176},[166,304,187],{"class":186},[166,306,307],{"class":190},"font",[166,309,279],{"class":186},[166,311,313,316,318,320,323],{"class":168,"line":312},6,[166,314,315],{"class":179},"  type",[166,317,183],{"class":176},[166,319,187],{"class":186},[166,321,322],{"class":190},"font\u002Fwoff2",[166,324,279],{"class":186},[166,326,328],{"class":168,"line":327},7,[166,329,330],{"class":179},"  crossorigin\n",[166,332,334],{"class":168,"line":333},8,[166,335,336],{"class":172},"\u002F>\n",[157,338,342],{"className":339,"code":340,"language":341,"meta":162,"style":162},"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 com métricas ajustadas para evitar 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,343,344,351,371,408,421,426,432,437,443,459,480,496,511,526,541,546,551,559,587],{"__ignoreMap":162},[166,345,346,348],{"class":168,"line":169},[166,347,240],{"class":176},[166,349,350],{"class":172}," {\n",[166,352,353,357,360,363,366,368],{"class":168,"line":258},[166,354,356],{"class":355},"sLL85","  font-family",[166,358,359],{"class":176},":",[166,361,362],{"class":186}," \"",[166,364,365],{"class":190},"Inter",[166,367,187],{"class":186},[166,369,370],{"class":172},";\n",[166,372,373,376,378,381,384,386,388,390,393,396,398,400,403,405],{"class":168,"line":266},[166,374,375],{"class":355},"  src",[166,377,359],{"class":176},[166,379,380],{"class":355}," url",[166,382,383],{"class":172},"(",[166,385,187],{"class":186},[166,387,292],{"class":190},[166,389,187],{"class":186},[166,391,392],{"class":172},") ",[166,394,395],{"class":355},"format",[166,397,383],{"class":172},[166,399,187],{"class":186},[166,401,402],{"class":190},"woff2",[166,404,187],{"class":186},[166,406,407],{"class":172},");\n",[166,409,410,413,415,419],{"class":168,"line":282},[166,411,412],{"class":355},"  font-display",[166,414,359],{"class":176},[166,416,418],{"class":417},"sIQBb"," swap",[166,420,370],{"class":172},[166,422,423],{"class":168,"line":297},[166,424,425],{"class":172},"}\n",[166,427,428],{"class":168,"line":312},[166,429,431],{"emptyLinePlaceholder":430},true,"\n",[166,433,434],{"class":168,"line":327},[166,435,436],{"class":254},"\u002F* Fallback com métricas ajustadas para evitar CLS *\u002F\n",[166,438,439,441],{"class":168,"line":333},[166,440,240],{"class":176},[166,442,350],{"class":172},[166,444,446,448,450,452,455,457],{"class":168,"line":445},9,[166,447,356],{"class":355},[166,449,359],{"class":176},[166,451,362],{"class":186},[166,453,454],{"class":190},"Inter Fallback",[166,456,187],{"class":186},[166,458,370],{"class":172},[166,460,462,464,466,469,471,473,476,478],{"class":168,"line":461},10,[166,463,375],{"class":355},[166,465,359],{"class":176},[166,467,468],{"class":355}," local",[166,470,383],{"class":172},[166,472,187],{"class":186},[166,474,475],{"class":190},"Arial",[166,477,187],{"class":186},[166,479,407],{"class":172},[166,481,483,486,488,491,494],{"class":168,"line":482},11,[166,484,485],{"class":355},"  size-adjust",[166,487,359],{"class":176},[166,489,490],{"class":417}," 107",[166,492,493],{"class":176},"%",[166,495,370],{"class":172},[166,497,499,502,504,507,509],{"class":168,"line":498},12,[166,500,501],{"class":172},"  ascent-override",[166,503,359],{"class":176},[166,505,506],{"class":417}," 90",[166,508,493],{"class":176},[166,510,370],{"class":172},[166,512,514,517,519,522,524],{"class":168,"line":513},13,[166,515,516],{"class":172},"  descent-override",[166,518,359],{"class":176},[166,520,521],{"class":417}," 22",[166,523,493],{"class":176},[166,525,370],{"class":172},[166,527,529,532,534,537,539],{"class":168,"line":528},14,[166,530,531],{"class":172},"  line-gap-override",[166,533,359],{"class":176},[166,535,536],{"class":417}," 0",[166,538,493],{"class":176},[166,540,370],{"class":172},[166,542,544],{"class":168,"line":543},15,[166,545,425],{"class":172},[166,547,549],{"class":168,"line":548},16,[166,550,431],{"emptyLinePlaceholder":430},[166,552,554,557],{"class":168,"line":553},17,[166,555,556],{"class":176},"body",[166,558,350],{"class":172},[166,560,562,564,566,568,570,572,574,576,578,580,582,585],{"class":168,"line":561},18,[166,563,356],{"class":355},[166,565,359],{"class":176},[166,567,362],{"class":186},[166,569,365],{"class":190},[166,571,187],{"class":186},[166,573,34],{"class":172},[166,575,187],{"class":186},[166,577,454],{"class":190},[166,579,187],{"class":186},[166,581,34],{"class":172},[166,583,584],{"class":417},"sans-serif",[166,586,370],{"class":172},[166,588,590],{"class":168,"line":589},19,[166,591,425],{"class":172},[15,593,594,595,598,599,34,601,604],{},"O ",[27,596,597],{},"font-display: swap"," mostra o texto na hora usando a fonte de fallback e troca para a fonte web quando ela carrega. Para a troca não deslocar nada, você ajusta as métricas da fonte de fallback (",[27,600,244],{},[27,602,603],{},"ascent-override"," e as demais) para que ela ocupe o mesmo espaço da fonte web.",[15,606,607,608,611],{},"Se a fonte não for crítica, use ",[27,609,610],{},"font-display: optional",". Nesse caso, a fonte web só é usada se carregar em cerca de 100 ms. Se demorar mais, o navegador mantém a fallback nessa navegação, e a troca de fonte deixa de ser fonte de CLS.",[15,613,614,615,618],{},"O terceiro caso são ",[19,616,617],{},"banners, anúncios e embeds injetados sem espaço reservado",". Quando um script de terceiro insere um anúncio depois que a página já renderizou, o conteúdo abaixo é empurrado.",[157,620,622],{"className":159,"code":621,"language":161,"meta":162,"style":162},"\u003C!-- Ruim: slot de anúncio sem dimensões -->\n\u003Cdiv id=\"ad-slot\">\u003C\u002Fdiv>\n\u003Cscript>\n  loadAd(\"ad-slot\");\n\u003C\u002Fscript>\n",[27,623,624,629,656,665,681],{"__ignoreMap":162},[166,625,626],{"class":168,"line":169},[166,627,628],{"class":254},"\u003C!-- Ruim: slot de anúncio sem dimensões -->\n",[166,630,631,633,636,639,641,643,646,648,651,653],{"class":168,"line":258},[166,632,173],{"class":172},[166,634,635],{"class":176},"div",[166,637,638],{"class":179}," id",[166,640,183],{"class":176},[166,642,187],{"class":186},[166,644,645],{"class":190},"ad-slot",[166,647,187],{"class":186},[166,649,650],{"class":172},">\u003C\u002F",[166,652,635],{"class":176},[166,654,655],{"class":172},">\n",[166,657,658,660,663],{"class":168,"line":266},[166,659,173],{"class":172},[166,661,662],{"class":176},"script",[166,664,655],{"class":172},[166,666,667,671,673,675,677,679],{"class":168,"line":282},[166,668,670],{"class":669},"sAOxA","  loadAd",[166,672,383],{"class":172},[166,674,187],{"class":186},[166,676,645],{"class":190},[166,678,187],{"class":186},[166,680,407],{"class":172},[166,682,683,686,688],{"class":168,"line":297},[166,684,685],{"class":172},"\u003C\u002F",[166,687,662],{"class":176},[166,689,655],{"class":172},[157,691,693],{"className":159,"code":692,"language":161,"meta":162,"style":162},"\u003C!-- Bom: espaço reservado com min-height ou aspect-ratio -->\n\u003Cdiv\n  id=\"ad-slot\"\n  style=\"min-height: 250px; width: 300px; background-color: #f3f4f6;\"\n>\n  \u003C!-- Anúncio será injetado aqui -->\n\u003C\u002Fdiv>\n",[27,694,695,700,707,720,734,738,743],{"__ignoreMap":162},[166,696,697],{"class":168,"line":169},[166,698,699],{"class":254},"\u003C!-- Bom: espaço reservado com min-height ou aspect-ratio -->\n",[166,701,702,704],{"class":168,"line":258},[166,703,173],{"class":172},[166,705,706],{"class":176},"div\n",[166,708,709,712,714,716,718],{"class":168,"line":266},[166,710,711],{"class":179},"  id",[166,713,183],{"class":176},[166,715,187],{"class":186},[166,717,645],{"class":190},[166,719,279],{"class":186},[166,721,722,725,727,729,732],{"class":168,"line":282},[166,723,724],{"class":179},"  style",[166,726,183],{"class":176},[166,728,187],{"class":186},[166,730,731],{"class":190},"min-height: 250px; width: 300px; background-color: #f3f4f6;",[166,733,279],{"class":186},[166,735,736],{"class":168,"line":297},[166,737,655],{"class":172},[166,739,740],{"class":168,"line":312},[166,741,742],{"class":254},"  \u003C!-- Anúncio será injetado aqui -->\n",[166,744,745,747,749],{"class":168,"line":327},[166,746,685],{"class":172},[166,748,635],{"class":176},[166,750,655],{"class":172},[15,752,753,754,757],{},"Em embeds responsivos, como vídeos do YouTube, use ",[27,755,756],{},"aspect-ratio"," no CSS para reservar o espaço proporcional antes do carregamento.",[81,759,761],{"id":760},"largest-contentful-paint-lcp","Largest Contentful Paint (LCP)",[131,763],{":copyright":764,"alt":765,"height":135,"src":766,"width":137},"{\"title\": \"Métrica de LCP do Web Vitals\", \"licenseId\": \"cc4\", \"author\": {\"name\": \"web.dev\", \"url\": \"https:\u002F\u002Fweb.dev\" }}","Ilustração do LCP destacando o maior elemento de conteúdo visível na viewport","\u002Fimages\u002Fblog\u002Fseo\u002Fweb-vitals\u002Flcp-largest-contentful-paint.webp",[15,768,769,770,773],{},"O LCP mede quanto tempo a página leva para renderizar o ",[19,771,772],{},"maior elemento de conteúdo visível"," na viewport. Esse elemento pode ser uma imagem, um bloco de texto, um vídeo ou um SVG.",[15,775,776,777,780,781,784],{},"Um LCP ",[19,778,779],{},"bom"," é de ",[19,782,783],{},"2,5 segundos ou menos"," no percentil 75 das visitas reais.",[149,786,788],{"id":787},"o-que-conta-como-lcp","O que conta como LCP",[15,790,791],{},"O navegador considera candidatos a LCP:",[58,793,794,804,810,816],{},[61,795,796,797,34,800,803],{},"Imagens (",[27,798,799],{},"\u003Cimg>",[27,801,802],{},"\u003Cpicture>",")",[61,805,806,807],{},"Elementos ",[27,808,809],{},"\u003Cvideo>",[61,811,812,813,803],{},"Elementos com imagem de fundo via CSS (",[27,814,815],{},"background-image",[61,817,818],{},"Blocos de texto (parágrafos e títulos)",[15,820,821],{},"Na maioria das páginas, o LCP é a imagem principal (hero image) ou o título.",[149,823,825],{"id":824},"causas-comuns-de-lcp-alto","Causas comuns de LCP alto",[58,827,828,831,838,841],{},[61,829,830],{},"TTFB alto: o servidor demora para responder à requisição inicial.",[61,832,833,834,837],{},"Imagem principal com lazy loading: usar ",[27,835,836],{},"loading=\"lazy\""," na imagem acima da dobra atrasa o LCP.",[61,839,840],{},"Recursos que bloqueiam a renderização: CSS ou JS pesado antes do conteúdo crítico.",[61,842,843],{},"Imagem pesada: arquivos grandes em formatos não otimizados.",[149,845,847],{"id":846},"como-melhorar-o-lcp","Como melhorar o LCP",[15,849,850,851,854],{},"Use ",[27,852,853],{},"fetchpriority=\"high\""," na imagem principal para priorizar o download dela.",[157,856,858],{"className":159,"code":857,"language":161,"meta":162,"style":162},"\u003Cimg\n  src=\"\u002Fhero.webp\"\n  fetchpriority=\"high\"\n  width=\"1600\"\n  height=\"900\"\n  alt=\"Descrição da imagem principal\"\n\u002F>\n",[27,859,860,867,880,894,908,922,936],{"__ignoreMap":162},[166,861,862,864],{"class":168,"line":169},[166,863,173],{"class":172},[166,865,866],{"class":176},"img\n",[166,868,869,871,873,875,878],{"class":168,"line":258},[166,870,375],{"class":179},[166,872,183],{"class":176},[166,874,187],{"class":186},[166,876,877],{"class":190},"\u002Fhero.webp",[166,879,279],{"class":186},[166,881,882,885,887,889,892],{"class":168,"line":266},[166,883,884],{"class":179},"  fetchpriority",[166,886,183],{"class":176},[166,888,187],{"class":186},[166,890,891],{"class":190},"high",[166,893,279],{"class":186},[166,895,896,899,901,903,906],{"class":168,"line":282},[166,897,898],{"class":179},"  width",[166,900,183],{"class":176},[166,902,187],{"class":186},[166,904,905],{"class":190},"1600",[166,907,279],{"class":186},[166,909,910,913,915,917,920],{"class":168,"line":297},[166,911,912],{"class":179},"  height",[166,914,183],{"class":176},[166,916,187],{"class":186},[166,918,919],{"class":190},"900",[166,921,279],{"class":186},[166,923,924,927,929,931,934],{"class":168,"line":312},[166,925,926],{"class":179},"  alt",[166,928,183],{"class":176},[166,930,187],{"class":186},[166,932,933],{"class":190},"Descrição da imagem principal",[166,935,279],{"class":186},[166,937,938],{"class":168,"line":327},[166,939,336],{"class":172},[15,941,942,943,945,946,949],{},"Não use ",[27,944,836],{}," na imagem do LCP. Deixe que ela carregue de imediato (ou use ",[27,947,948],{},"loading=\"eager\""," de forma explícita).",[15,951,952],{},"Se o navegador não descobre a imagem principal cedo, pré-carregue-a.",[157,954,956],{"className":159,"code":955,"language":161,"meta":162,"style":162},"\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,957,958,964,976,989,1001,1015,1029],{"__ignoreMap":162},[166,959,960,962],{"class":168,"line":169},[166,961,173],{"class":172},[166,963,263],{"class":176},[166,965,966,968,970,972,974],{"class":168,"line":258},[166,967,269],{"class":179},[166,969,183],{"class":176},[166,971,187],{"class":186},[166,973,276],{"class":190},[166,975,279],{"class":186},[166,977,978,980,982,984,987],{"class":168,"line":266},[166,979,300],{"class":179},[166,981,183],{"class":176},[166,983,187],{"class":186},[166,985,986],{"class":190},"image",[166,988,279],{"class":186},[166,990,991,993,995,997,999],{"class":168,"line":282},[166,992,285],{"class":179},[166,994,183],{"class":176},[166,996,187],{"class":186},[166,998,877],{"class":190},[166,1000,279],{"class":186},[166,1002,1003,1006,1008,1010,1013],{"class":168,"line":297},[166,1004,1005],{"class":179},"  imagesrcset",[166,1007,183],{"class":176},[166,1009,187],{"class":186},[166,1011,1012],{"class":190},"\u002Fhero-400.webp 400w, \u002Fhero-800.webp 800w, \u002Fhero-1200.webp 1200w",[166,1014,279],{"class":186},[166,1016,1017,1020,1022,1024,1027],{"class":168,"line":312},[166,1018,1019],{"class":179},"  imagesizes",[166,1021,183],{"class":176},[166,1023,187],{"class":186},[166,1025,1026],{"class":190},"(max-width: 600px) 100vw, 50vw",[166,1028,279],{"class":186},[166,1030,1031],{"class":168,"line":327},[166,1032,336],{"class":172},[15,1034,1035,1036,1039,1040,1043,1044,1047],{},"Converta as imagens para ",[19,1037,1038],{},"AVIF"," ou ",[19,1041,1042],{},"WebP"," e use ",[27,1045,1046],{},"srcset"," para servir o tamanho certo a cada dispositivo.",[157,1049,1051],{"className":159,"code":1050,"language":161,"meta":162,"style":162},"\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=\"Descrição da imagem principal\"\n  \u002F>\n\u003C\u002Fpicture>\n",[27,1052,1053,1062,1096,1125,1131,1145,1158,1171,1184,1197,1202],{"__ignoreMap":162},[166,1054,1055,1057,1060],{"class":168,"line":169},[166,1056,173],{"class":172},[166,1058,1059],{"class":176},"picture",[166,1061,655],{"class":172},[166,1063,1064,1067,1070,1073,1075,1077,1080,1082,1085,1087,1089,1092,1094],{"class":168,"line":258},[166,1065,1066],{"class":172},"  \u003C",[166,1068,1069],{"class":176},"source",[166,1071,1072],{"class":179}," srcset",[166,1074,183],{"class":176},[166,1076,187],{"class":186},[166,1078,1079],{"class":190},"\u002Fhero.avif",[166,1081,187],{"class":186},[166,1083,1084],{"class":179}," type",[166,1086,183],{"class":176},[166,1088,187],{"class":186},[166,1090,1091],{"class":190},"image\u002Favif",[166,1093,187],{"class":186},[166,1095,220],{"class":172},[166,1097,1098,1100,1102,1104,1106,1108,1110,1112,1114,1116,1118,1121,1123],{"class":168,"line":266},[166,1099,1066],{"class":172},[166,1101,1069],{"class":176},[166,1103,1072],{"class":179},[166,1105,183],{"class":176},[166,1107,187],{"class":186},[166,1109,877],{"class":190},[166,1111,187],{"class":186},[166,1113,1084],{"class":179},[166,1115,183],{"class":176},[166,1117,187],{"class":186},[166,1119,1120],{"class":190},"image\u002Fwebp",[166,1122,187],{"class":186},[166,1124,220],{"class":172},[166,1126,1127,1129],{"class":168,"line":282},[166,1128,1066],{"class":172},[166,1130,866],{"class":176},[166,1132,1133,1136,1138,1140,1143],{"class":168,"line":297},[166,1134,1135],{"class":179},"    src",[166,1137,183],{"class":176},[166,1139,187],{"class":186},[166,1141,1142],{"class":190},"\u002Fhero.jpg",[166,1144,279],{"class":186},[166,1146,1147,1150,1152,1154,1156],{"class":168,"line":312},[166,1148,1149],{"class":179},"    fetchpriority",[166,1151,183],{"class":176},[166,1153,187],{"class":186},[166,1155,891],{"class":190},[166,1157,279],{"class":186},[166,1159,1160,1163,1165,1167,1169],{"class":168,"line":327},[166,1161,1162],{"class":179},"    width",[166,1164,183],{"class":176},[166,1166,187],{"class":186},[166,1168,905],{"class":190},[166,1170,279],{"class":186},[166,1172,1173,1176,1178,1180,1182],{"class":168,"line":333},[166,1174,1175],{"class":179},"    height",[166,1177,183],{"class":176},[166,1179,187],{"class":186},[166,1181,919],{"class":190},[166,1183,279],{"class":186},[166,1185,1186,1189,1191,1193,1195],{"class":168,"line":445},[166,1187,1188],{"class":179},"    alt",[166,1190,183],{"class":176},[166,1192,187],{"class":186},[166,1194,933],{"class":190},[166,1196,279],{"class":186},[166,1198,1199],{"class":168,"line":461},[166,1200,1201],{"class":172},"  \u002F>\n",[166,1203,1204,1206,1208],{"class":168,"line":482},[166,1205,685],{"class":172},[166,1207,1059],{"class":176},[166,1209,655],{"class":172},[81,1211,1213],{"id":1212},"interaction-to-next-paint-inp","Interaction to Next Paint (INP)",[131,1215],{":copyright":1216,"alt":1217,"height":1218,"src":1219,"width":1220},"{\"title\": \"Métrica de INP do Web Vitals\", \"licenseId\": \"cc4\", \"author\": {\"name\": \"web.dev\", \"url\": \"https:\u002F\u002Fweb.dev\" }}","Ilustração do INP mostrando o tempo entre a interação do usuário e a próxima pintura na tela",194,"\u002Fimages\u002Fblog\u002Fseo\u002Fweb-vitals\u002Finp-interaction-to-next-paint.webp",259,[15,1222,1223,1224,1227],{},"O INP mede a ",[19,1225,1226],{},"responsividade"," da página. Ele observa a latência de todas as interações (cliques, toques e teclas) durante a visita e reporta o valor da interação mais lenta, desconsiderando casos isolados muito fora da curva.",[15,1229,1230,1231,780,1233,1236],{},"Um INP ",[19,1232,779],{},[19,1234,1235],{},"200 ms ou menos"," no percentil 75.",[15,1238,1239,1240,1243],{},"O INP substituiu o FID (First Input Delay) como Core Web Vital em ",[19,1241,1242],{},"março de 2024",". O FID media só o atraso da primeira interação. O INP considera todas as interações e mede o tempo completo, do início da interação até a próxima pintura com retorno visual.",[149,1245,1247],{"id":1246},"o-que-causa-inp-alto","O que causa INP alto",[58,1249,1250,1253,1256],{},[61,1251,1252],{},"Long tasks: tarefas JavaScript que bloqueiam a thread principal por mais de 50 ms.",[61,1254,1255],{},"Handlers de input pesados: código que roda a cada clique, tecla digitada ou rolagem.",[61,1257,1258],{},"Scripts de terceiros: analytics, anúncios e widgets sociais disputando a thread principal.",[149,1260,1262],{"id":1261},"como-melhorar-o-inp","Como melhorar o INP",[15,1264,1265,1266,1269],{},"Quebre tarefas longas em pedaços menores e use ",[27,1267,1268],{},"scheduler.yield()"," para devolver o controle ao navegador entre eles.",[157,1271,1275],{"className":1272,"code":1273,"language":1274,"meta":162,"style":162},"language-js shiki shiki-themes dracula","\u002F\u002F Helper com fallback para navegadores sem 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,1276,1277,1282,1293,1329,1342,1347,1384,1388,1392,1411,1430,1437,1446,1450],{"__ignoreMap":162},[166,1278,1279],{"class":168,"line":169},[166,1280,1281],{"class":254},"\u002F\u002F Helper com fallback para navegadores sem scheduler.yield()\n",[166,1283,1284,1287,1290],{"class":168,"line":258},[166,1285,1286],{"class":176},"function",[166,1288,1289],{"class":669}," yieldToMain",[166,1291,1292],{"class":172},"() {\n",[166,1294,1295,1298,1301,1303,1306,1308,1311,1314,1317,1319,1322,1324,1326],{"class":168,"line":266},[166,1296,1297],{"class":176},"  if",[166,1299,1300],{"class":172}," (",[166,1302,187],{"class":186},[166,1304,1305],{"class":190},"scheduler",[166,1307,187],{"class":186},[166,1309,1310],{"class":176}," in",[166,1312,1313],{"class":172}," window ",[166,1315,1316],{"class":176},"&&",[166,1318,362],{"class":186},[166,1320,1321],{"class":190},"yield",[166,1323,187],{"class":186},[166,1325,1310],{"class":176},[166,1327,1328],{"class":172}," scheduler) {\n",[166,1330,1331,1334,1337,1339],{"class":168,"line":282},[166,1332,1333],{"class":176},"    return",[166,1335,1336],{"class":172}," scheduler.",[166,1338,1321],{"class":669},[166,1340,1341],{"class":172},"();\n",[166,1343,1344],{"class":168,"line":297},[166,1345,1346],{"class":172},"  }\n",[166,1348,1349,1352,1356,1360,1363,1367,1369,1372,1375,1378,1381],{"class":168,"line":312},[166,1350,1351],{"class":176},"  return",[166,1353,1355],{"class":1354},"sviCg"," new",[166,1357,1359],{"class":1358},"sCp4m"," Promise",[166,1361,1362],{"class":172},"((",[166,1364,1366],{"class":1365},"sGEwX","resolve",[166,1368,392],{"class":172},[166,1370,1371],{"class":176},"=>",[166,1373,1374],{"class":669}," setTimeout",[166,1376,1377],{"class":172},"(resolve, ",[166,1379,1380],{"class":417},"0",[166,1382,1383],{"class":172},"));\n",[166,1385,1386],{"class":168,"line":327},[166,1387,425],{"class":172},[166,1389,1390],{"class":168,"line":333},[166,1391,431],{"emptyLinePlaceholder":430},[166,1393,1394,1397,1400,1403,1405,1408],{"class":168,"line":445},[166,1395,1396],{"class":176},"async",[166,1398,1399],{"class":176}," function",[166,1401,1402],{"class":669}," processJobs",[166,1404,383],{"class":172},[166,1406,1407],{"class":1365},"jobQueue",[166,1409,1410],{"class":172},") {\n",[166,1412,1413,1416,1418,1421,1424,1427],{"class":168,"line":461},[166,1414,1415],{"class":176},"  for",[166,1417,1300],{"class":172},[166,1419,1420],{"class":176},"const",[166,1422,1423],{"class":172}," job ",[166,1425,1426],{"class":176},"of",[166,1428,1429],{"class":172}," jobQueue) {\n",[166,1431,1432,1435],{"class":168,"line":482},[166,1433,1434],{"class":669},"    job",[166,1436,1341],{"class":172},[166,1438,1439,1442,1444],{"class":168,"line":498},[166,1440,1441],{"class":176},"    await",[166,1443,1289],{"class":669},[166,1445,1341],{"class":172},[166,1447,1448],{"class":168,"line":513},[166,1449,1346],{"class":172},[166,1451,1452],{"class":168,"line":528},[166,1453,425],{"class":172},[15,1455,850,1456,1459],{},[19,1457,1458],{},"debounce"," em handlers de input que disparam com frequência.",[157,1461,1463],{"className":1272,"code":1462,"language":1274,"meta":162,"style":162},"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,1464,1465,1484,1492,1510,1518,1542,1547,1551,1555,1566,1579,1595,1603,1614],{"__ignoreMap":162},[166,1466,1467,1469,1472,1474,1477,1479,1482],{"class":168,"line":169},[166,1468,1286],{"class":176},[166,1470,1471],{"class":669}," debounce",[166,1473,383],{"class":172},[166,1475,1476],{"class":1365},"fn",[166,1478,34],{"class":172},[166,1480,1481],{"class":1365},"delay",[166,1483,1410],{"class":172},[166,1485,1486,1489],{"class":168,"line":258},[166,1487,1488],{"class":176},"  let",[166,1490,1491],{"class":172}," timeout;\n",[166,1493,1494,1496,1498,1501,1504,1506,1508],{"class":168,"line":266},[166,1495,1351],{"class":176},[166,1497,1300],{"class":172},[166,1499,1500],{"class":176},"...",[166,1502,1503],{"class":1365},"args",[166,1505,392],{"class":172},[166,1507,1371],{"class":176},[166,1509,350],{"class":172},[166,1511,1512,1515],{"class":168,"line":282},[166,1513,1514],{"class":669},"    clearTimeout",[166,1516,1517],{"class":172},"(timeout);\n",[166,1519,1520,1523,1525,1527,1530,1532,1535,1537,1539],{"class":168,"line":297},[166,1521,1522],{"class":172},"    timeout ",[166,1524,183],{"class":176},[166,1526,1374],{"class":669},[166,1528,1529],{"class":172},"(() ",[166,1531,1371],{"class":176},[166,1533,1534],{"class":669}," fn",[166,1536,383],{"class":172},[166,1538,1500],{"class":176},[166,1540,1541],{"class":172},"args), delay);\n",[166,1543,1544],{"class":168,"line":312},[166,1545,1546],{"class":172},"  };\n",[166,1548,1549],{"class":168,"line":327},[166,1550,425],{"class":172},[166,1552,1553],{"class":168,"line":333},[166,1554,431],{"emptyLinePlaceholder":430},[166,1556,1557,1560,1563],{"class":168,"line":445},[166,1558,1559],{"class":172},"input.",[166,1561,1562],{"class":669},"addEventListener",[166,1564,1565],{"class":172},"(\n",[166,1567,1568,1571,1574,1576],{"class":168,"line":461},[166,1569,1570],{"class":186},"  \"",[166,1572,1573],{"class":190},"input",[166,1575,187],{"class":186},[166,1577,1578],{"class":172},",\n",[166,1580,1581,1584,1586,1589,1591,1593],{"class":168,"line":482},[166,1582,1583],{"class":669},"  debounce",[166,1585,1362],{"class":172},[166,1587,1588],{"class":1365},"e",[166,1590,392],{"class":172},[166,1592,1371],{"class":176},[166,1594,350],{"class":172},[166,1596,1597,1600],{"class":168,"line":498},[166,1598,1599],{"class":669},"    searchAPI",[166,1601,1602],{"class":172},"(e.target.value);\n",[166,1604,1605,1608,1611],{"class":168,"line":513},[166,1606,1607],{"class":172},"  }, ",[166,1609,1610],{"class":417},"300",[166,1612,1613],{"class":172},")\n",[166,1615,1616],{"class":168,"line":528},[166,1617,407],{"class":172},[15,1619,1620],{},"Adie o JavaScript não crítico para depois que a página estiver interativa.",[157,1622,1624],{"className":159,"code":1623,"language":161,"meta":162,"style":162},"\u003Cscript src=\"\u002Fanalytics.js\" defer>\u003C\u002Fscript>\n\u003Cscript src=\"\u002Fchat-widget.js\" async>\u003C\u002Fscript>\n",[27,1625,1626,1652],{"__ignoreMap":162},[166,1627,1628,1630,1632,1634,1636,1638,1641,1643,1646,1648,1650],{"class":168,"line":169},[166,1629,173],{"class":172},[166,1631,662],{"class":176},[166,1633,180],{"class":179},[166,1635,183],{"class":176},[166,1637,187],{"class":186},[166,1639,1640],{"class":190},"\u002Fanalytics.js",[166,1642,187],{"class":186},[166,1644,1645],{"class":179}," defer",[166,1647,650],{"class":172},[166,1649,662],{"class":176},[166,1651,655],{"class":172},[166,1653,1654,1656,1658,1660,1662,1664,1667,1669,1672,1674,1676],{"class":168,"line":258},[166,1655,173],{"class":172},[166,1657,662],{"class":176},[166,1659,180],{"class":179},[166,1661,183],{"class":176},[166,1663,187],{"class":186},[166,1665,1666],{"class":190},"\u002Fchat-widget.js",[166,1668,187],{"class":186},[166,1670,1671],{"class":179}," async",[166,1673,650],{"class":172},[166,1675,662],{"class":176},[166,1677,655],{"class":172},[81,1679,1681],{"id":1680},"tbt","TBT",[15,1683,594,1684,1687,1688,1691],{},[19,1685,1686],{},"TBT (Total Blocking Time)"," não é um Core Web Vital. Ele é uma métrica de ",[19,1689,1690],{},"laboratório",", usada pelo Lighthouse para avaliar a performance em testes controlados.",[15,1693,1694],{},"O TBT soma o tempo em que a thread principal ficou bloqueada por tarefas longas (acima de 50 ms) entre o FCP (First Contentful Paint) e o momento em que a página fica interativa.",[15,1696,1697,1698,1701],{},"Ele serve como ",[19,1699,1700],{},"indicador do INP"," quando você não tem dados de campo suficientes. Se o TBT está alto no Lighthouse, é provável que o INP em produção também esteja ruim.",[15,1703,1704,1705,359],{},"Outras métricas do Web Vitals que ",[19,1706,1707],{},"não são Core",[58,1709,1710,1713],{},[61,1711,1712],{},"TTFB (Time to First Byte): tempo até o primeiro byte da resposta do servidor.",[61,1714,1715],{},"FCP (First Contentful Paint): tempo até o primeiro conteúdo ser renderizado.",[15,1717,1718],{},"Elas ajudam no diagnóstico, mas não entram na avaliação de \"passou ou não passou\" dos Core Web Vitals.",[81,1720,1722],{"id":1721},"o-ciclo-de-vida-das-métricas-do-web-vitals","O ciclo de vida das métricas do Web Vitals",[131,1724],{":copyright":1725,"alt":1726,"height":1727,"src":1728,"width":1729},"{\"title\": \"The stages of the Core Web Vitals lifecycle\", \"licenseId\": \"cc4\", \"author\": {\"name\": \"web.dev\", \"url\": \"https:\u002F\u002Fweb.dev\" }}","O ciclo de vida das métricas dos Web Vitals, com as fases Experimental, Pending e Stable",61,"\u002Fimages\u002Fblog\u002Fseo\u002Fweb-vitals\u002Fo-ciclo-de-vida-dos-web-vitals.webp",600,[15,1731,1732],{},"As métricas passam por três fases até virarem Core Web Vitals estáveis:",[58,1734,1735,1738,1741],{},[61,1736,1737],{},"Experimental: a métrica está em teste e coletando dados. Ainda não é recomendada como indicador de performance em produção.",[61,1739,1740],{},"Pending: a métrica se mostrou útil e está pronta para substituir uma existente, mas o Google dá um prazo para a comunidade se ajustar.",[61,1742,1743],{},"Stable: a métrica é oficialmente um Core Web Vital.",[15,1745,1746,1747,1750,1751,22],{},"A troca do ",[19,1748,1749],{},"FID pelo INP"," é o exemplo mais recente. O INP começou como experimental, passou para pending em 2023 e se tornou stable em ",[19,1752,1242],{},[81,1754,1756],{"id":1755},"como-medir","Como medir",[15,1758,1759],{},"Existem duas formas de medir os Core Web Vitals:",[58,1761,1762,1765],{},[61,1763,1764],{},"Dados de campo: métricas coletadas de usuários reais, pelo Chrome User Experience Report (CrUX). É o que o Google usa na avaliação.",[61,1766,1767],{},"Dados de laboratório: métricas coletadas em ambiente controlado, pelo Lighthouse ou pelo Chrome DevTools. Servem para diagnóstico e para testar antes de publicar.",[15,1769,1770,1771,1774],{},"O Google avalia os Core Web Vitals no ",[19,1772,1773],{},"percentil 75"," das visitas. Na prática, 75% das experiências reais precisam estar na faixa \"boa\" para a página passar.",[149,1776,1778],{"id":1777},"ferramentas-para-medir","Ferramentas para medir",[58,1780,1781,1784,1787,1790],{},[61,1782,1783],{},"PageSpeed Insights: mostra dados de campo (CrUX) e de laboratório (Lighthouse) de uma URL.",[61,1785,1786],{},"Google Search Console: o relatório de Core Web Vitals mostra quais páginas do site passam ou falham, com base em dados de usuários reais.",[61,1788,1789],{},"Lighthouse: ferramenta de auditoria do Chrome DevTools. Gera métricas de laboratório, incluindo o TBT.",[61,1791,1792],{},"Biblioteca web-vitals: pacote npm para coletar as métricas em produção.",[157,1794,1796],{"className":1272,"code":1795,"language":1274,"meta":162,"style":162},"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,1797,1798,1818,1822,1838,1858,1863,1867,1882,1899,1903,1907,1922,1939],{"__ignoreMap":162},[166,1799,1800,1803,1806,1809,1811,1814,1816],{"class":168,"line":169},[166,1801,1802],{"class":176},"import",[166,1804,1805],{"class":172}," { onLCP, onINP, onCLS } ",[166,1807,1808],{"class":176},"from",[166,1810,362],{"class":186},[166,1812,1813],{"class":190},"web-vitals",[166,1815,187],{"class":186},[166,1817,370],{"class":172},[166,1819,1820],{"class":168,"line":258},[166,1821,431],{"emptyLinePlaceholder":430},[166,1823,1824,1827,1829,1832,1834,1836],{"class":168,"line":266},[166,1825,1826],{"class":669},"onLCP",[166,1828,1362],{"class":172},[166,1830,1831],{"class":1365},"metric",[166,1833,392],{"class":172},[166,1835,1371],{"class":176},[166,1837,350],{"class":172},[166,1839,1840,1843,1846,1848,1850,1853,1855],{"class":168,"line":282},[166,1841,1842],{"class":172},"  console.",[166,1844,1845],{"class":669},"log",[166,1847,383],{"class":172},[166,1849,187],{"class":186},[166,1851,1852],{"class":190},"LCP:",[166,1854,187],{"class":186},[166,1856,1857],{"class":172},", metric.value);\n",[166,1859,1860],{"class":168,"line":297},[166,1861,1862],{"class":172},"});\n",[166,1864,1865],{"class":168,"line":312},[166,1866,431],{"emptyLinePlaceholder":430},[166,1868,1869,1872,1874,1876,1878,1880],{"class":168,"line":327},[166,1870,1871],{"class":669},"onINP",[166,1873,1362],{"class":172},[166,1875,1831],{"class":1365},[166,1877,392],{"class":172},[166,1879,1371],{"class":176},[166,1881,350],{"class":172},[166,1883,1884,1886,1888,1890,1892,1895,1897],{"class":168,"line":333},[166,1885,1842],{"class":172},[166,1887,1845],{"class":669},[166,1889,383],{"class":172},[166,1891,187],{"class":186},[166,1893,1894],{"class":190},"INP:",[166,1896,187],{"class":186},[166,1898,1857],{"class":172},[166,1900,1901],{"class":168,"line":445},[166,1902,1862],{"class":172},[166,1904,1905],{"class":168,"line":461},[166,1906,431],{"emptyLinePlaceholder":430},[166,1908,1909,1912,1914,1916,1918,1920],{"class":168,"line":482},[166,1910,1911],{"class":669},"onCLS",[166,1913,1362],{"class":172},[166,1915,1831],{"class":1365},[166,1917,392],{"class":172},[166,1919,1371],{"class":176},[166,1921,350],{"class":172},[166,1923,1924,1926,1928,1930,1932,1935,1937],{"class":168,"line":498},[166,1925,1842],{"class":172},[166,1927,1845],{"class":669},[166,1929,383],{"class":172},[166,1931,187],{"class":186},[166,1933,1934],{"class":190},"CLS:",[166,1936,187],{"class":186},[166,1938,1857],{"class":172},[166,1940,1941],{"class":168,"line":513},[166,1942,1862],{"class":172},[15,1944,1945],{},"A biblioteca entrega os valores reais de cada métrica, e você decide o que fazer com eles, por exemplo enviá-los ao seu sistema de monitoramento.",[81,1947,1949],{"id":1948},"conclusão","Conclusão",[15,1951,1952],{},"Voltando à pergunta do título: a experiência do usuário afeta o SEO do seu site?",[15,1954,1955,1956,1959,1960,1963,1964,1967],{},"Afeta, mas não tanto quanto o conteúdo. A experiência da página é um ",[19,1957,1958],{},"sinal de ranqueamento"," no Google, mas ",[19,1961,1962],{},"relevância e qualidade do conteúdo pesam mais",". Core Web Vitals bons funcionam como ",[19,1965,1966],{},"critério de desempate"," entre páginas com conteúdo parecido, e ainda melhoram conversão e retenção.",[15,1969,1970,1971,1973],{},"No ",[19,1972,37],{},", a performance da página também conta, com menos ênfase que no Google. Ele considera velocidade de carregamento e experiência do usuário, mas prioriza a relevância do conteúdo e a autoridade do domínio.",[15,1975,1976],{},"Uma página rápida e estável também converte mais e mantém as pessoas lendo por mais tempo, e isso já justifica o trabalho nos Core Web Vitals.",[1978,1979,1980],"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":162,"searchDepth":258,"depth":258,"links":1982},[1983,1984,1985,1988,1993,1997,1998,1999,2002],{"id":83,"depth":258,"text":84},{"id":96,"depth":258,"text":97},{"id":128,"depth":258,"text":129,"children":1986},[1987],{"id":151,"depth":266,"text":152},{"id":760,"depth":258,"text":761,"children":1989},[1990,1991,1992],{"id":787,"depth":266,"text":788},{"id":824,"depth":266,"text":825},{"id":846,"depth":266,"text":847},{"id":1212,"depth":258,"text":1213,"children":1994},[1995,1996],{"id":1246,"depth":266,"text":1247},{"id":1261,"depth":266,"text":1262},{"id":1680,"depth":258,"text":1681},{"id":1721,"depth":258,"text":1722},{"id":1755,"depth":258,"text":1756,"children":2000},[2001],{"id":1777,"depth":266,"text":1778},{"id":1948,"depth":258,"text":1949},[2004,1813],"seo","Entenda o que são os Core Web Vitals e aprenda a medir e melhorar LCP, INP e CLS para oferecer uma experiência melhor e ajudar no SEO do site, passo a passo.","core-web-vitals-how-user-experience-affects-seo","md",{},"\u002Fblog\u002Fweb-vitals-como-a-experiencia-do-usuario-vai-afetar-o-seo-do-seu-site","web-vitals-como-a-experiencia-do-usuario-vai-afetar-o-seo-do-seu-site","2024-10-25",{"title":5,"description":2005},{"loc":2009,"images":2014,"lastmod":2019},[2015,2016,2017,2018],{"loc":136},{"loc":766},{"loc":1219},{"loc":1728},"2026-10-06","blog\u002Fweb-vitals-como-a-experiencia-do-usuario-vai-afetar-o-seo-do-seu-site",1798,"gJvE8xoGP-jt0Iq9WJWATYXbcHs4GIEX4RmHMUFRsHY",[2024,2031,2040,2047,2055,2063,2069,2076,2084,2092,2099,2107,2113,2122,2129,2136,2142,2149,2156,2164,2171,2177],{"id":2025,"path":2026,"title":2027,"articleCover":2028,"categoriesIds":2029,"publishedAt":2030},"blog\u002Fblog\u002Fa-maneira-correta-de-utilizar-a-nomenclatura-bem.md","\u002Fblog\u002Fa-maneira-correta-de-utilizar-a-nomenclatura-bem","A maneira correta de utilizar a nomenclatura BEM","\u002Fimages\u002Fblog\u002Fa-maneira-correta-de-utilizar-a-nomenclatura-bem.webp",[341],"2024-05-05",{"id":2032,"path":2033,"title":2034,"articleCover":2035,"categoriesIds":2036,"publishedAt":2039},"blog\u002Fblog\u002Fcomo-adicionar-caracteres-especiais-no-i18n.md","\u002Fblog\u002Fcomo-adicionar-caracteres-especiais-no-i18n","Como Adicionar Caracteres Especiais em Traduções do i18N","\u002Fimages\u002Fblog\u002Fi18n\u002Fi18n-caracteres-especiais-no-nuxtjs-thumb.webp",[2037,2038],"nuxt","vuejs","2025-01-29",{"id":2041,"path":2042,"title":2043,"articleCover":2044,"categoriesIds":2045,"publishedAt":2046},"blog\u002Fblog\u002Fcomo-adicionar-o-google-tag-manager-no-seu-website-com-nuxt-3.md","\u002Fblog\u002Fcomo-adicionar-o-google-tag-manager-no-seu-website-com-nuxt-3","Como adicionar o Google Tag Manager no seu website com Nuxt 3","\u002Fimages\u002Fblog\u002Fcomo-adicionar-google-tag-manager-em-projeto-com-nuxt-3.webp",[2037,2038],"2024-08-15",{"id":2048,"path":2049,"title":2050,"articleCover":2051,"categoriesIds":2052,"publishedAt":2054},"blog\u002Fblog\u002Fcomo-configurar-chave-ssh-no-git-para-usar-no-github.md","\u002Fblog\u002Fcomo-configurar-chave-ssh-no-git-para-usar-no-github","Chave SSH no Git: Como Configurar chave SSH para usar no GitHub","\u002Fimages\u002Fblog\u002Fgit\u002Fcomo-criar-e-configurar-chave-ssh-no-github-thumb.webp",[2053],"git","2025-02-04",{"id":2056,"path":2057,"title":2058,"articleCover":2059,"categoriesIds":2060,"publishedAt":2062},"blog\u002Fblog\u002Fcomo-consumir-uma-api-no-javascript-com-a-fetch-api.md","\u002Fblog\u002Fcomo-consumir-uma-api-no-javascript-com-a-fetch-api","Como consumir uma API no JavaScript com a Fetch API","\u002Fimages\u002Fblog\u002Fcomo-consumir-uma-api-no-javascript-com-a-fetch-api.webp",[2061],"javascript","2024-09-05",{"id":2064,"path":78,"title":2065,"articleCover":2066,"categoriesIds":2067,"publishedAt":2068},"blog\u002Fblog\u002Fcomo-criar-dados-estruturados-com-nuxtjs.md","Como Adicionar Dados Estruturados no Nuxt.JS","\u002Fimages\u002Fblog\u002Fseo\u002Fstructured-data\u002Fstructured-data-thumb-1.webp",[2037,2038,2004],"2025-01-22",{"id":2070,"path":2071,"title":2072,"articleCover":2073,"categoriesIds":2074,"publishedAt":2075},"blog\u002Fblog\u002Fcomo-funciona-o-sistema-de-rotas-no-nuxt.md","\u002Fblog\u002Fcomo-funciona-o-sistema-de-rotas-no-nuxt","Rotas no Nuxt: dinâmicas, aninhadas e catch-all","\u002Fimages\u002Fblog\u002Fnuxt\u002Fsistema-de-rotas-no-nuxtjs-thumb.webp",[2037,2038],"2025-03-12",{"id":2077,"path":2078,"title":2079,"articleCover":2080,"categoriesIds":2081,"publishedAt":2083},"blog\u002Fblog\u002Fcomo-lidar-com-inveja-de-outros-programadores.md","\u002Fblog\u002Fcomo-lidar-com-inveja-de-outros-programadores","Como Lidar com Inveja de Outros Programadores","\u002Fimages\u002Fblog\u002Fcarreira\u002Finveja-de-programadores-com-quem-se-destaca.webp",[2082],"career","2025-08-29",{"id":2085,"path":2086,"title":2087,"articleCover":2088,"categoriesIds":2089,"publishedAt":2091},"blog\u002Fblog\u002Fcomo-recuperar-arquivos-perdidos-no-git-pelo-vscode.md","\u002Fblog\u002Fcomo-recuperar-arquivos-perdidos-no-git-pelo-vscode","Perdeu arquivos no Git sem commit? Veja como recuperar pelo VS Code","\u002Fimages\u002Fblog\u002Fcomo-recuperar-arquivos-perdido-no-git-pelo-vscode.webp",[2053,2090],"vscode","2024-05-15",{"id":2093,"path":2094,"title":2095,"articleCover":2096,"categoriesIds":2097,"publishedAt":2098},"blog\u002Fblog\u002Fcomo-usar-middlewares-no-nuxtjs.md","\u002Fblog\u002Fcomo-usar-middlewares-no-nuxtjs","Middlewares: O que são e como utilizar no Nuxt.JS","\u002Fimages\u002Fblog\u002Fnuxt\u002Fmiddlewares-no-front-end.webp",[2037,2038],"2025-01-14",{"id":2100,"path":2101,"title":2102,"articleCover":2103,"categoriesIds":2104,"publishedAt":2106},"blog\u002Fblog\u002Fcomo-validar-cartao-de-credito-com-javascript.md","\u002Fblog\u002Fcomo-validar-cartao-de-credito-com-javascript","Como validar um cartão de crédito com JavaScript (algoritmo de Luhn)","\u002Fimages\u002Fblog\u002Fjavascript\u002Fcomo-validar-cartao-de-credito-com-javascript.webp",[2061,2105],"tools","2026-09-17",{"id":2108,"path":2109,"title":2110,"articleCover":2111,"categoriesIds":2112,"publishedAt":2106},"blog\u002Fblog\u002Fcomo-validar-cpf-com-javascript.md","\u002Fblog\u002Fcomo-validar-cpf-com-javascript","Como validar um CPF com JavaScript","\u002Fimages\u002Fblog\u002Fjavascript\u002Fcomo-validar-cpf-com-javascript.webp",[2061,2105],{"id":2114,"path":2115,"title":2116,"articleCover":2117,"categoriesIds":2118,"publishedAt":2121},"blog\u002Fblog\u002Fcomponentes-do-figma-um-guia-para-te-ajudar-a-comecar.md","\u002Fblog\u002Fcomponentes-do-figma-um-guia-para-te-ajudar-a-comecar","Guia de Componentes no Figma para Iniciantes","\u002Fimages\u002Fblog\u002Ffigma\u002Fcomponentes-do-figma-um-guia-para-te-ajudar-a-comecar.png",[2119,2120],"figma","ux","2024-10-15",{"id":2123,"path":2124,"title":2125,"articleCover":2126,"categoriesIds":2127,"publishedAt":2128},"blog\u002Fblog\u002Fhub-de-ferramentas-gratuitas-para-desenvolvedores.md","\u002Fblog\u002Fhub-de-ferramentas-gratuitas-para-desenvolvedores","Criei um Hub de Ferramentas Web Gratuitas para Devs","\u002Fimages\u002Fblog\u002Fferramentas\u002Fhub-ferramentas-gratuitas-para-desenvolvedores.webp",[2105],"2026-01-06",{"id":2130,"path":2131,"title":2132,"articleCover":2133,"categoriesIds":2134,"publishedAt":2135},"blog\u002Fblog\u002Fo-que-sao-diretivas-no-vue-e-como-implementa-las.md","\u002Fblog\u002Fo-que-sao-diretivas-no-vue-e-como-implementa-las","Diretivas no Vue 3: nativas e personalizadas","\u002Fimages\u002Fblog\u002Fvue\u002Fo-que-sao-diretivas-no-vue-e-como-implementa-las.webp",[2038],"2025-03-21",{"id":2137,"path":67,"title":2138,"articleCover":2139,"categoriesIds":2140,"publishedAt":2141},"blog\u002Fblog\u002Fog-tags-o-que-sao-e-como-adicionar-no-seu-site.md","OG Tags: O que São e Como Adicioná-las ao Seu Site","\u002Fimages\u002Fblog\u002Fseo\u002Fo-que-e-como-utilizar-as-og-tags.webp",[2004],"2024-10-05",{"id":2143,"path":2144,"title":2145,"articleCover":2146,"categoriesIds":2147,"publishedAt":2148},"blog\u002Fblog\u002Fos-principais-erros-de-programadores-em-entrevistas-de-emprego.md","\u002Fblog\u002Fos-principais-erros-de-programadores-em-entrevistas-de-emprego","Os principais erros de programadores em entrevistas de emprego","\u002Fimages\u002Fblog\u002Fnao-cometa-esses-erros-na-sua-entrevista.webp",[2082],"2024-09-15",{"id":2150,"path":2151,"title":2152,"articleCover":2153,"categoriesIds":2154,"publishedAt":2155},"blog\u002Fblog\u002Fqual-a-diferenca-entre-a-composition-api-e-options-api-no-vuejs.md","\u002Fblog\u002Fqual-a-diferenca-entre-a-composition-api-e-options-api-no-vuejs","Qual a diferença entre a Composition API e Options API no VueJS","\u002Fimages\u002Fblog\u002Fvue\u002Fqual-a-diferenca-entre-a-composition-api-e-options-api-no-vuejs.webp",[2038],"2025-02-20",{"id":2157,"path":2158,"title":2159,"articleCover":2160,"categoriesIds":2161,"publishedAt":2163},"blog\u002Fblog\u002Fscroll-infinito-como-adicionar-ao-seu-site-e-suas-vantagens.md","\u002Fblog\u002Fscroll-infinito-como-adicionar-ao-seu-site-e-suas-vantagens","Scroll Infinito no React-Native: Guia Prático","\u002Fimages\u002Fblog\u002Freact-native\u002Fscroll-infinito-como-adicionar-ao-seu-site-e-suas-vantagens.webp",[2162],"react-native","2024-12-15",{"id":2165,"path":2166,"title":2167,"articleCover":2168,"categoriesIds":2169,"publishedAt":2170},"blog\u002Fblog\u002Fvercel-compra-nuxt-labs.md","\u002Fblog\u002Fvercel-compra-nuxt-labs","Vercel comprou a Nuxt Labs! E agora, o que muda para o Nuxt?","\u002Fimages\u002Fblog\u002Fnuxt\u002Fvercel-compra-nuxt-labs.webp",[2037],"2025-07-17",{"id":2172,"path":2173,"title":2174,"articleCover":2175,"categoriesIds":2176,"publishedAt":2019},"blog\u002Fblog\u002Fvue-vapor-mode-como-funciona-e-como-usar.md","\u002Fblog\u002Fvue-vapor-mode-como-funciona-e-como-usar","Vue Vapor Mode: o que é e o que muda no Vue 3.6","\u002Fimages\u002Fblog\u002Fvue\u002Fvue-vapor-mode-como-funciona-e-como-usar.webp",[2038,2037],{"id":4,"path":2009,"title":5,"articleCover":6,"categoriesIds":2178,"publishedAt":2011},[2004,1813],1791682334316]