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

Patrick Stox
Patrick Stox é o Consultor de Produto, SEO técnico e Embaixador da Marca na Ahrefs. Ele é o organizador da Raleigh SEO Meetup, da Raleigh SEO Conference, da Beer & SEO Meetup, da Findability Conference e moderador no /r/TechSEO.
    Core Web Vitals (prin­ci­pais ele­men­tos vitais da web, em por­tuguês) são as métri­c­as de veloci­dade que fazem parte dos sinais de exper­iên­cia da pági­na do Google uti­liza­dos ​​para medir a exper­iên­cia do uti­lizador. As métri­c­as medem a car­ga visu­al com o Largest Con­tent­ful Paint (LCP, ou em por­tuguês, maior pin­tu­ra de con­teú­do), esta­bil­i­dade visu­al com Cumu­la­tive Lay­out Shift (CLS, ou em por­tuguês, mudança de lay­out cumu­la­ti­va ) e inter­a­tivi­dade com First Input Delay (FID, ou em por­tuguês, primeiro atra­so de entrada).

    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 Contentful Paint (LCP) — carregamento

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

    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

    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.

    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

    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.

    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.

    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

    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

    LCPFIDCLS
    Relatório da Exper­iên­cia do Uti­lizador do Chrome
    Page­Speed Insights
    Google Search Con­sole (Relatório Core Web Vitals)
    Bib­liote­ca Web-vitals JavaScript 
    web.dev
    Exten­são Web Vitals

    Dados de Laboratório

    LCPFIDCLS
    Dev­Tools do Chrome✘ (usa TBT)
    Light­house✘ (usa TBT)
    Web­PageTest✘ (usa TBT)
    Page­Speed Insights✘ (usa TBT)
    web.dev✘ (usa TBT)

    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.