Desvendando Core Web Vitals

Se você trabalha em aplicações web, entender sobre as métricas padronizadas para medir a experiência da pessoa usuária e entender quais partes precisam de melhorias. Nessa palestra, vamos desvendar as siglas LCP, CLS, FID, FCP e muito mais, para garantir a melhor experiência e melhor SEO para o seu site!

Transcript

1. desvendando core web vitals @jessilyneh setembro de 2022, São Paulo
2. @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)
3. 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?
4. 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
5. 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
6. Desvendando Core Web Vitals @jessilyneh "o que não pode ser medido não pode ser gerenciado" William Edwards Deming
7. Desvendando Core Web Vitals @jessilyneh velocidade de carregamento de conteúdo
8. Desvendando Core Web Vitals @jessilyneh velocidade de resposta à primeira interação do usuário velocidade de carregamento de conteúdo
9. 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
10. 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.
11. Desvendando Core Web Vitals @jessilyneh Lib JavaScript web-vitals
12. 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/
13. 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/
14. 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/
15. 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/
16. 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/
17. 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
18. 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/
19. 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
20. 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.
21. Desvendando Core Web Vitals- PageSpeed Insights @jessilyneh
22. Desvendando Core Web Vitals- PageSpeed Insights @jessilyneh
23. @jessilyneh Desvendando Core Web Vitals- PageSpeed Insights
24. @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.
25. Obrigada! @jessilyneh setembro de 2022, São Paulo