Core Web Vitals - Ru Devparty, June 27, 2020
0 likes244 views
Документ содержит информацию о метриках веб-производительности, известных как Core Web Vitals, которые включают LCP, CLS и FID, и их влияние на пользовательский опыт. Приведены данные о значимости скорости загрузки и взаимодействия для удержания пользователей и увеличения конверсий. Также упоминаются инструменты для анализа этих метрик и примеры успешного применения их в бизнесе.
Core Web Vitals - Ru Devparty, June 27, 2020
- 1. Web Vitals метрики здорового сайта Андрей Липатцев Менеджер по работе со стратегическими партнёрами в Вебе Google /andreylipattsev @andrey_l1nd3n
- 3. “Мне действительно жаль…, что у вас нас не работает Интернет”
- 4. “Интернет работает..., но не так быстро, как раньше” https://www.fastly.com/blog/how-covid-19-is-affecting-internet-performance
- 8. Есть реакция? contentbazaar.co/20160314/pi-way Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
- 10. Есть счастье?Есть реакция?Есть контакт? contentbazaar.co/20160314/pi-way Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco contentbazaar.co/20160314/pi-waycontentbazaar.co/20160314/pi-way
- 11. Но как?!
- 12. Core Web Vitals
- 13. LCP Largest Contentful Paint CLS Cumulative Layout Shift FID First Input Delay (загрузка) (взаимодействие) (стабильность)
- 14. LCP Largest Contentful Paint web.dev/lcp 😃 😐 😢 2,5 сек 4,0 сек Что: момент, когда страница стала полезной или когда загрузился основной контент
- 16. FID First Input Delay web.dev/fid 😃 😐 😢 100 мс 300 мс Что: первое впечатление пользователя об интерактивности страницы
- 17. CLS Cumulative Layout Shift web.dev/cls 😃 😐 😢 0,1 0,25 Что: стабильность отрисованного контента (layout) layout shift score = impact fraction * distance fraction
- 19. LCP Largest Contentful Paint 😃 😐 😢 2,5 сек 4,0 сек CLS Cumulative Layout Shift 😃 😐 😢 0,1 0,25 FID First Input Delay 😃 😐 😢 100 мс 300 мс (загрузка) (взаимодействие) (стабильность)
- 20. “Но ром-то за что?!”
- 21. RUM Real User Monitoring* *Мониторинг реальных пользователей. См. MDN
- 25. Скорость относительна Синтетика и ром МРП МРП == данные IRL
- 26. “Но зачем?”
- 27. Куда вы дели мои старые метрики?
- 28. Эволюция
- 29. Загру зка Интерактивность FCP First Contentful Paint SI Speed Index FMP First Meaningful Paint FCI First CPU Idle TTI Time to Interactive mFID Max Potential First Input Delay FID First Input Delay Рано Поздно Метрики ≤ 2019
- 30. Загрузка Интерактивность FCP First Contentful Paint SI Speed Index FMP First Meaningful Paint FCI First CPU Idle TTI Time to Interactive mFID Max Potential First Input Delay FID First Input Delay LCP Largest Contentful Paint TBT Total Blocking Time Предсказуемость CLS Cumulative Layout Shift Рано Поздно Метрики > 2019
- 32. TTFB Time to First Byte TBT Total Blocking Time (загрузка) (взаимодействие) FCP First Contentful Pain TTI Time to Interactive
- 33. “А что не так с...?”
- 34. FMP First Meaningful Paint SI Speed Index DOM CL DOMContentLoaded FCP First Contentful Pain ● сложно составлена ● трудна в объяснении ● не отражает загрузку основного контента ● сложно составлена ● трудна в объяснении ● не отражает загрузку основного контента Не отражает то, что видит пользователь Отражает только начало загрузки
- 36. Я устал, я ухожу ● 2 секунды –> невозврат ● 4 секунды –> невыполнение https://blog.chromium.org/2020/05/the-science-behind-web-vitals.html
- 37. No satisfaction ● 3 секунды –> неудовлетворённость https://blog.chromium.org/2020/05/the-science-behind-web-vitals.html
- 38. Внимание, внимание! ● 4-8 секунд –> потеря внимания https://blog.chromium.org/2020/05/the-science-behind-web-vitals.html
- 39. Будь человеком! ● 1-4 секунды –> ожидаемое время реакции https://blog.chromium.org/2020/05/the-science-behind-web-vitals.html
- 40. Не дёргайся! ● >200 миллисекунд –> поиск нового положения https://blog.chromium.org/2020/05/the-science-behind-web-vitals.html
- 41. Ты спишь? ● >150 миллисекунд –> низкое качество https://blog.chromium.org/2020/05/the-science-behind-web-vitals.html
- 42. Иллюзия контроля ● >100 миллисекунд –> потеря ощущения контроля https://blog.chromium.org/2020/05/the-science-behind-web-vitals.html
- 43. А в Хроме как? ● Порог достигнут –> Вероятность прекращения загрузки 24% https://blog.chromium.org/2020/05/the-science-behind-web-vitals.html
- 45. “И одно попугайское крылышко”
- 46. Инструменты для Core Web Vitals
- 47. Lighthouse ● “Лабораторная” загрузка ● Замена некоторых метрик (например, FID на TBT) ● Доступ из CLI, PSI, CDT* * CLI = Command Line Interface * PSI = PageSpeed Insights * CDT = Chrome Dev Tools
- 48. Chrome User Experience Report ● Отчёты для origin по странам, устройствам и типам подключения CrUX g.co/chromeuxdash
- 49. ● Данные из ○ Lighthouse (по заданному URL) ○ CrUX, если есть (по URL и Origin) PageSpeed Insights
- 50. ● Данные по каждой странице из CrUX Search Console
- 51. ● LCP, CLS и TBT в trace по скорости Chrome Dev Tools
- 52. ● Real-time измерение CWV на странице Web Vitals Chrome Extension
- 53. ● Те же метрики, что в CrUX ● github.com/GoogleChrome/web-vitals web-vitals.js
- 54. Call Tracking Эмбеды & виджеты A/B тестирование АналитикаРеклама Tag Management
- 55. “А что толку?”
- 56. Как продать Core Web Vitals
- 57. “Кто крайний на кассу?” ● 0,1 сек –> 40% ↗ кликов на “добавить в корзину” (Luxury) https://www.thinkwithgoogle.com/marketing-resources/experience-design/mobile-page-speed-data
- 58. “А в этом отделе мы были?” или “Возьми ещё тележку” ● 0,1 сек –> 9,2% ↗ к среднему чеку (Retail) ● 0,1 сек –> 8% ↗ глубина просмотра (Luxury) https://www.thinkwithgoogle.com/marketing-resources/experience-design/mobile-page-speed-data
- 59. “На обед что ли закрыто?” ● 0,1 сек –> 8,3% ↘ отказов (Lead generation) https://www.thinkwithgoogle.com/marketing-resources/experience-design/mobile-page-speed-data
- 60. BMW ● с 8% до 30% ↗ трафик на сайт продаж https://www2.deloitte.com/content/dam/Deloitte/ie/Documents/Consulting/Milliseconds_Make_Millions_report.pdf
- 61. Pfizer ● 38% ↗ скорость загрузки ● 20% ↘ отказы https://www2.deloitte.com/content/dam/Deloitte/ie/Documents/Consulting/Milliseconds_Make_Millions_report.pdf
- 62. Postbank ● 11% ↗ кликов по рекламе ● 8% ↘ стоимость клика https://www2.deloitte.com/content/dam/Deloitte/ie/Documents/Consulting/Milliseconds_Make_Millions_report.pdf
- 63. TUI ● 78% ↗ скорость загрузки ● 31% ↘ отказы https://www2.deloitte.com/content/dam/Deloitte/ie/Documents/Consulting/Milliseconds_Make_Millions_report.pdf
- 64. Ebay ● каждые 0,1 сек ↘ загрузки –> 0,5% ↗ к “Добавить в корзину” https://www2.deloitte.com/content/dam/Deloitte/ie/Documents/Consulting/Milliseconds_Make_Millions_report.pdf
- 66. web.dev/live 30 июня — 2 июля, 2020
- 67. Q&A