Mobile Web & HTML5 performance optimization

2011.06.16 11:25
6월 14일부터 16일까지 Velocity라고 하는 웹 최적화와 운영에 대한 컨퍼런스가 Santa Clara에서 열리고 있습니다. 아직 현지에서는 마지막 날 행사가 남아 있겠네요. 이 행사의 워크샵 중에 모바일 웹과 HTML5의 퍼포먼스 최적화에 대한 자료가 있어 공유해봅니다.

워크샵의 진행자는 Maximiliano Firtman 이며 이 사람은 Programming the Mobile Web(2010년 7월 출간)과 jQuery Mobile Up and Running(2011년 10월 출간 예정)의 저자이기도 합니다. 또한 http://www.mobilexweb.com/의 운영자이기도 합니다.

모바일 웹 개발에 있어서 당장이라도 적용해볼 수 있는 여러 내용들을 담고 있으니 모바일 웹에서의 성능 향상 방법을 궁금해하시는 분이라면 바로 확인해보기 바랍니다.


 
 

nundefined HTML5_JS_CSS html5, jquery mobile up and running, maximiliano firtman, Mobile Web, mobilexweb.com, optimization, performacne, programming the mobile web, Velocity, 모바일웹, 성능, 최적화

UI 개발자의 또다른 기술력 - 사이트 최적화(1)

2010.10.21 09:20
웹사이트의 최적화라고 하면 개발자들내에서도 서로 다른 생각과 경험이 있을것 같습니다.
저의 경우는 모든 프로젝트가 마무리 되고 끝나는 시점에 고객의 요구사항에 따라서 '한번 해볼까?' 라고하여 Stress test 를 실행해보거나, 어렵게 구한   Roadrunner 와 같은 초울트라 강력한 측정 도구를 사용해서, 내가 개발한 사이트가 끄떡없는지 측정하곤 했었습니다.
(물론 Roadrunner와 같은 툴은 구경만했었군요. 쩝)
한마디로 , 뻗지않고 잘 버티는지  궁금했던것 같네요.

몇년전만해도 사이트 최적화라고 하면,  Web Server와  WAS(Web application server) 자체의 성능과 DB 의 성능 , 또한 컴파일과정에서 발견하기 어려운  DB 와  Application Interface 를 맟추는 부분의 컨넥션이 잘 버틸지 등만을 테스트 했습니다.
이런 과정에서 별문제가 발견되지 않는다면 사이트 오픈에 지장이 없습니다.

6-7년전에서 생겼던  web2.0 라는 용어와 더불어 웹사이트의 최적화라는 것은  몇가지가 추가되었다고 봅니다.
더불어  Ajax 기술이 언급되면서,   Ajax based 로 많은 어플리케이션을 구현할 수 있게 되었습니다. 
구글맵이나  Gmail 과 같은 서비스가 선도적인 역활을 해주었습니다.
이제 우리나라의 포털사이트들 뿐아니라, 국내 기업형 포털에서도  Ajax 기반의 다양한 기능과 어플리케이션이 당연시 되고 있습니다.

문제가 한가지 생겼습니다.
 UI 가 너무 풍부해져버렸군요. 엄청난  Javascript , css , image 들.. 
이러한 것들은 웹서버- pc(browser ) 사이의 개선이 필요하게 되었으며, 누가 어떻게 하는가? 라는 문제가 사실 아직도 있는것 같습니다.
물론,  서버의 성능과 웹서버의 성능은 많은 향상을 이루어 졌습니다. 물론  PC 또한 많은 성능향상이 되고 있습니다. 
하지만 사용자들의 눈도 계속 올라가고 있죠^^. 
잘동작하고  AJAX 를 사용해서 비동기 통신도 하지만... 너무 느립니다. 

누가?
일반적인 성능엔지니어는 아직도  UI 성능을 고려하지 못하고 있는듯 합니다.
실제로  Client-side & Server-side 의 성능을 동시에 분석해주는 엔지니어는 드뭅니다.(아직 못봤습니다) 
UI 개발자가 모두 성능엔진이어가 될 필요는 없습니다. 하지만  UI 개발자가 성능을 최적화 할 수 있는 방법과 문제점을 찾는 능력이 필요로 합니다. 
본인이 개발하는 것에 대한 보장때문인데요. 그렇지 않고서는 쌓여만 가는 고객 요구사항과의  Trade-offs 를 할수가 없습니다.
최적화에 대한 방법과 어떻게 구현을 하는지에대한 지식이 있다면 적절한 타협점을 찾고  최선의 UI 개발을 할 수 있습니다.
따라서,  Ui 개발자가 반드시 사이트 최적화 기법을 알고 있어야 합니다.

UX 와의 관계?
사이트 최적화는 간단히 말해, "풍부한 UI 를 가진 사이트를 빠르게 제공한다" 입니다.  UX 라는 것은 사이트 전체에서 느끼는 사용자 경험이라고 하는데요(전 전문가가 아닙니다) 다양하고 최적화된 인터랙션을 제공하는것 보다 앞서야할것은, 즉각적인 반응과 빠른 웹사이트 입니다.
사이트 최적화 기법은 개발자들이  UX관점에서 큰 기여를 할수 있는 부분입니다.

관련책은?
우선 책부터 추천을 해야겠네요.(저도 제대로 공부를 해볼까 하네요 ^^)
우선 여유가 되시는 분들은 아래의 2권의 책을 강력추천합니다

웹사이트최적화기법:UI개발자를위한필수지침서웹사이트를더빠르게만
카테고리 미분류
지은이 스티브 사우더스 (아이티씨, 2008년)
상세보기
 
몇가지 최적화 기법에 대하여 소개하고 있습니다. 매우 중요하고 아직까지 모두 유효한 기법이 기술되어 있습니다.

초고속웹사이트구축좀더빠른차세대웹사이트를위한성능최적화기법
카테고리 컴퓨터/IT > 웹사이트 > 웹사이트기획
지은이 스티브 사우더스 (위키북스, 2010년)
상세보기
저도 아직 못본책인데요. 이번에 한권샀네요^^.  스티브 사우더스라는 분 이외 다른 6분도 같이 작성을 한 내용이 포함되어 있습니다.
첫번째 책에서 기술하지 못한 Ajax 코딩방법에 대한 내용도 포함하고 있는등, 매우 고급정보가 많이 들어가 있는것 같습니다.

저것을 다 공부해야하는가?
시간이 되시는 분들은 첫번째 책은 꼭 읽어보시면 좋습니다.
제개 해드릴 내용은 바쁘신분들을 위해 몇가지 중요하고 빠르게 사용할 수 있는 몇가지 기법을 앞으로 소개해 드릴 예정입니다.
최적화 기법이 별거 없습니다. 
'전송되는 데이터 양을 줄이거나 없애도록 하라' 입니다.
대표적으로 HTTP request 를 줄이는 방법이 있습니다.  이것만 제대로 해도 대부분의 웹사이트의성능이 많이 좋아지는데요.
 -  javascript, css 파일을 통합한다( 병합)
-  병합후에 압축한다 ( gzip  및 난독화) 
-  압축 후에 캐쉬를 최대한 활용한다( expires 등의 만료기간을 주는것)
-  이미지  Sprite  기법을 사용한다.

이정도까지만 반영하여도 , 웹사이트 성능은 정말정말 좋아집니다.

 여러분의 웹사이트의 성능에 대한 측정을 해보고 싶다면, 아래의  YSlow 라는 툴을 사용해서 측정해보세요 ^^


참고사항.
마지막으로 몇가지 참고가 될만한 대표적인  URL 을 알려드립니다.

yui compress - 제가 좋아하는 압축툴입니다 ^^
http://www.julienlecomte.net/blog/2007/09/16/

jsmin - 대표적인 압축툴입니다.
http://www.crockford.com/javascript/jsmin.html

다양한 압축툴을 볼 수 있습니다.
http://www.askapache.com/tools/online-compression-tool-compares-packer-jsmin-dojo-and-yui-compressor.html

최적화에 대한 최신 정보<정말 좋은 내용입니다>
http://developer.yahoo.com/performance/rules.html


다음편에는 몇가지 방법만으로 사이트최적화를 할 수 있는 쉬운 방법을 소개하도록 하겠습니다.









니가요 HTML5_JS_CSS AJAX, compression, javascript, jsmin, optimization, packer, yslow, 최적화