NAVER TECH CONCERT_FE2019_오늘부터 나도 FE 성능분석가
•
4 likes•1,509 views
내 서비스에서 가장 많은 사용자를 가지고 있는 네이버 서비스. 다양한 브라우저 환경에서 쾌적한 서비스를 제공하기 위해 노력했던 많은 개발자들의 경험을 여러분에게 소개해드립니다. 이 발표에서는 전통적인 웹 성능 개선방법부터 모던 브라우저 성능 개선 사례를 두루 살펴보고 실제 서비스에서 필요한 성능 개선 포인트를 어떻게 찾고, 개선할 수 있는지에 대한 이야기를 합니다. 이 발표를 듣는 당신은 오늘부터 FE 성능분석가 1일차!
More Related Content
What's hot
What's hot (20)
More from NAVER Engineering
More from NAVER Engineering (20)
NAVER TECH CONCERT_FE2019_오늘부터 나도 FE 성능분석가
- 8. 서버성능분석가의관심사는?서버성능분석가의관심사는? 서버가얼마나많은요청을처리할수있니? TPS (Transition Per Seconds)TPS (Transition Per Seconds)
- 9. FE 성능분석가의관심사는?FE 성능분석가의관심사는? 사용자입력에얼마나빠르게반응할수있니? LAI (Loading And Interaction)LAI (Loading And Interaction) 에라이에라이
- 10. LAI (Loading And Interaction)LAI (Loading And Interaction) 1. 초기로딩속도(Loading) 얼마나빨리페이지를볼수있는가? 2. 인터렉션속도(Interaction) 스크롤이버벅거려요 키보드를입력하는데버벅거려요. 얼마나매끄럽게애니메이션이동작하는가?
- 13. 2. 개선프로세스2. 개선프로세스 테스트에Red-Green-Refactory 프로세스가있다면... 성능개선에서는 측정(Measure) 분석(Analytic) 최적화(Optimize) 측정- 분석- 최적화- 측정- 분석- 최적화- ...
- 18. 페이지로딩과정페이지로딩과정
- 21. 1. 높이줄이기: Reqeust 수줄이기1. 높이줄이기: Reqeust 수줄이기
- 22. JS, CSS MergeJS, CSS Merge
- 24. DATA URIDATA URI 캐싱되지않아도될이미지를HTML 요청에포함시켜서~!
- 26. 가장효과적인것은뭐니뭐니해도 이미지이미지 2019/01 기준 이미지는50% 이상(전체의1.6M 중840KB) httparchive
- 29. 2. 폭줄이기: Request 시간줄이기2. 폭줄이기: Request 시간줄이기
- 31. Initial ConnectionInitial Connection HTTP 프로토콜마다Connection 활용방법이다르다. HTTP2HTTP2가정답입니다.가정답입니다.
- 32. Time to First Byte (TTFB)Time to First Byte (TTFB) TTFB가오래걸린다면 서버비즈니스로직이느린것서버비즈니스로직이느린것
- 33. Content DownloadContent Download Content Download가오래걸린다면 네트워크속도가낮거나 컨텐츠의크기가큰경우이다.
- 34. minify, obfuscation, gzipminify, obfuscation, gzip gzip 적용(content-encoding: gzip)시전체데이터량의30% 정도감소
- 35. 역시나가장효과적인것은뭐니뭐니해도 큰이미지줄이기큰이미지줄이기 이미지포맷(png, webP, jpeg, ...), 이미지메타정보날리기
- 38. picture, source, srcset 태그를사용 <picture> <source srcset="IamWebp1x.webp 1x, IamWebp1x.webp 2x" type="image/webp"> <source srcset="IamOldJPEG.jpg 1x, IamOldJPEG.jpg 2x" type="image/jpeg"> <img src="IamOldBrowser2x.jpg" alt="Alt Text!"> </picture> 현실적인방법은아님. 사실상요즘브라우저는다레티나이상 눈딱! 감고이미지의2배크기
- 39. 3. 간격땡기기: Request 계단간격땡기기3. 간격땡기기: Request 계단간격땡기기
- 40. 1. 서버로부터HTML 문자열을Stream으로받음 2. <head> 태그에포함된자원을병렬로다운로드 3. <head> 태그에포함된자원을모두실행 4. <body> 태그부터화면을그리기시작 5. DOM 구성이완료되면DOMContentLoaded 이벤트발생 6. 모든자원의로딩완료되면load 이벤트발생
- 41. A. head 안의모든자원병렬로딩 B. JS, CSS 실행시페이지랜더링Block C. 화면에보여줄것은다그려짐. 이미지는로딩안되어있음
- 42. 성능격언성능격언 head 태그에는CSS와필수JS만넣어라. JS는body 태그마지막에넣어라. 중간중간에JS를넣지마라.
- 43. async, deferasync, defer DOM 제어와관련이있는스크립트는defer를이용 의존성이없는스크립트는async
- 44. CSS 파일에서폰트, 이미지를사용CSS 파일에서폰트, 이미지를사용 CSS가불러진다음에CSS에서사용하는폰트, 이미지가로딩
- 45. PreloadPreload <link rel="preload" href="https://example.com/fonts/font.woff" as="font" crossorigin> <link rel="preload" href="https://example.com/css/style.css" as="style" crossorigin> CSS와함께폰트, 이미지가로딩
- 46. HTTP2 Server PushHTTP2 Server Push HTML과함께JS, CSS, 이미지가로딩
- 48. 체감속도높이기체감속도높이기 First Paint(FP): HEAD 태그종료후 First Meaningful Paint(FMP): Hero 엘리먼트가보이는시기
- 52. Case by Case!Case by Case! 하지만딱! 하나의원리로귀결! 브라우저Main Thread 괴롭히지말기
- 54. Rendering Pipeline 이해하기Rendering Pipeline 이해하기 Javascript: JS로DOM을변경 1. Style recalculate: DOM의최종스타일을계산 2. Layout: DOM의배치와크기계산 3. Paint: 화면에그리기 4. Composite: 레이어조합하기(Help me GPU!)
- 55. 1. Layout 발생하는속성건드리지않기1. Layout 발생하는속성건드리지않기 https://csstriggers.com/
- 56. 예1) top 변경
- 57. 예) transform 변경
- 58. 2. 도와줘GPU2. 도와줘GPU CPU (Main Thread)가아닌GPU의도움받기
- 60. GPU의도움을받기위해 레이어만들기레이어만들기 브라우저가규칙에따라레이어를구성 명시적으로레이어를구성하기 translate3d, scale3d, matrix3d, will-change, ...
- 61. GPU의Side EffectGPU의Side Effect 레이어를초기구성하기는작업은CPU(Main Thread) 가진행 레이어에원래비트맵정보를복사하기때문에메모리가2배로 필요하다. 꼭! 필요한부분만레이어로만든다
- 62. 3. 60 FPS (Frame Per Seconds) 보장하기3. 60 FPS (Frame Per Seconds) 보장하기
- 63. 랜더링파이프가계속해서발생하는경우랜더링파이프가계속해서발생하는경우 1 Frame 은16ms 내에완료되어야한다
- 70. 감사합니다.감사합니다.