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