Slides sobre Google Update Page Experience na RD Hostel

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.

6. Anunciada para Maio mas Lançada em Junho

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

8. Devemos nos preocupar?

9. Futuro
Impactos
identificados
Data
lançamento
Anúncio
Oficial
Essa é uma das atualizações do Google que tem
maior potencial de mudanças em posicionamento

10. 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
Ameaça ou
Oportunidade

11. 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. O objetivo do Google é
entregar o melhor resultado
possível para o usuário!

13. Mas quais os sinais do
Page Experience?

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

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

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

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

18. Core Web Vitals são as métricas
mais importantes dos web vitals.

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

20. 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 altamente técnicas.

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

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

23. LCP

24. 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)

25. LCP: Exemplo

26. LCP: Exemplos

27. LCP: Exemplos

28. LCP: Exemplos

29. Ainda não sabe qual o LCP?

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

31. LCP

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

33. FID

34. 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.

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

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

37. 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.

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

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

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

41. FID

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

43. CLS

44. 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.

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

46. Exemplo CLS

47. 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).

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

49. 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%

50. 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

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

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

53. CLS

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

55. Mensuração

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

57. Laboratório VS Dados de Campo

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

59. 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.

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

61. 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

62. As condições podem mudar

63. 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

64. Lighthouse

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

66. Chrome Dev Tools

67. Web Page Teste / GTMetrix

68. Page Speed Insights

69. Page Speed: Dados Consolidados
Nota de laboratório consolidados
Dados de campo do url (CrUX)
Nota de laboratório em detalhes
Diagnósticos, Oportunidades e
melhorias sugeridas

70. Dados de Campo PSI

71. Resumo agregado da origem

72. Search Console

73. Dashboard no Data Studio com CrUX

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

75. Mas Como Estamos?

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

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

78. Vale a pena otimizar?

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

80. 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.

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

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

83. Diversos estudos

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

85. 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

86. 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

87. 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

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

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

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

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

92. 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/

93. Seo Martin
seomartin.com/LINKEDIN
seomartin.com/YOUTUBE
seomartin.com/INSTAGRAM
seomartin.com
Obrigado!
seomartin.com/TWITCH