16. Webpagetest?
• 구글이 지원하는 오픈소스 프로젝트
• 기업과 개인의 테스트 인프라 제공한다는
사회공헌 목적
• 여러 사기업들이 테스트 서버를 제공하며
그 대가로 로고가 홈페이지에 기재된다.
17. Feature
• HTTP Archive 정보기반 성능 측정
• Waterfall 제공
• Real Web Browser 기반
• 국내/해외 서버를 이용한 측정
• Desktop, Mobile 지원
• Network 속도 지정 및 TCPDUMP 지원
• First/Repeat(최대9회) 테스트 제공
• Filmstrip Image지원
21. PageSpeed?
• Make the web Faster 서비스 중 한 부분으
로
구글에서 개발.
• 지속적으로 기능이 추가 되고 있는 프로젝
트.
• Performance를 많이 생각하는 구글의
노하우가 잘 녹아져 있는 서비스
• Chrome/FF Extension, insights, API 3가
지
측정 방법 제공
22. Browser Extension Feature
• Chrome/Firefox Extension
• 현재 브라우저 세션정보 그대로 측정 가능
• 개발자 도구의 Emulation 연계 가능
• 상/중/하/완료 4단계로 튜닝 요소 제공
• 정적데이타에 대해 최적화 버전 제공
23.
24. Insights Feature
• 스코어 제공
• 수정필요/고려/완료 3단계의 튜닝 요소 제
공
• 폰트 사이즈/표시영역등 사용자 편의환경
점수 제공
• Mobile/Desktop 동시 측정
25.
26. API Feature
• 간단히 URL 호출을 통해 JSON 결과값 제
공
• wget, curl, 브라우저 URL 입력 등의 방식
으로 편하게 결과값만 받을 수 있음.
• 스코어 및 튜닝 요소 제공
27.
28. 3가지 중 무엇을 쓸까?
• Chrome/FireFox Extension 방식
– 세션이 필요한경우
– 간편하게 테스트 할때
• Insights 방식
– 모바일과 데스크탑을 한번에 측정할 경우
– 스코어가 보고 싶은 경우
• API 호출 방식
– 서버에서 주기적으로 측정를 하고 싶은 경우
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 입력 등의 방식
으로 편하게 결과값만 받을 수 있음.
• 스코어 및 튜닝 요소 제공
35. Feature
• Event/Network 의 지연되는 부분 시각화
• Javascript, CSS Style, Layout, Paint,
DOM Event, Network, XMLHttpRequest
등에 대해 문제점을 파악
• Info, Warning, Critical 3단계로 문제 표기
• Spring-Insight 를 통하여 Server단의
Tracing 가능
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 처리
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