РОМАН САВІЦЬКИЙ «Core Web Vitals» Online WDDay 2021 https://wdday.org/ Facebook: https://www.facebook.com/wdday.org Linkedin: https://www.linkedin.com/company/wdday

1. CORE WEB VITALS АБО ПРОДУКТИВНІСТЬ ПО-
CORE WEB VITALS АБО ПРОДУКТИВНІСТЬ ПО-
МИКОЛАЇВСЬКИ!
МИКОЛАЇВСЬКИ!
НАБЕРИ ЇСТИ, НЕ ЧЕКАЙ ВЕЧЕРІ!
НАБЕРИ ЇСТИ, НЕ ЧЕКАЙ ВЕЧЕРІ!
1

2. Х О Я
Х О Я
Спікер, який не любить онлайн
Спікер, який любить пиво
Організатор BeerJS Zhytomyr
2

3. ЧИ ВАЖЛИВИИЙ PERFORMANCE (ШВИДКОДІЯ)?
ЧИ ВАЖЛИВИИЙ PERFORMANCE (ШВИДКОДІЯ)?
3

4. GO
GO
PE R CE ВА В Й
PE R CE ВА В Й
1с повільніше
1с повільніше ->
-> 7%
7% конверсії
конверсії
2c завантаження
2c завантаження ->
-> 87% менше продажів
87% менше продажів
5c завантаження на мобільному
5c завантаження на мобільному ->
-> 25% менше доходу від
25% менше доходу від реклами
реклами
4

5. ПОГРАЄМО В ГРУ
ПОГРАЄМО В ГРУ
Kahoot.it
5

6. БУДЬ-ЯКА ГРА ОНЛАЙН
БУДЬ-ЯКА ГРА ОНЛАЙН
6

7. З ЧО ПО ?
З ЧО ПО ?
ТА БА П А Т ...
ТА БА П А Т ...
7

8. З ЧО ПО ?
З ЧО ПО ?
ТА БА П А Т ...
ТА БА П А Т ...
Lazy loading
7

9. З ЧО ПО ?
З ЧО ПО ?
ТА БА П А Т ...
ТА БА П А Т ...
Minify CSS
Lazy loading
7

10. З ЧО ПО ?
З ЧО ПО ?
ТА БА П А Т ...
ТА БА П А Т ...
Predef, async
Lazy loading Minify CSS
7

11. З ЧО ПО ?
З ЧО ПО ?
ТА БА П А Т ...
ТА БА П А Т ...
Optimize images
Lazy loading Minify CSS Predef, async
7

12. З ЧО ПО ?
З ЧО ПО ?
ТА БА П А Т ...
ТА БА П А Т ...
Uglify JS
Lazy loading Minify CSS Predef, async
Optimize images
7

13. З ЧО ПО ?
З ЧО ПО ?
ТА БА П А Т ...
ТА БА П А Т ...
Code splitting
Lazy loading Minify CSS Predef, async
Optimize images Uglify JS
7

14. З ЧО ПО ?
З ЧО ПО ?
ТА БА П А Т ...
ТА БА П А Т ...
Coverage
Lazy loading Minify CSS Predef, async
Optimize images Uglify JS Code splitting
7

15. З ЧО ПО ?
З ЧО ПО ?
ТА БА П А Т ...
ТА БА П А Т ...
gzip
Lazy loading Minify CSS Predef, async
Optimize images Uglify JS Code splitting
Coverage
7

16. З ЧО ПО ?
З ЧО ПО ?
ТА БА П А Т ...
ТА БА П А Т ...
Webpack bundler analyzer
Lazy loading Minify CSS Predef, async
Optimize images Uglify JS Code splitting
Coverage gzip
7

17. З ЧО ПО ?
З ЧО ПО ?
ТА БА П А Т ...
ТА БА П А Т ...
Lighthouse
Lazy loading Minify CSS Predef, async
Optimize images Uglify JS Code splitting
Coverage gzip Webpack bundler analyzer
7

18. З ЧО ПО ?
З ЧО ПО ?
ТА БА П А Т ...
ТА БА П А Т ...
Webworkers
Lazy loading Minify CSS Predef, async
Optimize images Uglify JS Code splitting
Coverage gzip Webpack bundler analyzer
Lighthouse
7

19. З ЧО ПО ?
З ЧО ПО ?
ТА БА П А Т ...
ТА БА П А Т ...
RAIL
Lazy loading Minify CSS Predef, async
Optimize images Uglify JS Code splitting
Coverage gzip Webpack bundler analyzer
Lighthouse Webworkers
7

20. 8

21. З ЧОГО ПОЧАТИ?
З ЧОГО ПОЧАТИ?
8

22. ЧИ ВАЖЛИВА ШВИДКОДІЯ ДЛЯ САЙТУ?
ЧИ ВАЖЛИВА ШВИДКОДІЯ ДЛЯ САЙТУ?
8

23. ЯКА МЕТРИКА ДЛЯ ВАС ВАЖЛИВА?
ЯКА МЕТРИКА ДЛЯ ВАС ВАЖЛИВА?
8

24. А ДЛЯ САЙТУ ЗВЕРНЕНЬ?
А ДЛЯ САЙТУ ЗВЕРНЕНЬ?
8

25. МОЖЛИВО ДЕКІЛЬКА МЕТРИК?
МОЖЛИВО ДЕКІЛЬКА МЕТРИК?
8

26. КО Т А Ь І МЕ К GO
КО Т А Ь І МЕ К GO
web.dev/metrics
9

27. EX S O
EX S O
Web Vitals Chrome Extension
10

28. WE VI S
WE VI S
11

29. WE VI S
WE VI S
Реалістичні метрики користувачів
11

30. WE VI S
WE VI S
З травня 2021 буде змінено ранжування (лише реальні данні)
Реалістичні метрики користувачів
11

31. WE VI S
WE VI S
Будуть додані нові метрики
Реалістичні метрики користувачів
З травня 2021 буде змінено ранжування (лише реальні данні)
11

32. WE VI S
WE VI S
Ера девелоперських метрик завершена
Реалістичні метрики користувачів
З травня 2021 буде змінено ранжування (лише реальні данні)
Будуть додані нові метрики
11

33. 12

34. FI T CO N L PA (F )
FI T CO N L PA (F )
13

35. LA S CO N L PA (L )
LA S CO N L PA (L )
IMG, SVG > IMAGE, VIDEO, BACKGROUND-URL
IMG, SVG > IMAGE, VIDEO, BACKGROUND-URL
14

36. LA S CO N L PA (L )
LA S CO N L PA (L )
15

37. LA S CO N L PA (L )
LA S CO N L PA (L )
15

38. LA S CO N L PA (L )
LA S CO N L PA (L )
15

39. LA S CO N L PA (L )
LA S CO N L PA (L )
15

40. BE P A T
BE P A T
16

41. BE P A T
BE P A T
Оптимізація зображень (imageOptim)
16

42. BE P A T
BE P A T
Критичний CSS
16

43. BE P A T
BE P A T
Мініфікація CSS
16

44. BE P A T
BE P A T
Optimize web fonts
16

45. FI T IN DE (FI )
FI T IN DE (FI )
17

46. FI T IN DE (FI )
FI T IN DE (FI )
18

47. BE P A T
BE P A T
19

48. BE P A T
BE P A T
Мініфікація JS
19

49. BE P A T
BE P A T
gzip
19

50. BE P A T
BE P A T
Webpack bundler analyzer
19

51. BE P A T
BE P A T
Перевірка сторонніх ресурсів
19

52. TI TO IN C I (T I)
TI TO IN C I (T I)
20

53. TO B O K TI (T )
TO B O K TI (T )
21

54. CU TI LA S I T (C )
CU TI LA S I T (C )
22

55. CU TI LA S I T (C )
CU TI LA S I T (C )
23

56. CU TI LA S I T (C )
CU TI LA S I T (C )
24

57. BE P A T
BE P A T
25

58. BE P A T
BE P A T
Lazy loading
25

59. BE P A T
BE P A T
Always include size attributes on your images and video elements
25

60. BE P A T
BE P A T
Never insert content above existing content, except in response to a
user interaction
Always include size attributes on your images and video elements
25

61. BE P A T
BE P A T
Prefer transform animations to animations of properties that trigger
layout changes
Always include size attributes on your images and video elements
Never insert content above existing content, except in response to a
user interaction
25

62. А ОС РА ІШЕ БУ К А ...
А ОС РА ІШЕ БУ К А ...
26

63. NA TI TI G 2
NA TI TI G 2
27

64. NE R ME C
NE R ME C
Props Value Metric
28

65. NE R ME C
NE R ME C
Props Value Metric
nextHopProtocol http/1.1 -
28

66. NE R ME C
NE R ME C
Props Value Metric
responseStart/
End
34.94999999/
545.58999998
ms
nextHopProtocol http/1.1 -
28

67. NE R ME C
NE R ME C
Props Value Metric
serverTiming [] -
nextHopProtocol http/1.1 -
responseStart/
End
34.94999999/
545.58999998
ms
28

68. NE R ME C
NE R ME C
Props Value Metric
unloadEventStart/
End
446.284999998/
446.359999998
ms
nextHopProtocol http/1.1 -
responseStart/
End
34.94999999/
545.58999998
ms
serverTiming [] -
28

69. NE R ME C
NE R ME C
Props Value Metric
domContentLoadedStart/
End
4011.7350000/
4838.9999999
ms
nextHopProtocol http/1.1 -
responseStart/
End
34.94999999/
545.58999998
ms
serverTiming [] -
unloadEventStart/
End
446.284999998/
446.359999998
ms
28

70. NE R ME C
NE R ME C
Props Value Metric
loadEventStart/
End
10084.1550000/
10178.58999999
ms
nextHopProtocol http/1.1 -
responseStart/
End
34.94999999/
545.58999998
ms
serverTiming [] -
unloadEventStart/
End
446.284999998/
446.359999998
ms
domContentLoadedStart/
End
4011.7350000/
4838.9999999
ms
28

71. RE CE TI G
RE CE TI G
Redirect AppCache DNS TCP Response
Request
startTime
(redirectStart)
(redirectEnd)
fetchStart
(domainLookupStart)
(domainLookupEnd)
(connectStart)
(secureConnectionStart)
responseEnd
(connectEnd)
(requestStart)
(responseStart)
29

72. RE CE TI G
RE CE TI G
Props Value Metric
performance.getEntriesByType('resource');
30

73. RE CE TI G
RE CE TI G
Props Value Metric
initiatorType img -
performance.getEntriesByType('resource');
30

74. RE CE TI G
RE CE TI G
Props Value Metric
name http://mywebtech.com.ua/assets/img/jscore.png -
performance.getEntriesByType('resource');
initiatorType img -
30

75. RE CE TI G
RE CE TI G
Props Value Metric
duration 1404.195000010077 ms
performance.getEntriesByType('resource');
initiatorType img -
name http://mywebtech.com.ua/assets/img/jscore.png -
30

76. RE CE TI G
RE CE TI G
Props Value Metric
transferSize 3476 bytes
performance.getEntriesByType('resource');
initiatorType img -
name http://mywebtech.com.ua/assets/img/jscore.png -
duration 1404.195000010077 ms
30

77. PA TI G
PA TI G
Props Value Metric
performance.getEntriesByType('paint');
31

78. PA TI G
PA TI G
Props Value Metric
duration 0 ms
performance.getEntriesByType('paint');
31

79. PA TI G
PA TI G
Props Value Metric
startTime 3777.975000000879 ms
performance.getEntriesByType('paint');
duration 0 ms
31

80. PA TI G
PA TI G
Props Value Metric
name first-paint -
performance.getEntriesByType('paint');
duration 0 ms
startTime 3777.975000000879 ms
31

81. PA TI G
PA TI G
Props Value Metric
name first-contentful-paint -
performance.getEntriesByType('paint');
duration 0 ms
startTime 3777.975000000879 ms
name first-paint -
31

82. ТА БУ ЩО ГА
ТА БУ ЩО ГА
32

83. ПА ’ЯТ
ПА ’ЯТ
Props Time Metric
jsHeapSizeLimit 2181038080 ms
totalJSHeapSize 73547640 ms
usedJSHeapSize 61779288 ms
performance.memory;
33

84. BE P A T
BE P A T
Знаходження втрат пам’яті
34

85. HA W
HA W
Props Time
hardwareConcurrency 4
effectiveType 4g
saveData false
navigator.hardwareConcurrency;
navigator.connection;
35

86. BE P A T
BE P A T
36

87. BE P A T
BE P A T
Webworkers
36

88. BE P A T
BE P A T
Обмежена версія для
{ saveData: true }
36

89. 37

90. ДА П И Д З ВА СИ
ДА П И Д З ВА СИ
38

91. ЗА Н Я
ЗА Н Я

180. 39