Web Vitals - инициатива Google, призванная помочь владельцам сайтов улучшить пользовательский опыт путём упрощения процесса измерения производительности, скорости и удобства работы сайтов. Мы поговорим об основных метриках: Core Web Vitals и инструментарии для их измерения и улучшения.

1. Web Vitals
метрики здорового сайта
Андрей Липатцев
Менеджер по работе со стратегическими партнёрами в Вебе
Google
/andreylipattsev
@andrey_l1nd3n

3. “Мне действительно жаль…,
что у вас нас не работает Интернет”

4. “Интернет работает...,
но не так быстро, как раньше”
https://www.fastly.com/blog/how-covid-19-is-affecting-internet-performance

5. Так, что
оптимизировать?

6. “Пользовательский опыт, Карл!”

7. Есть контакт?
contentbazaar.co/20160314/pi-way

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

9. Есть стабильность
счастье?
contentbazaar.co/20160314/pi-way

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 сек
Что: момент, когда страница стала полезной или когда
загрузился основной контент

15. LCP
Largest Contentful Paint
web.dev/lcp

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

18. CLS
Cumulative Layout Shift
web.dev/cls

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

22. Скорость
относительна

23. Синтетика и
ром МРП

24. МРП ==
данные IRL

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

31. Не Core-ом единым

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
● сложно составлена
● трудна в объяснении
● не отражает загрузку основного контента
● сложно составлена
● трудна в объяснении
● не отражает загрузку основного контента
Не отражает то, что видит пользователь
Отражает только начало загрузки

35. Британские учёные

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

44. bit.ly/web-vitals-science
bit.ly/web-vitals-methodology

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

65. bit.ly/mobile-page-speed-data
bit.ly/Milliseconds-Make-Millions

66. web.dev/live
30 июня — 2 июля, 2020

67. Q&A