프론트엔드 성능 최적화에 대한 간단한 자료

1. Front-End Performance Analysis
Ji-Tae Kim
NHN Technology Services
jitae.kim@nhn.com
14년 4월 24일 목요일

2. 강의 목적
성능 최적화 툴 사용법 습득
성능 개선 포인트 찾는 방법 습득
직군에 상관없는 성능 최적화 프로세스를 습득
14년 4월 24일 목요일

3. 목차
FE 성능 최적화 이해
How to Fast?
모바일 날씨 서비스 성능 개선 사례 공유
개선 포인트 찾기 실습
14년 4월 24일 목요일

4. Front-End 성능 최적화 이해
14년 4월 24일 목요일

5. 빠른 웹 만들기 ABC
한 사람이 잘해서 되는게 아니다
사용자의 환경을 이해해야 한다
웹 최적화를 프로젝트 일정에 포함시켜라
14년 4월 24일 목요일

6. 웹 성능의 90%는 Front-End에서 결정된다
14년 4월 24일 목요일

7. 성능 최적화 기본 전략
요청 줄이기
전송 용량 줄이기
UI코드 효율화
14년 4월 24일 목요일

8. 서비스 속도 목표
14년 4월 24일 목요일

9. PC 웹 평균 2초
평균적으로 쾌적한 웹 브라우징 성능을 제공(SSA 기준)
하위 10% 평균 5초
14년 4월 24일 목요일

10. 모바일 웹 평균 3초
모바일 서비스 환경 감안하여 완화된 기준(SSA 기준)
하위 10% 평균 5초
14년 4월 24일 목요일

11. 우리의 목표는
14년 4월 24일 목요일

12. 우리의 목표는
1초
14년 4월 24일 목요일

13. How to Fast?
14년 4월 24일 목요일

14. 현재 상황을 파악하자!
뭐가

15. 느리다는

16. 거지?
별로

17. 안느리네~
내

18. 휴대폰은

19. 빨라요
14년 4월 24일 목요일

20. Real User Measurement(RUM)
보편성이 높은 OLT(on load time)
실제로 사용자가 겪은 시간을 측정하기 용이
대량의 실사용자 로그 확보 가능(툴바/비컨)
SSA / IIMS에서 조회 가능
14년 4월 24일 목요일

21. Waterfall Chart
모바일 날씨 성능 개선 전
모바일 네이버 메인
로딩 과정 분석의 필수 도구
다양한 지표와 로딩 양상 분석 가능 - 웹의 거의 모든 것을 체크가 가능
모바일 Waterfall Chart 측정 방법 - http://www.stevesouders.com/blog/2013/03/26/mobile-waterfalls/
14년 4월 24일 목요일

22. 사용자 체감 성능
브라우저의 기계적인 시간보다 체감시간이 더 중요
사내 측정 도구로 NSPEED 이용 가능(http://nspeed.nhncorp.com)
화면 캡쳐 후 이미지 판독으로 계측
AFT(above the fold time) 가 주요 지표로 이용됨
기타 측정 도구
webpagetest (http://www.webpagetest.org/)
websitetest (http://www.websitetest.com/)
14년 4월 24일 목요일

23. 가장 기본적인 것부터!
14년 4월 24일 목요일

24. WPO Check List
14년 4월 24일 목요일

25. WPO Check List
14년 4월 24일 목요일

26. YSlow
Chrome 웹 스토어 다운로드
https://chrome.google.com/webstore/detail/yslow/
ninejjcohidippngpapiilnmkgllmakh
14년 4월 24일 목요일

27. Pagespeed Insights
YSlow와 비슷한 기능을 함
https://chrome.google.com/webstore/detail/pagespeed-insights-by-
goo/gplegfbjlmmehdoakndmohflojccocli?hl=koutm_source=chrome-
ntp-launcher
14년 4월 24일 목요일

28. 셋, 이제부터 시작!
14년 4월 24일 목요일

29. Chrome Browser + Dev Tool
14년 4월 24일 목요일

30. 웹 페이지에 대한 거의 모든 정보를 확인 가능
Waterfall Chart
14년 4월 24일 목요일

31. 스프라이트 이미지 그룹핑 최적화
필요한 라이브러리만 로드
JS, Image Lazy Loading
안보이는 컨텐츠 Lazy Loading
Request Reduce
14년 4월 24일 목요일

32. Capacity Reduce
불필요한 정보 제거
불필요한 쿠키 없는지
적절한 이미지 포맷/압축률 선택
14년 4월 24일 목요일

33. 더 중요한 것
성능 최적화에 시간 투자
서비스에 맞는 최적화 방안 마련
개선할 부분이 없을까 하는 호기심
14년 4월 24일 목요일

34. 성능 최적화 프로세스 정리
1. 서비스의 현재 성능 확인 및 개선 목표 설정
2. WPO 툴을 가지고 기본적인 개선 포인트 확인 및 개선 작업
3. Waterfall Chart를 보면서 추가적인 개선 사항이 없는지 반복 확인
14년 4월 24일 목요일

35. QA
14년 4월 24일 목요일

36. 14년 4월 24일 목요일