Front end performance analysis v0.6

Front-End Performance AnalysisJi-Tae KimNHN Technology [email protected]

14년 4월 24일 목요일

강의 목적

성능 최적화 툴 사용법 습득

성능 개선 포인트 찾는 방법 습득

직군에 상관없는 성능 최적화 프로세스를 습득

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일 목요일