한 사이트가 있는대 여태 빠른 속도로 동작을 했는대 지금 출장나와서 테더링으로 인터넷을 하다가보니 문득 그 사이트만 열리지가 않는겁니다.
로딩이 굉장히 늦고 사이트가 100%열리지가 않습니다.
다른 사이트들은 그나마 빠른 속도로 로딩이 되는대 한 사이트가 좀 이상하네요
그래서 간만에 생각이 나서 다시 한번 읽어 보고 있습니다.
출처는 제가 정말 자주 도움을 받는 사이트
http://www.ibm.com/developerworks/kr/library/wa-speedweb/
웹 페이지 로드 속도 단축하기
차별화를 위한 20가지 이상의 팁
모든 사람이 고속 인터넷 연결을 사용하고 있지는 않다. 모든 사람이 고속 인터넷 연결을 사용한다고 하더라도 다양한 이유로 인해 웹 응용 프로그램의 속도가 느려질 수 있다. 오늘날 광대역 통신 속도가 꾸준히 향상되고 있기는 하지만 페이지 로드 시간에 주의를 기울이지 않아도 된다고 생각해서는 안된다. 단 몇 초의 페이지 로드 시간뿐 아니라 수 밀리초의 요청 및 응답 시간까지도 중요하게 생각하고 단축하여 방문자에게 향상된 웹 경험을 선사할 수 있다.
이 기사를 통해 웹 페이지 로드 시간 최적화에 대한 기본 개념을 이해할 수 있다. 또한 느린 속도로 로드되는 페이지 세그먼트와 병목 현상을 효과적으로 식별하는 데 필요한 도구와 관련 정보도 확인할 수 있다.
Mozilla Firefox가 설치되어 있으면 가장 좋다. 웹 개발과 관련된 일반적인 지식도 가지고 있어야 한다. 이 기사에서 다루는 주제는 어렵지 않지만 HTML(Hypertext Markup Language), CSS(Cascading Style Sheet) 및 JavaScript™ 프로그래밍 언어를 알고 있다면 빠르게 이해하고 넘어갈 수 있다. 원하는 편집기를 사용하면 되므로 IDE(Integrated Development Environment)가 필요하지는 않다.
브라우저에서 JavaScript를 사용해야 한다. 또한 Firebug 및 YSlow의 세그먼트를 따라하려면 Firefox 웹 브라우저가 설치되어 있어야 한다.
오늘날에는 많은 사람들이 DSL, 케이블, 파이버 옵틱 등의 광대역 연결을 통해 인터넷에 액세스하고 있다. 하지만 그러한 기술을 이용할 수 없는 사용자의 경우에는 어쩔 수 없이 전화 접속 연결을 사용해야 한다. 전화 접속 연결을 이용하던 시절이 먼 옛날처럼 느껴질지도 모르지만 웹 페이지가 실제로 한 줄씩 로드되던 그 시절을 떠올려보자.
다행히도 이 열악한 환경에 도움을 줄 수 있는 방법이 있다. 페이지의 로드 시간을 단축하여 사용자의 경험을 향상시킬 수 있다. 하지만 전화 접속을 이용하는 사용자를 위해서만 로드 및 응답 시간을 단축하는 것이 아니다. 고속 인터넷 연결이 많이 사용되고 있기 때문에 웹 사이트 성능 최적화가 별로 중요하지 않다고 생각하는 웹 디자이너가 많지만 이 생각은 현실과 동떨어진 생각이다. 예를 들어, 데스크탑 소프트웨어를 사용하여 수행되던 많은 작업을 오늘날에는 온라인으로 수행할 수 있다. 웹 애플리케이션의 응답 시간을 데스크탑 소프트웨어의 응답 시간과 동일한 수준으로 만든다는 것은 매우 어려운 일이며 성능 최적화가 매우 중요하다. 다행히 훨씬 빠른 인터넷 경험을 제공하기 위해 응답 및 로드 시간을 단축하는 데 사용할 수 있는 여러 가지 도구와 모범 사례가 있다.
모든 최적화 지향 작업에는 병목 현상을 진단하고 문제점을 식별할 수 있는 도구가 필요하다. 오늘날 웹 개발 작업에서 가장 많이 사용되는 도구 중에는 무료로 사용할 수 있는 오픈 소스 Firefox 플러그인인 Firebug와 YSlow가 있다.
Firebug(참고자료 참조)는 가장 유명한 Firefox 확장 중 하나로서 웹 개발자의 어려운 작업을 쉽게 수행할 수 있도록 도와 주는 애플리케이션이다. 이 애플리케이션에 포함된 유용한 기능은 다음과 같다.
- JavaScript 디버깅
- JavaScript 명령행
- JavaScript 성능 모니터링 및
XmlHttpRequests추적 - Firebug 콘솔 로깅
- 추적
- HTML 요소 검사 및 HTML 코드의 실시간 편집
- CSS 문서의 실시간 편집
YSlow(참고자료 참조)는 웹 페이지를 분석한 후 Yahoo!에서 초안을 제시한 고성능 웹 사이트에 대한 규칙(참고자료 참조)을 기반으로 웹 페이지가 느려진 이유를 알려 준다. YSlow는 Firebug에 통합된 Firefox 애드온 기능이므로 YSlow를 설치하고 사용하려면 먼저 Firebug를 설치해야 한다.
두 Firefox 확장은 모두 쉽게 설치할 수 있다. Firebug를 설치하려면 다음 단계를 수행한다.
- Firefox를 열고 Firebug 홈 페이지로 이동한다.
- 최신 버전의 Firebug를 설치한다.
- Firefox가 팝업을 차단하도록 구성되어 있는 경우에는 Allow를 클릭하여 설치 창을 연다. 그렇지 않은 경우에는 Install Now를 클릭한다.
- Firefox를 다시 시작한다.
이제 Tools 메뉴에서 Firebug에 액세스할 수 있다. 새 창 또는 기존 창에서 Firebug를 열 수 있다(그림 1 참조).
그림 1. Firefox 시작 페이지에 대한 Firebug의 HTML 및 Style 보기
Firebug를 설치한 후에는 YSlow를 설치해야 한다. 그렇게 하려면 다음을 수행한다.
- Firefox를 열고 YSlow 홈 페이지로 이동한다.
- 애드온을 설치하고 Firefox를 다시 시작한다.
참고: 다른 많은 Firefox 확장과는 달리 YSlow는 자동으로 시작되지 않으므로 먼저 활성화해야 한다.
- YSlow를 활성화하려면 상태 표시줄에서 해당 아이콘을 마우스 오른쪽 단추로 클릭한 다음 Autorun을 클릭한다.
그림 2에서는 YSlow 성능 분석의 결과를 보여 준다.
그림 2. Firefox 시작 페이지에 대한 YSlow 성능 분석
간단한 설계 규칙을 따르지 않은 것 때문에 최적화되지 않고 다운로드 속도가 느린 페이지가 많다는 사실은 정말 의외의 일이다. 다음과 같은 규칙을 잘 따르면 페이지 로드 속도가 한결 빨라질 것이다.
XHTML(Extensible HTML)에는 장점이 많지만 그에 못지 않게 단점도 많다. XHTML을 사용할 경우에는 표준과의 환성이 높은 페이지를 만들 수 있지만 세부 태그(필수 <start> 및 <end> 태그)가 많기 때문에 브라우저에서 다운로드해야 하는 코드도 많아진다. 이처럼 장단점이 서로 상쇄되므로 페이지에 사용되는 XHTML 코드의 양을 줄여서 페이지 크기를 줄이는 것이 좋다.
XHTML을 반드시 사용해야 한다면 페이지를 최대한 최적화해야 한다. 예를 들어, 공백을 제거하고 엄격한 XHTML 코딩 사례를 채택하여 다운로드 및 구문 분석 시간을 단축할 수 있다. XHTML Strict를 적용하려면 다음과 같은 doctype 문을 문서에 추가한다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
XHTML 1.0 Strict는 Strict HTML 4.01과 동일하며 HTML 4.01 스펙에 사용되지 않는 것으로 표시되지 않은 요소와 속성을 포함한다. XHTML Transitional에 허용되던 태그 쌍은 XHTML Strict에서 허용되지 않으며 예를 들어, 다음과 같은 태그가 있다.
<center><font><iframe><strike><u>
블로그(및 일반적으로 뉴스 사이트)가 널리 사용되기 전에는 가로 또는 세로로 스크롤하는 페이지를 좋은 페이지로 여기지 않았다. 페이지 크기가 작았을 뿐만 아니라 불가능하지는 않더라도 화면을 보기 좋게 채우기가 어려웠다. 그러나 오늘날에는 블로그 및 컨텐츠 지향적 웹 사이트가 많이 등장하면서 수백 KB 크기의 긴 페이지도 자주 볼 수 있다. 그렇다. 이제는 채워야 할 공간이 많아졌다. 그렇다고 해서 이 공간을 큰 배경 이미지, 수많은 테이블 또는 여러 가지 컨텐츠로 반드시 채워야 하는 것은 아니다. 적은 것이 좋은 것이다라는 최소화 원칙을 명심해야 한다. 페이지에 이미지, 비디오, 광고 등을 포함한 온갖 종류의 컨텐츠를 채우게 되면 페이지를 사용하기가 매우 불편해질 것이므로 페이지를 시각적으로 가득 채우기 전에 신중하게 한번 더 생각해야 한다.
다양한 브라우저에 표시되는 모습을 거의 제어할 수 없는 글꼴과는 달리 이미지는 항상 디자인한 것과 똑같은 모습으로 표시된다. 그렇지만 이 이유 때문에 텍스트 대신 이미지를 사용한다는 것은 이율배반에 가깝다.
이미지를 사용해서 텍스트를 표현하는 예는 탐색에서 많이 볼 수 있다. 귀여운 단추가 보기에는 좋을지 모르지만 이로 인해 로드 속도는 느려진다. 또한 이미지는 아직까지 검색 엔진에서 직접 인덱싱되지 않기 때문에 탐색 시에 이미지를 사용하는 것은 검색 엔진 최적화(Search Engine Optimization, SEO)에 어긋나는 것이다. 이미지를 사용하지 않고도 여러 가지 CSS 트릭을 사용하여 보기 좋은 모양의 단추를 만들 수 있기 때문에 텍스트 이미지로 텍스트를 표현할 이유가 없다.
CSS 스타일에 적합한 탐색 유형 중 하나는 그림 3과 같은 탭 스타일 탐색이다.
그림 3. 탭 스타일 탐색
이러한 방식으로 탐색을 구현하게 되면 "코드 길이가 짧아질" 뿐만 아니라 웹 표준에도 더 부합될 수 있다.
Listing 1 및 Listing 2의 코드는 순수 CSS/XHTML로 탭 기반 탐색을 구현한다.
Listing 1. 탭 기반 탐색을 위한 CSS 문서
#nav {
float:left;
width:100%;
background:#E7E5E2;
font-size:95%;
line-height:normal;
border-bottom:1px solid #54545C;
}
#nav ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#nav li {
display:inline;
margin:0;
padding:0;
}
#nav a {
float:left;
background:url("tableftK.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#nav a span {
float:left;
display:block;
background:url("tabrightK.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#nav a span {float:none;}
/* End IE5-Mac hack */
#nav a:hover span {
color:#FFF;
background-position:100% -42px;
}
#nav a:hover {
background-position:0% -42px;
}
#nav a:hover span {
background-position:100% -42px;
}
|
Listing 2. 탭 기반 탐색을 위한 HTML 코드
<div id="nav">
<ul>
<li><a href="#" title="Link 1"><span>Link 1</span></a></li>
<li><a href="#" title="Link 2"><span>Link 2</span></a></li>
<li><a href="#" title="Link 3"><span>Link 3</span></a></li>
<li><a href="#" title="Longer Link Text"><span>Longer Link Text</span></a></li>
<li><a href="#" title="Link 5"><span>Link 5</span></a></li>
</ul>
</div>
|
쿠키는 작은 용량의 파일일 수도 있지만 브라우저에서는 여전히 이러한 파일을 다운로드해야 한다. 쿠키의 크기가 큰 경우에는 다운로드하는 데 많은 시간이 걸리기 때문에 브라우저에서 페이지를 로드하는 데도 많은 시간이 소요된다. 바로 이 점 때문에 가능한 쿠키의 크기를 줄여서 브라우저 응답 시간에 미치는 영향을 최소화해야 한다.
또한 expire 날짜를 앞당기거나 expire 날짜를 아예 설정하지 않으면 응답 시간이 줄어든다. PHP 언어에서 쿠키에 대한 expire 날짜를 설정하려면 다음 코드를 사용한다.
<?php $expire = 2592000 + time(); // Add 30 day’s to the current time setcookie(userid, “123rrw3”, $expire); ?> |
이 코드는 userid라는 쿠키를 설정하면서 expire 날짜를 오늘부터 30일 이후로 설정한다.
필요 없는 JavaScript 코드를 포함시키지 않고 가능한 한 외부화하기
쿠키와 마찬가지로 JavaScript 파일을 사용할 경우에도 다운로드 시간이 필요하므로 전체 페이지의 속도가 느려질 수 밖에 없다. 따라서 JavaScript 파일을 사용할 경우에는 반드시 필요한 경우에만 사용하는 것이 좋으며 스크립트의 크기와 속도도 최적화해야 한다.
JavaScript의 다운로드 시간을 단축하는 또 다른 방법은 인라인 스크립트를 포함하는 대신 외부 파일을 사용하는 것이다. 이 방법을 CSS에 적용하면 외부화된 CSS 파일이 브라우저에 의해 캐싱된다. 이에 반해 HTML 페이지 자체에 인라인으로 코딩된 CSS 또는 JavaScript는 HTML과 함께 항상 로드된다. HTML에서 참조하는 방법을 통해 CSS 및 JavaScript 코드 로딩을 외부화하려면 다음과 같은 코드를 사용한다.
<link href="/stylesheets/myStyle.css" media="all" rel="Stylesheet" type="text/css" /> <script src="/javascripts/myJavascript.js" type="text/javascript"></script> |
테이블을 웹 페이지의 기본 빌딩 블록으로 사용하는 방법은 오늘날 좋은 페이지 레이아웃이라는 평가를 받지 못하고 있다. 물론 테이블을 사용해야 하는 경우도 있고 표 형식의 데이터를 표시할 경우에는 매우 효과적인 방법이다. 테이블을 사용할 경우에는 테이블 셀, 행 및 열의 너비와 높이를 명시적으로 지정해야 한다. 그렇지 않은 경우에는 브라우저에서 이들 항목을 표시할 방법을 계산하기 위해 많은 연산을 수행해야 하며, 결과적으로 페이지 로드 속도가 느려진다.
<td width="50px" height="10px">...</td> |
이 팁은 가장 확실한 방법임에도 불구하고 가장 자주 간과되는 팁 중 하나이다. 한번 더 말하지만 "적은 것이 좋은 것"이라는 원칙을 잊지 말자. 이 원칙은 다양한 사용자에게 제공되는 시각적인 요소뿐만 아니라 다운로드 및 처리할 항목까지도 최소한으로 유지하자는 의미를 담고 있다. 웹 페이지에 많은 용량의 컨텐츠를 꼭 담아야 하는 경우에는 페이지를 두 개 이상의 여러 페이지로 분할하는 것이 좋다.
JavaScript 파일 압축, HTTP(Hypertext Transfer Protocol) 압축, 이미지 크기 설정 등의 여러 가지 방법을 통해 웹 페이지를 최적화할 수 있다.
JavaScript 파일의 경우에는 크기가 매우 큰 경우도 있으며 심지어는 결합된 다른 모든 요소보다도 다운로드 시간이 오래 걸리기도 한다. 이 문제점을 해결하는 한 가지 방법은 JavaScript 파일을 압축하는 것이다. 이를 위해 많은 브라우저에서 지원되는 압축 알고리즘인 GNU zip(gzip)을 사용할 수 있다.
또 다른 대안은 최소화하는 것이다. 최소화는 탭, 줄 바꿈 및 공백과 같은 불필요한 모든 문자를 코드에서 제거하는 것이다. 코드에 남아 있는 주석과 공백까지도 제거하여 파일 크기를 줄일 수 있다. 최소화는 외부 및 내부 스타일 시트에 모두 사용할 수 있다. 가장 많이 사용되는 두 가지 최소화 도구는 JSMin 및 YUI Compressor이다(참고자료 참조).
HTTP 압축을 사용하고 항상 소문자 div 및 클래스 이름 사용하기
HTTP 압축을 사용하여 서버와 브라우저 사이의 트래픽을 줄일 수 있다. Apache(.htaccess 파일)에서 HTTP 압축을 구성하거나 페이지에 HTTP 압축을 포함시킬 수 있다(PHP의 경우 HTTP_ACCEPT_ENCODING 헤더 사용). 하지만 모든 브라우저에서 압축이 지원되는 것은 아니다. 압축이 지원되는 브라우저라고 하더라도 압축 및 압축 해제를 위해 프로세서가 사용된다. Apache에서 블랭킷(즉, 모든 텍스트 및 HTML) 압축을 사용하려면 다음 명령을 사용한다.
AddOutputFilterByType DEFLATE text/html text/plain text/xml |
또한 압축할 항목도 고려해야 한다. 이미지, 음악 및 비디오는 생성 시에 이미 압축되므로 HTML, CSS 및 JavaScript 파일만 압축하면 된다.
<div> 요소 및 클래스 이름을 소문자로 쓰게 되면 압축 효율을 높일 수 있다. 대소문자를 구분하고 손실이 없는 방식의 압축 스키마가 사용되기 때문에 <header>는 <Header>와 다른 것으로 인식되어 두 개의 서로 다른 태그로 압축된다. 다음 예제에서 Important 클래스와 important 클래스는 압축 프로그램에 서로 다른 항목으로 인식되기 때문에 서로 다른 두 개의 텍스트로 개별적으로 압축된다.
<div class="Important">read this!</div> <div class="important">This will cost you some valuable load time</div> |
이처럼 세부적인 부분은 매우 사소하게 보일 수도 있을 것이다. 하지만 파일을 최적화하는 작업에서는 천 리 길도 한 걸음부터라는 속담처럼 작은 것이 모여서 큰 것이 되는 것이다.
테이블 셀, 행 및 열과 마찬가지로 이미지 크기도 명시적으로 설정하지 않으면 브라우저에서 이미지를 표시하기 위해 계산을 수행해야 하므로 처리 시간이 길어진다. 또한 어떤 경우에는 이미지 크기가 잘못 계산되어 이미지가 올바르게 표시되지 않을 수도 있다.
여러 이미지를 사용하는 대신 이미지 맵을 사용하는 것 또한 로드 시간을 단축할 수 있는 방법이다. 이 경우에는 이미지의 여러 부분이 동시에 다운로드되기 때문에 전체 페이지의 다운로드 시간이 줄어든다. 혹은 CSS 스크립트(참고자료 참조)를 사용할 수도 있다. CSS 스크립트를 사용하면 HTTP 요청의 수가 줄어든다. 페이지를 장식 또는 레이아웃하는 데 필요한 모든 이미지를 단일 이미지에 담을 수 있다. CSS에서 특정 위치 및 크기를 호출하여 특정 요소에 사용되는 맵을 선택할 수 있다.
앞에서 필자는 불필요한 JavaScript 코드를 제거하여 로드 및 처리 시간을 단축할 것을 제안했다. 하지만 페이지에서 불필요한 JavaScript 코드를 모두 제거한 경우에는 어떻게 해야 하겠는가?
이 경우, 페이지 다운로드 시간을 단축하기 위해서 사용할 수 있는 한 가지 방법은 페이지가 좀 더 빨리 로드될 수 있도록 스크립트를 페이지의 끝에 배치하는 것이다. 일반적으로 브라우저는 같은 도메인에서 최대 2개의 오브젝트만을 동시에 다운로드하므로 다운로드되는 오브젝트 중 하나가 JavaScript 코드일 경우에는 스크립트의 다운로드가 완료될 때까지 다른 페이지 구성 요소의 다운로드가 중지된다. JavaScript 코드를 페이지의 끝에 배치하게 되면 대부분의 경우 다른 구성 요소의 다운로드가 완료된 후 마지막으로 JavaScript 코드가 다운로드된다.
Firebug 확장을 사용하여 느리게 로드되는 파일을 추적해 보면 JavaScript 파일이 가장 느리게 로드되는 파일 중 하나라는 것을 알 수 있다. JavaScript 파일을 압축하면 다운로드 속도가 단축되기는 하겠지만 그것만으로는 충분하지 않다. 다음 코드를 사용하여 JavaScript 로드를 지연시킬 수 있다.
var delay = 5;
setTimeout("heavy();", delay * 1000);
|
이 코드는 heavy() 메소드에 대한 호출을 5초 동안 지연시킨다. 이 코드를 다음에 설명하는 방법과 함께 사용하여 JavaScript 파일 전체에 대한 로드 작업을 지연시킬 수 있다.
JavaScript를 요청이 발생할 때 로드하려면 Listing 3과 같이 import() 함수를 사용한다.
Listing 3. import() 함수
function $import(src){
var scriptElem = document.createElement('script');
scriptElem.setAttribute('src',src);
scriptElem.setAttribute('type','text/javascript');
document.getElementsByTagName('head')[0].appendChild(scriptElem);
}
// import with a random query parameter to avoid caching
function $importNoCache(src){
var ms = new Date().getTime().toString();
var seed = "?" + ms;
$import(src + seed);
}
|
함수의 로드 여부를 확인한 후 로드되지 않은 경우 JavaScript 파일을 로드할 수 있다. 이렇게 하려면 Listing 4의 코드를 사용한다.
Listing 4. 함수의 로드 여부 확인하기
if (myfunction){
// The function has been loaded
}
else{ // Function has not been loaded yet, so load the javascript.
$import('http://www.yourfastsite.com/myfile.js');
}
|
참고: defer 속성을 사용할 수는 있지만 Firefox를 포함한 모든 브라우저에서 이 속성이 지원되는 것은 아니다.
CSS 파일은 적절하게 최적화하여 관리하면 용량이 클 필요가 없다. 예를 들어, CSS 파일에 분리된 클래스가 많으면 다운로드 시간이 길어진다. JavaScript 파일과 마찬가지로 필요한 항목만 포함되도록 CSS 파일을 최적화하여 적절한 크기로 유지해야 한다. 또한 인라인 정의보다는 외부 파일을 사용하여 브라우저의 캐시 메커니즘을 활용하는 것이 좋다.
CDN(Content-Distribution Network)은 다운로드 시간을 개선할 수 있는 또 하나의 좋은 방법이다. 인터넷에 연결된 여러 서버에 정적 이미지를 배치해 놓을 경우 사용자는 가까운 서버에서 이미지를 다운로드할 수 있다. 또한 대부분의 CDN은 빠른 서버에서 실행되므로 서버의 로드 방식에 상관 없이 오버로드된 소형 서버에 비해 훨씬 빠르게 응답할 수 있다.
CDN의 추가 장점은 CDN이 별도의 도메인이라는 점이다. 브라우저에서는 단일 도메인에 대한 동시 연결 수가 제한되어 있으므로 페이지가 로드될 때마다 모든 스레드가 사용되기가 쉽다. 따라서 다른 자산에 대한 연결이 지연된다. 하지만 다른 도메인에 대한 새 스레드 또는 연결일 경우에는 브라우저에서 열 수 있으므로 다른 도메인에서 로드된 자산이 다른 모든 자산과 함께 동시에 로드된다.
Google Gears(참고자료 참조)는 동일한 컨텐츠를 반복해서 다운로드하는 사용자에게 많은 여유를 준다. Gears를 통해 사용자는 웹 애플리케이션에 오프라인으로 액세스할 수 있을 뿐만 아니라 페이지 요소를 사용자의 컴퓨터에 지속적으로 유지할 수도 있다. 따라서 업데이트는 되지 않고 로드만 자주 되는 컨텐츠의 경우 SQLite3관계형 데이터베이스 시스템인 Gears 데이터베이스에 저장할 수 있다. 동일한 컨텐츠에 대한 모든 next 요청을 서버가 아닌 데이터베이스에서 직접 로드할 수 있다.
Gears를 설치한 후에는 Gears 팩토리 및 API(Application Programming Interface)에서 gears_init.js를 다운로드하여 gears_init.js,라는 이름으로 저장한 후 다음과 같이 코드에서 이 파일을 참조한다.
<script type="text/javascript" src="gears_init.js"></script> |
Gears가 설치되었는지 확인하려면 Listing 5의 코드를 사용한다.
Listing 5. Gears의 설치 여부 확인하기
<script>
if (!window.google || !google.gears) {
location.href = "http://gears.google.com/?action=install&message=<welcome message>"
+ "&return=<return url>";
}
</script>
|
Gears가 설치되어 있지 않을 경우 이 코드는 Gears를 다운로드할 수 있는 URL을 사용자에게 제공한다.
유효성 검사가 완료되고 Gears가 설치되면 Listing 6의 JavaScript 코드를 사용하여 Gears의 유용한 데이터베이스 기능을 테스트할 수 있다.
Listing 6. 데이터베이스 기능 테스트하기
<script type="text/javascript">
var db = google.gears.factory.create('beta.db');
db.open('database-test');
db.execute('create table if not exists Test' +
' (Phrase text, Timestamp int)');
db.execute('insert into Test values (?, ?)', ['Monkey!', new Date().getTime()]);
var rs = db.execute('select * from Test order by Timestamp desc');
while (rs.isValidRow()) {
alert(rs.field(0) + '@' + rs.field(1));
rs.next();
}
rs.close();
</script>
|
이 코드를 실행하면 컴퓨터 또는 서버에 db라는 로컬 데이터베이스가 생성된다. Test라는 테이블을 생성하고(아직 없는 경우) 일부 테스트 데이터(Monkey! 및 시간)를 삽입한다. 이 코드는 데이터베이스에서 데이터를 검색한 후 해당 데이터를 브라우저의 경고로 표시한다.
모든 가능성을 상상해 보자!
GIF(Graphic Interchange Format) 및 JPEG(Joint Photographic Experts Group) 이미지 형식은 과거의 형식이며 PNG(Portable Network Graphic)는 미래의 형식이다. 물론 GIF와 JPEG이 전혀 사용되지 않는다거나 PNG에 단점이 없다고는 말할 수 없다. 단지 모든 형식이 동일한 기능을 제공하지만 PNG가 최적의 파일 크기로 좋은 품질을 제공한다는 것이다. 그러므로 선택할 수 있다면 PNG 이미지를 사용하는 것이 좋다.
여러 해 동안 사용되고 있는 Ajax(Asynchronous JavaScript + XML)라는 기술은 페이지 요청 및 응답을 효과적으로 처리할 수 있는 혁신적인 방법을 제공한다. 하지만 많은 경우 Ajax를 사용하려면 브라우저와 서버 간에 수많은 통신이 필요하기 때문에 전화 접속 사용자는 Ajax의 진정한 장점을 누릴 수 없었다. 그러므로 Ajax 호출을 짧고 적절하게 유지할 수 있다면 사용자가 요소를 새로 고치거나 응답하기 위해 무한정 기다려야 하는 상황을 방지할 수 있다.
핵심 Ajax 호출을 만들고 클라이언트 데이터를 로컬에서 처리하기
짧은 Ajax 호출이 불가능하거나 위의 방법으로 원하는 결과를 얻을 수 없는 경우에는 필요한 모든 항목을 가져오는 핵심 Ajax 호출을 만든 후 클라이언트에서 데이터를 로컬로 처리하는 방법을 대안으로 사용할 수 있다. 이렇게 하면 클라이언트는 데이터를 가져오기 위해 한 번만 대기하면 되며, 데이터를 가져온 이후에는 브라우저와 서버 사이에 통신이 필요하지 않기 때문에 데이터를 훨씬 빠르게 처리할 수 있다. 물론 Ajax 최적화와 관련해서는 이 기사에서 설명하는 방법 외에도 여러 가지 방법이 있다. Ajax에 대한 자세한 정보는 참고자료에서 볼 수 있다.
이 팁 또한 자주 잊어버리는 상식적인 팁 중 하나이다. 애플리케이션을 시작하기 전에 테스트를 수행하지 않는 웹 개발자야 없겠지만 유지보수 작업 중에 테스트를 생략하거나 심사 숙고하지 않거나 테스트를 수행하지 않은 채로 새 기능을 너무 성급하게 추가하는 경우가 종종 있다. 그 결과 스크립트의 나머지 부분이 느려진다.
새 기능을 추가할 경우에는 애플리케이션과 완전히 분리되어 있는 샌드박스에서 코드를 먼저 테스트하여 단일 기능으로서 온전하게 실행되는지 확인해야 한다. 이 방법을 통해 웹 애플리케이션의 나머지 부분을 건드리지 않고도 성능 및 응답 시간을 검사, 재검사 및 분석할 수 있다. 그런 다음 새 기능이 예상대로 작동되면 애플리케이션에 새 기능을 추가한 후 다른 테스트를 수행하여 해당 기능이 기대대로 작동되는지 확인할 수 있다.
자기 반영이 좋은 도움이 될 때가 많다. 다행히 개발 작업 중에 자기 반영을 통해 목표와 결과를 최대한 일치시킬 수 있는 유용한 도구가 있다. JSLint와 같은 도구(참고자료 참조)는 해당 사이트에 적혀 있는 대로 "사용자의 기분을 상하게 할 수도 있지만" 디버깅하기 어려운 문제점뿐만 아니라 잠재적으로 응답 시간에 영향을 줄 수 있는 단점을 포함한 모든 잠재적 코드 단점을 알려주므로 매우 유용하다.
JSLint를 사용하여 JavaScript 코드의 오류 또는 잘못된 코드 검사하기
좋은 JavaScript 코드를 만들기 위해 굳이 완벽주의자가 될 필요는 없다. 하지만 코드를 진지하게 분석하지 않고 개발 프로세스 중에 이 단계를 생략하는 개발자도 많다. 오류와 잘못된 코드는 전문성을 떨어뜨릴 뿐만 아니라 애플리케이션의 속도에도 영향을 줄 수 있다. 브라우저에서 오류와 잘못된 코드를 처리하게 되면 로드 시간이 길어질 뿐만 아니라 디버깅하기 어려운 오류가 발생할 수도 있다.
따라서 좋은 코드를 만들려면 코드 분석 도구를 사용하는 것이 좋다. 다양한 도구를 사용할 수 있지만 JavaScript 언어에 가장 적합한 도구 중 하나는 JavaScript Lint 또는 JSLint(참고자료 참조)이다. @@@YSlow에 포함되어 있는 Firebug를 사용할 수도 있으며 JSLint가 좀 더 현학적이다.@@@
분리된 파일과 누락된 이미지를 검사하는 것도 효과적인 방법 중 하나이다. 올바르지 않은 파일 참조의 경우에는 대부분의 웹 개발자가 검사하고 있음에도 불구하고 언급할 필요가 있을 만큼 중요한 문제이다. 누락된 파일은 "이미지/페이지를 표시할 수 없습니다"와 같은 오류 메시지를 발생시키므로 중요한 문제이다. 하지만 웹 페이지 속도 최적화의 관점에서 누락된 파일은 훨씬 심각한 단점을 가지고 있다. 즉, 브라우저가 누락되거나 분리된 파일을 찾게 되면 리소스 사용이 늘어나면서 페이지 처리 속도가 느려질 수 밖에 없다. 그러므로 철자가 잘못된 파일 이름을 비롯하여 분리되거나 누락된 파일을 검사해야 한다.
@@@YSlow Firebug 확장은 획기적으로 개선된 웹 페이지 분석 기능을 제공한다.@@@ Yahoo!에서 초안을 마련한 고성능 웹 사이트를 위한 정의 규칙을 통해 YSlow는 웹 페이지를 분석하여 속도가 느려진 이유를 사용자에게 알려 준다.
YSlow는 비교적 작은 용량이지만 매우 유용한 기능을 제공하는 Firefox 확장이다. YSlow를 실행하면 브라우저 아래쪽에 확장이 열린다(그림 4 참조).
그림 4. Firefox에 표시된 YSlow 확장
그림 4에서는 Performance 보기를 보여 준다. 이 보기에서는 YSlow에서 평가한 페이지의 성능과 발견된 문제점을 볼 수 있다. 목록에 있는 링크를 클릭하면 오류에 대한 설명을 보여 주는 페이지가 열린다. 향상시킬 수 있는 페이지 구성 요소가 있는 경우에는 YSlow에 해당 개선 사항이 표시된다.
그림 5의 Inspect 보기에서는 요소별로 페이지 요소를 구분할 수 있다. Inspect 보기에서 가장 유용한 기능 중 하나는 페이지 위에서 마우스 포인터를 움직이면 페이지가 자동으로 새로 고쳐지므로 검사할 행을 찾기 위해 긴 코드 행을 스크롤하지 않아도 된다는 것이다.
그림 5. Firefox에 표시된 YSlow Inspect 보기
이름으로 알 수 있듯이 Stats 보기(그림 6 참조)에서는 현재 페이지에 대한 통계 데이터를 보여 준다. @@@이 데이터는 비어 있거나 캐싱된 캐시 및 쿠키를 포함한다.@@@
그림 6. Firefox에 표시된 YSlow Stats 보기
그림 7의 Components 보기에는 현재 페이지의 구성 요소가 나열된다. 각 구성 요소에 대해 표시된 데이터는 파일 유형 및 경로, 페이지 만료 날짜 및 HTTP 응답 헤더를 포함한다. 구성 요소를 클릭하면 해당 구성 요소가 볼 수 있도록 열린다. 열 머리글을 클릭하여 오름차순 또는 내림차순으로 테이블을 정렬할 수 있다.
그림 7. YSlow Components 보기
YSlow는 페이지의 로드 속도를 단축하는 데 많은 도움이 되는 작고 유용한 확장이다. 아직 시도해 보지 않았다면 지금 바로 사용해 보자.
웹 페이지의 속도를 최적화하는 작업은 별로 어려운 작업이 아니다. 실제로 최소한의 노력으로 속도를 최적화할 수 있다. 이 기사에서 설명하는 팁을 따르면서 웹 개발 모범 사례를 활용하면 불필요한 작업 없이 페이지 로드 시간을 단축할 수 있다.
페이지 최적화와 관련된 여러 유용한 팁을 모아서 제공하고 있는 이 기사가 많은 도움이 되기를 바란다. 게다가 이 기사에서 설명하고 있는 팁은 속도 최적화와 관련된 목록의 전부라고 해도 과언이 아니다. 이 기사에서 설명한 20여 가지의 팁을 잘 따르면 전화 접속과 전용 광대역 회선을 사용하는 사용자 모두가 만족할 수 있을 정도로 로드 속도가 빠른 페이지를 만들 수 있다.
교육
- Wikipedia에서 광대역 인터넷 액세스 및 측정 기준에 대한 일반적인 정보를 확인할 수 있다.
- Yahoo! Exceptional Performance 팀에서 초안을 마련한 고성능 웹 사이트 규칙을 읽어 보자.
- Martin Brown이 쓴 "Using HTTP Compression"(ServerWatch, 2005년 6월)에서 HTTP 압축과 관련된 자세한 정보를 볼 수 있다.
- CSS sprite에서 CSS sprite에 대한 정의와 CSS sprite를 사용하여 이미지 로드 시간을 단축하는 방법에 대한 설명을 볼 수 있다.
- JavaScript 로드 시간을 단축하는 방법을 살펴보자.
- Jesse Skinner의 "애플리케이션 개발시 Ajax를 사용해야 할 부분과 시점"(developerWorks, 2008년 2월)을 읽어 보자.
- gzip 압축 라이브러리에 대해 자세히 알아보자.
- developerWorks 웹 개발 영역에서 Web 2.0 개발과 관련된 도구와 정보를 볼 수 있다.
- developerWorks 기술 행사 및 웹 캐스트: 최신 기술에 대한 정보를 얻을 수 있다.
- 기술 서점: 다양한 기술 주제와 관련된 서적을 살펴볼 수 있다.
제품 및 기술 얻기
- JSMin을 사용하여 JavaScript 파일의 크기를 최소화하자.
- YUI Compressor는 Yahoo!의 JavaScript 압축 프로그램으로 Yahoo! UI Library의 일부이다. 이 사이트에서는 코드 압축과 관련된 다양한 주제를 설명하는 여러 가지 유용한 기사와 이상적인 코드가 부작용을 없애 주는 방법에 대한 설명을 볼 수 있다.
- JSLint는 잘못된 코드 문제를 식별하는 데 유용하다.
- Firebug는 사용하기 쉬운 다양한 개발 도구를 제공하는 Firefox 애드온이다.
- Google Gears를 살펴보고 다운로드할 수 있다.
- YSlow는 Yahoo!에서 개발한 Firebug 애드온으로 페이지를 분석하여 페이지의 속도가 느린 이유를 알려 준다.
'Interesting > TIPTECH' 카테고리의 다른 글
| 아이패드 3세대 3G+WiFi 전파인증 완료 (2) | 2012.04.05 |
|---|---|
| 안녕하세요 서태지 입니다. (0) | 2012.03.26 |
| 구글 아날리틱스 (0) | 2012.02.15 |
| Infographics Social Media The Growth of Social Media (0) | 2012.01.31 |
| 2012년 1월 경남행정기관 페이스북 운영을 지켜보며 (0) | 2012.01.18 |