Creative Commons License

Community

공지/뉴스
지식공유
질문/답변
자료실
자유로운 글
방명록

공유를 넘어 교류로... 제가 알리는 말씀 및 사이트 이용자들이 함게 참여하는 커뮤니케이션 공간입니다.

.

지식공유

여러분들의 개발 관련 기술이나 팁을 공유해 주세요~ 자신이 가진 작은 팁 하나가 어떤이에게는 몇 일을 삽질하게 만드는 것일 수 있습니다 ^^

웹 사이트 성능 개선 팁

작성자 허둥9단
작성일 2008-11-24 오후 4:57:33,    조회수 : 3056

웹 사이트 성능 개선 팁

 


1.
개요

 

웹사이트의 성능을 결정 하는 요소에는 크게 서버 단, 네트워크 단, 브라우저 동작으로 나눌 수 있다.


즉 사이트의 성능을 진단해 보자고 한다면 위의 서버단, 네트워크단, 브라우저 동작을 진단 해야 한다.


여기에서 네트워크의 속도는 개발자 이외의 영역이므로 이를 제외한 서버단과 브라우저 동작 만을 점검 할 것이다.


브라우저 동작을 진단 할 기준 또는 항목으로 Yahoo Developer Network Exceptional Performance

팀에서 소개한 best practices for making web pages fast 목록들을 사용 할 것이다.


이 리스트에는 7가지 분류의 34가지 지침 들이 포함 되어 있으며 이중 mobile 분류 아래 2가지 지침 및

기본적인 항목은 제외 할 것이다.


서버 및 브라우저 단 동작을 진단 할 도구로 IE Watch IBM Page Detailer를 사용 할 것이다.


서버 단 성능 최적화를 위해서는 DataBase Tunning 및 서버 단의 Logic 및 데이터 이동 간의 병목 현상 등을

진단 해야 할 것이다.


하지만 전체 코드 Logic 을 검사 하거나 데이터 베이스 튜닝을 개발자가 단독으로 진단 하기에는 시간적 소모가

클 뿐 아니라 진단에도 어려움이 있으므로 www.realsoftwaredevelopment.com 에 소개된

20 Tips to Improve ASP.net Application Performance
항목들을 기준으로 서버 단 코드 및 항목들을 살펴 볼 것이며

데이터 베이스 튜닝은 협조를 얻어 진행 되어야 할 것이다.

 

 

2. 클라이언트 단

 

2.1. Put Stylesheets at the Top


브라우저는 다운받은 콘텐츠를 받은 즉시 화면에 보여 준다.

브라우저가 페이지를 점진적으로 로드하면서 헤더, 네비게이션 바, 상위의 로고등의 구성요소를

점진적으로(다운로드 되는 데로 바로) 페이지에 보여주고 사용자에게 기다리는 시간을 피드백 해 주게 된다.


스타일시트를 페이지 하단에 넣는 것의 문제는 여러 브라우저에서 점진적인 렌더링을 못하게 한다는 것이다.


브라우저는 스타일이 변경되었을 경우에 다시 그려야 하는 점을 피하기 위해 렌더링을 멈추고 기다린다.


스타일 시트를 문서에 포함시키는 방법으로 Link 태그를 이용하는 방법과 @import를 이용하는 방법이 있다.

 

<link rel="stylesheet" href="styles.css">

<style>

    @import url("styles.css");

</style>

 

Style 블록 안에는 여러 개의 요소가 있을 수 잇지만 @import 요소는 그 밖의 요소보다 앞서서 선언 되어야

제대로 동작 한다
또한 성능 명에서도 @import 보다 Link가 더 좋다.


2.2. Make JavaScript and CSS External


사실 JavaScript CSS 파일을 외부 파일로 만드는 것보다 인라인으로 페이지 안에 첨부하는 것이 더 빠르다.


인라인 코드와 외부 파일의 데이터 용량이 같다면 외부 파일의 경우 HTTP요청이 여러 번 생성 되기 때문에

인라인 코드가 더 빠른 것이다.


하지만 실제 자바스크립트와 CSS가 외부 파일로 브라우저에 캐시되어 있다면 추가적인 HTTP요청도 없을 뿐만 아니라

HTML
문서의 크기를 줄일 수 있어 더 빠른 페이지를 만들어 낸다.


물론 여기에서 중요한 부분은 외부 자바스크립트와 CSS 구성요소가 HTML 요청 수에 비해서 얼마만큼 자주

캐시 되느냐는 것과 캐시된 자바스크립트와 CSS가 다른 페이지에서 재사용되는 비율이 얼마나 되느냐 이다.


2.3. Minify JavaScript and CSS


여기에서 최소화는 코드의 불필요한 문자를 줄여서 파일 크기를 줄여 로딩 시간을 개선하는 것을 말한다.


자바스크립트의 경우 코드를 최소화 하면 모든 주석뿐만 아니라 필요 없는 공백(스페이스, 개행, )이 제거되어

다운로드 되는 파일의 용량이 줄어들기 때문에 응답 시간이 더 빨라진다.


자바스크립트 코드 최소화 툴 중에서 인기 있는 두 개의 툴이 JSMin YUI Compressor 인데.

YUI compressor
CSS또한 최소화 하여 준다.

CSS를 최소화할 경우 일반적으로 자바스크립트에 적용하는 만큼의 효과를 낼 수는 없는데

그 이유는 일반적으로 자바스크립트보다 공백이나 주석이 더 적기 때문이다.


난독화(obfuscation)은 소스코드에 적용 되는 최소화의 대안적인 기술이다.


최소화처럼 주석화 공백을 줄여주면서 함수와 변수의 이름을 더 짧게 만들어 최소화 보다 더 코드 크기가 줄어든다.


난독화 툴로 알려진 것 중 하나가 ShrinkSafe 이다.


아래 사이트에서 최소화 및 난독화에 대한 자세한 내용을 확인 할 수 있다.


http://hometown.aol.de/_ht_a/memtronic/


 

JavaScript / CSS 최소화 전과 압축 후













2.4. Use GET for AJAX Requests


XMLHttpRequest
를 사용 할 때 Post방식을 적용 한다면 두 가지 단계로 나누어 져서 작업이 진행 된다.


첫째 헤더를 전송 한다. 둘째 데이터를 전송 한다.


하지만 Get 방식을 사용 할 경우 단지 한번의 TCP 패킷을 보내게 된다.

IE
URL 최대 길이는 2K 이므로 만약 2K 이상의 데이터를 전송 하고자 한다면 Get 방식을 사용 할 수 없게 된다.


웹메소드에 [ScriptMethod(UseHttpGet=true)] 속성을 선언하여 Get 방식의 XMLHttpRequest를 사용하자.

 

 

3. 서버단


3.1. Disable Session State


Session State
를 사용 하지 않는다면 Session State mode를 비활성화 한다.


페이지에는 다음과 같이 설정 한다.

 

<%@ Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="false"

Inherits="WebApplication1.WebForm1"  EnableSessionState="false" %>

 

또한 어플리케이션 전체에 SessionState를 비활 성화 하기 위해서는 Web.config 파일에 다음과 같이 설정 한다.

 

<pages validateRequest="false" enableSessionState="false">

 

3.2. Repeater Control Recommend, No use DataList, DataGrid, and DataView controls


DataList, DataGrid, and DataView
컨트롤은 무거운 HTML 코드로 클라이언트에 전송 하여 성능 관점에서 보면

좋지 않다.
하지만 Repeater 컨트롤은 성능면에서 매우 가벼우므로 사용이 권장 된다.


3.3. Take advantage of HttpResponse.IsClientConnected


큰 연산을 수행 하기 전에는 Response.IsClientConnected 속성을 사용 하여 클라이언트가 아직 연결 되어 있는지를

확인 한 뒤 작업을 하는 것이 좋다.

 

if (Response.IsClientConnected)

{

// If still connected, redirect

// to another page.

Response.Redirect("Page2CS.aspx", false);

}

else

{

Response.End;

}


3.4. Always check Page.IsValid when using Validator Controls


Validator
컨트롤을 사용한다면 페이지를 전송 하여 작업을 처리 하기 전에 Page.IsValid 속성을 사용 하여

전송 된 데이터 값들을 확인 하여야 한다.


3.5. Turn Off ViewState


Postback
이 사용 되지 않는 다면 viewstate disable 하게 설정 하여야 한다.


그렇지 않으면 기본값으로 viewstate가 켜져 있게 되고 사이트를 느리게 만든다.

 

public ShowOrdersTablePage()

{

    this.Init += new EventHandler(Page_Init);

}

 

private void Page_Init(object sender, System.EventArgs e)

{

    this.EnableViewState = false;

}



=====================================================
야후 개발자 네트워크에서 얻은 자료를 추려내서 작성했습니다.
=====================================================

이름
비밀번호
홈페이지
MO <- 왼쪽의 문자를 오른쪽 박스에 똑같이 입력해 주세요