Download as PDF, PPTX
Uploaded byNAVER Engineering
NAVER TECH CONCERT_FE2019_오늘부터 나도 FE 성능분석가
내 서비스에서 가장 많은 사용자를 가지고 있는 네이버 서비스. 다양한 브라우저 환경에서 쾌적한 서비스를 제공하기 위해 노력했던 많은 개발자들의 경험을 여러분에게 소개해드립니다. 이 발표에서는 전통적인 웹 성능 개선방법부터 모던 브라우저 성능 개선 사례를 두루 살펴보고 실제 서비스에서 필요한 성능 개선 포인트를 어떻게 찾고, 개선할 수 있는지에 대한 이야기를 합니다. 이 발표를 듣는 당신은 오늘부터 FE 성능분석가 1일차!
NAVER TECH CONCERT_FE2019_오늘부터 나도 FE 성능분석가
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8. 서버성능분석가의관심사는?서버성능분석가의관심사는? 서버가얼마나많은요청을처리할수있니? TPS (Transition PerSeconds)TPS (Transition Per Seconds)
- 9. FE 성능분석가의관심사는?FE 성능분석가의관심사는? 사용자입력에얼마나빠르게반응할수있니? LAI(Loading And Interaction)LAI (Loading And Interaction) 에라이에라이
- 10. LAI (Loading AndInteraction)LAI (Loading And Interaction) 1. 초기로딩속도(Loading) 얼마나빨리페이지를볼수있는가? 2. 인터렉션속도(Interaction) 스크롤이버벅거려요 키보드를입력하는데버벅거려요. 얼마나매끄럽게애니메이션이동작하는가?
- 11.
- 12.
- 13. 2. 개선프로세스2. 개선프로세스 테스트에Red-Green-Refactory프로세스가있다면... 성능개선에서는 측정(Measure) 분석(Analytic) 최적화(Optimize) 측정- 분석- 최적화- 측정- 분석- 최적화- ...
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21. 1. 높이줄이기: Reqeust수줄이기1. 높이줄이기: Reqeust 수줄이기
- 22. JS, CSS MergeJS,CSS Merge
- 23.
- 24. DATA URIDATA URI 캐싱되지않아도될이미지를HTML요청에포함시켜서~!
- 25.
- 26. 가장효과적인것은뭐니뭐니해도 이미지이미지 2019/01 기준 이미지는50% 이상(전체의1.6M중840KB) httparchive
- 27.
- 28.
- 29. 2. 폭줄이기: Request시간줄이기2. 폭줄이기: Request 시간줄이기
- 30.
- 31. Initial ConnectionInitial Connection HTTP프로토콜마다Connection 활용방법이다르다. HTTP2HTTP2가정답입니다.가정답입니다.
- 32. Time to FirstByte (TTFB)Time to First Byte (TTFB) TTFB가오래걸린다면 서버비즈니스로직이느린것서버비즈니스로직이느린것
- 33. Content DownloadContent Download ContentDownload가오래걸린다면 네트워크속도가낮거나 컨텐츠의크기가큰경우이다.
- 34. minify, obfuscation, gzipminify,obfuscation, gzip gzip 적용(content-encoding: gzip)시전체데이터량의30% 정도감소
- 35. 역시나가장효과적인것은뭐니뭐니해도 큰이미지줄이기큰이미지줄이기 이미지포맷(png, webP, jpeg,...), 이미지메타정보날리기
- 36.
- 37.
- 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> <linkrel="preload" href="https://example.com/css/style.css" as="style" crossorigin> CSS와함께폰트, 이미지가로딩
- 46. HTTP2 Server PushHTTP2Server Push HTML과함께JS, CSS, 이미지가로딩
- 47.
- 48. 체감속도높이기체감속도높이기 First Paint(FP): HEAD태그종료후 First Meaningful Paint(FMP): Hero 엘리먼트가보이는시기
- 49.
- 50.
- 51.
- 52. Case by Case!Caseby Case! 하지만딱! 하나의원리로귀결! 브라우저Main Thread 괴롭히지말기
- 53.
- 54. Rendering Pipeline 이해하기RenderingPipeline 이해하기 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.
- 57.
- 58. 2. 도와줘GPU2. 도와줘GPU CPU(Main Thread)가아닌GPU의도움받기
- 59.
- 60.
- 61. GPU의Side EffectGPU의Side Effect 레이어를초기구성하기는작업은CPU(MainThread) 가진행 레이어에원래비트맵정보를복사하기때문에메모리가2배로 필요하다. 꼭! 필요한부분만레이어로만든다
- 62. 3. 60 FPS(Frame Per Seconds) 보장하기3. 60 FPS (Frame Per Seconds) 보장하기
- 63.
- 64.
- 65.
- 66.
- 67.
- 68.
- 69.
- 70.