Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Upcoming SlideShare
What to Upload to SlideShare
What to Upload to SlideShare
Loading in …3
×
1 of 73

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

6

Share

Download to read offline

커지고 있는 웹 애플리케이션에서 성능은 점점 더 중요한 요소가 되고 있습니다. 사용자와의 접점에서 긴밀한 상호작용을 요구하는 프런트엔드, 보다 빠르게 로딩되고 부드럽게 구동되어야 하는 웹 애플리케이션을 만들기 위해 노력하는 분들과 함께 이야기를 나눕니다.

목차
1. 로딩 최적화 방법
2. PWA 케이스 소개
3. 렌더링 최적화 방법

대상
- 프런트엔드 성능 개선을 시작하고 싶은 개발자
- 느린 웹 페이지를 빠르게 만드는 데 관심 있는 프런트엔드 개발자
- 로딩/렌더링 최적화에 대한 힌트를 얻고 싶은 개발자

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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

  1. 1. © 2018 NHN FORWARD. All rights reserved. 프런트 엔드 성능 최적화 유동식 FE개발랩
  2. 2. GOAL 로딩 프런트 엔드 성능 렌더링 = +
  3. 3. CONTENTS 1. 로딩 최적화  브라우저 기준 최적화의 문제점  사용자 기준 최적화  프리 렌더러  PWA 사례 2. 렌더링 최적화  레이아웃 스래싱  가상돔  웹 워커
  4. 4. 4 / 73 프런트 엔드 화려한 변화 2018년 TOAST UI2009년 라이코스
  5. 5. 5 / 73 느리다… 성능 문제 내용이 길어지면 느려집니다. Internet Explorer 11에서 로딩이 느립니다. 때때로 멈춰요. 스크롤이 툭툭 끊어져요. 간혹 몇 분씩도 걸리는 것 같습니다 ㅜㅜ
  6. 6. 6 / 73 성능 최적화 빠른 로딩 속도 사업지표 향상 사용성 개선 성능 개선 효과
  7. 7. 7 / 73 Pinterest https://medium.com/dev-channel/a-pinterest-progressive-web-app-performance-case-study-3bd6ed2e6154
  8. 8. 8 / 73 빠르게 만들어 봅시다 개선 전 개선 후
  9. 9. 로딩 최적화: 브라우저
  10. 10. 10 / 73 Navigation Timing Resource Timing(Network)
  11. 11. 11 / 73 프런트 엔드 타이밍
  12. 12. 12 / 73 Only Network Fast 3G 최적화 전 데모 시작 8초 로딩 완료4초 프로그레스바
  13. 13. 13 / 73 Navigation Timing start Load 8초 DOMContentLoaded 4초 LoadProcessing
  14. 14. 14 / 73 문제 확인: Processing 3.88초 프로그레스 바 4.72초 의미 있는 화면 시작 8초 로딩 완료4초 프로그레스바
  15. 15. 15 / 73 처리 순서: HTML, CSS, JS 문제: 빈 화면 원인 찾기
  16. 16. 16 / 73 블록 리소스 발생 문제: 빈 화면 원인 찾기 CSS, JS로 인한: HTML 파싱 중단
  17. 17. 17 / 73 주요 렌더링 경로 DOM Tree CSSOM Tree Render Tree
  18. 18. 18 / 73 주요 렌더링 경로: HTML, CSS HTML - DOM CSS- CSSOM Render Tree
  19. 19. 19 / 73 블록 리소스: 자바스크립트와 CSS 파일 문제 해결: 블록 리소스 처리 최적화 CSS DOM Tree CSSOM Tree Render Tree 자바스크립트
  20. 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
  21. 21. 21 / 73 빠름 DOMContentLoaded: 자바스크립트 Processing Processing head: 3.88 초 async: 1.40 초 start DOMContentLoaded
  22. 22. 22 / 73 주요 렌더링 경로: 스타일 Resource Timing(Network)
  23. 23. 23 / 73 주요 렌더링 경로: 스타일 총 걸린 시간: 758ms 실제 다운로드: 191ms
  24. 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. 25 / 73 2x 빠름 DOMContentLoaded: 스타일 Processing Processing 외부 스타일: 1.40 초 인라인 스타일: 0.72 초 start DOMContentLoaded
  26. 26. 26 / 73 보다 빠른 반응 주요 렌더링 경로 최적화 데모 비교 4초 프로그레스바 0.7초 프로그레스바
  27. 27. 27 / 73 Navigation Timing: Resource, Processing, Load 브라우저 기준의 로딩 최적화 정리 로딩과 Critical Rendering Path 관계 로딩 성능: 자바스크립트 최적화(async, defer) 로딩 성능: 인라인 스타일 사용(Resource Timing: TTFB 줄이기) 빠른 DOMContentLoaded 빠른 로딩 프로그레스바
  28. 28. 28 / 73 로딩 프로그레스바만 빠르다 브라우저 기준의 문제점: 데모 비교 4초 프로그레스바, 8초 완료 0.7초 프로그레스바, 8초 완료
  29. 29. 29 / 73 빠른 DOMContentLoaded start Load 8초 DOMContentLoaded 4초 LoadProcessing DOMContentLoaded 0.7초 LoadProcessing
  30. 30. 30 / 73 진짜 콘텐츠가 나오는 시점 start 진짜 콘텐츠 Load 8초 LoadProcessing DOMContentLoaded 0.7초 의미 있는 콘텐츠 4.72초
  31. 31. 31 / 73 Navigation Timing이 빠르면 정말 성능이 좋은 것인가? 로딩 최적화 기준: Navigation Timing DOMContentLoaded load
  32. 32. 로딩 최적화: 사용자
  33. 33. 33 / 73 CONTENTS 1. 로딩 최적화  브라우저 기준 최적화의 문제점  사용자 기준 최적화  프리 렌더러  PWA 사례 2. 렌더링 최적화  레이아웃 스래싱  가상돔  웹 워커
  34. 34. 35 / 73 User Centric Performance Metrics 로딩 성능 기준: 사용자 First Paint First Meaningful Paint Time To Interactive
  35. 35. 36 / 73 First Meaningful Paint: 사용자에게 필요한 정보를 빠르게 서버 사이드 렌더링 SPA SSR
  36. 36. 37 / 73 런타임 vs 빌드타임 서버 사이드 렌더링과 프리 렌더러 구분 서버 사이드 렌더링 프리 렌더러 콘텐츠 First Meaningful Paint O O 생성 시점 런타임 빌드타임
  37. 37. 38 / 73 프리 렌더러: 웹팩 prerender-loader 8초 로딩 완료 1초 First Meaningful Paint 프로그레스바 … … … …
  38. 38. 39 / 73 빠른 페인팅 start DOMContentLoaded 2.7초 First Meaningful Paint First Meaningful Paint
  39. 39. 40 / 73 First Meaningful Paint > Navigation Timing 사용자 기준의 로딩 최적화 정리 서버 사이드 렌더링 프리 렌더러와 FMP 데모: FMP 비교
  40. 40. Progressive Web App
  41. 41. 42 / 73 로딩 성능 최적화: PWA PRPL 패턴 WebPWA App = + Push Render Pre-cache Lazy-load
  42. 42. 43 / 73 PWA 빠른 로딩 속도 사업지표 향상 사용성 개선 PWA: 로딩 성능 개선 효과
  43. 43. 44 / 73 PWA 사례: BookMyShow 인도 티케팅 회사 https://developers.google.com/web/showcase/2017/bookmyshow 항목 값 월 방문자 5천 만명 앱 사이즈 440KB로 감소 로딩 타임 2.94초 미만 전환율 80% 증가
  44. 44. 45 / 73 PWA 사례: MakeMyTrip 인도 여행 회사 https://developers.google.com/web/showcase/2017/make-my-trip 항목 값 월 방문자 8백 만명 로딩 속도 38% 개선 고객 세션 160% 증가 이탈율 20% 감소
  45. 45. 46 / 73 브라우저 기준 최적화 • Navigation Timing, Critical Rendering Path • DOMContentLoaded(JS, CSS), 빠른 로딩 프로그레스바 로딩 최적화 정리 사용자 기준 최적화 • First Meaningful Paint • 서버사이드 렌더링, 프리 렌더러 PWA 사례로 본 로딩 성능 개선 효과 • BookMyShow, MakeMyTrip
  46. 46. 렌더링 최적화
  47. 47. 48 / 73 CONTENTS 1. 로딩 최적화  브라우저 기준 최적화의 문제점  사용자 기준 최적화  프리 렌더러  PWA 사례 2. 렌더링 최적화  레이아웃 스래싱  가상돔  웹 워커
  48. 48. 49 / 73 강제 동기 레이아웃 레이아웃 스래싱
  49. 49. 50 / 73 DOM 조작으로 인한 변경 단계 HTML - DOM CSS- CSSOM Render Tree
  50. 50. 51 / 73 DOM 조작으로 인한 변경 단계 HTML - DOM CSS- CSSOM Render Tree
  51. 51. 52 / 73 개발자 도구: 한 프레임 약 70ms 레이아웃 스래싱 DOM CSSOM Layout
  52. 52. 53 / 73 30FPS: 강제 동기 레이아웃 발생 강제 동기 레이아웃 offsetLeft offsetTop offsetWidth … … DOM CSSOM Layout
  53. 53. 54 / 73 60FPS: 강제 레이아웃 제거 강제 동기 레이아웃
  54. 54. 55 / 73 개선된 렌더링 데모 비교
  55. 55. 56 / 73 CONTENTS 1. 로딩 최적화  브라우저 기준 최적화의 문제점  사용자 기준 최적화  프리 렌더러  PWA 사례 2. 렌더링 최적화  레이아웃 스래싱  가상돔  웹 워커
  56. 56. 57 / 73 위클리픽: Proxy와 가상돔을 사용한 데모 가상돔: DOM변경을 최소화
  57. 57. 58 / 73 일부 엘리먼트만 바꾸고 싶다면 추가 코드가 필요 예> 초의 엘리먼트만 업데이트하고 싶을때 데모: DOM 직접 변경
  58. 58. 59 / 73 알아서 바뀐 엘리먼트만 변경되는 편리함 snabbdom > 초의 엘리먼트만 업데이트됨 데모: 가상돔 사용
  59. 59. 60 / 73 CONTENTS 1. 로딩 최적화  브라우저 기준 최적화의 문제점  사용자 기준 최적화  프리 렌더러  PWA 사례 2. 렌더링 최적화  레이아웃 스래싱  가상돔  웹 워커
  60. 60. 61 / 73 60 FPS = 16ms/fr => 10ms/fr 프레임 속도
  61. 61. 62 / 73 메인 스레드에서 무거운 작업
  62. 62. 63 / 73 무거운 메인 스레드 데모 무거운 작업 오래 걸리는 프레임
  63. 63. 64 / 73 웹팩 설정 파일 worker-loader 사용
  64. 64. 65 / 73 job.worker.js
  65. 65. 66 / 73 워커 생성과 실행
  66. 66. 67 / 73 Heavy Job 웹 워커 짧은 프레임 짧은 프레임 워커가 무거운 작업 담당
  67. 67. 68 / 73 워커 사용 전 후 렌더링 데모 비교
  68. 68. 69 / 73 로딩 최적화: 브라우저 기준 (DOMContentLoaded, load) 전체 정리 로딩 최적화: 사용자 기준 (Critical Rendering Path, FMP, SSR) 로딩 최적화: Progressive Web App 사례 렌더링 최적화: 레이아웃 스래싱 렌더링 최적화: 가상돔 렌더링 최적화: 웹 워커
  69. 69. 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 참고 자료
  70. 70. 71 / 73 자바스크립트 교육 / 전사 개발 가이드 FE개발랩 TOAST UI 핸즈온 랩에 참여해보세요.
  71. 71. © 2018 NHN FORWARD. All rights reserved. Q&A
  72. 72. © 2018 NHN FORWARD. All rights reserved. THANK YOU

×