В чём суть Поиск Google вводит новые сигналы с мая 2021-го В список сигналов включают Core Web Vitals Пороги Core Web Vitals установлены эмпирически Для оценки вашего сайта есть полный инструментарий

1. Андрей Липатцев, Google Chrome
Core Web Vitals
метрики здорового сайта
/andreylipattsev
@andrey_l1nd3n

2. OPTIMIZATION
2020

3. Core Web Vitals

4. OPTIMIZATION
2020
В чём суть
Core Web Vitals
4
Поиск Google вводит новые сигналы с мая 2021-го
В список сигналов включают Core Web Vitals
Для оценки вашего сайта есть полный инструментарий
Пороги Core Web Vitals установлены эмпирически

5. OPTIMIZATION
2020
Кот Сайт не работает
Core Web Vitals
05

6. OPTIMIZATION
2020
Core Web Vitals
06
Есть контакт?
contentbazaar.co/20160314/pi-way

7. OPTIMIZATION
2020
Core Web Vitals
07
Есть реакция?
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

8. OPTIMIZATION
2020
Core Web Vitals
08
Есть стабильность
счастье?
contentbazaar.co/20160314/pi-way

9. OPTIMIZATION
2020
Core Web Vitals
09
Есть счастье?Есть реакция?Есть контакт?
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

10. Core Web Vitals

11. OPTIMIZATION
2020
Core Web Vitals
011
https://webmasters.googleblog.com/2020/11/timing-for-page-experience.html
Timing for bringing page experience to Google Search
Tuesday, November 10, 2020

12. OPTIMIZATION
2020
Core Web Vitals
Core Web Vitals
012
https://web.dev/vitals/

13. OPTIMIZATION
2020
LCP
Largest Contentful Paint
CLS
Cumulative Layout Shift
FID
First Input Delay
(загрузка) (взаимодействие) (стабильность)
013

14. OPTIMIZATION
2020
LCP
Largest Contentful Paint
web.dev/lcp
😃 😐 😢
2,5 сек 4,0 сек
Что: момент, когда страница стала полезной или когда
загрузился основной контент
014

15. OPTIMIZATION
2020
LCP
Largest Contentful Paint
web.dev/lcp
015

16. OPTIMIZATION
2020
FID
First Input Delay
web.dev/fid
😃 😐 😢
100 мс 300 мс
Что: первое впечатление пользователя об
интерактивности страницы
016

17. OPTIMIZATION
2020
CLS
Cumulative Layout Shift
web.dev/cls
😃 😐 😢
0,1 0,25
Что: стабильность отрисованного контента (layout)
layout shift score = impact fraction * distance fraction
017

18. OPTIMIZATION
2020
CLS
Cumulative Layout Shift
web.dev/cls
018

19. OPTIMIZATION
2020
LCP
Largest Contentful Paint
😃 😐 😢
2,5 сек 4,0 сек
CLS
Cumulative Layout Shift
😃 😐 😢
0,1 0,25
FID
First Input Delay
😃 😐 😢
100 мс 300 мс
(загрузка) (взаимодействие) (стабильность)
https://web.dev/defining-core-web-vitals-thresholds/
019

20. OPTIMIZATION
2020
Core Web Vitals
020

21. Core Web Vitals

22. OPTIMIZATION
2020
* CLI = Command Line Interface
* PSI = PageSpeed Insights
* CDT = Chrome Dev Tools
Core Web Vitals
022
Lighthouse
● “Лабораторная” загрузка
● Замена некоторых метрик (например, FID на TBT)
● Доступ из CLI, PSI, CDT*
github.com/GoogleChrome/lighthouse

23. OPTIMIZATION
2020
Core Web Vitals
023
Chrome User
Experience
Report
● Отчёты для origin по странам, устройствам и подключению
CrUX
g.co/chromeuxdash

24. OPTIMIZATION
2020
Core Web Vitals
024
● Данные из
○ Lighthouse (по заданному URL)
○ CrUX, если есть (по URL и Origin)
PageSpeed
Insights
developers.google.com/speed/pagespeed/insights/

25. OPTIMIZATION
2020
Core Web Vitals
025
● Данные по каждой странице из CrUX
Search
Console
search.google.com/search-console

26. OPTIMIZATION
2020
Core Web Vitals
026
● LCP, CLS и TBT в trace по скорости
Chrome
Dev Tools
developers.google.com/web/tools/chrome-devtools

27. OPTIMIZATION
2020
Core Web Vitals
027
● Real-time измерение CWV на странице
Web Vitals
Chrome
Extension
github.com/GoogleChrome/web-vitals-extension

28. OPTIMIZATION
2020
Core Web Vitals
028
● Ваш собственный UX отчёт
web-vitals.js
bit.ly/web-vitals-js

29. OPTIMIZATION
2020
В чём суть
Core Web Vitals
29
Поиск Google вводит новые сигналы с мая 2021-го
В список сигналов включают Core Web Vitals
Для оценки вашего сайта есть полный инструментарий
Пороги Core Web Vitals установлены эмпирически

30. OPTIMIZATION
2020
Что делать
Core Web Vitals
30
Скачивайте эти слайды со ссылками
Анализируйте свой сайт
Добивайтесь улучшений
bit.ly/web-vitals-optimization-2020

31. OPTIMIZATION
2020
Андрей Липатцев
Web Partnerships, Google Chrome
НАЗВАНИЕ ПРЕЗЕНТАЦИИ
Жмите колокольчик!
31
/andreylipattsev
@andrey_l1nd3n