Front-end 성능 측정과 개선을 위한 성능 측정 도구에 대한 세미나로 각각의 성능 개선 방법은 기술하지 않고 보는 사람이 측정도구를 통해 문제점을 찾아 개선할 수 있도록 한다. 그리고 성능 개선 모듈에 대해서 알아 본다.

1. Front-End
웹사이트 성능 측정 및
튜닝
작성자 : 이기동

2. 왜 성능 측정을 하지?
• 사이트를 오픈 후 느리다는 푸시.
• 개편 후 예전보다 느려졌다는 푸시.
• 갠시리 느린거 같아서 자체 푸시.

3. 그런데 왜 Front-End지?

4. 전체 웹페이지 로딩 시간(1000ms)
Front-End(800)Back-End(200)
한가지 예를 들어보자.

5. 전체 웹페이지 로딩 시간(900ms)
Front-End(800)
Back-End
(100)
Back-End를
두배 빠르게 튜닝하면

6. Front-End를
두배 빠르게 튜닝하면?
전체 웹페이지 로딩
시간(600ms)
Front-End(400)Back-End(200)

7. Back-End 튜닝이
그냥 커피라면
Front-End 튜닝은 T.O.P
<
Back-End 2배 튜닝 Front-End 2배 튜닝

8. • 전체 로딩시간의 8~90%를 차지.
• Front-End 튜닝이 효율적.
• Back-End에 비해 튜닝하기 쉽다.
(저비용 고효율)
결론

9. 그럼 최우선순위는?

10. Bottle neck을 찾기위한
성능 측정!

11. 무엇으로?

12. 성능 측정 도구들로!

13. 측정 도구는?
• Webpagetest
• Pagespeed
– Chrome/FireFox Extension
– Insights
– API
• YSlow
• Google Speed Tracer

14. webpagetest.org

16. Webpagetest?
• 구글이 지원하는 오픈소스 프로젝트
• 기업과 개인의 테스트 인프라 제공한다는
사회공헌 목적
• 여러 사기업들이 테스트 서버를 제공하며
그 대가로 로고가 홈페이지에 기재된다.

17. Feature
• HTTP Archive 정보기반 성능 측정
• Waterfall 제공
• Real Web Browser 기반
• 국내/해외 서버를 이용한 측정
• Desktop, Mobile 지원
• Network 속도 지정 및 TCPDUMP 지원
• First/Repeat(최대9회) 테스트 제공
• Filmstrip Image지원

18. 테스트 서버가 있는 나라

19. 테스트 제공 회사는?

20. PageSpeed

21. PageSpeed?
• Make the web Faster 서비스 중 한 부분으
로
구글에서 개발.
• 지속적으로 기능이 추가 되고 있는 프로젝
트.
• Performance를 많이 생각하는 구글의
노하우가 잘 녹아져 있는 서비스
• Chrome/FF Extension, insights, API 3가
지
측정 방법 제공

22. Browser Extension Feature
• Chrome/Firefox Extension
• 현재 브라우저 세션정보 그대로 측정 가능
• 개발자 도구의 Emulation 연계 가능
• 상/중/하/완료 4단계로 튜닝 요소 제공
• 정적데이타에 대해 최적화 버전 제공

24. Insights Feature
• 스코어 제공
• 수정필요/고려/완료 3단계의 튜닝 요소 제
공
• 폰트 사이즈/표시영역등 사용자 편의환경
점수 제공
• Mobile/Desktop 동시 측정

26. API Feature
• 간단히 URL 호출을 통해 JSON 결과값 제
공
• wget, curl, 브라우저 URL 입력 등의 방식
으로 편하게 결과값만 받을 수 있음.
• 스코어 및 튜닝 요소 제공

28. 3가지 중 무엇을 쓸까?
• Chrome/FireFox Extension 방식
– 세션이 필요한경우
– 간편하게 테스트 할때
• Insights 방식
– 모바일과 데스크탑을 한번에 측정할 경우
– 스코어가 보고 싶은 경우
• API 호출 방식
– 서버에서 주기적으로 측정를 하고 싶은 경우

29. YSlow

30. YSlow?
• High performance Web Sites, Even
Faster Websites의 저자인 야후의 성능 최
적화 부서 팀장 Steve Souders 의 최적화
Tip에서 시작
• FF, Chrome, Opera, Safari 브라우저 지원
• PhantomJS, Node.js, Command Line 지원
• 깐깐하고 성능 측정

31. Feature
• 간단히 URL 호출을 통해 JSON 결과값 제
공
• wget, curl, 브라우저 URL 입력 등의 방식
으로 편하게 결과값만 받을 수 있음.
• 스코어 및 튜닝 요소 제공

33. Speed Tracer

34. Speed Tracer?
• Google Web toolkit 제품 중 하나
• Chrome Extension

35. Feature
• Event/Network 의 지연되는 부분 시각화
• Javascript, CSS Style, Layout, Paint,
DOM Event, Network, XMLHttpRequest
등에 대해 문제점을 파악
• Info, Warning, Critical 3단계로 문제 표기
• Spring-Insight 를 통하여 Server단의
Tracing 가능

36. Tuning

37. mod_pagespeed

38. mod_pagespeed?
• Make the web Faster 서비스 중 한 부분으로 구글에서 개
발
• beta release 1.8.31.3/ stable release 1.7.30.4
• 350,000+ optimized web sites
• Automatic website and asset optimization
• Latest web optimization techniques
• 40+ configurable optimization filters
• Free, open-source, and frequently updated

39. Feature
• Network 구간 압축/캐시 Header 적용
• css, javascript 파일에 대해 minify/
combine/inline 처리, html 내 위치보정
• 이미지 무손실 압축/ 변환, resize 처리
• Image Lazyload 처리

41. pagespeed module OFF
Google pagespeed insights

42. pagespeed module ON
Google pagespeed insights

43. pagespeed module OFF
YSLOW

44. pagespeed module ON
YSLOW

45. pagespeed module OFF
Chrome 개발자도구 - Network

46. pagespeed module ON
Chrome 개발자도구 - Network

47. AWESOME

48. 주의 사항
• 정식버전으로 서비스가 잘 되긴 하지만
충분히 테스트를 한 후 상용에 활용
• Module 사용시 이점이 있는 서비스인 확인
• 각각의 필터별로 적용할 수 있으므로 쓰지
않는 기능은 꺼놓도록 한다.

49. 마지막으로

50. 내 웹사이트 성능측정
어떤식으로
하면
좋을까?

51. 많은 성능측정 원한다면?
• PhantomJS + YSlow 를 이용하여 cron
을 이용하여 주기적으로 측정.
• Google Pagespeed API 를 이용하여
cron을 이용하여 주기적으로 측정.
• Webpagetest private instance를 설치하
여 주기적으로 실행 및 이전측정 결과와
비교

52. 집요하게 한다면?
• Browser Extension 으로 사용 가능한 아
래 tool을 이용하여 주요 페이지별 측정.
– Pagespeed
– YSlow
– Speed Tracer

53. 만사 귀찮다면?
• Jenkins와 같은 CI 서버에 YSlow 를
연동하여 빌드 후 배포 시 마다 자동으로
측정후 결과를 볼 수 있도록 한다.

54. 튜닝 관련 정보/모듈
• Yahoo performance Rules
– https://developer.yahoo.com/performance/rules.html
• PageSpeed Insights Rules
– https://developers.google.com/speed/docs/insights/rules
• Steve Souders - 14 Rules For Faster-Loading Web Site
– http://stevesouders.com/examples/rules.php
• PageSpeed Module
– https://developers.google.com/speed/pagespeed/module

55. 성능 측정 관련 웹사이트
• Webpagetest
– http://www.webpagetest.org/
• Pagespeed
– https://developers.google.com/speed/pagespeed/
• YSlow
– https://developer.yahoo.com/yslow/
• Google Speed Tracer
– https://developers.google.com/web-toolkit/speedtracer/?hl=ko

56. 끝

57. 감사합니다.