Desvendando Core Web Vitals

Slide 1

Slide 1 text

desvendando core web vitals @jessilyneh setembro de 2022, São Paulo

Slide 2

Slide 2 text

@jessilyneh Jess - Ela/A Desenvolvedora Frontend na AMARO (full-time: e-commerce de lifestyle) Lead de Frontend na Lacrei Saúde (voluntariado: plataforma de acesso a saúde clínica da comunidade LGBTQIAPN+) Organizadora do Nerdzão/NerdGirlz (voluntariado: comunidade de tecnologia) 31 anos Instrutora Frontend na Sirius Educação (part-time: neouniversidade)

Slide 3

Slide 3 text

desvendando core web vitals O que são Core Web Vitals (CWV) Porque CWV importa? LCP - Largest Contentful Paint FID - First Input Delay CLS - Cumulative Layout Shift Lib JS Web Vitals Google Search Console Performance Insights no Dev Tools Lighthouse no Dev Tools PageSpeed Insights Por onde começar a estudar?

Slide 4

Slide 4 text

Desvendando Core Web Vitals Core Web Vitals são métricas que compões alguns dos fatores usados para classificar a experiência da pessoa usuária em páginas buscadas no Google. Essas métricas são: velocidade, interatividade e estabilidade visual. @jessilyneh

Slide 5

Slide 5 text

Desvendando Core Web Vitals @jessilyneh Porquê priorizar Core Web Vitals importa? 25% a mais de chances de uma pessoa usuária não abandonar a página *https://blog.chromium.org/2020/05/the-science-behind-web- vitals.html acesso em 27 de setembro de 2022 50% do tráfico de sites vem de busca orgânica. *https://videos.brightedge.com/research- report/BrightEdge_ChannelReport2019_FINAL.pdf acesso em 27 de setembro de 2022

Slide 6

Slide 6 text

Desvendando Core Web Vitals @jessilyneh "o que não pode ser medido não pode ser gerenciado" William Edwards Deming

Slide 7

Slide 7 text

Desvendando Core Web Vitals @jessilyneh velocidade de carregamento de conteúdo

Slide 8

Slide 8 text

Desvendando Core Web Vitals @jessilyneh velocidade de resposta à primeira interação do usuário velocidade de carregamento de conteúdo

Slide 9

Slide 9 text

Desvendando Core Web Vitals @jessilyneh velocidade de resposta à primeira interação do usuário velocidade de carregamento de conteúdo frequência e a impacto das mudanças inesperadas de layout

Slide 10

Slide 10 text

Desvendando Core Web Vitals @jessilyneh Lib JavaScript web-vitals github.com/GoogleChrome/web-vitals Adaptador que encapsula as APIs web subjacentes e que mede cada métrica de maneira a corresponder com precisão à forma como são relatadas por todas as Ferramentas Google.

Slide 11

Slide 11 text

Desvendando Core Web Vitals @jessilyneh Lib JavaScript web-vitals

Slide 12

Slide 12 text

Desvendando Core Web Vitals @jessilyneh Google Search Console Neste relatório, é possivel verificar "URLs pobres", "URLs pre cisam ser mel ho - radas" ou "URLs boas" https://ahrefs.com/blog/pt/core-web-vitals/

Slide 13

Slide 13 text

Desvendando Core Web Vitals @jessilyneh Google Search Console Também é possível encontrar infor mações mais detal hadas sobre os prob le mas especí fi - cos e uma lista das pági nas afetadas. https://ahrefs.com/blog/pt/core-web-vitals/

Slide 14

Slide 14 text

Desvendando Core Web Vitals @jessilyneh Performance Insights no Dev Tools Identificam problemas como solicitações de bloqueio de renderização, mudanças de layout e tarefas longas que podem afetar negativamente o desempenho de carregamento da página do seu site e, especificamente, as pontuações do Core Web Vital do site. https://developer.chrome.com/blog/performance-insights/

Slide 15

Slide 15 text

Desvendando Core Web Vitals @jessilyneh Performance Insights no Dev Tools Temos uma linha do tempo de rastreamento e podemos inspecionar os dados, mas também temos uma lista do que o DevTools considera os principais "Insights" que valem a pena pesquisar. https://developer.chrome.com/blog/performance-insights/

Slide 16

Slide 16 text

Desvendando Core Web Vitals @jessilyneh Performance Insights no Dev Tools Também oferece sugestões acionáveis para melhorar as pontuações de CWV e fornece links para outros recursos e documentação https://developer.chrome.com/blog/performance-insights/

Slide 17

Slide 17 text

Desvendando Core Web Vitals @jessilyneh Lighthouse no Dev Tools O Lighthouse analisa aplicativos da Web e páginas da Web, coletando métricas de desempenho atualizadas e insights sobre as melhores práticas para a página web. https://github.com/GoogleChrome/lighthouse

Slide 18

Slide 18 text

Desvendando Core Web Vitals @jessilyneh Aba Performance no Dev Tools Analisa o desempenho da sua página quando está em execução, em oposição ao carregamento, nos ajudando a encontrar problemas de performance para corrigir https://developer.chrome.com/docs/devtools/evaluate-performance/

Slide 19

Slide 19 text

Desvendando Core Web Vitals @jessilyneh PageSpeed Insights https://pagespeed.web.dev Apresenta um report do desempenho de uma página em dispositivos móveis e desktop e fornece sugestões sobre como essa página pode ser aprimorada. https://developers.google.com/speed/docs/insights/v5/about

Slide 20

Slide 20 text

Desvendando Core Web Vitals - PageSpeed Insights @jessilyneh Todos os aspectos que podem ser otimizados são mostrados com uma estimativa de quanto tempo de carregamento pode ser otimizado se as melhorias forem aplicadas.

Slide 21

Slide 21 text

Desvendando Core Web Vitals- PageSpeed Insights @jessilyneh

Slide 22

Slide 22 text

Desvendando Core Web Vitals- PageSpeed Insights @jessilyneh

Slide 23

Slide 23 text

@jessilyneh Desvendando Core Web Vitals- PageSpeed Insights

Slide 24

Slide 24 text

@jessilyneh Desvendando Core Web Vitals Por onde começar? https://developers.google.com/learn/pa thways/web-vitals Além de ler a documentação, existe uma trilha de artigos e exercícios no site Developers Google.

Slide 25

Slide 25 text

Obrigada! @jessilyneh setembro de 2022, São Paulo