Contenu connexe Similaire à [2018] 프런트엔드 성능 최적화 (20) [2018] 프런트엔드 성능 최적화1. © 2018 NHN FORWARD. All rights reserved.
프런트 엔드 성능 최적화
유동식
FE개발랩
3. CONTENTS
1. 로딩 최적화
브라우저 기준 최적화의 문제점
사용자 기준 최적화
프리 렌더러
PWA 사례
2. 렌더링 최적화
레이아웃 스래싱
가상돔
웹 워커
5. 5 / 73
느리다…
성능 문제
내용이 길어지면 느려집니다.
Internet Explorer 11에서 로딩이 느립니다.
때때로 멈춰요.
스크롤이 툭툭 끊어져요.
간혹 몇 분씩도 걸리는 것 같습니다 ㅜㅜ
6. 6 / 73
성능 최적화
빠른 로딩 속도
사업지표 향상
사용성 개선
성능 개선 효과
12. 12 / 73
Only Network Fast 3G
최적화 전 데모
시작 8초 로딩 완료4초 프로그레스바
14. 14 / 73
문제 확인: Processing
3.88초 프로그레스 바
4.72초 의미 있는 화면
시작 8초 로딩 완료4초 프로그레스바
16. 16 / 73
블록 리소스 발생
문제: 빈 화면 원인 찾기
CSS, JS로 인한: HTML 파싱 중단
17. 17 / 73
주요 렌더링 경로
DOM Tree
CSSOM Tree
Render Tree
18. 18 / 73
주요 렌더링 경로: HTML, CSS
HTML - DOM CSS- CSSOM Render Tree
19. 19 / 73
블록 리소스: 자바스크립트와 CSS 파일
문제 해결: 블록 리소스 처리 최적화
CSS
DOM Tree
CSSOM Tree
Render Tree
자바스크립트
20. 20 / 73
...
<link href="bundle.css" rel="stylesheet">
<script type="text/javascript" src="bundle.js"></script>
</head>
자바스크립트 로드 시점 최적화
<body>
...
<script type="text/javascript" src="bundle.js"></script>
</body>
...
<link href="bundle.css" rel="stylesheet">
<script type="text/javascript" src="bundle.js" async></script>
</head>
<head>에 JS: X
</body>에 JS: O
<head>에 JS async(defer): O
위치 변경 / async, defer
22. 22 / 73
주요 렌더링 경로: 스타일
Resource Timing(Network)
23. 23 / 73
주요 렌더링 경로: 스타일
총 걸린 시간: 758ms
실제 다운로드: 191ms
24. 24 / 73
...
<link href="bundle.css" rel="stylesheet">
...
</head>
HTML에 스타일을 직접 포함
CSS파일과 인라인 스타일
...
<style>
.icon-back-sky {
background-image: url(image/5c8cc826b16fd0b85fca7f58d30cba9f.png);
background-position: -1260px -224px;
width: 384px;
height: 224px;
}
...
</style>
...
</head>
외부 스타일
인라인 스타일
25. 25 / 73
2x 빠름
DOMContentLoaded: 스타일
Processing
Processing
외부 스타일: 1.40 초
인라인 스타일: 0.72 초
start
DOMContentLoaded
26. 26 / 73
보다 빠른 반응
주요 렌더링 경로 최적화 데모 비교
4초 프로그레스바 0.7초 프로그레스바
27. 27 / 73
Navigation Timing: Resource, Processing, Load
브라우저 기준의 로딩 최적화 정리
로딩과 Critical Rendering Path 관계
로딩 성능: 자바스크립트 최적화(async, defer)
로딩 성능: 인라인 스타일 사용(Resource Timing: TTFB 줄이기)
빠른 DOMContentLoaded
빠른 로딩 프로그레스바
28. 28 / 73
로딩 프로그레스바만 빠르다
브라우저 기준의 문제점: 데모 비교
4초 프로그레스바, 8초 완료 0.7초 프로그레스바, 8초 완료
29. 29 / 73
빠른 DOMContentLoaded
start Load
8초
DOMContentLoaded
4초
LoadProcessing
DOMContentLoaded
0.7초
LoadProcessing
30. 30 / 73
진짜 콘텐츠가 나오는 시점
start 진짜 콘텐츠 Load
8초
LoadProcessing
DOMContentLoaded
0.7초
의미 있는 콘텐츠
4.72초
31. 31 / 73
Navigation Timing이 빠르면 정말 성능이 좋은 것인가?
로딩 최적화 기준: Navigation Timing
DOMContentLoaded load
33. 33 / 73
CONTENTS
1. 로딩 최적화
브라우저 기준 최적화의 문제점
사용자 기준 최적화
프리 렌더러
PWA 사례
2. 렌더링 최적화
레이아웃 스래싱
가상돔
웹 워커
35. 35 / 73
User Centric Performance Metrics
로딩 성능 기준: 사용자
First Paint First Meaningful Paint Time To Interactive
36. 36 / 73
First Meaningful Paint: 사용자에게 필요한 정보를 빠르게
서버 사이드 렌더링
SPA
SSR
37. 37 / 73
런타임 vs 빌드타임
서버 사이드 렌더링과 프리 렌더러
구분 서버 사이드 렌더링 프리 렌더러
콘텐츠
First Meaningful Paint O O
생성 시점
런타임 빌드타임
38. 38 / 73
프리 렌더러: 웹팩 prerender-loader
8초 로딩 완료
1초
First Meaningful Paint
프로그레스바
… … … …
39. 39 / 73
빠른 페인팅
start DOMContentLoaded
2.7초
First Meaningful Paint
First Meaningful Paint
40. 40 / 73
First Meaningful Paint > Navigation Timing
사용자 기준의 로딩 최적화 정리
서버 사이드 렌더링
프리 렌더러와 FMP
데모: FMP 비교
42. 42 / 73
로딩 성능 최적화: PWA
PRPL 패턴
WebPWA App
= +
Push Render Pre-cache Lazy-load
44. 44 / 73
PWA 사례: BookMyShow
인도 티케팅 회사
https://developers.google.com/web/showcase/2017/bookmyshow
항목 값
월 방문자 5천 만명
앱 사이즈 440KB로 감소
로딩 타임 2.94초 미만
전환율 80% 증가
45. 45 / 73
PWA 사례: MakeMyTrip
인도 여행 회사
https://developers.google.com/web/showcase/2017/make-my-trip
항목 값
월 방문자 8백 만명
로딩 속도 38% 개선
고객 세션 160% 증가
이탈율 20% 감소
46. 46 / 73
브라우저 기준 최적화
• Navigation Timing, Critical Rendering Path
• DOMContentLoaded(JS, CSS), 빠른 로딩 프로그레스바
로딩 최적화 정리
사용자 기준 최적화
• First Meaningful Paint
• 서버사이드 렌더링, 프리 렌더러
PWA 사례로 본 로딩 성능 개선 효과
• BookMyShow, MakeMyTrip
48. 48 / 73
CONTENTS
1. 로딩 최적화
브라우저 기준 최적화의 문제점
사용자 기준 최적화
프리 렌더러
PWA 사례
2. 렌더링 최적화
레이아웃 스래싱
가상돔
웹 워커
50. 50 / 73
DOM 조작으로 인한 변경 단계
HTML - DOM CSS- CSSOM Render Tree
51. 51 / 73
DOM 조작으로 인한 변경 단계
HTML - DOM CSS- CSSOM Render Tree
52. 52 / 73
개발자 도구: 한 프레임 약 70ms
레이아웃 스래싱
DOM CSSOM Layout
53. 53 / 73
30FPS: 강제 동기 레이아웃 발생
강제 동기 레이아웃
offsetLeft
offsetTop
offsetWidth
…
…
DOM CSSOM Layout
56. 56 / 73
CONTENTS
1. 로딩 최적화
브라우저 기준 최적화의 문제점
사용자 기준 최적화
프리 렌더러
PWA 사례
2. 렌더링 최적화
레이아웃 스래싱
가상돔
웹 워커
58. 58 / 73
일부 엘리먼트만 바꾸고 싶다면 추가 코드가 필요
예> 초의 엘리먼트만 업데이트하고 싶을때
데모: DOM 직접 변경
59. 59 / 73
알아서 바뀐 엘리먼트만 변경되는 편리함
snabbdom > 초의 엘리먼트만 업데이트됨
데모: 가상돔 사용
60. 60 / 73
CONTENTS
1. 로딩 최적화
브라우저 기준 최적화의 문제점
사용자 기준 최적화
프리 렌더러
PWA 사례
2. 렌더링 최적화
레이아웃 스래싱
가상돔
웹 워커
69. 69 / 73
로딩 최적화: 브라우저 기준 (DOMContentLoaded, load)
전체 정리
로딩 최적화: 사용자 기준 (Critical Rendering Path, FMP, SSR)
로딩 최적화: Progressive Web App 사례
렌더링 최적화: 레이아웃 스래싱
렌더링 최적화: 가상돔
렌더링 최적화: 웹 워커
70. 70 / 73
그림
TOAST UI - https://ui.toast.com/
핀터레스트 사례 - https://medium.com/dev-channel/a-pinterest-progressive-web-app-performance-case-study-3bd6ed2e6154
PRPL - https://developers.google.com/web/fundamentals/performance/prpl-pattern/
PWA 사례 - https://www.pwastats.com/
Navigation Timing Model - https://www.w3.org/TR/navigation-timing-2/
First Meaningful Paint – AddyOsmani - Google https://twitter.com/addyosmani/status/760490332983177216
데모 소스 – https://gitlab.com/fedevlab/2018-nhn-forward-demo
데모 - https://dongsik-yoo.github.io/2018-nhn-forward-demo/index.html
Proxy와 가상돔을 사용하여 나만의 프레임워크 만들기 - https://meetup.toast.com/posts/158
참고 자료
73. © 2018 NHN FORWARD. All rights reserved.
THANK YOU