[2018] 프런트엔드 성능 최적화

© 2018 NHN FORWARD. All rights reserved.
프런트 엔드 성능 최적화
유동식
FE개발랩

GOAL
로딩
프런트 엔드
성능
렌더링
= +

CONTENTS
1. 로딩 최적화
 브라우저 기준 최적화의 문제점
 사용자 기준 최적화
 프리 렌더러
 PWA 사례
2. 렌더링 최적화
 레이아웃 스래싱
 가상돔
 웹 워커

4 / 73
프런트 엔드 화려한 변화
2018년 TOAST UI2009년 라이코스

5 / 73
느리다…
성능 문제
내용이 길어지면 느려집니다.
Internet Explorer 11에서 로딩이 느립니다.
때때로 멈춰요.
스크롤이 툭툭 끊어져요.
간혹 몇 분씩도 걸리는 것 같습니다 ㅜㅜ

6 / 73
성능 최적화
빠른 로딩 속도
사업지표 향상
사용성 개선
성능 개선 효과

7 / 73
Pinterest
https://medium.com/dev-channel/a-pinterest-progressive-web-app-performance-case-study-3bd6ed2e6154

8 / 73
빠르게 만들어 봅시다
개선 전 개선 후

로딩 최적화: 브라우저

10 / 73
Navigation Timing
Resource Timing(Network)

11 / 73
프런트 엔드 타이밍

12 / 73
Only Network Fast 3G
최적화 전 데모
시작 8초 로딩 완료4초 프로그레스바

13 / 73
Navigation Timing
start Load
8초
DOMContentLoaded
4초
LoadProcessing

14 / 73
문제 확인: Processing
3.88초 프로그레스 바
4.72초 의미 있는 화면
시작 8초 로딩 완료4초 프로그레스바

15 / 73
처리 순서: HTML, CSS, JS
문제: 빈 화면 원인 찾기

16 / 73
블록 리소스 발생
문제: 빈 화면 원인 찾기
CSS, JS로 인한: HTML 파싱 중단

17 / 73
주요 렌더링 경로
DOM Tree
CSSOM Tree
Render Tree

18 / 73
주요 렌더링 경로: HTML, CSS
HTML - DOM CSS- CSSOM Render Tree

19 / 73
블록 리소스: 자바스크립트와 CSS 파일
문제 해결: 블록 리소스 처리 최적화
CSS
DOM Tree
CSSOM Tree
Render Tree
자바스크립트

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>
...
<script type="text/javascript" src="bundle.js" async></script>
</head>
<head>에 JS: X
</body>에 JS: O
<head>에 JS async(defer): O
위치 변경 / async, defer

21 / 73
빠름
DOMContentLoaded: 자바스크립트
Processing
Processing
head: 3.88 초
async: 1.40 초
start DOMContentLoaded

22 / 73
주요 렌더링 경로: 스타일
Resource Timing(Network)

23 / 73
주요 렌더링 경로: 스타일
총 걸린 시간: 758ms
실제 다운로드: 191ms

24 / 73
...
...
</head>
HTML에 스타일을 직접 포함
CSS파일과 인라인 스타일
...
<style>
.icon-back-sky {
background-image: url(image/5c8cc826b16fd0b85fca7f58d30cba9f.png);
background-position: -1260px -224px;
width: 384px;
height: 224px;
}
...
</style>
...
</head>
외부 스타일
인라인 스타일

25 / 73
2x 빠름
DOMContentLoaded: 스타일
Processing
Processing
외부 스타일: 1.40 초
인라인 스타일: 0.72 초
start
DOMContentLoaded

26 / 73
보다 빠른 반응
주요 렌더링 경로 최적화 데모 비교
4초 프로그레스바 0.7초 프로그레스바

27 / 73
Navigation Timing: Resource, Processing, Load
브라우저 기준의 로딩 최적화 정리
로딩과 Critical Rendering Path 관계
로딩 성능: 자바스크립트 최적화(async, defer)
로딩 성능: 인라인 스타일 사용(Resource Timing: TTFB 줄이기)
빠른 DOMContentLoaded
빠른 로딩 프로그레스바

28 / 73
로딩 프로그레스바만 빠르다
브라우저 기준의 문제점: 데모 비교
4초 프로그레스바, 8초 완료 0.7초 프로그레스바, 8초 완료

29 / 73
빠른 DOMContentLoaded
start Load
8초
DOMContentLoaded
4초
LoadProcessing
DOMContentLoaded
0.7초
LoadProcessing

30 / 73
진짜 콘텐츠가 나오는 시점
start 진짜 콘텐츠 Load
8초
LoadProcessing
DOMContentLoaded
0.7초
의미 있는 콘텐츠
4.72초

31 / 73
Navigation Timing이 빠르면 정말 성능이 좋은 것인가?
로딩 최적화 기준: Navigation Timing
DOMContentLoaded load

33 / 73
CONTENTS
1. 로딩 최적화
 PWA 사례
 가상돔
 웹 워커

35 / 73
User Centric Performance Metrics
로딩 성능 기준: 사용자
First Paint First Meaningful Paint Time To Interactive

36 / 73
First Meaningful Paint: 사용자에게 필요한 정보를 빠르게
서버 사이드 렌더링
SPA
SSR

37 / 73
런타임 vs 빌드타임
서버 사이드 렌더링과 프리 렌더러
구분 서버 사이드 렌더링 프리 렌더러
콘텐츠
First Meaningful Paint O O
생성 시점
런타임 빌드타임

38 / 73
프리 렌더러: 웹팩 prerender-loader
8초 로딩 완료
1초
First Meaningful Paint
프로그레스바
… … … …

39 / 73
빠른 페인팅
start DOMContentLoaded
2.7초

40 / 73
First Meaningful Paint > Navigation Timing
사용자 기준의 로딩 최적화 정리
서버 사이드 렌더링
프리 렌더러와 FMP
데모: FMP 비교

42 / 73
로딩 성능 최적화: PWA
PRPL 패턴
WebPWA App
= +
Push Render Pre-cache Lazy-load

43 / 73
PWA
빠른 로딩 속도
사업지표 향상
사용성 개선
PWA: 로딩 성능 개선 효과

44 / 73
PWA 사례: BookMyShow
인도 티케팅 회사
https://developers.google.com/web/showcase/2017/bookmyshow
항목 값
월 방문자 5천 만명
앱 사이즈 440KB로 감소
로딩 타임 2.94초 미만
전환율 80% 증가

45 / 73
PWA 사례: MakeMyTrip
인도 여행 회사
https://developers.google.com/web/showcase/2017/make-my-trip
항목 값
월 방문자 8백 만명
로딩 속도 38% 개선
고객 세션 160% 증가
이탈율 20% 감소

46 / 73
브라우저 기준 최적화
• Navigation Timing, Critical Rendering Path
• DOMContentLoaded(JS, CSS), 빠른 로딩 프로그레스바
로딩 최적화 정리
사용자 기준 최적화
• First Meaningful Paint
• 서버사이드 렌더링, 프리 렌더러
PWA 사례로 본 로딩 성능 개선 효과
• BookMyShow, MakeMyTrip

48 / 73
CONTENTS
1. 로딩 최적화
 PWA 사례
 가상돔
 웹 워커

49 / 73
강제 동기 레이아웃
레이아웃 스래싱

50 / 73
DOM 조작으로 인한 변경 단계

51 / 73
DOM 조작으로 인한 변경 단계

52 / 73
개발자 도구: 한 프레임 약 70ms
레이아웃 스래싱
DOM CSSOM Layout

53 / 73
30FPS: 강제 동기 레이아웃 발생
offsetLeft
offsetTop
offsetWidth
…
…
DOM CSSOM Layout

54 / 73
60FPS: 강제 레이아웃 제거

55 / 73
개선된 렌더링 데모 비교

56 / 73
CONTENTS
1. 로딩 최적화
 PWA 사례
 가상돔
 웹 워커

57 / 73
위클리픽: Proxy와 가상돔을 사용한 데모
가상돔: DOM변경을 최소화

58 / 73
일부 엘리먼트만 바꾸고 싶다면 추가 코드가 필요
예> 초의 엘리먼트만 업데이트하고 싶을때
데모: DOM 직접 변경

59 / 73
알아서 바뀐 엘리먼트만 변경되는 편리함
snabbdom > 초의 엘리먼트만 업데이트됨
데모: 가상돔 사용

60 / 73
CONTENTS
1. 로딩 최적화
 PWA 사례
 가상돔
 웹 워커

61 / 73
60 FPS = 16ms/fr => 10ms/fr
프레임 속도

62 / 73
메인 스레드에서 무거운 작업

63 / 73
무거운 메인 스레드 데모
무거운 작업
오래 걸리는 프레임

64 / 73
웹팩 설정 파일
worker-loader 사용

66 / 73
워커 생성과 실행

67 / 73
Heavy Job
웹 워커
짧은 프레임 짧은 프레임
워커가 무거운 작업 담당

68 / 73
워커 사용 전 후 렌더링 데모 비교

69 / 73
로딩 최적화: 브라우저 기준 (DOMContentLoaded, load)
전체 정리
로딩 최적화: 사용자 기준 (Critical Rendering Path, FMP, SSR)
로딩 최적화: Progressive Web App 사례
렌더링 최적화: 레이아웃 스래싱
렌더링 최적화: 가상돔
렌더링 최적화: 웹 워커

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
참고 자료

71 / 73
자바스크립트 교육 / 전사 개발 가이드
FE개발랩
TOAST UI 핸즈온 랩에 참여해보세요.

Q&A

THANK YOU

[2018] 프런트엔드 성능 최적화

More Related Content

What's hot

Similar to [2018] 프런트엔드 성능 최적화

More from NHN FORWARD

[2018] 프런트엔드 성능 최적화