Recommended
More Related Content
Similar to DEVKON_202312_웹페이지 성능 프론트 개발자만 잘알면되지 않나요v.01.pdf
Similar to DEVKON_202312_웹페이지 성능 프론트 개발자만 잘알면되지 않나요v.01.pdf (20)
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="/light/0604/214.png"
- 50. LCP 개선 하기 리소스 로드 지연 개선 <link rel="preload" fetchpriority="high" as="image" href="/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 감사합니다