Front end performance analysis v0.6
- 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일 목요일