DEVKON_202312_????????? ?????? ??????? ?????????? ????????????? ???????v.01.pdf
- 1. IMQA ??? ???? ??? ??? ???? ? ???? ???? ??
- 2. ?? 1. ??? ?? ?? 2. Core Web Vitals 3. Largest Contentful Paint(LCP) 4. Cumulative Layout Shift(CLS) 5. First Input Delay(FID) 6. Interaction to Next Paint(INP)
- 3. ??(ÐÔÄÜ) ?? ??? ?? ???? ??
- 4. ?? + ??
- 6. APM(Application Performance Monitoring) ?? ?? ?? ?? Slow Query CPU Memory
- 11. ??? ???? ?? ?? ?
- 12. ??? ?? ???? ?? ?? ?? ?? ?? ??
- 13. If you can¡¯t measure it, You can¡¯t manage it. If you can¡¯t measure it, You can¡¯t improve it. Peter Drucker
- 14. ??? ????? ???
- 15. FID SI LCP CLS FCP TTFB TTI TBT
- 16. ?? ?? ?? ?? ? ?? ??? ????? ??? ?? ????? ??? ??.
- 17. ?? ?? ?? ?? ? ?? ? ??? ???? ?? ???? ??? ??.
- 18. ?? ?? ?? ?? ? ?? ?? ?? ???? ?? ??? ??? ??
- 23. Core Web Vitals(CWV) - 2020? 5? 8? ?? - ?? ????? ????? ????? ?? - ?? ???? ?? ??? ??? ?? - ?? ?? ?? - 2021.06.15 ??? ?? - 2022.02.22 ???? ??
- 24. Chrome User Experience Report(CrUX) ???? ?? ?? 28??? ??
- 27. 0 2.5 5 7.5 10 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 ??
- 28. 0 2.5 5 7.5 10 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 ?? 75???
- 29. 0 2.5 5 7.5 10 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 ??
- 30. 0 2.5 5 7.5 10 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 ?? 95???
- 38. Largest Contentful Paint(LCP) 1? ¡®?? ??¡¯ Information Visualizer, an Information Workspace Stuart K. Card , George G. Robertson , Jock D. Mackinlay
- 41. <img> ?? <svg> ?? <image> ?? ??? ???? ?? <video> ?? CSS? url() ??? ?? ?? ? ??? ?? ?? text? ??? block ?? ?? LCP ?? Content? ???? ??
- 42. LCP ?? Contents ? ?? ?? ?? ????? 0? ?? ?? ???? ?? ?? ????? ???? ???? ??
- 43. LCP? ?? ??? ??? ??? ????? Padding Over ow 300px 200px (Original 400px) (Original 300px)
- 44. LCP ?? ??? ???
- 45. LCP ?? ??
- 46. LCP ?? ?? ??? ?? ?? ??
- 47. LCP ?? ?? ??? ?? ?? ??
- 48. LCP ?? ?? ??? ?? ?? ??
- 49. LCP ?? ?? ??? ?? ?? ?? <img fetchpriority="high" src=/slideshow/devkon202312-v01pdf/265370758/"/light/0604/214.png"
- 50. LCP ?? ?? ??? ?? ?? ?? <link rel="preload" fetchpriority="high" as="image" href=/slideshow/devkon202312-v01pdf/265370758/"/light/0604/214.png" type="image/png">
- 51. LCP ?? ?? ??? ?? ?? ??
- 52. LCP ?? ?? ??? ?? ?? ?? ??? ?? ?(6ms) ??? ?? ?(2ms)
- 53. LCP ?? ?? ??? ?? ??
- 54. LCP ?? ?? ??? ?? ??
- 55. LCP ?? ?? ??? ?? ??
- 56. LCP ?? ?? TTFB ????
- 57. LCP ?? ?? ?? Performance Navigation Timing
- 58. ?? ??
- 59. ?? ?? TTFB - ???? ???? ?????? ???? ??
- 60. ?? ?? CDN (Content Delivery Network)
- 61. ?? ?? Caching
- 63. ?? ?? 103 early hint ??
- 64. ?? ?? 103 early hint ??
- 65. ?? ?? 103 early hint ??
- 70. CLS? ??? ?????? ?? ??? ?? ??? ?? ?? ?? impacted fraction(?? ??)? distance fraction(?? ??)? ??? ?? ?? ?? ? ?? ???? ??
- 71. CLS? ??? ?????? Impacted Fraction(?? ??) 50%
- 72. CLS? ??? ?????? Impacted Fraction(?? ??) 50% 25% 50% 75% = 0.75
- 73. CLS? ??? ?????? Distance Fraction(?? ??) 25% 25% = 0.25
- 74. CLS? ??? ?????? Layout Shift ? Impacted * Distance = 0.75 * 0.25 = 0.1875
- 75. CLS? ??? ??????
- 76. CLS ?? ? ???? ?? ??? ?? ??? ??? ?? ?? ??? ??? 500ms ??? ???? ??(hadRecentInput) animation? transition
- 77. CLS ?? ??? ?? ??
- 78. CLS? ?? ?? ??? ?? ??
- 79. CLS? ?? ?? ??? ?? ??
- 80. CLS? ?? ?? ??? ?? ??
- 81. CLS? ?? ?? ??? ?? ??
- 82. CLS? ?? ?? ??? ?? ??
- 83. CLS? ?? ?? ??? ?? ?? ?? ??
- 84. CLS? ?? ?? ??? ?? ??
- 91. First Input Delay(FID) The Perception of Causality Michotte 1962
- 96. Interaction to Next Paint(INP)
- 97. Interaction to Next Paint(INP)
- 98. ??? Good Need Improvement Poor 200ms 400ms Interaction to Next Paint(INP)
- 100. ???????
- 101. INP ? ?? ?? ??? ?? ???? ???? ?? ?? ??, ?, ???? ??? ??(hover, scroll)
- 102. ?? ??? ??
- 103. Body text (36pt) ????? ???
- 104. ????? ???
- 105. ????? ???
- 106. ????? ???
- 107. https://imqa.io support@imqa.io Copyright ? 2023 by ONYCOM Inc. All Rights Reserved. ? ??? ???(?)? ???? ???? ????? ?? ??? ?? ??????. ?? ??? ???? ?? ?? ?? ??? ?? ????, ?? ? ?? ??? ?????. young@onycom.com ?????