'Web performance metrics' BY ROMAN SAVITSKYI at OdessaJS'2020
0 likes228 views
Let's brainstorm web-productivity? It's easy to get lost in different sources - so how to choose them wisely? Main topics: Metrics, best practices, problems and solutions Вебпродуктивність. Що ще тут розповісти? Всі ми знаємо, що це важливо, як не отримувати таких проблем і до чого це призводить. Але якщо необхідно вирішити проблему серед тонни ресурсів важко обрати потрібний. Моя доповідь не тільки про рішення проблеми, а про находження інструментів та метрик для рішення проблеми. Чому саме ці метрики варто використовувати і як з цим жити. Метрики, практики, проблеми, рішення. Які різні поняття, а насправді це цепочки, які нам разом необхідно виставити в логічний ряд. Запрошую Вас побрейнштормити разом!
![NE R ME CNE R ME C
Props Value Metric
serverTiming [] -
nextHopProtocol http/1.1 -
responseStart/
End
34.94999999/
545.58999998
ms
23](https://image.slidesharecdn.com/webperformancemetricsodessajs1-200909184451/85/Web-performance-metrics-BY-ROMAN-SAVITSKYI-at-OdessaJS-2020-59-320.jpg)
![NE R ME CNE 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 [] -
23](https://image.slidesharecdn.com/webperformancemetricsodessajs1-200909184451/85/Web-performance-metrics-BY-ROMAN-SAVITSKYI-at-OdessaJS-2020-60-320.jpg)
![NE R ME CNE 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
23](https://image.slidesharecdn.com/webperformancemetricsodessajs1-200909184451/85/Web-performance-metrics-BY-ROMAN-SAVITSKYI-at-OdessaJS-2020-61-320.jpg)
![NE R ME CNE 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
23](https://image.slidesharecdn.com/webperformancemetricsodessajs1-200909184451/85/Web-performance-metrics-BY-ROMAN-SAVITSKYI-at-OdessaJS-2020-62-320.jpg)
![КА М І МІТ ИКА М І МІТ И
І МЕ КІ МЕ К
console.timestamp([label])
performance.mark(name)
console.time/timeEnd(name)
performance.measure(name, mark1, mark2)
35](https://image.slidesharecdn.com/webperformancemetricsodessajs1-200909184451/85/Web-performance-metrics-BY-ROMAN-SAVITSKYI-at-OdessaJS-2020-95-320.jpg)
'Web performance metrics' BY ROMAN SAVITSKYI at OdessaJS'2020
- 1. WE PE R CE ME CWE PE R CE ME C 1
- 2. Х О ЯХ О Я Infopulse team/tech lead BeerJS Zhytomyr OdessaJS / Frontend://zt Суддя DEV Challenge Спікер 2
- 3. С А С А В АТС А С А В АТ GOOGLEGOOGLE 2% повільніше2% повільніше ->-> 2% менше пошуків2% менше пошуків AMAZONAMAZON 100мс повільніше100мс повільніше ->-> 1% менше доходу1% менше доходу ABERDEEN GROUPABERDEEN GROUP 1c повільніше1c повільніше ->-> 11% менше переглядів11% менше переглядів 3
- 4. З ЧО ПО ?З ЧО ПО ? ТА БА П А Т ...ТА БА П А Т ... 4
- 5. З ЧО ПО ?З ЧО ПО ? ТА БА П А Т ...ТА БА П А Т ... Lazy loading 4
- 6. З ЧО ПО ?З ЧО ПО ? ТА БА П А Т ...ТА БА П А Т ... Minify CSSLazy loading 4
- 7. З ЧО ПО ?З ЧО ПО ? ТА БА П А Т ...ТА БА П А Т ... Predef, asyncLazy loading Minify CSS 4
- 8. З ЧО ПО ?З ЧО ПО ? ТА БА П А Т ...ТА БА П А Т ... Optimize images Lazy loading Minify CSS Predef, async 4
- 9. З ЧО ПО ?З ЧО ПО ? ТА БА П А Т ...ТА БА П А Т ... Uglify JS Lazy loading Minify CSS Predef, async Optimize images 4
- 10. З ЧО ПО ?З ЧО ПО ? ТА БА П А Т ...ТА БА П А Т ... Code splitting Lazy loading Minify CSS Predef, async Optimize images Uglify JS 4
- 11. З ЧО ПО ?З ЧО ПО ? ТА БА П А Т ...ТА БА П А Т ... Coverage Lazy loading Minify CSS Predef, async Optimize images Uglify JS Code splitting 4
- 12. З ЧО ПО ?З ЧО ПО ? ТА БА П А Т ...ТА БА П А Т ... gzip Lazy loading Minify CSS Predef, async Optimize images Uglify JS Code splitting Coverage 4
- 13. З ЧО ПО ?З ЧО ПО ? ТА БА П А Т ...ТА БА П А Т ... Webpack bundler analyzer Lazy loading Minify CSS Predef, async Optimize images Uglify JS Code splitting Coverage gzip 4
- 14. З ЧО ПО ?З ЧО ПО ? ТА БА П А Т ...ТА БА П А Т ... Lighthouse Lazy loading Minify CSS Predef, async Optimize images Uglify JS Code splitting Coverage gzip Webpack bundler analyzer 4
- 15. З ЧО ПО ?З ЧО ПО ? ТА БА П А Т ...ТА БА П А Т ... Webworkers Lazy loading Minify CSS Predef, async Optimize images Uglify JS Code splitting Coverage gzip Webpack bundler analyzer Lighthouse 4
- 16. З ЧО ПО ?З ЧО ПО ? ТА БА П А Т ...ТА БА П А Т ... RAIL Lazy loading Minify CSS Predef, async Optimize images Uglify JS Code splitting Coverage gzip Webpack bundler analyzer Lighthouse Webworkers 4
- 17. З ЧО ПО ?З ЧО ПО ? 5
- 18. З ЧО ПО ?З ЧО ПО ? 1. З розуміння, які метрики є в браузері 5
- 19. З ЧО ПО ?З ЧО ПО ? 2. На що вони впливають 1. З розуміння, які метрики є в браузері 5
- 20. З ЧО ПО ?З ЧО ПО ? 3. Які практики застосувати 1. З розуміння, які метрики є в браузері 2. На що вони впливають 5
- 21. З ЧО ПО ?З ЧО ПО ? 4. Як перевірити результати експерименту 1. З розуміння, які метрики є в браузері 2. На що вони впливають 3. Які практики застосувати 5
- 22. ЯКІ МЕ К ДІЙС О ВА ВІ?ЯКІ МЕ К ДІЙС О ВА ВІ? web.dev/metrics 6
- 23. ЯКІ МЕ К ДІЙС О ВА ВІ?ЯКІ МЕ К ДІЙС О ВА ВІ? OdesaJS 7
- 24. FI T CO N L PA (F )FI T CO N L PA (F ) 8
- 25. BE P A TBE P A T 9
- 26. BE P A TBE P A T Disable render-blocking resources 9
- 27. BE P A TBE P A T Minify CSS Disable render-blocking resources 9
- 28. BE P A TBE P A T Avoid an excessive DOM size Disable render-blocking resources Minify CSS 9
- 29. BE P A TBE P A T Reduce server response times (TTFB) Disable render-blocking resources Minify CSS Avoid an excessive DOM size 9
- 30. LA S CO N L PA (L )LA S CO N L PA (L ) IMG, SVG > IMAGE, VIDEO, BACKGROUND-URLIMG, SVG > IMAGE, VIDEO, BACKGROUND-URL 10
- 31. LA S CO N L PA (L )LA S CO N L PA (L ) 11
- 32. LA S CO N L PA (L )LA S CO N L PA (L ) 11
- 33. LA S CO N L PA (L )LA S CO N L PA (L ) 11
- 34. LA S CO N L PA (L )LA S CO N L PA (L ) 11
- 35. BE P A TBE P A T 12
- 36. BE P A TBE P A T Optimizing the Critical Rendering Path 12
- 37. BE P A TBE P A T Optimize CSS Optimizing the Critical Rendering Path 12
- 38. BE P A TBE P A T Optimize images Optimizing the Critical Rendering Path Optimize CSS 12
- 39. BE P A TBE P A T Optimize web fonts Optimizing the Critical Rendering Path Optimize CSS Optimize images 12
- 40. FI T IN DE (FI )FI T IN DE (FI ) 13
- 41. FI T IN DE (FI )FI T IN DE (FI ) 14
- 42. BE P A TBE P A T 15
- 43. BE P A TBE P A T Reduce the impact of third-party code 15
- 44. BE P A TBE P A T Reduce JavaScript execution time Reduce the impact of third-party code 15
- 45. BE P A TBE P A T Minimize main thread work Reduce the impact of third-party code Reduce JavaScript execution time 15
- 46. TI TO IN C I (T I)TI TO IN C I (T I) 16
- 47. TO B O K TI (T )TO B O K TI (T ) 17
- 48. CU TI LA S I T (C )CU TI LA S I T (C ) 18
- 49. CU TI LA S I T (C )CU TI LA S I T (C ) 19
- 50. CU TI LA S I T (C )CU TI LA S I T (C ) 20
- 51. BE P A TBE P A T 21
- 52. BE P A TBE P A T Always include size attributes on your images and video elements 21
- 53. BE P A TBE 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 21
- 54. BE P A TBE 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 21
- 55. NA TI TI G 2NA TI TI G 2 22
- 56. NE R ME CNE R ME C Props Value Metric 23
- 57. NE R ME CNE R ME C Props Value Metric nextHopProtocol http/1.1 - 23
- 58. NE R ME CNE R ME C Props Value Metric responseStart/ End 34.94999999/ 545.58999998 ms nextHopProtocol http/1.1 - 23
- 59. NE R ME CNE R ME C Props Value Metric serverTiming [] - nextHopProtocol http/1.1 - responseStart/ End 34.94999999/ 545.58999998 ms 23
- 60. NE R ME CNE 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 [] - 23
- 61. NE R ME CNE 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 23
- 62. NE R ME CNE 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 23
- 63. BE P A TBE P A T 24
- 64. BE P A TBE P A T Мініфікація JS 24
- 65. BE P A TBE P A T gzip 24
- 66. BE P A TBE P A T Webpack bundler analyzer 24
- 67. RE CE TI GRE CE TI G Redirect AppCache DNS TCP ResponseRequest startTime (redirectStart) (redirectEnd) fetchStart (domainLookupStart) (domainLookupEnd) (connectStart) (secureConnectionStart) responseEnd (connectEnd) (requestStart) (responseStart) 25
- 68. RE CE TI GRE CE TI G Props Value Metric performance.getEntriesByType('resource'); 26
- 69. RE CE TI GRE CE TI G Props Value Metric initiatorType img - performance.getEntriesByType('resource'); 26
- 70. RE CE TI GRE CE TI G Props Value Metric name http://jsfest.com.ua/assets/img/jscore.png - performance.getEntriesByType('resource'); initiatorType img - 26
- 71. RE CE TI GRE CE TI G Props Value Metric duration 1404.195000010077 ms performance.getEntriesByType('resource'); initiatorType img - name http://jsfest.com.ua/assets/img/jscore.png - 26
- 72. RE CE TI GRE CE TI G Props Value Metric transferSize 3476 bytes performance.getEntriesByType('resource'); initiatorType img - name http://jsfest.com.ua/assets/img/jscore.png - duration 1404.195000010077 ms 26
- 73. BE P A TBE P A T 27
- 74. BE P A TBE P A T Перевірка сторонніх ресурсів 27
- 75. BE P A TBE P A T Оптимізація зображень (imageOptim) 27
- 76. BE P A TBE P A T gif -> video 27
- 77. BE P A TBE P A T Lazy loading 27
- 78. PA TI GPA TI G Props Value Metric performance.getEntriesByType('paint'); 28
- 79. PA TI GPA TI G Props Value Metric duration 0 ms performance.getEntriesByType('paint'); 28
- 80. PA TI GPA TI G Props Value Metric startTime 3777.975000000879 ms performance.getEntriesByType('paint'); duration 0 ms 28
- 81. PA TI GPA TI G Props Value Metric name first-paint - performance.getEntriesByType('paint'); duration 0 ms startTime 3777.975000000879 ms 28
- 82. PA TI GPA TI G Props Value Metric name first-contentful-paint - performance.getEntriesByType('paint'); duration 0 ms startTime 3777.975000000879 ms name first-paint - 28
- 83. BE P A TBE P A T 29
- 84. BE P A TBE P A T Критичний CSS 29
- 85. BE P A TBE P A T Мініфікація CSS 29
- 86. BE P A TBE P A T Css triggers.com 29
- 87. BE P A TBE P A T Lazy loading 29
- 88. ПА ’ЯТПА ’ЯТ Props Time Metric jsHeapSizeLimit 2181038080 ms totalJSHeapSize 73547640 ms usedJSHeapSize 61779288 ms performance.memory; 30
- 89. BE P A TBE P A T Знаходження втрат пам’яті 31
- 90. HA WHA W Props Time hardwareConcurrency 4 downlink 10 effectiveType 4g rtt (roundTripTime) 0 saveData false navigator.hardwareConcurrency; navigator.connection; 32
- 91. BE P A TBE P A T 33
- 92. BE P A TBE P A T Webworkers 33
- 93. BE P A TBE P A T Обмежена версія для { saveData: true } 33
- 94. PE R CE.NO ()PE R CE.NO () КА М МЕ К В КО ІКА М МЕ К В КО І Монотонний Постійна частота Повертає мітку в мс Початок епохи - це PerformanceTiming.navigationStart 34
- 95. КА М І МІТ ИКА М І МІТ И І МЕ КІ МЕ К console.timestamp([label]) performance.mark(name) console.time/timeEnd(name) performance.measure(name, mark1, mark2) 35
- 96. ІН РУ ТІН РУ Т 36
- 97. ІН РУ ТІН РУ Т PageSpeedInsight 36
- 98. ІН РУ ТІН РУ Т WebPageTest 36
- 99. ІН РУ ТІН РУ Т Lighthouse 36
- 100. ЗА Н ЯЗА Н Я