Performance is one of the key factors in determining a product's user experience. It is very important that the site loads quickly, is responsive and interactive, and the content remains stable. I want to share why you need to monitor application performance, talk about Web Vitals metrics and tools for measuring them. I also want to tell you about examples of optimizations that can positively affect performance and what results it can bring.

2. Web Vitals
- инициатива компании Google
- набор указаний по улучшению пользовательского опыта в вебе

3. Почему это
важно?

4. Почему это важно?
- Пользовательский опыт напрямую влияет на бизнес показатели

5. Примеры компаний

6. Agenda доклада
- Prom + Sites
- Метрики производительности
- Инструменты для измерения производительности
- Примеры оптимизаций Web Vitals метрик
- Автоматизация мониторинга производительности

7. Prom
- маркетплейс
- 60k компаний
- 120m товаров
- 7k req/s

8. Sites
- сайт под каждого продавца
Prom
- 60k сайтов
- 120m товаров разбитых на
60k сайтов
- 5k req/s

9. Метрики производительности веб приложений
- Core Web Vitals
- Остальные Web Vitals
- Количество загружаемых ресурсов

10. Core Web Vitals

11. Other Web Vitals
TTFB
Time To First Byte
FCP
First Contentful Paint
SI
Speed Index
TTI
Time To Interactive
FP
First Paint
TBT
Total Blocking Time

12. Total Blocking Time

13. Time To Interactive

14. Загружаемые ресурсы
- html
- js
- css
- images
- fonts
- …

15. Что делать?
дальше

16. Что делать?
Что мы знаем:
- Производительность это важно
- Есть какие-то метрики
Что нам нужно:
- Понять состояние на сейчас
- Решить существующие проблемы
- Настроить мониторинг

17. Lab data и field data
- Lab data - данные симуляции
загрузки страницы
- Field data - данные с
устройств пользователей

18. С чего начать
- Lighthouse
- PageSpeed Insights

19. Lighthouse
- Lab data
- Доступен в виде:
- Вкладка Chrome DevTools
- NPM пакет
- Chrome extension

21. PageSpeed Insights
- Lab + Field data

22. Improvements time
- Как улучшить LCP
- Как улучшить CLS
- Как улучшить FID TBT

23. Предзагрузка наибольшего элемента
1. Понять, что является наибольшим элементом на странице

26. Предзагрузка наибольшего элемента
1. Понять, что является наибольшим элементом на странице
2. Предзагрузить

27. Предзагрузка наибольшего элемента
- С помощью HTML тега:
<link rel="preload" href="https://images.ua.prom.st/1185683070.jpg"as="image">
- С помощью HTTP header:
Link: </https://images.ua.prom.st/1185683070.jpg>;rel=preload; as=image

28. Предзагрузка наибольшего элемента
1. Понять, что является наибольшим элементом на странице
2. Предзагрузить
3. Убрать loading=`lazy` для картинок, если они являются LCP элементом

29. Предзагрузка наибольшего элемента
1. Понять, что является наибольшим элементом на странице
2. Предзагрузить
3. Убрать loading=`lazy` для картинок, если они являются LCP элементом
4. …………………

30. Предзагрузка наибольшего элемента
1. Понять, что является наибольшим элементом на странице
2. Предзагрузить
3. Убрать loading=`lazy` для картинок, если они являются LCP элементом
4. …………………
5. PROFIT

31. Загрузка third-party скриптов
- Использовать async/defer для скриптов
- Самые неважные скрипты - грузить после load события

32. Использовать async/defer для скриптов
- defer - выполняется после того, как документ загружен и обработан:
<script defer src="https://code.jivosite.com/script/widget/id"></script>
- async - сильный и независимый:
<script async src="https://www.google-analytics.com/analytics.js
"></script>

33. Загрузка скрипта после load события
<script type="application/javascript">
function initReCaptcha() {
var scriptNode = document.createElement('script');
scriptNode.src = 'https://www.google.com/recaptcha/api.js?render=token';
scriptNode.defer = true;
document.body.appendChild(
scriptNode)
}
window.addEventListener(
'load', function() {
if ('requestIdleCallback' in window) {
window.requestIdleCallback(
initReCaptcha, { timeout: 1000 });
} else {
initReCaptcha();
}
});
</script>

34. Ранее подключение к домену
- preconnect - для наиболее важных ресурсов, которые точно будут
запрошены:
<link rel="preconnect" href="https://images.ua.prom.st">
- dns-prefetch - для доменов, которые могут быть запрошены:
<link rel="dns-prefetch" href="https://www.googletagmanager.com">

35. В общем и целом
- Раздавать статику с основного домена
- Использовать HTTP2 Server Push для отправки важных ресурсов до того
как браузер их запросит.

36. Прыгающие картинки
- Явно указывать width/height
- Зарезервировать место для
картинки с помощью CSS

37. Скелетончики
- Дают предсказуемый
пользовательский опыт

38. JavaScript и Long Tasks
- Убирать неиспользуемый JS
- Избавляться от длинных задач (Long Tasks)

39. Code splitting
- React.lazy
const MyComponent = React.lazy(() => import('./MyComponent'));
- loadable
const MyComponent = loadable(() => import('./MyComponent));

40. Разбиваем по роутингу
const MainPage = loadable(() => import('./pages/Main'));
const AboutUsPage = loadable(() => import('./pages/AboutUs'));
const ProductListPage = loadable(() => import('./pages/ProductList'));
const ProductPage = loadable(() => import('./pages/Product'));
...

41. Динамические блоки
const PopularGroups = loadable(() => import('./views/PopularGroups'));
const HomePage = ({ showPopularGroups }) => (
<div>
<Header />
...
{showPopularGroups && <PopularGroups />}
...
<Footer />
<div/>
);

42. Code coverage
- CSS/JS coverage
- Ctrl + Shift + P → Show Coverage
- Settings → More tools → Coverage

43. Резюмируем
- Как улучшить LCP
- Предзагрузить наибольший контент и убрать loading=’lazy’
- async/defer атрибуты для third-party скриптов
- Раздавать статику с основного домена, использовать HTTP2 Sever Push для важных
ресурсов
- Как улучшить CLS
- Прыгающие картинки
- Скелетоны
- Как улучшить FID TBT
- Убирать неиспользуемый JS
- Избавляться от длинных задач

44. Автоматизация
прогонов тестов

45. Автоматизация
прогонов тестов
Зачем?

46. Product page performance score over last year

47. Автоматизация прогонов тестов
- Инструменты мониторинга:
- SpeedCurve для регулярных тестов и SpeedCurve API + Slack
- web-vitals.js + Google Analytics + web-vitals-report.web.app и DataStudio
- CrUX дашборд
- Немного о Search Console

48. SpeedCurve
- Автоматические прогоны
- Данные Lighthouse + WebPageTest
- Performance budget
- Сравнение разных версий приложения
- Сравнение конкурентов
- LUX - Live Users Experience
- Платный (1 месяц бесплатный)

49. Как интегрироваться
- Добавить проект (и конкурентов, если нужно)
- Добавить ссылки для тестов (разбить по типам страниц)
- Выбрать регулярность прогонов тестов и устройства

52. SpeedCurve API
- Позволяет получать
результаты тестов в формате
JSON
- Кейс использования -
генерация сводки прогонов
тестов в чатик слака

53. Реальные данные пользователей
- Трекать самому
- Брать у гугла

54. Трекать самому с помощью GoogleChrome/web-vitals
import { getCLS, getFID, getLCP } from 'web-vitals';
import api from '@evo/tracking/lib/api';
const sendToGA = ({ name, delta, id }) => {
api.gatrackQueueNi('Web Vitals', name, {
'label/label': id,
'value/value': Math.round(name === 'CLS' ? delta * 1000 : delta)
});
};
getCLS(sendToGA);
getFID(sendToGA);
getLCP(sendToGA);

55. DataStudio dashboard
Можно настроить фильтры по:
- Группе каналов
- Устройству
- Типу страницы
- …

56. Web Vitals Report
Позволяет сравнивать разные сегменты:
- Desktop Traffic vs Mobile Traffic
- New Users vs. Returning Users
- Bounced Sessions vs. Non-bounce
Sessions
- Converters vs. Non-converters
- Custom

57. Брать у гугла
- Chrome UX Report
- Search Console

58. Chrome UX Report
Доступен в виде:
- DataStudio dashboard
- BigQuery
- CrUX API:
https://chromeuxreport.google
apis.com/v1/records:queryReco
rd?key=API_KEY

59. Search Console

60. web.dev
https://web.dev/learn-web-vitals/

61. Just do it

62. Yes, you can