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