{"id":50364,"date":"2024-10-11T00:01:00","date_gmt":"2024-10-11T07:01:00","guid":{"rendered":"https:\/\/dhblog.dream.press\/blog\/?p=50364"},"modified":"2025-05-26T12:22:30","modified_gmt":"2025-05-26T19:22:30","slug":"melhorar-core-web-vitals","status":"publish","type":"post","link":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/melhorar-core-web-vitals\/","title":{"rendered":"Melhor Desempenho para Melhores Classifica\u00e7\u00f5es: 10 Dicas para Melhorar os Core Web Vitals"},"content":{"rendered":"

Voc\u00ea cria um belo site com conte\u00fado envolvente e come\u00e7a a enviar clientes para l\u00e1.<\/p>\n

Voc\u00ea est\u00e1 em uma situa\u00e7\u00e3o empolgante, especialmente se est\u00e1 apenas come\u00e7ando online.<\/p>\n

Mas depois de uma semana online, voc\u00ea notou que o carregamento do seu site est\u00e1 mais lento que um bicho-pregui\u00e7a em um domingo pregui\u00e7oso, e os visitantes est\u00e3o saindo mais r\u00e1pido que um canguru na cafe\u00edna.<\/p>\n

Parece familiar? Bem, voc\u00ea precisa come\u00e7ar a pensar sobre o que o Google chama de Core Web Vitals (CWV)<\/strong>.<\/p>\n

De acordo com os relat\u00f3rios mais recentes do Chrome, mais de 50,1%<\/a> dos sites j\u00e1 possuem boas pontua\u00e7\u00f5es nos Core Web Vitals. E esse n\u00famero continua a crescer m\u00eas a m\u00eas, o que significa que cada vez mais propriet\u00e1rios de sites astutos est\u00e3o descobrindo esse segredo para melhorar o desempenho.<\/p>\n

Aqui est\u00e1 o ponto crucial: se voc\u00ea ainda n\u00e3o faz parte desses 50%, voc\u00ea est\u00e1 arriscando suas classifica\u00e7\u00f5es no Google, frustrando seus visitantes e potencialmente deixando dinheiro na mesa.<\/p>\n

Vamos mudar isso, n\u00e3o \u00e9?<\/p>\n

O que s\u00e3o os Core Web Vitals, afinal?<\/h2>\n

Pense nos Core Web Vitals como o boletim do seu site.<\/p>\n

Ao direcionar tr\u00e1fego para o seu site<\/a>, o Google utiliza essas m\u00e9tricas para avaliar qu\u00e3o amig\u00e1vel seu site \u00e9 para os usu\u00e1rios. Basicamente, est\u00e1 medindo a velocidade, responsividade e estabilidade visual do seu site.<\/p>\n

\"Gr\u00e1fico<\/figure>\n

Existem tr\u00eas m\u00e9tricas de Core Web Vitals:<\/p>\n

  1. Maior Pintura de Conte\u00fado (LCP)<\/li>
  2. Deslocamento Cumulativo de Layout (CLS)<\/li>
  3. Intera\u00e7\u00e3o para a Pr\u00f3xima Pintura (INP)<\/li><\/ol>\n

    Estes podem n\u00e3o fazer sentido agora \u2014 Vamos tentar entender cada um deles separadamente.<\/p>\n

    Maior Pintura de Conte\u00fado (LCP)<\/h3>\n

    Imagine que voc\u00ea est\u00e1 em um restaurante, e o gar\u00e7om traz seu aperitivo quase instantaneamente.<\/p>\n

    \u00c9 isso que um bom LCP faz pelo seu site.<\/p>\n\n\n\n

    \n\t\n\t\t<\/svg>\n\t\t<\/span>\n\t\t<\/svg>\n\t<\/a>\n

    Largest Contentful Paint<\/h3>\n

    Largest Contentful Paint (LCP) \u00e9 uma m\u00e9trica que indica quanto tempo leva para o maior elemento de conte\u00fado de uma p\u00e1gina carregar. LCP \u00e9 uma das tr\u00eas m\u00e9tricas Google Core Web Vitals.<\/p>\n \n Leia Mais <\/a>\n\n<\/div>\n\n

    Mede a rapidez com que o maior elemento de conte\u00fado \u2014 a imagem principal, um v\u00eddeo grande ou um grande bloco de texto \u2014 carrega na sua p\u00e1gina.<\/p>\n

    De acordo com o mesmo relat\u00f3rio do Chrome Core Web Vitals, 64,8% dos sites<\/a> j\u00e1 alcan\u00e7aram suas pontua\u00e7\u00f5es de LCP. E mais sites novos est\u00e3o servindo seu conte\u00fado principal mais rapidamente a cada m\u00eas.<\/p>\n

    Se voc\u00ea deseja entrar para o hall da fama do LCP, precisa ter como objetivo um tempo de carregamento de 2,5 segundos ou menos para aumentar a taxa de convers\u00e3o do seu site<\/a>.<\/p>\n

    Qualquer coisa acima de quatro segundos, e voc\u00ea est\u00e1 perdendo clientes.<\/p>\n

    Deslocamento Cumulativo de Layout (CLS)<\/h3>\n

    Pense em momentos em que voc\u00ea pode ter clicado em um bot\u00e3o em um site m\u00f3vel \u2014 e outro elemento carregado em seu lugar, fazendo o bot\u00e3o desaparecer \u2014 e voc\u00ea clicou nesse elemento em vez disso.<\/p>\n

    N\u00e3o \u00e9 divertido. A pontua\u00e7\u00e3o CLS visa eliminar isso.<\/p>\n

    Ele mede o quanto os elementos da sua p\u00e1gina se movimentam enquanto a p\u00e1gina \u00e9 carregada. Uma pontua\u00e7\u00e3o baixa de CLS significa que o layout permanece bastante est\u00e1vel durante todo o processo de carregamento.<\/p>\n

    Voc\u00ea pode considerar seu site otimizado para mobile<\/a> se o layout n\u00e3o mudar durante o carregamento.<\/p>\n

    A partir de setembro de 2024, 78,2% dos sites<\/a> alcan\u00e7aram boas pontua\u00e7\u00f5es de CLS, com um aumento consistente nos n\u00fameros m\u00eas a m\u00eas. Isso mostra que mais desenvolvedores est\u00e3o priorizando uma experi\u00eancia de usu\u00e1rio suave e sem interrup\u00e7\u00f5es.<\/p>\n

    Portanto, se voc\u00ea deseja uma experi\u00eancia de usu\u00e1rio est\u00e1vel, busque uma pontua\u00e7\u00e3o de CLS de 0,1 ou menos. Qualquer valor acima de 0,25 far\u00e1 com que seus usu\u00e1rios sintam que a p\u00e1gina inteira est\u00e1 se movendo.<\/p>\n

    Intera\u00e7\u00e3o at\u00e9 a Pr\u00f3xima Pintura (INP)<\/h3>\n

    O INP foi adicionado em 12 de mar\u00e7o de 2024 ao framework de Core Web Vitals, substituindo a antiga m\u00e9trica de First Input Delay (FID). Enquanto o FID mede apenas a primeira intera\u00e7\u00e3o do usu\u00e1rio, o INP analisa todas as intera\u00e7\u00f5es durante uma visita \u00e0 p\u00e1gina.<\/p>\n

    Os dados do relat\u00f3rio do Chrome mostram que 85% dos sites<\/a> j\u00e1 est\u00e3o obtendo boas pontua\u00e7\u00f5es de INP. \u00c9 prov\u00e1vel que, se voc\u00ea estiver otimizando seu site bem para as duas pontua\u00e7\u00f5es anteriores, o INP se ajustar\u00e1 tamb\u00e9m.<\/p>\n

    Para manter seus usu\u00e1rios felizes e engajados, o objetivo \u00e9 ter um INP de 200 milissegundos ou menos. Se voc\u00ea est\u00e1 entre 200 e 500 milissegundos, voc\u00ea tem um trabalho a fazer.<\/p>\n

    Qualquer coisa acima de 500 milissegundos, e voc\u00ea estar\u00e1 oferecendo aos seus visitantes a experi\u00eancia de conex\u00e3o discada.<\/em><\/p>\n

    Como Medir os Principais Indicadores da Web<\/h2>\n

    Antes de come\u00e7ar a trabalhar na melhoria dos seus scores de Core Web Vitals, \u00e9 prudente ter uma ideia de onde o seu site se encontra atualmente. Dessa forma, voc\u00ea poder\u00e1 medir seu progresso. Avaliar regularmente seus scores pode ser uma parte valiosa da sua manuten\u00e7\u00e3o do site<\/a>.<\/p>\n

    Vamos analisar algumas maneiras diferentes de medir o desempenho do seu site.<\/p>\n

    Insights de Velocidade da P\u00e1gina<\/h3>\n

    Existem algumas ferramentas online que voc\u00ea pode usar para medir os Core Web Vitals, incluindo Pingdom e GTmetrix. No entanto, recomendamos o uso de Google PageSpeed Insights<\/a>.<\/p>\n

    Para come\u00e7ar, insira a URL do seu site e, em seguida, clique no bot\u00e3o Analisar<\/strong>.<\/p>\n

    \"Captura<\/figure>\n

    Quando terminar de analisar o seu site, ele fornecer\u00e1 um resumo de alguns dos dados principais e os dados de Core Web Vitals do site. Como voc\u00ea pode ver na imagem acima, o site padr\u00e3o do Google possui:<\/p>\n