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로 개선하기

99. 감사합니다
Mobile Performance Management Solution