Google Page Experience

Google Page Experience: UX como fator de ranqueamento

Estar entre os primeiros resultados orgânicos do Google é o objetivo de qualquer empresa que tem um site. Para conquistar as primeiras posições, existem vários fatores que interferem no ranqueamento. Entre eles, o Google Page Experience.

Aqui no Blog da Mobister você encontra um conteúdo com os primeiros passos para aparecer na primeira página do Google. Mas neste artigo vamos focar nesse novo fator de ranqueamento anunciado pela empresa, o Google Page Experience.

Em 2020, o Google anunciou essa nova atualização, com previsão para começar a valer a partir de Junho de 2021. Então a partir dessa data o UX será um novo fator de ranqueamento.

Para se ter uma ideia de como essa atualização pode ser importante e o impacto que ela pode ter nos SERPs, é que apenas 12-13% das páginas atendem a todas as métricas do Core Web Vitals com base em um estudo feito por Screming Frog.

O próprio estudo realizado em 200.000 urls nos destaca que:

  • Apenas 12% dos dispositivos móveis passam no Core Web Vitals.
  • Apenas 13% dos dispositivos de desktop passam pelo Core Web Vitals.
  • O First Input Delay (FID) é insignificante, sendo considerado correto 99% para desktop e 89% para nolie
  • Largest Contentful Paint (LCP) é aprovada apenas em 43% para mobile e 44% para desktops.
  • Cumulative Layout Shift (CLS) é aprovado apenas em 46% para mobile e 44% para desktops.
  • Os urls na posição 1 analisados ​​tinham 10% mais probabilidade de superar o Core Web Vitals em comparação com os urls na posição 9.

Nos próximos tópicos vamos falar sobre todas essas siglas do Core Web Vitals. 

O que é Google Page Experience?


O Google Page Experience é uma nova atualização do Google, onde implementa aspectos relacionados à velocidade de carregamento da web e usabilidade nos fatores de ranqueamento, ou seja, no posicionamento SEO.

Esses sinais de experiência do usuário já estavam dentro da evolução que o Google realizou no posicionamento de sites, mas agora eles vão agregar novos pontos que serão as métricas do Core Web Vitals (Métricas essenciais da web):

  • Cumulative Layout Shift (CLS ou estabilidade visual da página);
  • First Input Delay (FID ou Interatividade);
  • Largest Contentful Paint (LCP ou desempenho de carregamento )

Essas métricas levam em consideração alguns aspectos, como a dificuldade que alguém pode ter para localizar uma determinada informação dentro de uma página web, ou até mesmo como um aspecto indesejado de layout pode atrapalhar na conversão.

A união das métricas Core Web Vitals com as já existentes orientações do Google para uma boa avaliação de UX resultaram no update Google Page Experience.


Os principais itens a serem levados em conta a partir de agora são:


  • Tempo de carregamento para preenchimento do maior conteúdo da página, imagem ou texto (abaixo de 2,5 segundos);
  • Tempo de resposta para ações do usuário, ou seja, a responsividade da página (abaixo de 100 milisegundos)
  • Evitar itens que “saltem” ou troquem de posição na página;
  • Uso de protocolo HTTPS;
  • Ausência de anúncios intrusivos.

Entenda melhor o Core Web Vitals – métricas essenciais da web


Como falamos no tópico anterior, existem três novas métricas principais: LCP (Largest Contentful Paint), FID (First Input Delay) e CLS (Cumulative Layout Shift).

Dessas três métricas, a mais inovadora é a Cumulative Layout Shift, ou estabilidade visual da página. 


O que é Cumulative Layout Shift (CLS)?


Em poucas palavras a CLS mede a estabilidade visual do layout. Para proporcionar uma boa experiência para o usuário, essa métrica deve estar sempre abaixo de 0,1.

Google Page Experience

A CLS tem o objetivo de “fiscalizar” a estabilidade de um layout enquanto sua página é carregada. Por exemplo: caso o layout da página se mova de forma errada, botões importantes flutuam ou informações mudam de lugar sem necessidade, a experiência de navegação é profundamente afetada de jeito negativo.

O próprio Google divulgou um GIF que nos ajuda a compreender melhor esse aspectos 

Google Page Experience

 

Os sites que possuem muitos anúncios precisam ficar atentos a essa métrica. Para que a CLS não fique prejudicada por scripts de terceiros, é fundamental ter um espaço específico para estes anúncios.

Essa prática impede que o navegador fique procurando pelo melhor espaço para renderizá-los enquanto a página carrega, gerando mudanças de posicionamento inconvenientes.

Outra dica interessante é sempre definir medidas para largura e altura das mídias. Isso ajuda o navegador a saber antes do carregamento qual espaço elas utilizarão dentro de uma página.

Já em relação aos textos, utilizar o atributo font-display (swap no CSS) é o segredo. Este recurso define que o texto carregue previamente com uma fonte padrão, mesmo que o estilo de fonte determinado para ele ainda não esteja pronto para visualização.

Desta forma, o usuário leva menos tempo para ter contato com o conteúdo, otimizando não somente o CLS, como seu LCP, métrica que veremos a seguir.

O que é Large Contentful Paint (LCP)?


A LCP mensura o tempo que o maior conteúdo visível em uma página leva para ser carregado totalmente. Para que a página ofereça uma boa experiência aos visitantes, ela deve começar a carregar em até 2.5 segundos.

Google page experience

 

Para o Page Experience o tempo de carregamento de uma página é um dos pontos mais importantes. Confira a seguir algumas dicas para ajudar a melhorar a LCP.

  • Verifique se a hospedagem do seu site não está prejudicando o tempo de carregamento. Por exemplo, quando as hospedagens são compartilhadas podem impactar de forma negativa;
  • Utilize a técnica Lazy Loading para o carregamento de imagens: ela só permite que uma mídia seja carregada quando o usuário estiver rolando a página para alcançá-la. Então, por exemplo, se um usuário não chegar ao rodapé do site, as imagens que estariam não impactarão seu page speed;
  • Utilize cache e pré-carregamento para as partes estáticas das suas páginas;
  • Utilize Content Delivery Network (CDN), como a Cloudflare, cujo sistema de cache muitas vezes chega a ser melhor até mesmo que o de plugins do WordPress.

Trabalhar novos formatos de imagens com objetivo de diminuir o tempo de carregamento das páginas web, como o WebP, também pode ajudar a conquistar bons resultados de LCP.


O que é First Input Delay (FID)?


O  First Input Delay é responsável pela interatividade das páginas de um site. Ele mensura, especificamente, quanto tempo um site demora para responder a um determinado comando do usuário.

Este comando por ser um clique, expansão de uma sessão, ou a abertura de uma aba em uma página estática. Para ter um FID, as ações devem acontecer em menos de 100 milissegundos.

Google Page Experience

 

Dicas que podem trazer melhorias e diminuir este tempo são:

  • Utilização do protocolo HTTP/2;
  • Utilizar o caching de navegador;
  • Uso de compressores de arquivo (Gzip, por exemplo);
  • Reduzir o máximo possível arquivos JS e CSS;
  • Não carregar JavaScript enquanto o usuário está interagindo com a página.

 

Métricas que já deveriam estar no seu radar


Existem outras métricas de avaliação que o Google já considerava importantes antes da criação dos Core Web Vitals. Confira!


Mobile-Friendliness


Para uma página ter um bom desempenho e poder disputar pelas primeiras posições no Google, é importante que o site seja compatível com todos os tipos de dispositivos móveis que o usuário possa utilizar.


Safe-browsing


A Safe-browsing vai avaliar se a navegação está livre de barreiras. Por exemplo, páginas isentas de conteúdos maliciosos, como malwares, ou enganoso, como phishing.


HTTPS


A conexão segura é primordial para qualquer site! Seja para buscadores ou usuários, o HTTPS vai ajudar a assegurar isso e ainda permitir que a página tenha um bom ranqueamento.


Primeiros passos para o Page Experience


Uma forma interessante para dar os primeiros passos e ter um site otimizado para o Page Experience é já acompanhar as métricas e fazer as adaptações. 

Esse acompanhamento pode ser feito nas ferramentas já conhecidas, que ganharam novos recursos para facilitar toda a mensuração do Core Web Vitals. Confira algumas delas a seguir! 


Google Search Console


Uma das plataformas queridinhas para análise de SEO, já disponibiliza um relatório especial, chamado de “Métricas essenciais da Web”. Você pode encontrá-lo na seção “Melhoramentos”, mesmo lugar onde você encontra os relatórios de usabilidade mobile e AMP.


Google PageSpeed Insights


A PageSpeed é uma das ferramentas disponibilizada gratuitamente pelo próprio Google. Com ela, é possível mensurar a velocidade de carregamento, e também já foi atualizada para contemplar as métricas do Core Web Vitals.


Lighthouse


Outra ferramenta queridinha do mercado! A versão 6.0 do Lighthouse já é possível levantar o índice de performance, ou performance score, que também inclui avaliações para os Core Web Vitals.


Chrome UX Report


Pode ser chamado de CrUX, seu template já é focado para os Core Web Vitals. Para usar, basta copiar, conectar sua base de dados e ter acesso a um relatório muito completo.


Web Vitals – extensão do Google


Com o Web Vitals você pode conferir em tempo real as novas métricas! Porém, ela vai focar apenas nas novas métricas: Largest Contentful Paint, First Input Delay e Cumulative Layout Shift.


Dicas para melhorar a experiência do usuário


Estamos quase chegando ao fim (ahhhhh!), mas antes vamos listar algumas dicas rápidas, para colocar em prática e melhorar a experiência do usuário em seu site.


Melhore a velocidade e diminua os erros 400


Como vimos nos tópicos anteriores, quanto mais rápido for o carregamento da página, melhor será a experiência do usuário. Para fazer essa análise de velocidade de um jeito simples, prático e gratuito, você pode usar o SEO Analyzer. Basta colar a URL da página que você terá acesso a várias informações sobre o desempenho da página.

Entre essas informações estarão o tempo de carregamento da página.


Compare seu site com os concorrentes


“Um olho no peixe e outro no gato!”. Insira nas suas atividades diárias de análise o acompanhamento dos seus concorrentes. 

Para fazer esse acompanhamento, você pode usar a ferramenta Ubersuggest. Para fazer isso, também é bem simples. Digite a URL do seu concorrente e vá em Páginas Principais, lá vai aparecer as páginas mais populares do site do seu concorrentes.

Uma dica interessante é analisar as 50 principais e comparar com a sua em alguns aspectos, como qualidade de conteúdo.


Analise seu design


Um jeito prático e super relevante para entender se o seu design do seu site está entregando uma boa experiência é por meio dos mapas de calor, ou heatmap. 

O Heatmap é um relatório gerado a partir de ferramentas que utilizam as cores como referência para facilitar o entendimento do comportamento do usuário. No contexto de um site, normalmente a ferramenta rastreia o caminho percorrido pelo mouse para entender seu comportamento em uma página de conversão.

Uma das principais ferramentas para analisar mapas de calor é a Hotjar.


Conteúdo, conteúdo e conteúdo


Ainda que existam várias métricas, e as mudanças nos algoritmos busquem melhorar ainda mais a análise da usabilidade, o conteúdo continua sendo rei. Não adianta você otimizar todos os aspectos que influenciam no Core Vitals se o conteúdo não for relevante. 

Você precisa focar na experiência completa do usuário e isso inclui o conteúdo!


Ou seja…


Se você leu até aqui já percebeu que o Page Experience veio para mudar a forma de pensar e construir relações com os usuários. Essas mudanças não dizem respeito apenas aos aspectos de SEO, mas traz também a necessidade da junção de diversos setores dentro de uma empresa — como, UX, UI, design, customer success, TI, marketing, entre outros.

Então, comece hoje a oferecer uma excelente experiência ao seu usuário! Afinal, isso vai impactar em todos os aspectos do seu negócio, desde a aquisição até o pós-venda.

Para receber os nossos conteúdos em primeira mão, siga a Mobister no LinkedIn. Caso você queira desenvolver um site ou projeto digital, entre em contato conosco.

Até a próxima! 

Mobister

Marketing para tecnologia.