Mas se tudo isso n\u00e3o proporcionar uma boa experi\u00eancia para quem visita o site, a venda n\u00e3o acontece. Ali\u00e1s, algumas coisas podem at\u00e9 afastar a pessoa antes mesmo de saber direito o que existe na loja virtual.<\/p>\n\n\n\n
Isso porque mais de 50% das pessoas que utilizam dispositivos m\u00f3veis<\/strong><\/a> costumam abandonar sites que n\u00e3o carregam em menos de tr\u00eas segundos. Se adicionar um tempo entre 1 e 3 segundos no carregamento do site, a taxa de rejei\u00e7\u00e3o pode aumentar em 32%<\/strong><\/a>.<\/p>\n\n\n\n Para as pessoas, a intera\u00e7\u00e3o com um site precisa atender e superar as expectativas. Do ponto de vista de quem visita uma p\u00e1gina web, o site precisa ter um bom layout, respostas f\u00e1ceis de encontrar e fotos com carregamento imediato. Todo o carregamento do site, por sinal, precisa ser impercept\u00edvel a quem visita.<\/p>\n\n\n\n Do lado dos buscadores, os sites tamb\u00e9m precisam atender diversos requisitos \u2013 que s\u00e3o aperfei\u00e7oados dia ap\u00f3s dia. <\/p>\n\n\n\n Os algoritmos do Google avaliam uma s\u00e9rie de par\u00e2metros nas p\u00e1ginas para realizar o ranqueamento org\u00e2nico, mas o lado bom \u00e9 que periodicamente a empresa publica quais s\u00e3o esses crit\u00e9rios.<\/p>\n\n\n\n \u00c9 a\u00ed que entram as Core Web Vitals<\/strong>.<\/p>\n\n\n\n Os par\u00e2metros de Core Web Vitals<\/strong> re\u00fanem crit\u00e9rios sobre como \u00e9 a experi\u00eancia da pessoa no site, como anda a seguran\u00e7a das p\u00e1ginas, se ela est\u00e1 indexada direitinho e por a\u00ed vai. <\/p>\n\n\n\n E as m\u00e9tricas de Core Web Vitals<\/strong> avaliam o site tanto nos dispositivos m\u00f3veis quanto em laptops e desktops. Quer dizer, responsividade conta sim.<\/p>\n\n\n\n Parece um pouco complexo? Estamos aqui para ajudar a simplificar. <\/p>\n\n\n\n A Locaweb preparou esse artigo explicando todos os detalhes em uma linguagem poss\u00edvel e com muitos links para voc\u00ea explorar esse mundo do Core Web Vitals<\/strong> com calma. Vamos l\u00e1.<\/p>\n\n\n\n Para ajudar no entendimento do conceito, vamos pensar no significado do pr\u00f3prio termo. Em uma tradu\u00e7\u00e3o livre, Core Web Vitals<\/strong> seria algo como Sinais Vitais do Site.<\/p>\n\n\n\n Se isolarmos as palavras \u201csinais vitais\u201d e pensarmos em termos humanos, entendemos que eles comp\u00f5em os indicadores das principais fun\u00e7\u00f5es do corpo. Bons sinais vitais indicam o bom funcionamento do organismo.<\/p>\n\n\n\n As Core Web Vitals<\/strong> re\u00fanem m\u00e9tricas e indicadores que tamb\u00e9m dizem se o site est\u00e1 pleno e saud\u00e1vel, pronto para aparecer em boas coloca\u00e7\u00f5es no ranking do Google. Caso contr\u00e1rio, seu site precisa ir para a UTI… Mas sem p\u00e2nico!<\/p>\n\n\n\n Lendo esse artigo, voc\u00ea vai descobrir qual \u00e9 o caso do seu site ou e-commerce e vai conseguir reverter a situa\u00e7\u00e3o. <\/p>\n\n\n\n As m\u00e9tricas fundamentais das Core Web Vitals<\/strong> avaliam pontos t\u00e9cnicos que facilitam a vida de quem visita o site ou e-commerce. Quanto melhor for o projeto de uso, melhor a experi\u00eancia. <\/p>\n\n\n\n Se a experi\u00eancia \u00e9 boa, as pessoas v\u00e3o navegar mais tempo. Logo, o Google vai entendendo como sua p\u00e1gina \u00e9 relevante para quem a visita.<\/p>\n\n\n\n O legal de tudo isso \u00e9 que sua base \u00e9 l\u00f3gica. Basta nos colocar no lugar de quem usa (e usamos). O que queremos? Que o site carregue r\u00e1pido, que as coisas estejam em lugares \u00f3bvios, que as imagens sejam est\u00e1veis e apare\u00e7am logo, que o site seja seguro para inserirmos dados sens\u00edveis. <\/p>\n\n\n\n Tudo isso faz parte das Core Web Vitals<\/strong> – talvez com nomes um pouco mais t\u00e9cnicos, mas a Locaweb est\u00e1 aqui para facilitar sua vida e vai explicar tim-tim por tim-tim. Voc\u00ea tamb\u00e9m est\u00e1 no centro do nosso neg\u00f3cio. <\/p>\n\n\n\n \u00c9 muito importante entender que as Core Web Vitals<\/strong> e o SEO<\/strong> \u2013 do ingl\u00eas <\/strong>Search Engine Optimization<\/em><\/strong> ou otimiza\u00e7\u00e3o de Mecanismos de Busca<\/strong> – est\u00e3o estreitamente relacionadas. Elas fazem parte das estrat\u00e9gias de SEO<\/a> , sendo mais um pilar que estrutura a relev\u00e2ncia dos sites e as equipes especialistas em comunica\u00e7\u00e3o na web trabalham com aten\u00e7\u00e3o nisso.<\/p>\n\n\n\n O pr\u00f3prio Google \u00e9 muito transparente sobre a relev\u00e2ncia da otimiza\u00e7\u00e3o do site para os seus mecanismos de busca. Ele recomenda a utiliza\u00e7\u00e3o das m\u00e9tricas do Core Web Vitals<\/strong> como parte do SEO<\/strong>, fazendo o site ser bem ranqueado e proporcionar uma \u00f3tima experi\u00eancia de uso. <\/p>\n\n\n Esse aspecto, aliado a outros pontos t\u00e9cnicos da p\u00e1gina, se alinha aos sistemas de classifica\u00e7\u00e3o dos algoritmos.<\/p>\n\n\n\n Como acabamos de ver, as Core Web Vitals<\/strong> trazem indicadores importantes para melhorar o ranqueamento da p\u00e1gina, exigindo monitoramento constante das equipes de SEO<\/strong>.<\/p>\n\n\n\n Isso porque os elementos de uma p\u00e1gina influenciam uns aos outros e o desempenho como de um modo geral pode ser afetado se um deles n\u00e3o for bem.<\/p>\n\n\n\n Dentro das m\u00e9tricas de Core Web Vitals<\/strong>, o site ou e-commerce precisa atingir pelo menos 75% de visualiza\u00e7\u00f5es para ser avaliado com Bom. Os \u00edndices s\u00e3o atualizados periodicamente, sendo as maiores preocupa\u00e7\u00f5es: tempo de carregamento, interatividade de quem usa e estabilidade visual. <\/p>\n\n\n\n Vamos, agora, aprofundar nas m\u00e9tricas:<\/p>\n\n\n\n A Largest Contentful Paint – LPC, ou Impress\u00e3o do Conte\u00fado Completo, \u00e9 uma m\u00e9trica que avalia a velocidade em que o conte\u00fado da p\u00e1gina \u00e9 totalmente carregado.<\/p>\n\n\n\n Ele \u00e9 uma evolu\u00e7\u00e3o de outros dois indicadores: o First Contentful Paint \u2013 FCP e o First Meaningful Paint \u2013 FMP, que foram descontinuados.<\/p>\n\n\n\n Dentro dos crit\u00e9rios do Largest Contentful Paint \u2013 LPC est\u00e1 a avalia\u00e7\u00e3o da velocidade de renderiza\u00e7\u00e3o da p\u00e1gina. Aqui, se usa como par\u00e2metro principal o tempo de carregamento dos conte\u00fados protagonistas, como imagem, v\u00eddeo ou texto. <\/p>\n\n\n\n Fatores de influ\u00eancia no tempo de carregamento podem estar relacionados ao servidor ou \u00e0s linguagens de programa\u00e7\u00e3o utilizadas no site ou e-commerce.<\/p>\n\n\n\n O tempo de Largest Contentful Paint \u2013 LCP recomendado pelo Google fica abaixo de 2,5 segundos. Esse \u00e9 um intervalo de tempo considerado aceit\u00e1vel tanto para uma boa experi\u00eancia de uso quanto para ser alcan\u00e7ado por meio da programa\u00e7\u00e3o do site.<\/p>\n\n\n\n Quando o tempo fica acima disso, h\u00e1 grandes chances do site ou e-commerce ser abandonado por quem utiliza, o que prejudica suas vendas e o ranqueamento da p\u00e1gina. <\/p>\n\n\n\n Tal e qual uma matrioska (aquela boneca russa), aqui temos uma m\u00e9trica dentro da m\u00e9trica. A Interaction to Next Paint<\/em> \u2013 INP, ou Impress\u00e3o da Pr\u00f3xima Intera\u00e7\u00e3o, analisa o tempo geral de resposta \u00e0s intera\u00e7\u00f5es de quem usa o site ou e-commerce durante todo o seu per\u00edodo de perman\u00eancia. E a\u00ed tudo entra na conta, inclusive cliques e digita\u00e7\u00f5es. As respostas precisam continuar no mesmo bom ritmo de tempo.<\/p>\n\n\n\n A INP passou a ser considerada nas Core Web VItals em mar\u00e7o de 2024, substituindo o First Input Delay (FID) como uma das m\u00e9tricas-chave de an\u00e1lise de desempenho e ranqueamento de sites.<\/p>\n\n\n\n O FID, ou Atraso de Primeira Entrada em portugu\u00eas, mede a velocidade da p\u00e1gina entre a primeira intera\u00e7\u00e3o da pessoa at\u00e9 a resposta recebida. Esse atraso pode acontecer por alguns motivos, como a alta lat\u00eancia de um servidor ou a necessidade de carregar um c\u00f3digo mais pesado. <\/p>\n\n\n\n \u00c9 recomendado que a resposta \u00e0 primeira intera\u00e7\u00e3o aconte\u00e7a em at\u00e9 100 milissegundos. Acima disso j\u00e1 \u00e9 bandeira amarela \u2013 tem que ajustar. Agora, se chegar aos 300 milissegundos, pare tudo e resolva isso: a experi\u00eancia \u00e9 classificada como ruim.<\/p>\n\n\n\n Vale lembrar que quanto mais baixa for a lat\u00eancia<\/a> do servidor, melhor ser\u00e1 a resposta do site ou e-commerce. A Locaweb<\/a> garante uma baixa lat\u00eancia por ter o seu Data Center no Brasil.<\/p>\n\n\n\n J\u00e1 aconteceu de voc\u00ea tentar clicar em um bot\u00e3o do site, ou em outro elemento, e ele mudar de lugar do nada? De duas, uma: ou acabou clicando no v\u00e1cuo ou clicou em outra coisa, abrindo um link que n\u00e3o precisava. Se nunca aconteceu com voc\u00ea, saiba que isso existe e o Google est\u00e1 de olho tamb\u00e9m.<\/p>\n\n\n\n A Cumulative Layout Shift \u2013 CLS, ou Mudan\u00e7a de Layout Cumulativa, trata de acontecimentos desse tipo dentro do site. Essa m\u00e9trica analisa com qual frequ\u00eancia isso ocorre e o quanto impacta negativamente a experi\u00eancia de uso.<\/p>\n\n\n\n Isso pode acontecer quanto os elementos do site s\u00e3o carregados fora de sincronia, por problemas nas configura\u00e7\u00f5es din\u00e2micas e quando imagens se redimensionam automaticamente \u2013 em um an\u00fancio, por exemplo.<\/p>\n\n\n\n Dentro das Core Web Vitals<\/strong>, o CLS \u00e9 fundamental. O Google definiu uma equa\u00e7\u00e3o para calcular a pontua\u00e7\u00e3o desse item. Vamos l\u00e1:<\/p>\n\n\n\n Fra\u00e7\u00e3o do Impacto x Fra\u00e7\u00e3o de Dist\u00e2ncia = pontua\u00e7\u00e3o<\/strong><\/p>\n\n\n\n A pontua\u00e7\u00e3o recomendada pelo Google \u00e9 qualquer n\u00famero abaixo de 0,1. Se a p\u00e1gina ficou entre 0,1 e 0,25 \u00e9 necess\u00e1rio implementar mudan\u00e7as. Se o n\u00famero ficar acima de 0,25 a experi\u00eancia de uso \u00e9 considerada ruim. Chame um desenvolvedor web urgente. <\/p>\n\n\n\n Essa \u00e9 a resposta que a gente vai responder agora. Se voc\u00ea leu esse artigo at\u00e9 aqui, j\u00e1 viu o que seu site ou e-commerce tem de defici\u00eancia diante das m\u00e9tricas abordadas nas Core Web Vitals<\/strong>.<\/p>\n\n\n\n Nossa recomenda\u00e7\u00e3o \u00e9 entrar em contato com um profissional de desenvolvimento, pois muitos ajustes passam pelo c\u00f3digo de programa\u00e7\u00e3o. Seria imprudente mexer nisso sem conhecimento t\u00e9cnico.<\/p>\n\n\n\n Para apoiar esse importante trabalho de adequa\u00e7\u00e3o e ter um SEO ajustado aos padr\u00f5es de qualidade e boas pr\u00e1ticas da internet, vamos aprofundar algumas orienta\u00e7\u00f5es para aumentar a ader\u00eancia \u00e0s Core Web Vitals<\/strong>. <\/p>\n\n\n\n Ao conceber o layout do site, utilizar uma font-family diferente pode trazer mais personalidade \u00e0 identidade do site, mas tamb\u00e9m pode se tornar um problema se alguns cuidados n\u00e3o forem tomados.<\/p>\n\n\n\n Lembra das mudan\u00e7as repentinas apontadas como um problema na Cumulative Layout Shift \u2013 CLS? A font-family pode trazer esse tipo de instabilidade ao site.<\/p>\n\n\n\n Isso acontece porque dentro das boas pr\u00e1ticas de programa\u00e7\u00e3o HTML existe uma hierarquia de font-family padr\u00e3o que o navegador pode adotar caso n\u00e3o encontre a font-family indicada como principal. <\/p>\n\n\n\n Se certos cuidados n\u00e3o forem tomados, o navegador pode demorar a encontrar a font-family principal e ir direto para a font-family padr\u00e3o.<\/p>\n\n\n\n Mas, geralmente, ele encontra a principal e automaticamente muda todo o texto para ela.<\/p>\n\n\n\n Se voc\u00ea estiver lendo a p\u00e1gina, o texto vai correr de lugar, as imagens v\u00e3o para outras posi\u00e7\u00f5es e alguns elementos gr\u00e1ficos poder\u00e3o ajustar seus tamanhos.<\/p>\n\n\n\n Resolva essa quest\u00e3o utilizando uma API de carregamento de font-family. Ele vai deixar a font-family carregada com anteced\u00eancia e esse problema n\u00e3o vai acontecer mais. <\/p>\n\n\n\n Medidas pr\u00e1ticas podem otimizar o carregamento de elementos importantes (considerados cr\u00edticos) das p\u00e1ginas e assim melhorar o Largest Contentful Paint \u2013 LCP.<\/p>\n\n\n\n Numa p\u00e1gina, os elementos cr\u00edticos s\u00e3o imagens, textos, v\u00eddeos e outros tipos de elementos que podem influenciar a experi\u00eancia de uso. Sugerimos que as imagens (fotos ou v\u00eddeos) sejam comprimidas ou convertidas em formatos mais amig\u00e1veis \u00e0 navega\u00e7\u00e3o, para que fiquem mais leves.<\/p>\n\n\n\n Compactar textos, implementar um servi\u00e7o adapt\u00e1vel com base na conex\u00e3o de rede e ativar o cache com um service worker tamb\u00e9m s\u00e3o alternativas interessantes.<\/p>\n\n\n\n De qualquer modo, esse \u00e9 um trabalho feito sob medida. Portanto, a orienta\u00e7\u00e3o de profissionais de desenvolvimento e SEO \u00e9 fundamental. <\/p>\n\n\n\n Lembra que falamos anteriormente que a baixa lat\u00eancia melhora a \u201cconversa\u201d entre o servidor<\/a> e o navegador?<\/p>\n\n\n\n Quanto maior o tempo de processamento dos elementos no layout, pior a ader\u00eancia ao padr\u00e3o de qualidade analisado dentro das Core Web Vitals<\/strong>.<\/p>\n\n\n\n Para trazer mais agilidade \u00e0 resposta \u00e9 preciso adotar algumas boas pr\u00e1ticas, como indexar as p\u00e1ginas HTML em cache que aparecem antes, configurar a p\u00e1gina HTML para armazenar uma parte ou todo o conte\u00fado em cache, apontar as visitas para o Content Delivery Network \u2013 CDN mais pr\u00f3ximo e verificar se o servidor contratado \u00e9 o mais adequado para seu tipo de servi\u00e7o. <\/p>\n\n\n\n Tecnicamente falando, o navegador n\u00e3o \u00e9 capaz de responder \u00e0s intera\u00e7\u00f5es do visitante durante a execu\u00e7\u00e3o do c\u00f3digo JavaScript. Por essa raz\u00e3o, a m\u00e9trica de First Input Delay \u2013 FID pode gerar um resultado aqu\u00e9m do desejado.<\/p>\n\n\n\n Solucione esse inconveniente dividindo as tarefas executadas pelo JavaScript. Tarefas longas podem ser transformadas em tarefas ass\u00edncronas menores, pois isso reduz o atraso de entrada da p\u00e1gina. Com isso \u00e9 poss\u00edvel ganhar 50 milissegundos ou at\u00e9 mais. <\/p>\n\n\n\n Os navegadores da internet precisam \u201cler\u201d o c\u00f3digo HTML do site para trazer a p\u00e1gina na tela. Eles leem todos os elementos descritos no c\u00f3digo antes de exibir o site.<\/p>\n\n\n\n Ou seja: quanto mais scripts (como JavaScript) e folhas de estilo (o CSS) ele precisar dar conta, mais demorado ser\u00e1 para entender tudo e mostrar a p\u00e1gina. Isso prejudica a m\u00e9trica de Largest Contentful Paint \u2013 LCP.<\/p>\n\n\n\n Para evitar esse problema, o c\u00f3digo precisa ser mais limpo e elegante, sem caracteres e linhas desnecess\u00e1rias, com os arquivos e imagens de tamanho otimizado.<\/p>\n\n\n\n \u00c9 necess\u00e1rio tamb\u00e9m melhorar a hierarquia de carregamento, para que os scripts e folhas de estilo com criticidade menor sejam trazidos por \u00faltimo.<\/p>\n\n\n\n Vale tamb\u00e9m adotar um Web Worker. Uma das grandes sacadas dessa ferramenta \u00e9 que ela executa o JavaScript em segundo plano. Isso diminui, ainda mais, um poss\u00edvel atraso nas respostas \u00e0s intera\u00e7\u00f5es de quem visita a p\u00e1gina.<\/p>\n\n\n\n Todas as tarefas que n\u00e3o t\u00eam a ver com a interface s\u00e3o movidas para uma linha de execu\u00e7\u00e3o independente (Thread), embora ela continue relacionada com o processo principal. <\/p>\n\n\n\n Enquanto isso, o navegador executa as tarefas comandadas pela intera\u00e7\u00e3o da pessoa, evitando problemas com as m\u00e9tricas de First Input Delay \u2013 FID ou Interaction to Next Paint<\/em> \u2013 INP. <\/p>\n\n\n\n A falta de estabelecer atributos no tamanho das imagens (est\u00e1ticas ou v\u00eddeos) \u00e9 uma das maiores raz\u00f5es pelos problemas de desempenho no Cumulative Layout Shift \u2013 CLS. <\/p>\n\n\n\n Isso ocorre porque, sem crit\u00e9rios definidos, as imagens podem se ajustar sozinhas no espa\u00e7o dispon\u00edvel, causando uma grande movimenta\u00e7\u00e3o no layout e problemas na experi\u00eancia de uso.<\/p>\n\n\n\n Quando s\u00e3o definidas a width (largura) e a height (altura), os navegadores preveem o espa\u00e7o para aquele elemento e carregam o conte\u00fado mais rapidamente.<\/p>\n\n\n\n Para melhorar a distribui\u00e7\u00e3o de an\u00fancios e conte\u00fados din\u00e2micos no layout \u00e9 necess\u00e1rio estabelecer um espa\u00e7o fixo para esse tipo de conte\u00fado. Por isso, defina as dimens\u00f5es com base no maior espa\u00e7o poss\u00edvel dentro da delimita\u00e7\u00e3o programada.<\/p>\n\n\n\n Se esse cuidado n\u00e3o for tomado, esse tipo de conte\u00fado faz seu pr\u00f3prio dimensionamento para se ajustar no local onde vai aparecer, como no caso das imagens. <\/p>\n\n\n\n As m\u00e9tricas citadas at\u00e9 aqui s\u00e3o importantes no contexto das Core Web Vitals, mas atualmente, recomenda-se focar em tr\u00eas delas: LCP, CLS e INP<\/a>. As demais m\u00e9tricas citadas s\u00e3o mensuradas pelo Google, mas j\u00e1 n\u00e3o fazem parte das Core Web Vitals. Se voc\u00ea pretende se aprofundar mais nessas otimiza\u00e7\u00f5es propostas, o Google tem conte\u00fados completos, com dicas para cada uma das m\u00e9tricas: LCP<\/a>, CLS<\/a> e INP<\/a>.<\/p>\n\n\n Com simples ajustes j\u00e1 \u00e9 poss\u00edvel notar um aumento na pontua\u00e7\u00e3o das p\u00e1ginas e incremento no desempenho do site. Para garantir o monitoramento adequado, o Google disponibiliza algumas outras ferramentas para medir o desempenho adequado diante dos algoritmos.<\/p>\n\n\n\n Vamos a elas: <\/p>\n\n\n\n Na PageSpeed Insights \u2013 PSI, <\/strong>os dados apresentados est\u00e3o ligados \u00e0 an\u00e1lise de desempenho em dispositivos m\u00f3veis e computadores pelo per\u00edodo determinado de 28 dias.<\/p>\n\n\n\n Dentro das an\u00e1lises, pode-se verificar o tempo para o carregamento do site por meio de um teste de velocidade. <\/p>\n\n\n\n O PSI classifica a qualidade das experi\u00eancias do usu\u00e1rio em tr\u00eas grupos: Boa, Precisa Melhorar ou Ruim. <\/p>\n\n\n\n Para testar a URL da sua p\u00e1gina, acesse o PageSpeed Insights<\/a>, digite a URL do site e pressione Avan\u00e7ar.<\/p>\n\n\n\n Esse \u00e9 um instrumento que veio para apoiar o trabalho de desenvolvedores web. Concebido em c\u00f3digo aberto, o Lighthouse<\/a> permite acompanhar de perto o desempenho do site ou e-commerce. <\/p>\n\n\n\n No centro da an\u00e1lise feita pela ferramenta, est\u00e3o cinco requisitos pontuados de 0 a 100: Desempenho (Performance), Acessibilidade (Accessibility), Melhores Pr\u00e1ticas (Best Practices), SEO e Aplica\u00e7\u00e3o Web Progressiva (Progressive Web App).<\/p>\n\n\n\n A partir dos \u00edndices apontados na avalia\u00e7\u00e3o do Lighthouse<\/a>, quem programa pode ajustar o c\u00f3digo para alcan\u00e7ar at\u00e9 melhores pontua\u00e7\u00f5es e tornar o site ou e-commerce mais \u201cvis\u00edvel\u201d para os buscadores.<\/p>\n\n\n\n A ferramenta pode ser utilizada de duas maneiras: instalando a extens\u00e3o no Google Chrome ou pelo atalho \u201cInspecionar\u201d no mesmo navegador. <\/p>\n\n\n\n Diferentemente do PageSpeed Insights e Lighthouse, em que as an\u00e1lises s\u00e3o feitas pelas URLs indicadas, o Search Console<\/a> avalia todas as p\u00e1ginas de uma s\u00f3 vez.<\/p>\n\n\n\n Os relat\u00f3rios emitidos pela ferramenta permitem visualizar como andam o tr\u00e1fego e o desempenho das pesquisas do site, para ajustar poss\u00edveis problemas.<\/p>\n\n\n\n Al\u00e9m disso, o Search Console traz o n\u00famero de impress\u00f5es do site, a quantidade de cliques e como o site ou e-commerce est\u00e1 posicionado atualmente no ranking de pesquisa do Google.<\/p>\n\n\n\n Tamb\u00e9m \u00e9 poss\u00edvel cadastrar o recebimento de alertas por e-mail. Assim, sempre que algum problema for diagnosticado, voc\u00ea receber\u00e1 um aviso.<\/p>\n\n\n\n Essa \u00e9 uma extens\u00e3o para o Google Chrome que traz informa\u00e7\u00f5es sobre como uma p\u00e1gina espec\u00edfica est\u00e1 sendo acessada. O objetivo da extens\u00e3o Web Vitals<\/a> \u00e9 levar os feedbacks de desempenho a quem desenvolve, para que as altera\u00e7\u00f5es sejam feitas no c\u00f3digo de programa\u00e7\u00e3o. Essa m\u00e9trica pode e deve ser acompanhada em tempo real.<\/p>\n\n\n\n Essa \u00e9 uma ferramenta para quem trabalha com desenvolvimento de c\u00f3digos de programa\u00e7\u00e3o. A biblioteca JavaScript<\/a> das Core Web Vitals \u00e9 open source e pode ser utilizada com qualquer provedor de an\u00e1lise que d\u00ea suporte a m\u00e9tricas personalizadas.<\/p>\n\n\n\n A abrevia\u00e7\u00e3o CrUX vem de Chrome User Experience Report, que forma o conjunto de dados oficial do programa Web Vitals.<\/p>\n\n\n\n As informa\u00e7\u00f5es contidas nele s\u00e3o disponibilizadas publicamente, coletadas a partir de uma experi\u00eancia leg\u00edtima de navega\u00e7\u00e3o das pessoas em destinos conhecidos na Web.<\/p>\n\n\n\n O CrUX \u00e9 a base para uma grande quantidade de ferramentas que informam as Core Web Vitals de uma p\u00e1gina, mas com limita\u00e7\u00f5es. Pelas m\u00e9tricas \u00e9 poss\u00edvel identificar quando um site tem um problema, mas nem sempre os dados s\u00e3o precisos o suficiente para se identificar qual \u00e9 exatamente o problema.<\/p>\n\n\n\n O painel do CrUX<\/a> \u00e9 do Looker Studio (antigo Google Data Studio) e permite consultar e renderizar dados do CrUX de modo interativo, al\u00e9m de permitir exportar relat\u00f3rios em PDF. Ele mostra todas as m\u00e9tricas do CrUX em tend\u00eancias mensais e dados dispon\u00edveis desde 2017. <\/p>\n\n\n\n A API CrUX<\/a> fornece acesso aos dados do CrUX por p\u00e1gina ou origem e pode ser filtrada por diversificados crit\u00e9rios, como formato e tipo de conex\u00e3o.<\/p>\n\n\n\n A API disponibiliza as M\u00e9tricas da Web<\/a> por origem e os dados s\u00e3o atualizados diariamente. Os valores fornecidos para a forma\u00e7\u00e3o das m\u00e9tricas s\u00e3o calculados com base nos 28 dias anteriores, de maneira cont\u00ednua.<\/p>\n\n\n\n Segundo o Google, a API CrUX traz os resultados em uma velocidade maior do que a API PageSpeed Insights<\/a>, mas sem incluir os dados do Lighthouse<\/a>. <\/p>\n\n\n\nCore Web Vitals: o que \u00e9<\/strong> e como funciona?<\/h2>\n\n\n\n
Pessoas no centro da experi\u00eancia<\/h3>\n\n\n\n
Como as Core Web Vitals impactam no SEO<\/h2>\n\n\n\n
![\"homem](\"https:\/\/www.locaweb.com.br\/blog\/wp-content\/uploads\/2024\/04\/ranking-seo.jpg\")
<\/figure>\n<\/div>\n\n\nQuais s\u00e3o as m\u00e9tricas de avalia\u00e7\u00e3o das Core Web Vitals<\/h2>\n\n\n\n
Largest Contentful Paint \u2013 LCP<\/h3>\n\n\n\n
Interaction to Next Paint \u2013 INP<\/h3>\n\n\n\n
Cumulative Layout Shift \u2013 CLS<\/h3>\n\n\n\n
\n
Como melhorar os \u00edndices das Core Web Vitals?<\/h2>\n\n\n\n
Aten\u00e7\u00e3o ao uso de fontes<\/h3>\n\n\n\n
Trabalhe o carregamento de elementos cr\u00edticos<\/h3>\n\n\n\n
Otimize a resposta do servidor<\/h3>\n\n\n\n
Divida as tarefas mais densas<\/h3>\n\n\n\n
Melhore a leitura do JavaScript e CSS<\/h3>\n\n\n\n
Preste aten\u00e7\u00e3o aos elementos din\u00e2micos<\/h3>\n\n\n\n
Como medir as Core Web Vitals?<\/h2>\n\n\n\n
![\"pessoas](\"https:\/\/www.locaweb.com.br\/blog\/wp-content\/uploads\/2024\/04\/medir-core-web-vitals.jpg\")
<\/figure>\n<\/div>\n\n\nPageSpeed Insights – PSI<\/h3>\n\n\n\n
Lighthouse<\/h3>\n\n\n\n
Google Search Console<\/h3>\n\n\n\n
Web Vitals<\/h3>\n\n\n\n
Biblioteca JavaScript<\/h3>\n\n\n\n
Painel CrUX<\/h3>\n\n\n\n
API Chrome UX Report<\/h3>\n\n\n\n
WebPageTest<\/h3>\n\n\n\n