빠른 웹페이지 만들기 - 당신의 웹페이지는 몇 점인가요?

[IMQA] 빠른 웹페이지 만들기 - 당신의 웹페이지는 몇 점인가요? from IMQA

• 1. 당신의 웹페이지는 몇점인가요? 남상우 프론트엔드 개발자 본 문서는 어니컴(주)이 발행하는 문서이며 저작권법에 의해 보호를 받는 저작물입니다. 원문 출처를 표기하는 조건 하에 원문 그대로 공유 가능하며, 수정 및 영리 사용은 금지됩니다. Copyright © 2023 by ONYCOM. Inc. All Rights Reserved.
• 2. 목차 1. 웹 성능 개선은 무엇을 의미할까요? 2. 웹 성능 알아보기 3. Core Web Vitals 4. Lighthouse 5. Lighthouse로 개선하기
• 3. 웹 성능 개선은 무엇을 의미할까요?
• 4. 빠르게 페이지를 보이게 만드는 것? 단지 빠르면 끝일까?
• 5. 웹 성능 개선은 무엇을 의미할까요? 웹사이트를 랜더링 하는데 필요한 파일을 다운로드하는 데 걸리는 시간 1. 전체 로드 시간 단축
• 6. 웹 성능 개선은 무엇을 의미할까요? 사이트가 로드를 시작한 후사용 가능한 시간 2. 사이트를 빠르게 사용가능하게 준비
• 7. 웹 성능 개선은 무엇을 의미할까요? 사이트가 안정적이고 동작이 매끄럽고 동작이 잘 작동하는지 3. 매끄러움과 상호작용성 Poor Responsiveness Good Responsiveness
• 8. 웹 성능 개선은 무엇을 의미할까요? 사용자 경험에서 실측한 시간보다 느끼는 사용자 체감시간 4. 체감 성능
• 9. 웹 성능 개선은 무엇을 의미할까요? 받은 리소스를 빨리 그리는 로딩 성능 렌더링 성능 리소스를 빨리 받는
• 10. 측정이 필요하다. 로딩 성능과 렌더링 성능을 알기 위해서는
• 11. 성능을 측정하고 보고하기 위해 수년간 다양한 도구를 지원해온 기업의 브라우저 크롬 브라우저
• 12. 측정이 필요하다. 크롬 개발자 도구
• 13. 로딩 성능 웹 성능 알아보기 페이지가 렌더링 되기 전까지 리소스를 불러오는 성능 네트워크, 리소스 압축에 따른 영향을 받음 로딩 성능
• 14. 로딩 성능 웹 성능 알아보기 개발자 도구의 네트워크탭에서 리소스가 불러와지는 시간을 확인 할 수 있다.
• 15. 로딩 성능 웹 성능 알아보기 측정한 리소스의 폭포그래프에 마우스를 올리거나 클릭하여 Timing 탭에서 확인가능하다.
• 16. 로딩 성능 웹 성능 알아보기 측정한 리소스의 폭포그래프에 마우스를 올리거나 클릭하여 Timing 탭에서 확인가능하다.
• 17. 로딩 성능 웹 성능 알아보기 측정한 리소스의 폭포그래프에 마우스를 올리거나 클릭하여 Timing 탭에서 확인가능하다.
• 18. 로딩 성능 웹 성능 알아보기 측정한 리소스의 폭포그래프에 마우스를 올리거나 클릭하여 Timing 탭에서 확인가능하다.
• 19. 로딩 성능 웹 성능 알아보기 측정한 리소스의 폭포그래프에 마우스를 올리거나 클릭하여 Timing 탭에서 확인가능하다.
• 20. 로딩 성능 웹 성능 알아보기 측정한 리소스의 폭포그래프에 마우스를 올리거나 클릭하여 Timing 탭에서 확인가능하다.
• 21. 로딩 성능 웹 성능 알아보기 PerformanceNavigationTiming
• 22. TTFB - 네트워크 요청시에 브라우저까지 도달하는 시간 로딩 성능 웹 성능 알아보기
• 23. 네트워크 개선 및 리다이렉트 방지, 캐시 적극적으로 사용 로딩 성능 웹 성능 알아보기
• 24. 로딩 성능 웹 성능 알아보기 캐시 적용 전
• 25. 로딩 성능 웹 성능 알아보기 캐시 적용 후
• 26. 로딩 성능 웹 성능 알아보기 리소스 압축 및 최적화
• 27. 로딩 성능 웹 성능 알아보기 리소스 압축 전(6ms) 리소스 압축 후(2ms)
• 28. 렌더링 성능 웹 성능 알아보기 받아온 리소스와 DOM이 그려지는 성능 렌더링 성능
• 29. 렌더링 성능 웹 성능 알아보기 그려지는 과정에 대해서 우리는 알아야한다.
• 30. 렌더링 성능 웹 성능 알아보기
• 31. 렌더링 성능 웹 성능 알아보기
• 32. 렌더링 성능 웹 성능 알아보기 빨리 그리기위해서 해당 과정을 빠르게 수행
• 33. 렌더링 성능 웹 성능 알아보기 빨리 그리기위해서 해당 과정을 빠르게 수행
• 34. 렌더링 성능 웹 성능 알아보기 빨리 그리기위해서 해당 과정을 빠르게 수행
• 35. 렌더링 성능 웹 성능 알아보기 Javascript 영향을 받음
• 36. 렌더링 성능 웹 성능 알아보기 스크립트의 DOM조작으로 인해 parse과정이 두번생김 Javascript 파일 동작
• 37. 렌더링 성능 웹 성능 알아보기 Body 마지막에 있는 js파일 Img 엘리먼트를 만들어 넣는 모습
• 38. 렌더링 성능 웹 성능 알아보기 Parse 과정이 두번생기지 않는 모습
• 39. 렌더링 성능 웹 성능 알아보기 Style 영향받음
• 40. 렌더링 성능 웹 성능 알아보기 Render tree가 그려지는 과정
• 41. 렌더링 성능 웹 성능 알아보기 Render tree가 그려지는 과정
• 42. 렌더링 성능 웹 성능 알아보기 Render tree가 그려지는 과정
• 43. 렌더링 성능 웹 성능 알아보기 브라우저에서 레이어가 만들어진 모습
• 44. 렌더링 성능 웹 성능 알아보기 생략되는 과정
• 45. 렌더링 성능 웹 성능 알아보기 브라우저마다 영향을 주는 스타일이 다름
• 46. 렌더링 성능 웹 성능 알아보기
• 47. 받은 리소스를 빨리 그리는 로딩 성능 렌더링 성능 리소스를 빨리 받는 ?
• 48. 사용자 경험
• 49. Core Web Vitals 사용자 경험을 개선하는 지표
• 50. Core Web Vitals 시각적인 안정성 빠른 상호작용 빠른 로딩 CLS Cumulative Layout Shift FID First Input Delay LCP Largest Contentful Paint 사용자 경험을 최적화하는 핵심 지표 컨텐츠가 빠르게 나타나며, 빠른 반응의 상호작용과 안정적인 레이아웃은 사용자에게 좋은 경험을 안겨준다.
• 51. 이 지표들도 측정방법이 있겠지요?
• 52. Core Web Vitals
• 53. Core Web Vitals
• 54. Lighthouse 로딩 성능 + 렌더링 성능 + 사용자 경험 = 몇점?
• 55. 분석 방법 Lighthouse
• 56. Lighthouse Navigation Timespan Snapshot 라이트하우스 모든 지표 측정 가능 페이지 로딩 직후 접근성분석 단일 페이지 앱 분석하기 지원안함 시간범위에 따른 레이아웃 변화 측정 전체 성능 점수 측정 불가능 페이지 상태 분석 불가능 현재 상태에서 페이지 분석 현재 페이지의 DOM, 외부 요인 분석 불가능 분석 방법
• 57. Lighthouse 분석 방법
• 58. Lighthouse 분석 방법
• 59. Lighthouse
• 60. Lighthouse
• 61. Lighthouse
• 62. Lighthouse 페이지 로딩이 시작한 순간부터 첫번째 콘텐츠가 일부 그려진 시점 빈 페이지보다 일부라도 그려지면 사용자는 빠르게 느낀다. FCP(First Contentful Paint) FCP - First Contentful Paint
• 63. Lighthouse 페이지가 그려지는 중 시각적으로 표시되는 속도를 나타내는 지표 SI(Speed Index) 0.5초 1초 1.5초 2초 SI - Speed Index
• 64. Lighthouse 사용자의 상호작용이 안정적으로 응답할 수 있는 시점까지의 시간 TTI(Time to Interactive) TTI - Time to Interactive
• 65. Lighthouse 오랜 시간 메인스레드를 독점하는 JS코드, 50ms 기준으로 작업시간이 긴 경우 Long task TTI - Time to Interactive
• 66. Lighthouse 사용자의 상호작용이 안정적으로 응답할 수 있는 시점까지의 시간 TTI(Time to Interactive) TTI - Time to Interactive
• 67. Lighthouse 사용자의 상호작용이 안정적으로 응답할 수 있는 시점까지의 시간 TTI(Time to Interactive) TTI - Time to Interactive
• 68. Lighthouse 사용자의 상호작용이 안정적으로 응답할 수 있는 시점까지의 시간 TTI(Time to Interactive) TTI - Time to Interactive
• 69. Lighthouse 사용자의 상호작용이 안정적으로 응답할 수 있는 시점까지의 시간 TTI(Time to Interactive) TTI - Time to Interactive
• 70. Lighthouse
• 71. LCP - Largest Contentful Paint Lighthouse Lagest Contentful Paint 같은 경우 화면에서 가장 큰 컨텐츠가 빠르게 나올 수록 높은 점수를 준다. 가장 큰 컨텐츠는 가장 중요한 컨텐츠이며 시각적으로 큰영역이기에 사용자가 빠르다고 느낍니다.
• 72. TBT - Total Blocking Time Lighthouse 메인 스레드가 입력 응답을 막을 만큼 오래 차단되었을 때 FCP, TTI 사이의 총 시간을 측정
• 73. TBT - Total Blocking Time Lighthouse Long task의 50ms 제외한 나머지 시간
• 74. CLS - Cumulative Layout Shift Lighthouse 레이아웃은 사용자에게 의도치않는 결과를 가져오게 만듭니다. CLS는 화면기준으로 특정 영역이 이동한 거리로 계산합니다.
• 75. CLS - Cumulative Layout Shift Lighthouse 버튼이 생성되면서 화면에서 반을 차지하고있는 초록박스가 이동됩니다. 버튼이 생성되면서 아래로 이동된 수치와 초록박스의 영향되는 영역을 계산 보여지는 화면 기준 초록박스 영역 50% x 아래로 이동된 수치 14%를 계산해서 0.5x0.14 = 0.07
• 76. CLS - Cumulative Layout Shift Lighthouse 예상한 레이아웃 이동과 예상치 못한 레이아웃 이동 사용자 이벤트(입력) 기준으로 500ms가 지나면 예상치 못한 레이아웃이동
• 77. 라이트하우스 사용하여 개선하기
• 78. 개선해보기 Lighthouse로 개선하기
• 79. 개선해보기 Lighthouse로 개선하기
• 80. 개선해보기 Lighthouse로 개선하기
• 81. 개선해보기 Lighthouse로 개선하기
• 82. 개선해보기 Lighthouse로 개선하기
• 83. 개선해보기 Lighthouse로 개선하기
• 84. 개선해보기 Lighthouse로 개선하기
• 85. 개선해보기 Lighthouse로 개선하기
• 86. 개선해보기 Lighthouse로 개선하기 보여지지 않는 영역 보여지지 않는 영역
• 87. 개선해보기 Lighthouse로 개선하기 이미지 크기 개선 전 이미지 크기 개선 후
• 88. 개선해보기 Lighthouse로 개선하기
• 89. 개선해보기 Lighthouse로 개선하기
• 90. 개선해보기 Lighthouse로 개선하기 Cache storage
• 91. 개선해보기 Lighthouse로 개선하기 캐시 설정 전 js파일
• 92. 개선해보기 Lighthouse로 개선하기 Nginx 설정 적용된 js
• 93. 개선해보기 Lighthouse로 개선하기 캐시 설정 이후 점수
• 94. 개선해보기 Lighthouse로 개선하기 CLS - footer 이동
• 95. 개선해보기 Lighthouse로 개선하기
• 96. 개선해보기 Lighthouse로 개선하기 불러온 블로그 글 불러오기 전 블로그 글
• 97. 개선해보기 Lighthouse로 개선하기
• 98. 개선해보기 Lighthouse로 개선하기