Experiência de Página do Google em 2024 e os impactos em seu tráfego orgânico
Foto
John
Martin
Conteúdo de qualidade
Seo Summit 2021 e 2022 com ótimos conteúdos disponíveis.
Intro
Google Page Experience
Breve introdução ao Google Page Experience & Core Web Vitals
01
Google Page Experience
Experiência de Página
A experiência na página é um conjunto de sinais que avaliam como os usuários percebem a experiência de interação com uma página da Web além do valor informativo, tanto em dispositivos móveis quanto em computadores.
Compatível com dispositivos móveis
A página é otimizada para dispositivos móveis.
HTTPS
A página utiliza certificado de segurança e é exibida com HTTPS
Nenhum intersticial intrusivo
O conteúdo da página pode ser acessado facilmente pelo usuário.
Core Web Vitals
A página oferece uma boa experiência do usuário, com foco nos aspectos de carregamento, interatividade e estabilidade visual
Core Web Vitals são as métricas mais importantes dos web vitals, que são métricas para páginas web com foco na experiência do usuário e são usadas prioritariamente pelo Google.
CWV - LCP, FID e CLS
LCP, FID, CLS são as métricas iniciais do core web vitals
CWV - LCP, FID e CLS
LCP, FID, CLS são as métricas iniciais do core web vitals
CWV - LCP, INP e CLS
LCP, INP, CLS são as métricas do core web vitals para 2024
Laboratório VS Dados de Campo
Lab
Campo
Campo - GSC
Crux
O Relatório de experiência do usuário do Chrome é alimentado pela medição real do usuário das principais métricas de experiência do usuário em toda a web pública, agregada de usuários que optaram por sincronizar seu histórico de navegação, não configuraram uma senha de sincronização e têm relatórios de estatísticas de uso habilitados
Lembre-se das condições
Lembre-se das condições
As métricas de laboratório te auxiliam a otimizar, mas as métricas de campo que definem sua realidade.
Mas qual o motivo dessas métricas?
back to basics
O objetivo do Google é entregar o melhor resultado possível para o usuário.
experiência
do usuário
“Recomendamos que os proprietários de sites alcancem as métricas do Core Web Vitals para ter bons resultados com a Pesquisa e garantir uma ótima experiência do usuário em geral.” Google
https://developers.google.com/search/blog/2023/05/introducing-inp?hl=pt-br
Fator
Posicionamento
Core Web Vitals são um fator de posicionamento?
Além de posicionamento, pense que ao oferecer uma boa experiência ao usuário seu retorno será maior.
Vodafone
Vodafone aumentou 8% suas vendas com redução de 31% do LCP
Icook
iCook melhorou em 15% CLS e aumentou em 10% suas receitas
Rakuten
Aumento de 53% na receita e 33% na taxa de conversão
CWV são métricas bem definidas de experiência que podem e devem ser usadas pelos gestores.
cwv
CWV em 2024
Entenda do que se trata LCP, CLS e INP
02
LCP
Informa o tempo de renderização da maior imagem ou bloco de texto visível na janela de visualização, em relação a quando a página começou a carregar pela primeira vez.
Largest Contentful Paint�Elemento de Maior exibição do conteúdo crítico
LCP
LCP
LCP
LCP
Descubra seu LCP
LCP
Recomenda-se um LCP
igual ou menor que 2,5 segundos �com 75º percentil dos carregamentos
Vilões do LCP
CLS
A mudança cumulativa de layout (CLS) é uma métrica importante e centrada no usuário para medir a estabilidade visual porque ajuda a quantificar a frequência com que os usuários experimentam mudanças inesperadas de layout.
Cumulative Layout Shift �Mudança Cumulativa de Layout
CLS
CLS
Para calcular a pontuação de mudança de layout , o navegador observa o tamanho da janela de visualização e o movimento dos elementos instáveis na janela de visualização entre dois quadros renderizados.
A pontuação de mudança de layout é um produto de duas medidas desse movimento: a fração de impacto e a fração de distância (ambas definidas abaixo).
CLS
75%
Layout Shift Score = Fx�
Fx = impact fraction * distance fraction
Impact Fraction �Fração de Impacto
Para calcular a pontuação de mudança de layout , o navegador observa o tamanho da janela de visualização e o movimento dos elementos instáveis na janela de visualização entre dois quadros renderizados.
A pontuação de mudança de layout é um produto de duas medidas desse movimento: a fração de impacto e a fração de distância (ambas definidas abaixo).
75%
Distance Fraction�Fração de Distância
A fração de impacto mede como os elementos instáveis afetam a área da janela de visualização entre dois quadros.
A união das áreas visíveis de todos os elementos instáveis do quadro anterior e do quadro atual - como uma fração da área total da janela de visualização - é a fração de impacto do quadro atual.
25%
CLS
Fx =
= 0.75 * 0.25 = = 0.187
LCP
Recomenda-se CLS
igual ou menor que 0,1
com 75º percentil de carregamentos
Vilões do CLS
INP
Nova métrica que vai substituir o FID em março de 2024 e tem como objetivo principal avaliar a interatividade do site.
Interaction to Next Paint �Interação até a próxima renderização
Do FID ao INP
Enquanto o Fid mensurava somente o atraso da primeira interação, de modo geral, o INP observa a latência de todas as interações que um usuário fez com a página!
INP
Interaction to Next Paint �Interação até a próxima renderização
INP está disponível no GSC
A partir de quando o usuário inicia a interação até o momento em que o próximo quadro é apresentado com feedback visual.
Uma interação mais elevada para cada 50 interações é descartada. O 75º percentil de todas as visualizações de página é então relatado normalmente, o que remove ainda mais os valores discrepantes.
Na prática
Como otimizar
Principais dicas para otimizar seus core web vitals
03
Otimize css e js
Otimização de CSS
Otimização de JS
Atente para Minificação do html
Imagens
Otimização de imagens é um dos principais pontos que normalmente estão ao nosso alcance para correção
TAMANHO
LAZY LOAD
TIPO
PNG JPG WEBP
COMPRESSÃO
CDN
Peso
desnecessário
Miau%20Desktop.png tem 1.5MB e é somente 1 de vários sliders.
Peso
desnecessário
Miau%20Desktop.png tem 1.5MB e é somente 1 de vários sliders.
Imagens�desnecessárias
Utilização de imagens de forma desnecessária,o que aumenta a quantidade de download e tempo de carregamento.
Lazy load
Acima da dobra
Evite lazy load acima da dobra para evitar atraso no carregamento do LCP
https://www.youtube.com/playlist?list=PLyzowrc-diXdKAincTetRpiVqJ-99ZgRC
Política de Cache
Eficiente
O cache para sites web é uma técnica usada para armazenar temporariamente cópias de arquivos e recursos de um site, como imagens, folhas de estilo (CSS), JavaScript, e outros elementos, em um local mais próximo ou mais acessível para os usuários. Isso é feito para reduzir o tempo de carregamento das páginas e aliviar a carga no servidor principal.
Servidor
Performance e configuração do servidor deve ser calculada de acordo com os resultados esperados.
Sua localização também deve ser avaliada, servidores distantes tem maior latência e tempos maiores de resposta sem cache.
Utilização
CDN
Uma Rede de Distribuição de Conteúdo, conhecida pela sigla em inglês CDN (Content Delivery Network), é uma rede de servidores distribuídos geograficamente que trabalham juntos para fornecer um conteúdo mais rápido a um grande número de usuários por meio da duplicação do conteúdo em vários servidores.
Scripts de
terceiros
Scripts de
terceiros
Antecipe conexões
As solicitações do servidor para origens de terceiros também podem afetar o LCP, especialmente se forem necessárias para exibir conteúdo crítico na página.
Use rel="preconnect“ para informar ao navegador que sua página pretende estabelecer uma conexão o mais rápido possível.
Você também pode usar dns-prefetch para resolver pesquisas de DNS com mais rapidez.
Preload as Imagens LCP com <link rel="preload" as="image" href="imagem.jpg" />
Atenção com
javascript
Dimensões
Imagens, anúncios, incorporações, iframes e conteúdos injetados devem estar contidas em blocos com dimensões explícitas
RUM
Real User Metrics (RUM), ou Métricas de Usuários Reais em português, é uma tecnologia de monitoramento que coleta e analisa o desempenho e a experiência de um site ou aplicativo a partir da perspectiva dos usuários finais em condições reais de uso.�
Fontes e recursos
Obrigado(a)!
Foto
John
Martin