O documento resume a atualização do Google chamada Page Experience, que incorpora novas métricas como Core Web Vitals (CWV) focadas na experiência do usuário. As três métricas CWV - LCP, FID e CLS - medem respectivamente o tempo de carregamento do maior bloco de conteúdo visível, o atraso na resposta a interações do usuário e mudanças inesperadas de layout. O documento fornece detalhes sobre como melhorar cada métrica para entregar a melhor experiência para os usuários.

1. Google Update
Page Experience
por John Martin
Fundador & CEO da SEOMARTIN

2. ​John Martin, também conhecido como Seo Martin, é Empresário, Especialista, ​Consultor e
Professor de Marketing Digital assim como SEO, E-commerce, Analytics, Google Ads e GTM
dentre outras tecnologias digitais e de marketing.
Formado em Administração pela Pontifícia Universidade Católica
de São Paulo e pós graduado em Marketing pela HSM (MBA), tem
vasta e diversificada experiência, trabalhando de auditor na
PriceWaterHouseCoopers até como diretor de marketing na Divino
Sapore, Soma e Joma Sports.
Atuou em diversos projetos de marketing digital e SEO desde 2005
em empresas como Adobe, Airu, Ambev, Arthur Caliman, BASF,
Casar, Capila, Drogaria São Paulo, E-next, Etiqueta Única,
Farmadelivery, Fundação Estudar, Lendico, Kaymu África, Keela,
Pernod Ricard, Raia Drogasil, Revelaweb​, Rocket Internet, ​​Onofre,
Superbid, Trisul-SA, Vivara, ​World Tennis, Waufen, Wetseal e Xiomi
dentre outras empresas de renome nacional e internacional.

3. Seo Martin
seomartin.com/LINKEDIN
seomartin.com/YOUTUBE
seomartin.com/INSTAGRAM
seomartin.com
seomartin.com/TWITCH

4. O Que é?

5. Page Experience é a nova
atualização do Google focada
em performance e na
experiência do usuário.
5

6. Atualização concluída nos primeiros dias de setembro

7. Devemos nos preocupar?
7

8. O objetivo do Google é
entregar o melhor resultado
possível para o usuário!
8

9. 9
Conteúdo
Title e
Metas
On page
Mobile
Experiência
Segurança
backlinks
Machine
Learning
IA

10. E com o mercado mais competitivo,
qualquer fator extra pode ser um
diferencial!
10

11. Principais
fatores estão
com alta
competição
Fatores
Técnicos
passam a ser
um diferencial
Essa
atualização
incorpora
vários fatores
técnicos
Novo
Paradigma
experiência do
usuário
Ameaça ou oportunidade?

12. Abrir ao público esse fator, é a
maneira do Google estimular a
entrega de bons resultados para o
usuários, assim como fez com o SSL...
12

13. Por ser o fator mais novo, existe
grande oportunidade!
13

14. Mas Como Estamos?

15. 1º Estudo E-commerce Brasileiro CWV em Março
https://bit.ly/3fHTMBY

16. Notas Ruins em cada métrica
https://bit.ly/3fHTMBY
75%
LCP
20%
FID
78%
CLS

17. Vale a pena otimizar?

18. No Brasil, identificamos pouca
mudança nos maiores players
estudados, no entanto notamos
forte correlação.
18

19. elo7.com.br
37,371,630 36,397,254 36,700,988
43,062,842
52,602,570
50,455,433
março abril maio junho julho agosto
Fonte: Tráfego orgânico Semrush

20. lojadomecanico.com.br
11,374,792 11,254,890
10,084,834
11,024,657
8,478,903
7,911,830
março abril maio junho julho agosto
Fonte: Tráfego orgânico Semrush

21. tokstok.com.br
3,593,141
3,458,770 3,489,286 3,480,358
2,700,697
2,589,259
março abril maio junho julho agosto
Fonte: Tráfego orgânico Semrush

22. Identificamos diversos cases com
forte correlação entre core web
vitals e posicionamento.
22

23. Além dos
posicionamentos, são
métricas focadas na
experiência do usuário!
23

24. NDTV reduziu o LCP em 55% e teve
redução de 50% na taxa de rejeição!
24

25. Yahoo! Japan reduziu o CLS dentro
do recomendado e conseguiu
aumento de 15% de pageviews por
sessão e 13% a mais de duração nas
sessões.
25

26. Vodafone aumentou 8% suas vendas com redução de 31% do LCP
Vodafone (ita)

27. iCook melhorou em 15% CLS e aumentou em 10% suas receitas
iCook

28. Diversos estudos

29. Mas quais os sinais do
Page Experience?
29

30. Novos Sinais para experiência de página

31. Páginas estão adequadas no site?

32. Google Search Console Vídeos Tutoriais
Como cadastrar Seu Site
Com mais de 68.771 visualizações
https://youtu.be/mssTh53Q4lY
Tutorial GSC
Com mais de 36.069 visualizações
https://youtu.be/AMzbfhyHfxc

33. Os CWV são parte do Page Experience
que é o novo fator de posicionamento,
no entanto são mais desafiadores.
33

34. Core Web Vitals são as métricas
mais desafiadoras dos web vitals.
34

35. Web Vitals são métricas
para páginas web com foco na
experiência do usuário!
35

36. Muito embora exista boa
documentação, o assunto ainda é um
pouco confuso para gestores e também
para desenvolvedores, porque são
métricas novas e técnicas.
36

37. Cada uma das métricas CWV que
serão apresentadas, se concentra
em uma visão crítica centrada no
usuário
37

38. carregamento interatividade estabilidade visual
CWV: 3 visões críticas do usuário

39. LCP

40. LCP: Largest Contentful Paint
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.
Elemento de Maior exibição do conteúdo (crítico)

41. LCP: Exemplo

42. LCP: Exemplos
1 2 3 4 5

43. LCP: Exemplos
1 2 3 4 5

44. LCP: Exemplos
1 2 3 4 5

45. Ainda não sabe qual o LCP?

46. Recomenda-se um LCP
igual ou menor que 2,5 segundos
com 75º percentil de carregamentos
46

47. LCP

48. Otimização de imagens, tempo
de resposta do servidor e recursos
que impedem a renderização
costumam ser os grandes vilões
do LCP
48

49. Estudo Semrush
principais problemas de LCP
https://bit.ly/3pkBzij
49

50. FID

51. FID: First Input Delay
Atraso da Primeira Entrada
O FID mede o tempo desde o momento em que
um usuário interage pela primeira vez com uma
página (ou seja, quando clica em um link, toca
em um botão ou usa um controle personalizado
baseado em JavaScript) até o momento em que
o navegador é realmente capaz de começar a
processar manipuladores de eventos em
resposta a essa interação.

52. FID mensura o tempo entre um
usuário ter uma ação na página e
o navegador ser capaz de
processar.
52

53. Exemplo de FID
O usuário clica no
menu mas nada...

54. O FID mede apenas o "atraso" no
processamento do evento. Ele não
mede o tempo de processamento do
evento em si nem o tempo que leva
para o navegador atualizar a IU após
a execução dos manipuladores de
eventos.
54

55. Ocorre quando a página renderizou parte de seu conteúdo, mas ainda não é interativa:
entre FCP e Time to Interactive (TTI):

56. FID só pode ser mensurado no
campo (com usuários reais) mas você
pode usar o TBT para avaliar em
laboratório.
56

57. Recomenda-se FID
igual ou menor que 100 mm
com 75º percentil de carregamentos
57

58. FID

59. Normalmente JS demorados na
main thread são a principal causa de
problemas.
59

60. CLS

61. CLS: Cumulative Layout Shift
Mudança Cumulativa de Layout
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.

62. CLS mensura quanto e quão
frequente um conteúdo se move de
forma inesperada numa página.
62

63. Exemplo CLS

64. Cálculo do 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).

65. Mudança Cumulativa de Layout
layout shift score
= impact fraction * distance fraction
= distância de fração *distância de impacto

66. Distance Fraction
Fração de Distância
A fração de distância mede a
distância que os elementos
instáveis ​​se moveram em relação
à janela de visualização.
A fração de distância é a maior
distância que qualquer elemento
instável moveu no quadro
(horizontal ou verticalmente)
dividida pela maior dimensão da
janela de visualização (largura ou
altura, o que for maior).
25%
0,25
100%

67. Impact Fraction
Fração de Impacto
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.
75%
0,75

68. Cálculo de Exemplo
= 0.75 * 0.25 =
= 0.187

69. Recomenda-se CLS
igual ou menor que 0,1
com 75º percentil de carregamentos
69

70. CLS

71. Dentre as principais causas temos
imagens com dimensões
desconhecidas, fontes com tamanhos
diferentes das substitutas, conteúdos
dinâmicos inseridos sem previsão.
71

72. Mensuração

73. Seja para ajustar ou cobrar, a
mensuração é um dos pontos mais
importantes.
73

74. Laboratório VS Dados de Campo

75. Laboratório é um teste controlado
com resposta imediata, sendo crítico
para identificar bugs e problemas,
ótimo para desenvolvedores.
75

76. Dados de campo são dados reais de
usuários consolidados, e o auxiliam a
entender o que os usuários reais
estão experimentando.
76

77. CWV são mensurados em campo,
com dados reais de usuários.
77

78. Dados Reais, Usuários Reais 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

79. As condições podem mudar

80. Ferramentas Recomendadas
● Google Search Console
● PageSpeed Insights
● Web-vitals JS
● Chrome User Experience Report
● Integração com GA4
● New Relic
● Akamai
● Calibre
● Blue Triangle
● SpeedCurve
● Sentry
● Web PageTest
● GTMetrix
Google Externas

81. Lighthouse

82. Quanto mais próximo do 100 estiver,
maior a probabilidade de alcançar
ótimas métricas para os usuários
reais.
82

83. Chrome Dev Tools

84. Web Page Teste / GTMetrix

85. Page Speed Insights

86. Em Detalhes
Nota de laboratório consolidados
Dados de campo do url (CrUX)
Nota de laboratório em detalhes
Diagnósticos, Oportunidades e
melhorias sugeridas

87. Dispositivo

88. Resumo agregado da origem

89. Search Console

90. Dashboard no Data Studio com CrUX

91. https://youtu.be/9Gty0Iu7oLk
91

92. CWV são métricas bem
definidas que devem ser
monitoradas pelos gestores.
92

93. Não pense somente em
posicionamento, mas na
experiência do usuário!
93

94. Otimizar não é um destino,
é uma jornada!
94

95. Fontes
● Seo Martin no Youtube: https://www.seomartin.com/Youtube
● Web Vitals: https://web.dev/vitals/
● Core Web Vitals explicados detalhadamente: https://youtu.be/3vH_n1sika8
● Dashboard Data Studio Core Web Vitals: https://youtu.be/9Gty0Iu7oLk
● Chrome User Experience Report: https://bit.ly/2QDRlb2
● Lighthouse performance scoring: https://web.dev/performance-scoring/
● Performance audits: https://web.dev/lighthouse-performance/
● Optimize for Core Web Vitals: https://youtu.be/AQqFZ5t8uNc
● O impacto do Core Web Vitals nos negócios: https://youtu.be/nPmAE0YjGK0
● The business impact of Core Web Vitals: https://web.dev/vitals-business-impact/
● Core Web Vitals News: https://youtu.be/XxvHY4wC8Co
● 1º Estudo Brasileiro de Core Web Vitals nos E-commerces: https://bit.ly/3fHTMBY
● Como se preparar para o CWV: https://pt.semrush.com/blog/atualizacao-core-web-vitals/
● PageSpeed Insights: https://developers.google.com/speed/pagespeed/insights/
● Web Page Test: https://www.webpagetest.org/

96. Dúvidas?
96
seomartin.com/Youtube

97. seomartin.com/LINKEDIN
seomartin.com/YOUTUBE
seomartin.com/INSTAGRAM
seomartin.com
Obrigado!
seomartin.com/TWITCH