Porqu\u00ea o Core Web Vitals?<\/h2>\n
O conte\u00fado continua sendo crucial. Mas se voc\u00ea comparar dois sites com texto e popularidade semelhantes, aquele que oferece a melhor experi\u00eancia na web ter\u00e1 maior prioridade nos resultados de pesquisa do Google.<\/p>\n
Al\u00e9m de uma melhor classifica\u00e7\u00e3o da p\u00e1gina, os sites de alto desempenho s\u00e3o eleg\u00edveis para inclus\u00e3o no carrossel de busca m\u00f3vel. Isto era anteriormente reservado para as Accelerated Mobile Pages (AMP)<\/a>, que exigiam que voc\u00ea portasse o conte\u00fado para um site separado hospedado no Google. O AMP tem atra\u00eddo cr\u00edticas, especialmente porque as p\u00e1ginas nem sempre s\u00e3o mais r\u00e1pidas que um site WordPress ou um site est\u00e1tico bem otimizado. No entanto, isso n\u00e3o \u00e9 mais um requisito<\/a>.<\/p>\n N\u00e3o importa o que voc\u00ea escolher, quanto mais r\u00e1pido e mais \u00e1gil for o seu site, melhores ser\u00e3o as chances de ele se classificar mais alto nos resultados de pesquisa do Google.<\/p>\n Quando voc\u00ea considera que a p\u00e1gina m\u00e9dia \u00e9 de cerca de 2 MB, faz mais de 60 pedidos HTTP e leva 16 segundos para renderizar totalmente em um dispositivo m\u00f3vel, voc\u00ea ver\u00e1 que h\u00e1 alguma margem para melhorar o seu site. N\u00f3s lhe mostraremos as melhores maneiras de conseguir essas melhorias.<\/p>\n Existem quatro fatores chave de classifica\u00e7\u00e3o para examinar antes de come\u00e7ar a avaliar o desempenho:<\/p>\n Uma vez satisfeitos estes requisitos, o seu site ser\u00e1 avaliado quanto ao seu desempenho.<\/p>\n\n Fazer seu site carregar rapidamente<\/a>, renderizar rapidamente e ser responsivo mais cedo \u00e9 vital. Mas ser\u00e1 que os usu\u00e1rios se sentem r\u00e1pidos?<\/p>\n Aplicativos de medi\u00e7\u00e3o de desempenho<\/a> como o browser DevTools reportam medi\u00e7\u00f5es t\u00e9cnicas como, por exemplo:<\/p>\n Estes podem ser usados para determinar gargalos espec\u00edficos, tais como carga do servidor, cache CMS<\/a>, cache do navegador, velocidades de download e efici\u00eancia do JavaScript<\/a>. Mas eles n\u00e3o podem determinar se uma p\u00e1gina fornece uma boa ou m\u00e1 experi\u00eancia para o usu\u00e1rio. Por exemplo:<\/p>\n O Core Web Vitals \u00e9 a tentativa do Google para resolver estes dilemas.<\/p>\n O Core Web Vitals do Google (CWV) s\u00e3o tr\u00eas m\u00e9tricas de desempenho que avaliam a experi\u00eancia do usu\u00e1rio no mundo real:<\/p>\n Esta nova atualiza\u00e7\u00e3o do algoritmo do Google<\/a> come\u00e7ou a ser implementada globalmente no final de agosto de 2021. As m\u00e9tricas do Core Web Vitals afetam principalmente os resultados da pesquisa m\u00f3vel, mas os equivalentes de desktop seguir\u00e3o se o experimento for bem sucedido.<\/p>\n As pontua\u00e7\u00f5es LCP, FID e CLS de uma p\u00e1gina s\u00e3o baseadas nos \u00faltimos 28 dias de m\u00e9tricas de usu\u00e1rios reais coletadas anonimamente atrav\u00e9s do navegador Chrome. Essas medidas podem variar devido ao dispositivo do usu\u00e1rio, conex\u00e3o e outras atividades simult\u00e2neas, portanto o percentil 75 \u00e9 calculado em vez de uma m\u00e9dia.<\/p>\n Em outras palavras, as m\u00e9tricas de todos os usu\u00e1rios s\u00e3o ordenadas do melhor para o pior, e o n\u00famero no ponto tr\u00eas quartos \u00e9 tomado. Tr\u00eas em cada quatro visitantes do site ir\u00e3o, portanto, experimentar esse n\u00edvel de desempenho ou melhor.<\/p>\n Qualquer p\u00e1gina que atinja uma boa pontua\u00e7\u00e3o (verde) para os tr\u00eas indicadores do Core Web Vitals receber\u00e1 uma classifica\u00e7\u00e3o superior nos resultados de pesquisa e ser\u00e1 inclu\u00edda no carrossel “Top Stories” no aplicativo Google News.<\/p>\n Nas se\u00e7\u00f5es seguintes, descreveremos o algoritmo usado para calcular uma m\u00e9trica, as ferramentas que voc\u00ea pode usar para identificar a pontua\u00e7\u00e3o de uma p\u00e1gina, as causas t\u00edpicas de pontua\u00e7\u00e3o baixa e os passos que voc\u00ea pode tomar para resolver problemas de desempenho.<\/p>\n Largest Contentful Paint mede o desempenho do carregamento<\/a>. Em ess\u00eancia, com que rapidez o conte\u00fado utiliz\u00e1vel \u00e9 apresentado na p\u00e1gina?<\/p>\n LCP analisa quanto tempo leva para que a maior imagem ou bloco de texto fique vis\u00edvel dentro do viewport do navegador (acima da dobra). Na maioria dos casos, o item mais proeminente ser\u00e1 um hero image, banner, cabe\u00e7alho ou um grande bloco de texto.<\/p>\n Qualquer um dos seguintes elementos \u00e9 eleg\u00edvel para a an\u00e1lise da Largest Contentful Paint:<\/p>\n S\u00e3o consideradas boas (verdes) as p\u00e1ginas onde o Largest Contentful Paint \u00e9 completada nos primeiros 2,5 segundos do carremento de p\u00e1gina. P\u00e1ginas que excedam 4,0 segundos s\u00e3o consideradas pobres (vermelho):<\/p>\n LCP \u00e9 a m\u00e9trica Core Web Vital mais f\u00e1cil de compreender, mas pode n\u00e3o ser \u00f3bvio qual elemento ser\u00e1 escolhido para an\u00e1lise.<\/p>\n O painel do Farol <\/strong>DevTools \u00e9 fornecido em navegadores baseados em cromo, cromo, Edge, Brave<\/a>, Opera, e Vivaldi. Abra o DevTools no menu do navegador – geralmente em Mais ferramentas <\/strong>> Ferramentas do desenvolvedor <\/strong>ou os atalhos do teclado Ctrl | Cmd + Shift + i <\/strong>ou F12 <\/strong>– depois navegue at\u00e9 a aba do Farol <\/strong>(edi\u00e7\u00f5es mais antigas podem cham\u00e1-lo de Auditoria<\/strong>).<\/p>\n Gerar um relat\u00f3rio de desempenho m\u00f3vel e, em seguida, examinar a se\u00e7\u00e3o de desempenho <\/strong>resultante. O Largest Contentful Paint \u00e9 mostrado com uma se\u00e7\u00e3o expans\u00edvel, que identifica o elemento escolhido:<\/p>\n Voc\u00ea pode gerar informa\u00e7\u00f5es id\u00eanticas na PageSpeed Insights<\/a> on-line e ferramentas web.dev Measure<\/a> se voc\u00ea n\u00e3o tiver acesso a um navegador baseado no Chromium:<\/p>\n O painel DevTools Performance <\/strong>tamb\u00e9m exibe um indicador LCP. Para come\u00e7ar, clique no \u00edcone circular Record<\/strong>, recarregue a sua p\u00e1gina e depois clique no bot\u00e3o Stop <\/strong>para ver o relat\u00f3rio. Clique no \u00edcone LCP na se\u00e7\u00e3o Timings <\/strong>para identificar o elemento e ver um resumo das estat\u00edsticas.<\/p>\n A extens\u00e3o Web Vitals<\/a> est\u00e1 dispon\u00edvel para o Google Chrome, mas pode ser instalada na maioria dos navegadores baseados no Chromium. Ele calcula o Core Web Vitals metrics para cada site que voc\u00ea visita, e seu \u00edcone fica verde, laranja ou vermelho, dependendo do resultado. Voc\u00ea tamb\u00e9m pode clicar no \u00edcone de extens\u00e3o para ver mais detalhes do LCP:<\/p>\n O Console de Pesquisa do Google<\/a> oferece agora uma se\u00e7\u00e3o Core Web Vitals<\/a> se o seu site for adicionado como uma propriedade<\/a>. O relat\u00f3rio ilustra como as m\u00e9tricas do CWV mudaram ao longo do tempo. Note que ele n\u00e3o identifica m\u00e9tricas LCP espec\u00edficas, e apenas sites com tr\u00e1fego razoavelmente alto est\u00e3o dispon\u00edveis:<\/p>\n O Relat\u00f3rio de experi\u00eancia do utilizador Chrome<\/a> permite-lhe consultar estat\u00edsticas de utiliza\u00e7\u00e3o reais, incluindo LCP em diferentes pa\u00edses, liga\u00e7\u00f5es e dispositivos, para um URL espec\u00edfico. \u00c9 um projecto p\u00fablico no Google BigQuery, pelo que deve inscrever-se numa conta da Plataforma Google Cloud<\/a> e fornecer detalhes de factura\u00e7\u00e3o. Mais uma vez, o relat\u00f3rio s\u00f3 ser\u00e1 \u00fatil quando um URL tiver um n\u00edvel de tr\u00e1fego razoavelmente alto.<\/p>\n Finalmente, a biblioteca Javascript<\/a> de 1 kB \u00e9 um pequeno script de 1 kB que pode calcular LCP e outras m\u00e9tricas do Core Web Vital para usu\u00e1rios reais no seu site de produ\u00e7\u00e3o (ao vivo). Como ela pode ser baixada de um CDN, voc\u00ea pode adicionar o seguinte script ao seu HTML O script acima envia o objeto para o console, embora seja mais pr\u00e1tico enviar os dados para um servidor ou para o Google Analytics<\/a> para an\u00e1lise posterior.<\/p>\n P\u00e1ginas de LCP fracas s\u00e3o normalmente causadas por p\u00e1ginas de carregamento lento que impedem que o maior bloco apare\u00e7a rapidamente:<\/p>\n Uma auditoria completa pode identificar problemas de carregamento, mas geralmente \u00e9 uma quest\u00e3o de reduzir a quantidade de dados enviados para o navegador<\/a>. As seguintes dicas ajudar\u00e3o a obter uma pontua\u00e7\u00e3o LCP mais saud\u00e1vel:<\/p>\n O First Input Delay mede a capacidade de resposta da sua p\u00e1gina. Em ess\u00eancia, com que rapidez ele responde \u00e0s a\u00e7\u00f5es do usu\u00e1rio, como clicar, tocar e rolar?<\/p>\n A m\u00e9trica do FID \u00e9 calculada como o tempo entre a intera\u00e7\u00e3o do usu\u00e1rio e o processamento do seu pedido pelo navegador. Ela n\u00e3o mede o tempo para executar a fun\u00e7\u00e3o do manipulador, que normalmente processaria a entrada e atualizaria o DOM.<\/p>\n P\u00e1ginas com um tempo FID de 100 milissegundos ou menos s\u00e3o consideradas boas (verdes). P\u00e1ginas com tempo FID superior a 300 milissegundos s\u00e3o consideradas pobres (vermelho):<\/p>\n First Input Delay \u00e9 quase imposs\u00edvel de simular porque s\u00f3 pode ser medido quando a p\u00e1gina \u00e9 servida a um usu\u00e1rio real que interage com a p\u00e1gina. O resultado depende, portanto, da velocidade e capacidade de processamento de cada dispositivo.<\/p>\n O FID n\u00e3o \u00e9 calculado no painel do DevTools Lighthouse ou PageSpeed Insights<\/a>. No entanto, eles podem determinar o Total Blocking Time (TBT). Esta \u00e9 uma aproxima\u00e7\u00e3o razo\u00e1vel para o Primeiro Atraso de Entrada. Ele mede a diferen\u00e7a de tempo entre eles:<\/p>\n A extens\u00e3o Web Vitals<\/a> para o Google Chrome tamb\u00e9m pode mostrar uma m\u00e9trica FID depois de interagir com a p\u00e1gina, rolando ou clicando. Clique no \u00edcone da extens\u00e3o para revelar mais informa\u00e7\u00f5es:<\/p>\n Tal como o LCP<\/a>, o Relat\u00f3rio de Experi\u00eancia do Utilizador do Chrome<\/a> permite-lhe consultar estat\u00edsticas FID reais registadas em diferentes pa\u00edses, liga\u00e7\u00f5es e dispositivos para um URL espec\u00edfico.<\/p>\n A biblioteca de Javascript em formato web-vitals<\/a> tamb\u00e9m pode calcular m\u00e9tricas FID para usu\u00e1rios reais no seu site ao vivo. Voc\u00ea pode adicionar o seguinte script ao seu HTML A m\u00e1 pontua\u00e7\u00e3o de FID e TBT \u00e9 geralmente causada pelo c\u00f3digo do lado do cliente que atrapalha o processador, como por exemplo:<\/p>\n Por padr\u00e3o, os navegadores s\u00e3o executados em uma \u00fanica linha, que s\u00f3 pode processar uma tarefa de cada vez. Se uma fun\u00e7\u00e3o JavaScript leva um segundo para ser executada, todos os outros processos de renderiza\u00e7\u00e3o s\u00e3o bloqueados durante esse segundo. A p\u00e1gina n\u00e3o pode reagir \u00e0 entrada do usu\u00e1rio, atualizar o DOM, mostrar anima\u00e7\u00f5es, ou assim por diante. Mesmo as anima\u00e7\u00f5es GIF podem ser bloqueadas em navegadores mais antigos.<\/p>\n Uma auditoria JavaScript do lado do cliente pode identificar problemas, mas geralmente \u00e9 uma quest\u00e3o de remover c\u00f3digo redundante e garantir que as tarefas sejam executadas rapidamente.<\/p>\n As seguintes dicas v\u00e3o ajudar a obter uma pontua\u00e7\u00e3o mais saud\u00e1vel no FID:<\/p>\n O CLS mede a estabilidade visual da p\u00e1gina. Em ess\u00eancia, o conte\u00fado da p\u00e1gina move-se ou salta inesperadamente, especialmente durante a carga inicial?<\/p>\n O CLS calcula uma pontua\u00e7\u00e3o quando os elementos se movem sem aviso ou intera\u00e7\u00e3o do usu\u00e1rio. Voc\u00ea provavelmente j\u00e1 experimentou isso ao ler um artigo em um dispositivo m\u00f3vel – o texto salta repentinamente da tela, e voc\u00ea perde o seu lugar. Os piores exemplos podem fazer com que voc\u00ea clique em um link incorreto.<\/p>\n Os problemas do CLS s\u00e3o mais proeminentes quando uma imagem grande ou um an\u00fancio \u00e9 carregado acima da posi\u00e7\u00e3o atual de rolagem e um espa\u00e7o de altura zero cresce instantaneamente em v\u00e1rias centenas de pixels.<\/p>\n As pontua\u00e7\u00f5es acumuladas do Layout Shift s\u00e3o calculadas multiplicando as seguintes m\u00e9tricas juntas:<\/p>\n O Google fez altera\u00e7\u00f5es na m\u00e9trica CLS para acomodar as seguintes situa\u00e7\u00f5es:<\/p>\n P\u00e1ginas com uma pontua\u00e7\u00e3o CLS de 0,1 ou menos s\u00e3o consideradas boas (verdes). P\u00e1ginas que excedam 0,25 s\u00e3o consideradas pobres (vermelho):<\/p>\n As m\u00e9tricas CLS s\u00e3o calculadas no painel DevTools Lighthouse<\/strong>, PageSpeed Insights<\/a>, e ferramentas web.dev Measure<\/a>:<\/p>\n A extens\u00e3o WebVitals<\/a> para o Google Chrome tamb\u00e9m mostra a m\u00e9trica CLS:<\/p>\n Tal como o LCP<\/a> e o FID<\/a>, o Relat\u00f3rio de Experi\u00eancia do Utilizador do Chrome<\/a> permite-lhe consultar estat\u00edsticas CLS reais registradas em diferentes pa\u00edses, liga\u00e7\u00f5es e dispositivos para um URL espec\u00edfico.<\/p>\n A biblioteca de Javascript em formato web-vitals<\/a> tamb\u00e9m pode calcular m\u00e9tricas CLS para usu\u00e1rios reais em seu site ao vivo, assim como faz com LCP e FID. O script a seguir pode ser adicionado ao seu HTML As m\u00e1s pontua\u00e7\u00f5es do CLS s\u00e3o normalmente causadas por p\u00e1ginas de ativos com carregamento lento e elementos DOM din\u00e2micos ou n\u00e3o dimensionados:<\/p>\n Uma auditoria do lado do cliente pode identificar problemas, mas geralmente \u00e9 uma quest\u00e3o de garantir que o espa\u00e7o \u00e9 reservado para o conte\u00fado antes de fazer o download. As dicas de otimiza\u00e7\u00e3o do servidor sugeridas para o Largest Contentful Paint<\/a> ter\u00e3o alguns benef\u00edcios, mas \u00e9 poss\u00edvel melhorar ainda mais:<\/p>\nFatores chave do ranking do Google<\/h2>\n
\n
Como o Google avalia o desempenho da web?<\/h2>\n
\n
\n
O que s\u00e3o Core Web Vitals?<\/h2>\n
\n
Largest Contentful Paint (LCP)<\/h2>\n
\n
< img><\/code> elemento)<\/li>\n<imagem><\/code> embutida em uma < svg><\/code> )<\/li>\n<video><\/code>)<\/li>\nbackground-image url()<\/code>)<\/li>\n![\"Largest](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/08\/lcp-rank.png\"){kind=icon}
<\/a>As maiores ferramentas do Largest Contentful Paint<\/h3>\n
![\"Relat\u00f3rio](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/08\/devtools-lcp-lighthouse.png\")
<\/a>![\"PageSpeed](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/08\/pagespeed-lcp.png\")
<\/a>![\"Indicador](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/08\/devtools-lcp-performance.png\")
<\/a>![\"Extens\u00e3o](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/08\/addon-lcp.png\")
<\/a>![\"Consola](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/08\/console-lcp.png\")
<\/a>< head><\/code>:<\/p>\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<title>My page<\/title>\n<script type=\"module\">\nimport { getLCP } from 'https:\/\/unpkg.com\/web-vitals?module';\ngetLCP(console.log);\n<\/script>\n<!-- rest of page -->\n<\/code><\/pre>\ngetLCP()<\/code> \u00e9 uma fun\u00e7\u00e3o ass\u00edncrona que passa por um callback disparada quando o valor LCP foi calculado (embora possa nunca disparar se a p\u00e1gina for carregada em uma guia de fundo). A fun\u00e7\u00e3o callback \u00e9 passada por um objeto que cont\u00e9m:<\/p>\n\n
name<\/strong><\/code>: <\/strong>o nome da m\u00e9trica (“LCP”, neste caso)<\/li>\nvalue<\/strong><\/code>: <\/strong>o valor calculado<\/li>\nid<\/strong><\/code>: <\/strong>uma identifica\u00e7\u00e3o \u00fanica que representa esta m\u00e9trica para a p\u00e1gina atual<\/li>\ndelta<\/strong><\/code>: <\/strong>o delta entre o valor atual e o \u00faltimo valor reportado<\/li>\nentries<\/strong><\/code>: <\/strong>um conjunto de entradas utilizadas no c\u00e1lculo do valor<\/li>\n<\/ul>\nCausas comuns das piores pontua\u00e7\u00f5es do Largest Contentful Paint<\/h3>\n
\n
Como melhorar as pontua\u00e7\u00f5es do Largest Contentful Paint<\/h3>\n
\n
loading=\"lazy\"<\/code>. Adicione atributos de largura e altura para garantir que o espa\u00e7o apropriado seja reservado na p\u00e1gina antes que a imagem termine de carregar.<\/li>\n<link><\/code> bloco no topo da p\u00e1gina, depois carregue as folhas de estilo adicionais de forma ass\u00edncrona.<\/li>\nFirst Input Delay<\/strong> (FID)<\/h2>\n
![\"Atraso](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/08\/fid-rank.png\"){kind=icon}
<\/a>Ferramentas de an\u00e1lise do First Input Delay<\/h3>\n
\n
![\"PageSpeed](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/08\/pagespeed-fid.png\")
<\/a>![\"FID](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/08\/addon-fid.png\")
<\/a><head><\/code> para gerar m\u00e9tricas FID em uma fun\u00e7\u00e3o callback:<\/p>\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<title>My page<\/title>\n<script type=\"module\">\nimport { getFID } from 'https:\/\/unpkg.com\/web-vitals?module';\ngetFID(console.log);\n<\/script>\n<!-- rest of page -->\n<\/code><\/pre>\nCausas comuns de atrasos First Input Delay<\/h3>\n
\n
Como melhorar as pontua\u00e7\u00f5es do First Input Delay<\/h3>\n
\n
Cumulative Layout Shift<\/strong> (CLS)<\/h2>\n
\n
\n
![\"Deslocamento](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/08\/cls-rank.png\"){kind=icon}
<\/a>Ferramentas de an\u00e1lise do Cumulative Layout Shift<\/h3>\n
![\"PageSpeed](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/08\/pagespeed-cls.png\")
<\/a>![\"Web](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/08\/addon-cls.png\")
<\/a><head><\/code> para gerar m\u00e9tricas CLS para uma fun\u00e7\u00e3o callback :<\/p>\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<title>My page<\/title>\n<script type=\"module\">\nimport { getCLS } from 'https:\/\/unpkg.com\/web-vitals?module';\ngetCLS(console.log);\n<\/script>\n<!-- rest of page -->\n<\/code><\/pre>\nCausas comuns das m\u00e1s pontua\u00e7\u00f5es do Cumulative Layout Shift<\/h3>\n
\n
Como melhorar as pontua\u00e7\u00f5es do Cumulative Layout Shift<\/h3>\n
\n
<img><\/code> e