Core Web Vitals & Google Page Experience por Seo Martin

1. Core Web Vitals
& 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/INSTAGRAM
seomartin.com/YOUTUBE
seomartin.com

4. Muito embora exista boa documentação
sobre o assunto, ainda é um pouco confuso
tanto para gestores quanto para devs e
tentaremos facilitar 😃

5. O Que é?

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

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

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

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

10. Lembre-se que as métricas que
compõem o (Core) Web Vitals irão
evoluir com o tempo!

11. Importância

12. Por que todos estão tão preocupados
com essas métricas?

13. Fator de Posicionamento

14. https://youtu.be/2I2HUXblJNY

15. Lembrando que CWV são parte do
Page Experience que é o novo fator
de posicionamento.

16. Page Experience

17. New Page Experience

18. Page Experience no GSC

19. Nesse caso especialmente, não
pense somente em posicionamentos,
mas na experiência do usuário, pois
essas métricas são todas centradas
neles!

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

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

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

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

24. Diversos estudos

25. Estudo Seo Martin

26. CWV são métricas bem definidas que
devem ser usadas pelos gestores.

27. O Objetivo do Google é entregar o
melhor resultado possível para o
usuário e agora mais pontos são
importantes.

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

29. LCP

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

31. LCP: Exemplo

32. LCP: Exemplos

33. LCP: Exemplos

34. LCP: Exemplos

35. Ainda não sabe qual o LCP?

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

37. LCP

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

39. FID

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

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

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

43. O primeiro atraso de entrada será a
primeira impressão do usuário sobre
a capacidade de resposta do seu site

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

45. Normalmente entre FCP e Time to Interactive (TTI): a página renderizou parte de seu
conteúdo, mas ainda não é interativa de forma confiável.

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

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

48. FID

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

50. CLS

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

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

53. Exemplo CLS

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

55. Mudança Cumulativa de Layout
layout shift score
= impact fraction * distance fraction

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

57. 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%
0,25
100%

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

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

60. CLS

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

62. https://youtu.be/3vH_n1sika8

63. Como Estamos?

64. 1º Estudo Brasileiro CWV
https://bit.ly/3fHTMBY

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

66. https://youtu.be/FXr1a2J5L2A

67. Mensuração

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

69. Laboratório VS Dados de Campo

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

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

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

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

74. Condições podem mudar

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

76. Lighthouse

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

78. Chrome Dev Tools

79. Web Page Teste / GTMetrix

80. Page Speed Insights

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

82. Dados de Campo PSI

83. Resumo agregado da origem

84. Search Console

85. Dashboard no Data Studio com
CrUX

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

87. Utilização de API, biblioteca
javascript e RUM Providers (Real User
Metrics) podem ser interessantes
para seu projeto.

88. Principais
recomendações
para E-commerce

89. Necessário sinergia entre diversas
equipes, de marketing até equipe de
tecnologia.

90. Otimize as imagens nos Sliders, evite
exageros e tenha uma versão mobile.

91. Atenção com exagero e otimização
de banners na homepage.

92. Imagens devem ser enviadas com
tipo, dimensão e peso corretas pelos
designers.

93. Avalie a necessidade de zoom nas
fotos de produtos, dependendo do
público alvo e produto. Considere
usar fotos dos detalhes.

94. Sistema deve gerar uma versão
alternativa da imagem em formato
mais moderno como WebP.

95. Utilize Lazyload em suas imagens,
principalmente nas páginas de
categorias e taxonomias de arquivos.

96. https://youtube.com/playlist?list=PLyzowrc-diXdKAincTetRpiVqJ-99ZgRC

97. Tente reduzir e use com parcimônia
scripts de terceiros.

98. Reduza o tempo de resposta inicial
do servidor (até 600ms)
● Otimize a lógica do aplicativo do servidor para preparar as páginas
com mais rapidez.
● Otimize como seu servidor consulta bancos de dados ou migre para
sistemas de banco de dados mais rápidos.
● Atualize o hardware do servidor para ter mais memória ou CPU.
● Avalie usar opções como CDN ou Varnish quando possível.

99. Utilize uma política de cache
eficiente.

100. Estabeleça conexões de terceiros
antecipadamente
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.

101. Preload as Imagens de produtos
(LCP) com <link rel="preload"
as="image" href="imagem.jpg" />

102. JS e CSS
CSS
● Minificação
● Adie CSS não crítico
● CSS Crítico Inline
● Evite CSS desnecessário
JS
● Minimize e comprima arquivos js
● Adie JavaScript não utilizado
● Minimize polyfills não usados
● Evite JS desnecessário

103. Execução pesada de JavaScript
● Divida Tarefas Longas em assíncronas e menores
● Reduza o tempo de execução do JavaScript
● Use web workers

104. Evite Layout Shifts
● Imagens sempre com dimensões
● Escolha Web Fonts substitutas corretas
● Anúncios, incorporações e iframes com dimensões
● Atenção Conteúdo injetado dinamicamente

105. Atenção: CLS pode ser impactado
por promobars que empurram o
conteúdo.

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

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

108. Seo Martin
seomartin.com/LINKEDIN
seomartin.com/YOUTUBE
seomartin.com/INSTAGRAM
seomartin.com
Obrigado!