Front-End 웹사이트 성능 측정 및 튜닝

작성자 : 이기동

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

그런데 왜 Front-End 지 ?

전체 웹페이지 로딩 시간 (1000ms)

Front-End(800)Back-End(200)

한가지 예를 들어보자 .

전체 웹페이지 로딩 시간 (900ms)

Front-End(800)Back-End (100)

Back-End 를 두배 빠르게 튜닝하면

Front-End 를 두배 빠르게 튜닝하면 ?

전체 웹페이지 로딩 시간(600ms)

Front-End(400)Back-End(200)

Back-End 튜닝이 그냥 커피라면

Front-End 튜닝은 T.O.P

<Back-End 2 배 튜닝 Front-End 2 배 튜닝

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

( 저비용 고효율 )

결론

그럼 최우선순위는 ?

Bottle neck 을 찾기위한

성능 측정 !

무엇으로 ?

성능 측정 도구들로 !

측정 도구는 ?• Webpagetest• Pagespeed– Chrome/FireFox Extension– Insights– API

• YSlow• Google Speed Tracer

webpagetest.org

Webpagetest?

• 구글이 지원하는 오픈소스 프로젝트• 기업과 개인의 테스트 인프라 제공한다는

사회공헌 목적• 여러 사기업들이 테스트 서버를 제공하며

그 대가로 로고가 홈페이지에 기재된다 .

Feature• HTTP Archive 정보기반 성능 측정

• Waterfall 제공

• Real Web Browser 기반

• 국내 / 해외 서버를 이용한 측정

• Desktop, Mobile 지원

• Network 속도 지정 및 TCPDUMP 지원

• First/Repeat( 최대 9 회 ) 테스트 제공

• Filmstrip Image 지원

테스트 서버가 있는 나라

테스트 제공 회사는 ?

PageSpeed

PageSpeed?• Make the web Faster 서비스 중 한

부분으로구글에서 개발 .

• 지속적으로 기능이 추가 되고 있는 프로젝트 .• Performance 를 많이 생각하는 구글의

노하우가 잘 녹아져 있는 서비스• Chrome/FF Extension, insights, API 3

가지 측정 방법 제공

Browser Extension Feature

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

Insights Feature• 스코어 제공• 수정필요 / 고려 / 완료 3 단계의 튜닝 요소

제공• 폰트 사이즈 / 표시영역등 사용자 편의환경

점수 제공• Mobile/Desktop 동시 측정

API Feature• 간단히 URL 호출을 통해 JSON 결과값

제공• wget, curl, 브라우저 URL 입력 등의

방식으로 편하게 결과값만 받을 수 있음 .• 스코어 및 튜닝 요소 제공

3 가지 중 무엇을 쓸까 ?• Chrome/FireFox Extension 방식–세션이 필요한경우–간편하게 테스트 할때

• Insights 방식–모바일과 데스크탑을 한번에 측정할 경우–스코어가 보고 싶은 경우

• API 호출 방식–서버에서 주기적으로 측정를 하고 싶은 경우

YSlow

YSlow?• High performance Web Sites, Even

Faster Websites 의 저자인 야후의 성능 최적화 부서 팀장 Steve Souders 의 최적화 Tip 에서 시작

• FF, Chrome, Opera, Safari 브라우저 지원

• PhantomJS, Node.js, Command Line 지원

• 깐깐하고 성능 측정

Feature• 간단히 URL 호출을 통해 JSON 결과값

제공• wget, curl, 브라우저 URL 입력 등의

방식으로 편하게 결과값만 받을 수 있음 .• 스코어 및 튜닝 요소 제공

Speed Tracer

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

Feature• Event/Network 의 지연되는 부분 시각화• Javascript, CSS Style, Layout, Paint,

DOM Event, Network, XMLHttpRequest 등에 대해 문제점을 파악

• Info, Warning, Critical 3 단계로 문제 표기• Spring-Insight 를 통하여 Server 단의

Tracing 가능

Tuning

mod_pagespeed

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

Feature• Network 구간 압축 / 캐시 Header 적용• css, javascript 파일에 대해 minify/

combine/inline 처리 , html 내 위치보정• 이미지 무손실 압축 / 변환 , resize 처리• Image Lazyload 처리

pagespeed module OFFGoogle pagespeed insights

pagespeed module ONGoogle pagespeed insights

pagespeed module OFFYSLOW

pagespeed module ONYSLOW

pagespeed module OFFChrome 개발자도구 - Network

pagespeed module ONChrome 개발자도구 - Network

AWESOME

주의 사항• 정식버전으로 서비스가 잘 되긴 하지만

충분히 테스트를 한 후 상용에 활용• Module 사용시 이점이 있는 서비스인 확인• 각각의 필터별로 적용할 수 있으므로 쓰지

않는 기능은 꺼놓도록 한다 .

마지막으로

내 웹사이트 성능측정

어떤식으로하면

좋을까 ?

많은 성능측정 원한다면 ?• PhantomJS + YSlow 를 이용하여 cron

을 이용하여 주기적으로 측정 .• Google Pagespeed API 를 이용하여

cron 을 이용하여 주기적으로 측정 .• Webpagetest private instance 를

설치하여 주기적으로 실행 및 이전측정 결과와 비교

집요하게 한다면 ?• Browser Extension 으로 사용 가능한

아래 tool 을 이용하여 주요 페이지별 측정 .– Pagespeed– YSlow– Speed Tracer

만사 귀찮다면 ?• Jenkins 와 같은 CI 서버에 YSlow 를

연동하여 빌드 후 배포 시 마다 자동으로측정후 결과를 볼 수 있도록 한다 .

튜닝 관련 정보 / 모듈• 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

성능 측정 관련 웹사이트• Webpagetest– http://www.webpagetest.org/

• Pagespeed– https://developers.google.com/speed/pagespee

d/

• YSlow– https://developer.yahoo.com/yslow/

• Google Speed Tracer– https://developers.google.com/web-toolkit/speedtracer/?hl=ko

끝

감사합니다 .