front end performance analysis v0.6
DESCRIPTION
프론트엔드 성능 최적화에 대한 간단한 자료TRANSCRIPT
강의 목적
성능 최적화 툴 사용법 습득
성능 개선 포인트 찾는 방법 습득
직군에 상관없는 성능 최적화 프로세스를 습득
14년 4월 24일 목요일
목차
FE 성능 최적화 이해
How to Fast?
모바일 날씨 서비스 성능 개선 사례 공유
개선 포인트 찾기 실습
14년 4월 24일 목요일
Front-End 성능 최적화 이해
14년 4월 24일 목요일
빠른 웹 만들기 ABC
한 사람이 잘해서 되는게 아니다
사용자의 환경을 이해해야 한다
웹 최적화를 프로젝트 일정에 포함시켜라
14년 4월 24일 목요일
웹 성능의 90%는 Front-End에서 결정된다
14년 4월 24일 목요일
성능 최적화 기본 전략
요청 줄이기
전송 용량 줄이기
UI코드 효율화
14년 4월 24일 목요일
서비스 속도 목표
14년 4월 24일 목요일
PC 웹 평균 2초
평균적으로 쾌적한 웹 브라우징 성능을 제공(SSA 기준)
하위 10% 평균 5초
14년 4월 24일 목요일
모바일 웹 평균 3초
모바일 서비스 환경 감안하여 완화된 기준(SSA 기준)
하위 10% 평균 5초
14년 4월 24일 목요일
우리의 목표는
14년 4월 24일 목요일
우리의 목표는
1초14년 4월 24일 목요일
How to Fast?
14년 4월 24일 목요일
현재 상황을 파악하자!
뭐가����������� ������������������ 느리다는����������� ������������������ 거지?별로����������� ������������������ 안느리네~
내����������� ������������������ 휴대폰은����������� ������������������ 빨라요
14년 4월 24일 목요일
Real User Measurement(RUM)
보편성이 높은 OLT(on load time)
실제로 사용자가 겪은 시간을 측정하기 용이
대량의 실사용자 로그 확보 가능(툴바/비컨)
SSA / IIMS에서 조회 가능
14년 4월 24일 목요일
Waterfall Chart
모바일 날씨 성능 개선 전
모바일 네이버 메인
로딩 과정 분석의 필수 도구
다양한 지표와 로딩 양상 분석 가능 - 웹의 거의 모든 것을 체크가 가능
모바일 Waterfall Chart 측정 방법 - http://www.stevesouders.com/blog/2013/03/26/mobile-waterfalls/
14년 4월 24일 목요일
사용자 체감 성능
브라우저의 기계적인 시간보다 체감시간이 더 중요
사내 측정 도구로 NSPEED 이용 가능(http://nspeed.nhncorp.com)
화면 캡쳐 후 이미지 판독으로 계측
AFT(above the fold time) 가 주요 지표로 이용됨
기타 측정 도구
webpagetest (http://www.webpagetest.org/)
websitetest (http://www.websitetest.com/)
14년 4월 24일 목요일
가장 기본적인 것부터!
14년 4월 24일 목요일
WPO Check List
14년 4월 24일 목요일
WPO Check List
14년 4월 24일 목요일
YSlow
Chrome 웹 스토어 다운로드
https://chrome.google.com/webstore/detail/yslow/ninejjcohidippngpapiilnmkgllmakh
14년 4월 24일 목요일
Pagespeed Insights
YSlow와 비슷한 기능을 함
https://chrome.google.com/webstore/detail/pagespeed-insights-by-goo/gplegfbjlmmehdoakndmohflojccocli?hl=ko&utm_source=chrome-ntp-launcher
14년 4월 24일 목요일
셋, 이제부터 시작!
14년 4월 24일 목요일
Chrome Browser + Dev Tool
14년 4월 24일 목요일
웹 페이지에 대한 거의 모든 정보를 확인 가능
Waterfall Chart
14년 4월 24일 목요일
스프라이트 이미지 그룹핑 최적화
필요한 라이브러리만 로드
JS, Image Lazy Loading
안보이는 컨텐츠 Lazy Loading
Request Reduce
14년 4월 24일 목요일
Capacity Reduce
불필요한 정보 제거
불필요한 쿠키 없는지
적절한 이미지 포맷/압축률 선택
14년 4월 24일 목요일
더 중요한 것
성능 최적화에 시간 투자
서비스에 맞는 최적화 방안 마련
개선할 부분이 없을까 하는 호기심
14년 4월 24일 목요일
성능 최적화 프로세스 정리
1. 서비스의 현재 성능 확인 및 개선 목표 설정
2. WPO 툴을 가지고 기본적인 개선 포인트 확인 및 개선 작업
3. Waterfall Chart를 보면서 추가적인 개선 사항이 없는지 반복 확인
14년 4월 24일 목요일
Q&A
14년 4월 24일 목요일
14년 4월 24일 목요일