Core Web Vitals: A Velocidade da Página Agora É Mais importante Para o SEO

A exper­iên­cia da pági­na e as métri­c­as incluí­das do Core Web Vital serão ofi­cial­mente uti­lizadas para posi­cionar pági­nas em maio de 2021.

Fonte: Google

A for­ma mais fácil de ver as métri­c­as do seu web­site é com o relatório Core Web Vitals no Google Search Con­sole. Com o relatório, pode ver facil­mente se as suas pági­nas estão cat­e­go­rizadas como “URLs pobres”, “URLs pre­cisam ser mel­ho­radas” ou “bons URLs”.

No relatório, pode encon­trar infor­mações mais detal­hadas sobre os prob­le­mas especí­fi­cos e uma lista das pági­nas afetadas.

Fac­to 1: As métri­c­as são divi­di­das entre desk­top e mobile, mas ape­nas sinais de mobile serão usa­dos ​​para posi­cionar as pági­nas. O Google está a mudar para a index­ação 100% mobile-first (dis­pos­i­tivos móveis em primeiro lugar) em março, então faz sen­ti­do usar os sinais de veloci­dade móv­el, uma vez que as pági­nas index­adas tam­bém serão baseadas nas ver­sões mobile.

Fac­to 2: Os dados vêm do Relatório de exper­iên­cia do uti­lizador do Chrome (CrUX), que reg­ista dados de uti­lizadores do Chrome que optaram por par­tic­i­par. As métri­c­as serão avali­adas no 75º per­centil de uti­lizadores, por­tan­to, se 70% dos seus uti­liz­daores estiverem na cat­e­go­ria “bom” e 5% na cat­e­go­ria “pre­cisa de mel­ho­rias”, a sua pági­na ain­da será avali­a­da como “pre­cisa de melhorias”.

Fac­to 3: As métri­c­as serão avali­adas para cada pági­na, mas se não hou­ver dados sufi­cientes, John Mueller afir­ma que sinais de seções de um web­site ou do web­site em ger­al podem ser usados.

Fac­to 4: Com a adição destas novas métri­c­as, o AMP está a ser removi­do como req­ui­si­to do recur­so Notí­cias Prin­ci­pais em dis­pos­i­tivos móveis. Como as novas histórias não terão dados sobre as métri­c­as de veloci­dade, é prováv­el que as métri­c­as de uma cat­e­go­ria maior de pági­nas ou mes­mo de todo o domínio pos­sam ser usadas para tal.

Fac­to 5: As Apli­cações de Pági­na Úni­ca não medem algu­mas das métri­c­as, FID e LCP, através de tran­sições de pági­na. Falare­mos sobre o que são num minuto. 

Fac­to 6: As métri­c­as podem mudar com o tem­po e os lim­i­ares tam­bém. O Google já mudou as métri­c­as uti­lizadas para medir a veloci­dade nas suas fer­ra­men­tas ao lon­go dos anos, bem como os seus lim­i­ares para o que é con­sid­er­a­do rápi­do ou não. É muito prováv­el que tudo mude nova­mente no futuro. Na ver­dade, tra­bal­há­mos para mel­ho­rar as métri­c­as ante­ri­ores no ano pas­sa­do, mas pre­cisamos tra­bal­har nova­mente para mel­ho­rar as novas métricas.

Ape­nas para nive­lar as expec­ta­ti­vas, lem­bre-se que exis­tem mais de 200 fatores de posi­ciona­men­to. Eu não esper­aria muitas mel­ho­rias em mel­ho­rar o Core Web Vitals. Não se sabe o quan­to impactarão as posições, mas é improváv­el que seja um sinal forte, espe­cial­mente con­sideran­do que muitos dos com­po­nentes de exper­iên­cia da pági­na já foram usa­dos ​​pelo Google para deter­mi­nar o posicionamento.

Vamos exam­i­nar cada um dos prin­ci­pais ele­men­tos vitais da web em mais detalhe.

Aqui estão os três atu­ais com­po­nentes dos Core Web Vitals:

• Largest Con­tent­ful Paint (LCP)
• Cumu­la­tive Lay­out Shift (CLS)
• First Input Delay (FID)

Largest Contentful Paint (LCP) — carregamento

LCP é o maior ele­men­to visív­el car­rega­do na janela de visualização.

Fonte: web.dev/vitals

O maior ele­men­to geral­mente será uma imagem em destaque ou talvez a tag <h1>, mas pode ser qual­quer um destes:

• um ele­men­to <img>
• um ele­men­to <image> den­tro de um ele­men­to <svg>
• a imagem den­tro de um ele­men­to <video>
• a imagem de fun­do car­rega­da com a função url ()
• blo­cos de texto

<svg> e <video> podem ser adi­ciona­dos no futuro.

Como ver o LCP

No Page­Speed Insights, o ele­men­to LCP será especi­fi­ca­do na seção Diag­nós­ti­cos. Para a pági­na tes­ta­da, o LCP é nos­sa imagem em destaque na pub­li­cação do blog.

No Dev­Tools do Chrome, siga estas etapas:

1. Desem­pen­ho> ver­i­fique “Cap­turas de tela”
2. Clique em ‘Ini­ciar cri­ação de per­fil e recar­regar a página’
3. LCP está no grá­fi­co do tempo
4. Clique no nó; este é o ele­men­to para LCP

Otimizar LCP

Com o nos­so ele­men­to LCP nes­ta e em muitas out­ras pági­nas a ser a imagem de destaque, provavel­mente podemos mel­ho­rar pré-car­regan­do essa imagem ou pos­sivel­mente alin­han­do a imagem inteira para faz­er o down­load da imagem com o códi­go HTML. Basi­ca­mente, quer­e­mos car­regar esta imagem mais rápi­do do que faze­mos atualmente.

Recursos

• Otimizar Largest Con­tent­ful Paint — web.dev
• Inves­ti­gar Largest Con­tent­ful Paint — Paul Irish (vídeo)
• Como Mel­ho­rar a Veloci­dade da Pági­na do Iní­cio ao Fim — Ahrefs

Cumulative Layout Shift (CLS) — estabilidade visual

O CLS mede como os ele­men­tos se movem ou quão estáv­el é o lay­out da pági­na. Este leva em con­sid­er­ação o taman­ho do con­teú­do e a dis­tân­cia que ele per­corre. Um grande prob­le­ma com esta métri­ca é que ela con­tin­ua a medir mes­mo após o car­rega­men­to ini­cial da pági­na. O Google recebe feed­back sobre esta métri­ca especí­fi­ca, então provavel­mente ver­e­mos algu­mas mudanças no futuro.

Fonte: web.dev/vitals

Pode ser irri­tante se ten­tar clicar em algo numa pági­na que muda e acabar a clicar em algo que não pre­tendia. Isto está sem­pre a acon­te­cer comi­go. Cli­co numa coisa e, de repente, estou a clicar em anún­cios e mes­mo noutro web­site. É frus­trante enquan­to utilizador.

As causas comuns de CLS incluem:

• Ima­gens sem dimensões
• Anún­cios, incor­po­rações e iframes sem dimensões
• Inje­tar con­teú­do com JavaScript
• Aplicar fontes ou esti­los no final do carregamento

Como ver CLS

No Page­Speed Insights, em Diag­nós­ti­cos, encon­trará uma lista de ele­men­tos que estão a mudar.

Usan­do Web­PageTest. No Film­strip View, uti­lize as seguintes opções:

• Destacar as Mudanças de Layout
• Taman­ho da Miniatu­ra: Enorme
• Inter­va­lo da Miniatu­ra: 0,1 seg

Observe como a nos­sa fonte muda de esti­lo entre 5,1s‑5,2s, mudan­do o lay­out con­forme a nos­sa fonte per­son­al­iza­da é aplicada.

Você pode quer­er ten­tar o Ger­ador de GIF para Mudança de Lay­out. 

A Smash­ing Mag­a­zine tam­bém par­til­hou uma téc­ni­ca inter­es­sante, na qual delin­ear­am tudo com uma lin­ha ver­mel­ha sól­i­da de 3px e gravaram um vídeo do car­rega­men­to da pági­na para iden­ti­ficar onde as mudanças de lay­out estavam a acontecer.

Otimizar CLS

Para a nos­sa pági­na de testes, o que podemos quer­er faz­er é pré-car­regar a nos­sa fonte per­son­al­iza­da, descar­tar a fonte per­son­al­iza­da com­ple­ta­mente (é duvi­doso que o façamos), ou usar uma fonte padrão para o car­rega­men­to ini­cial da pági­na e car­regar a nos­sa fonte somente nos car­rega­men­tos de pági­na sub­se­quentes. Aqui há com­pro­mis­sos em ter­mos de mar­ca, esti­lo, con­sistên­cia etc., e ter­e­mos que decidir qual o mel­hor cam­in­ho a seguir.

Recursos

• O Que Força o layout/refluxo — Paul Irish
• Otimizar Cumu­la­tive Lay­out Shift — web.dev
• Depu­ração de Lay­out Shifts — web.dev
• Perce­ber Cumu­la­tive Lay­out Shift — Annie Sul­li­van (vídeo)
• Como Evi­tar Mudanças de Lay­out Cau­sadas por Fontes Web — Simon Hearne

First Input Delay (FID) — interatividade

FID é o tem­po des­de quan­do um uti­lizador inter­age com a sua pági­na até que a pági­na pos­sa respon­der. Tam­bém pode pen­sar nis­to como a capaci­dade de respos­ta. Isso não inclui scroll ou zoom.

Inter­ações de exemplo:

• clicar num link ou botão
• inserir tex­to num cam­po em branco
• sele­cionar um menu suspenso
• clicar numa caixa de seleção.

Pode ser frus­trante ten­tar clicar em algu­ma coisa e nada acon­te­cer na página.

Fonte: web.dev/vitals

Nem todos os uti­lizadores irão inter­a­gir com uma pági­na, por­tan­to, eles podem não ter um val­or FID. É tam­bém por isso que as fer­ra­men­tas de teste de lab­o­ratório não terão o val­or porque não estão a inter­a­gir com a pági­na. Em vez dis­so use o tem­po total de blo­queio (TBT — Total Block­ing Time, em inglês).

Causas de FID

JavaScript a com­pe­tir pelo thread prin­ci­pal. Há ape­nas um thread prin­ci­pal e o JavaScript com­pete para exe­cu­tar tare­fas nele.

Fonte: https://web.dev/long-tasks-devtools

Enquan­to uma tare­fa está em exe­cução, uma pági­na não pode respon­der à entra­da do uti­lizador. Este é o atra­so que se sente. Quan­to mais lon­ga for a tare­fa, maior será o atra­so exper­i­men­ta­do pelo uti­lizador. As pausas entre as tare­fas são as opor­tu­nidades que a pági­na tem de alternar para a tare­fa de entra­da do uti­lizador e respon­der ao que ele dese­ja fazer.

Otimizar FID

I don’t see any con­cerns for our site for FID, but in gen­er­al, you want to break up long tasks and defer any JavaScript that isn’t need­ed until later.

Resources

• Otimizar First Input Delay — web.dev
• Como Mel­ho­rar a Veloci­dade da Pági­na do Iní­cio ao Fim — Ahrefs

A difer­ença entre os dados de lab­o­ratório e os de cam­po é que os dados de cam­po olham para uti­lizadores reais, condições de rede, dis­pos­i­tivos, armazena­men­to em cache, etc., e os dados de lab­o­ratório são tes­ta­dos con­sis­ten­te­mente com base nas mes­mas condições, com a esper­ança de que os resul­ta­dos do teste sejam repetíveis.

Dados de Campo

Dados de Laboratório

Gos­to do relatório no GSC porque  pode ver os dados de muitas pági­nas ao mes­mo tem­po, mas os dados estão um pouco atrasa­dos ​​e numa média con­tínua de 28 dias, por­tan­to, as alter­ações podem levar algum tem­po para apare­cer no relatório. No Chrome 88, o Google está a adi­cionar Core Web Vitals dire­to no Dev­Tools.

Tam­bém pode encon­trar os pesos de pon­tu­ação para o Light­house a qual­quer momen­to e ver as mudanças históricas.

Pensamentos finais

Dese­ja mel­ho­rar o Core Web Vitals para que os seus uti­lizadores ten­ham uma mel­hor exper­iên­cia. Res­ta saber que impacto estes terão para o SEO, mas como men­cionei no meu arti­go sobre veloci­dade da pági­na, estes devem ajudá-lo a reg­is­tar mais dados nas suas anális­es, o que “parece” uma melhoria.

Tra­bal­he com seus desen­volve­dores; eles são os espe­cial­is­tas. A veloci­dade da pági­na pode ser algo extrema­mente com­plexo. Se estiv­er por con­ta própria, pode pre­cis­ar de um plu­g­in ou um serviço para lidar com isso, como o WP Rock­et ou o NitroPack.