웹사이트 최적화의 필수 조건

티스토리 뷰

웹포퍼먼스

웹사이트 최적화의 필수 조건

빼인트 2013. 12. 3. 10:06

개요

관련 책을 보고 개인적으로 다시 정리함
참고 자료 : O'REILLY 웹 사이트 최적화 기법(Steve Souders)
Samples Site : http://stevesouders.com/examples/

1. HTTP 요청을 줄여라.

HTML 문서를 다운 받는 데 소비되는 시간은 전체 응답 시간의 10~20%밖에 되지 않는다. 80~90%는 이미지,스크립트, 스타일시트, 플래시 파일들이다.
이러한 이미지,스크립트, 스타일시트, 플래시 파일들을 다운 받기 위해 HTTP 요청을 보내고 응답을 받는 데 많은 시간이 소요된다.
이미지 파일을 하나로 하여, 좌표에 의해서 이미지 처리하는 방법이 존재하나 일반적으로 이 1개의 큰파일이 오히려 용량이 크지 않나 생각하는데 이는 잘못된 생각이다. 각 이미지 파일들은 메타정보를 가지고 있는데 이 메타정보는 이미지 파일 용량에서 어느 정도 차지한다.
해결책 :
- 이미지 맵(Image Map) 사용
- - 장점 : HTTP 오버헤드를 줄일 수 있음
  - 단점
  - - 맵의 영역 좌표를 수동으로 작성 필요
    - 네모가 아닌 다른 모양을 만드는 것은 거의 불가능
    - DHTML로 이미지 맵을 만들면 IE에서는 동작하지 않음
- CSS Sprite
- 스크립트와 스타일시트의 결합
- - 가장 이상적인 상황은 각 페이지에 하나의 스크립트와 하나의 스타일 시트
  - 하나의 파일로 결합은 장,단점이 존재.
  - HTTP 요청 횟수를 줄이느냐? 소스 모듈화냐?

2. CDN(Content Delivery Network)을 이용하라.

사용자와 웹 서버 간의 거리는 페이지 응답시간에 큰 영향을 준다.
위에서 말한 80~90%를 차지하는 정적 파일들을 CDN으로 처리를 한다는 뜻
테스트 페이지
- CDN 적용 : http://stevesouders.com/hpws/ex-cdn.php
- CDN 미적용 : http://stevesouders.com/hpws/ex-nocdn.php

3. Header에 만료 기한을 추가하라.(Add an Expires Header)

헤더 만료 기한(Expires)을 이용함으로써 그 구성요소를 캐시에 저장할 수 있음
script, css, images등 static한 파일들이 증가함에 따라 많은 http request를 유발시킨다. 하지만, expire header를 추가하면 이것들 caching할 수 있다.
Expire header에 지정한 날짜가 지나기 전에는 http 요청을 하지 않는다.
Apache의 경우, ExpireDefault값을 이용하여 지정을 할 수 있다.
대부분의 웹 사이트는 구성요소에 캐시 만료기한을 지정하지 않고 있음
Apache Config 설정법

<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresDefault "access plus 1 month"
</IfModule>
or
<IfModule mod_expires.c>
    ExpiresByType image/gif A2592000
    ExpiresByType text/css A2592000
    ExpiresByType application/x-javascript A2592000
    ExpiresByType image/jpeg A2592000
# 제외할 디렉토리
    <Directory "/usr/local/apache/htdocs/temp">
        ExpiresActive Off
    </Directory>
</IfModule>

테스트 페이지
- Expires 설정 : http://stevesouders.com/hpws/expireson.php
- Expires 미설정 : http://stevesouders.com/hpws/expiresoff.php

4. Gzip 컴포넌트(Gzip Components)

압축 적용법
- HTTP 1.1 에서 부터 클라이언트에서 서버로의 HTTP요청 시 Accept-Encoding 헤더를 이용해 압축 지원 여부를 보내주게 된다.
- - Aceept-Encoding: gzip, deflate
- 서버에서는 위 클라이언트가 지정한 압축 방식 중 하나를 이용해 응답을 압축할 수 있다.
- Response Header 내에 Content-Encoding 속성을 통하여 클라이언트에게 사용된 압축 방식을 알려 준다.
- - Content-Encoding: gzip
- gzip 외에 deflate 압축 방식이 존재하지만, gzip의 사용하는 곳도 많을 뿐더러 효과도 좋기 때문에 gzip 추천(대부분의 Browser가 gzip을 지원함)
무엇을 압축할 것인가?
- 많은 사이트는 HTML을 gzip으로 압축한다.
- 텍스트 파일에만 가능(ex. HTML,JS,CSS..) / Binary는 안됨(ex. Image)
- 이미지와 PDF등은 이미 압축된 파일이기 때문에 gzip압축하면 안된다.(CPU리소스 낭비 또는 파일 크기 늘어남 우려)
- 일반적으로 gzip은 1~2KB보다 큰 파일일 경우에 적용해 볼 만한 가치가 있다,
- 미국 상위 10개 사이트의 gzip사용 여부

Site	Gzip HTML	Gzip 스크립트	Gzip 스타일시트
http://www.amazon.com	O
http://www.aol.com	O	some	some
http://www.cnn.com
http://www.ebay.com	O
http://www.google.com	O	O	O
http://www.msn.com	O	deflate	deflate
http://www.myspace.com	O	O	O
http://www.wikemedia.org	O	O	O
http://www.yahoo.com	O	O	O
http://www.youtube.com	O	some	some

설정
- apache 1.x
- - gzip 모듈 별도로 다운받아 설치하여 설정 필요
- apache 2.x
- - 기본적으로 mod_deflate 모듈이 apche2 패키지에 포함되어 있으므로 따로 설치할 필요는 없음
  - httpd.conf에서 LoadModule deflate_module modules/mod_deflate.so 주석 제거LoadModule deflate_module modules/mod_deflate.so
  - AddOutputFilterByType DEFLATE text/html text/plain text/xml application/javascript text/css 설정 추가 (vhost설정시 각 vhost에 별개 설정)
  - 참고 URL : http://httpd.apache.org/docs/2.0/ko/mod/mod_deflate.html
테스트 페이지
- gzip 압축 사용 : http://stevesouders.com/hpws/gzip-html.html
- gzip 압축 미사용 : http://stevesouders.com/hpws/nogzip.html

5. 스타일시트는 위에 넣어라.(Put Stylesheets at the Top)

이론적으로는 스타일시트 LINK태그를 이용하여, 페이지 하단에 추가하는 것이 페이지가 좀 더 빨리 로드 될것 같지만, 실제적으로는 <head>내에 추가하는것이 오히려 더 빨리 로드됨을 확인함.
"페이지 자체가 느린것 아니라, 시각적인 측면에서 느리게 브라우저상에 보이는 것이다."
왜 그럴까?
- 점진적인 렌더링
- - 화면이 점진적으로 나타나도록 하려면 CSS가 HTML 보다 먼저 다운로드 되어야 한다.
  - 브라우저가 페이지를 점진적으로 로드하면서 헤더, 내비게이션 바, 상위의 로고 등의 구성요소를 점진적으로 다운로드 하면서 바로 페이지에 보여주어 사용자에게 시각적으로 기다리는 시간을 줄여준다.
  - 스타일시트를 하단에 두면, 점진적인 렌더링을 못하게 한다.( 브라우저는 스타일이 변경되었을 경우에 다시 그려야 하는 것을 피하기 위해 렌더링을 멈추고 기다린다.)
- "스타일시트는 HEAD 안에 LINK 태그를 이용해서 넣어라"

6. JavaScript는 아래에 넣어라.(Put Scripts at the Bottom)

JavaScript를 넣는 방법
- JavaScript를 <head>안에 넣는 방법 - 보편적인 방법
- - JavaScript 를 먼저 처리 후 렌더링 및 다운로드를 시작하게 되어, 사용자 입장에서 페이지가 늦게 보이게 된다.
  - JavaScript를 처리하는 시간 만큼 병목 구간이 존재하게 된다.
- JavaScript를 아래에 넣는 경우 - <body>태그 내에 두되, </body>태그 바로 위에 작성
- - 렌더링의 방해를 받지 않고 페이지 안에서 눈에 보이는 구성요소는 가능한 한 일찍 다운로드 된다.
  - 렌더링은 이미 시작되어 있고, 보여질 이미지 파일들은 다 보여지고 나서 JavaScript를 처리하기 때문에, 사용자 입장에서는 페이지가 빨리 열리는 느낌을 갖게 된다.
- 예
- - 예를들어, 10초가 걸리는 .js파일을 <head>태그내에 넣어 두었다면 .html페이지 호출 시, 10초동안 병목현상이 발생한다. 이 10초짜리 .js를 처리 후 렌더리을 하게 된다.
  - 반대로, .js파일을 페이지 밑에 두었다면, 이미 렌더링은 계속 되는 동안에 .js파일을 처리할 것이다.
  - 이는, 사용자. 즉,UX와 관련하여 보다 나은 선택일 것이다.
- 아래의 링크를 따라, firebug를 통하여 렌더링 시간을 비교하여 보면 바로 이해가 될 것이다. 총 처리시간은 비슷하나, 느껴지는 페이지 열림은 굉장한 차이가 존재한다.
- - JavaScript를 위에 넣었을 경우 : http://stevesouders.com/hpws/js-top.php
  - JavaScript를 아래에 넣었을 경우 : http://stevesouders.com/hpws/js-bottom.php
"스크립트를 페이지 아래로 이동시켜라"

7. CSS Expression을 피하라.(Avoid CSS Expressions)

width: expression 식의 표현을 피하라.
좋은 기능이지만 UI 이벤트가 필터링되지 않기 때문에 매우 민감하게 반복적으로 반응하여 성능에 부정적인 영향을 야기함.
CSS를 동적으로 설정하는 강력하고 위험하기도 한 기능
IE 5와 그 이후 버전에서만 사용이 가능
ex) 매 시간 마다 다른색으로 변경 : background-color : expression((new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00");
"이 기능은 문제를 많이 일으키는 요소 중 하나이며, 사용하려거든 반드시 제대로 이해하고 사용하라"

8. JavaScript와 CSS를 외부 파일로 구성하라.(Make Javascript and CSS External)

2가지 방법이 존재한다.
- JavaScript, CSS 모두 HTML 문서내에 포한한다.
- - 장점 : HTTP요청 횟수를 줄인다.
  - 단점 : .css, .js 파일이 캐시가 되지 않는다.
- JavaScript, CSS를 외부 파일로 구성한다.
- - 장점
  - - css, .js 파일이 캐시 된다.
    - 여러 페이지에서 동일한 JavaScript를 사용시에 이미 그 파일은 브라우저 캐시 안에 존재한다.
  - 단점 : HTTP요청 횟수가 늘어난다.
판단
- 사용자당 페이지 뷰가 적을 경우(한달에 한번 보는 페잊) : 인라인 JavaScript와 CSS를 이용
- 사용자당 페이지 뷰가 많을 경우 : JavaScript, CSS를 외부 파일로 구성한다.

9. DNS 조회를 줄여라.(Reduce DNS Lookups)

DNS Lookup시간을 줄여야 한다.
도메인 이름을 최소화한다.
보통 2개의 도메인을 사용할 때 최적화된 처리를 한다.(Domain Sharding 관련)
일반적으로 브라우저에서 특정 호스트 이름 IP 주소를 조회하는 데 20~120 ms정도가 소요된다
브라우저는 호스트 이름을 가지고 DNS 조회가 완료될 때까지 어떤 것도 다운받을 수 없다.
그러나, 무작정 DNS 조회를 줄이면 Domain Sharding 과 연관되어 성능이 더 안좋을 수 도 있다.
따라서 DNS조회를 줄이는 것과 동시 다운로드를 최대한 활용하고자 하는 것이 좋은 절충안이 될 수 있다.

10. JavaScript, CSS 최소화(압축/minification) (Minify Javascript)

최소화 : 불필요한 문자(스페이스, 개행,탭)를 줄여서 파일 크기를 줄이는 작업
크기가 줄어드니, HTTP요청시 당연히 처리속도가 빠르게 된다.
단점 : 유지 보수시 불편함 존재 (난독화)
- 해결책:
- - min.js 와 src.js 를 별개로 관리한다. : JavaScript 라이브러리를 보면 src.js와 min.js로 구분되어 있는 바로 이것이다.)
  - JSMin 및 Dojo Compressor 라이브러리를 사용한다.
CSS의 최소화는 일반적으로 자바스크립트 보다 공백이나 주석이 더 적기 때문에 많은 효과는 없다.
- 동일한 클래스를 합치고 사용하지 않는 클래스는 삭제하는 작업이 필요하다.
- 또한, 주석과 여백을 제거하고 단축을 이용('#660066' 대신 '#606')
JavaScript, CSS 모두 온라인 상에서 압축툴이 존해하니, 이를 잘 활용하면 되겠다.

11. Redirect 사용을 피하라.(Avoid Redirects)

브라우저가 서버에 요청을 한번 하면 서버는 브라우저에게 바뀐 주소로 다시 요청하게 한다.
그럼 헤더에 있는 다른 주소로 브라우저가 다시 요청하게 된다.
즉, 하나의 페이지를 열기 위해 두번의 요청이 발생하게 된다.
URL을 이둉하는 것이 아닌 url수정을 통해 한번에 갈 수 있도록 한다.

12. 중복되는 스크립트를 제거하라.(Remove Duplicate Scripts)

불필요한 요청 및 파일 사이즈를 줄이기 위하여 중복되는 스크립트를 최대한 제거한다.

13. ETag를 변경하거나 삭제하라.(Configure ETags)

ETag(Entity Tag)는 HTTP 1.1에서 새롭게 나온 Header Directive 이다.
이는 브라우저의 Cache에 저장된 파일과 웹서버의 파일이 서로 일치하는지를 식별하기 위한 방법 중 하나이다.
일반적으로 ETag는 파일을 구분하기 위해 inode값을 사용하는데, 만약 여러 대의 웹서버를 사용하게 된다면 서버마다 inode값이 다르기 때문에 ETag값도 달라진다.
ETag값이 달라지면, 의도하지 않게 필요 없이 캐시(304 Not Modified)를 사용하지 않고 파일을 다시 다운로드(200 OK) 하게 된다.
예)

Request

Get /i/yahoo.gif HTTP/1.1 Host: us.yimg.com

Response

Last-Modified: Tue, 12 Dec 2010 03:03:59 GMT ETag ="0eba2638ed9c21:1e61"

위 0eba2638ed9c21:1e61 값의 앞의 0eba2638ed9c21는 요청한 자원의 Last-Modified날짜의 해시값이고, 접미사(1e61) 는 서버의 식별자이다.
즉, 서버가 2대 이상일 경우 다른 서버로 요청이 넘어가게 되면 1e61 값이 변경이 되기 때문에, 같은 요청일 지도 304(Not Modified) 가 아닌, 200 OK 를 찍게 되는 것이다
해결책
- ETag를 제거하거나, inode 값을 뺀다.
- ETag 제거하는 설정법
- - 여기서 주의해야 할점은 Option에서 Indexes설정이 추가되면 ETag설정이 지워지지 않으니, 해당설정을 반드시 제거해야 한다.
  - ```
  FileETag None
```

ETag 에서 inode값 제거하기

FileETag Directive 옵션

INode : inode값
MTime : 마지막으로 수정된 날짜
Size : 파일의 사이즈(byte)
All : 위 INode, MTime, Size 모두 표시(Default)
None : ETag를 제거

inode값을 제거하고 한다면, INode 옵션을 제거하면 된다.
- ```
FileETag MTime Size
```

14. Make Ajax Cacheable

Rule 3: Expires Header 설정
Rule 4: Gzip 압축 사용
Rule 9: DNS Lookups 줄임
Rule 10: Javascript Size 최소화
Rule 11: Redirect 사용을 자제
Rule 13: ETags 설정을 통하여 Ajax 성능 높임

저작자표시 비영리 변경금지

'웹포퍼먼스' 카테고리의 다른 글

table과 div의 렌더링 차이 (0)	2013.12.03

공유하기 링크

페이스북
카카오스토리
트위터

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2024/05 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

글 보관함

MC빼인트와 함께

티스토리 뷰

웹사이트 최적화의 필수 조건

'웹포퍼먼스' 카테고리의 다른 글

티스토리툴바