웹사이트 속도를 높이는 방법1
DotNet/asp.net 2007/09/28 16:13 |
Exceptional Performance : Thirteen Simple Rules for Speeding Up Your Web Site
에 대한 단상
원래는 포스트 하나에 다 쓸려고 했으나 너무 많아서...나눠서 쓰기로 했음.
1~13 까지 연재됨
Minimize HTTP Requests
script 태그, link 태그, object 태그 , style 태그 , image 태그등과 같이 http 요청을 다시 유발하는 것들을 되도록 줄이라는 내용. 이런 페이지 구성요소들을 다시 불러오는 것이 응답시간의 80%를 점유 한다고 한다.
개선 방법으로 디자인를 간단히 하라는 것. (ㅡㅡ;)
그러나 RICH 한 UI 가 대세인 요즘. 아래의 방법이 속도를 빠르게 하는 팁이다.
에 대한 단상
원래는 포스트 하나에 다 쓸려고 했으나 너무 많아서...나눠서 쓰기로 했음.
1~13 까지 연재됨
Minimize HTTP Requests
script 태그, link 태그, object 태그 , style 태그 , image 태그등과 같이 http 요청을 다시 유발하는 것들을 되도록 줄이라는 내용. 이런 페이지 구성요소들을 다시 불러오는 것이 응답시간의 80%를 점유 한다고 한다.
개선 방법으로 디자인를 간단히 하라는 것. (ㅡㅡ;)
그러나 RICH 한 UI 가 대세인 요즘. 아래의 방법이 속도를 빠르게 하는 팁이다.
- Image maps 의 활용 : 한줄로 정렬된 메뉴 버튼 같은 경우 통으로 된 하나의 이미지를 불러다가 쓰고 이미지맵을 통해 링크 처리한다. 이미지 사이즈는 비슷하며 대신 한번의 요청으로 불러오게 됨으로 http 요청수가 줄어든다. 단 , 열라 까다롭고 귀찮다.
- CSS Sprites : 필요한 모든 이미지를 이미지 한장에 모두 담고 한번의 요청으로 가져온다.사용할때는 CSS 의 스타일로 적용해 통짜 이미지에서 필요한 부분만 보이게 해서 사용한다. 이것도 상당히 귀찮다.그리고 CSS 크기가 증가한다.
- Inline images :
data:URL scheme 를 이용해 이미지 바이너리 표현을 페이지내에 하드코딩하는 것이다.(오 무식하다) - Combined files : 스타일시트파일도 하나, 스트립트 파일도 통짜로 하나..뭐 이렇게 하는 것이다. 미국의 상위 10위안에 드는 사이트의 평균이 페이지당 스타일시트2개 스크립트파일 7개를 로딩한다고 한다.
여기서 의문점! 대부분 static 파일에 대한 이야기다. 대부분의 브라우저는 static 파일에 대해 cache 한다. 대부분의 파일이 캐쉬된다고 한다면 무시해도 되는 것이 아닐까?
캐쉬된 컨텐츠라해도 어차피 요청은 날라가고 304 응답이 떨어져 리턴되는 것마저 무시할 수 없는 것이라면 위의 방법을 고려해야 한다는 것이다.
Browser Cache Usage - Exposed! 를 보면 40-60% 의 방문자가 브라우저 캐쉬의 혜택을 보지 못한다고 한다. 따라서 static 파일이라고 해도 그 수를 줄이는 것이 방문자에게 체감속도를 높이는 방법이라고 한다.
여러분의 의견은?
'DotNet > asp.net' 카테고리의 다른 글
| 웹사이트 속도를 높이는 방법4 (0) | 2007/10/02 |
|---|---|
| 웹사이트 속도를 높이는 방법 3 (0) | 2007/10/01 |
| 웹사이트 속도를 높이는 방법2 (0) | 2007/10/01 |
| 웹사이트 속도를 높이는 방법1 (7) | 2007/09/28 |
| iframe 으로 다른 도메인의 페이지를 호출하는 경우 쿠키 문제 (5) | 2007/06/28 |
| 웹어플리케이션 설치시 web.config 설정하기 만들기 (1) | 2007/05/28 |
댓글을 달아 주세요
제가 써본 무식한 방법은 static파일을 강제로 캐시되게 하는겁니다. 그러니까 expire타임을 무한대로 줘서 304조차 확인안하게. 문제는 파일을 바꿔도 다시 로드안한다는거. 그래서 파일 바꿀일이 있으면 이름까지 바꾼다는거. ㅋㅋㅋ
일반 페이지말고 한번 만들어놓고 안고치는 페이지에는 쓸만했어요. 그 페이지는 사진편집페이지라 아이콘이 무쟈게 많았거덩요. 그러고 AJAX이런거 모르던 시절이라 감춰져있는 뷰도 모두 hidden으로 만들어놔서 처음에 로드되게 했었거덩요. - - 물론 위에서 말한 몇가지 테크닉 또는 꼼수를 알지도 못하고 관심도 없던 시절이었구요...
음... 근데 지금 하라고 해도 저 방법을 쓸듯. ^^ ;
expire 타임을 무한대로 줘도 304 처리는 합니다.
Response 해더에 if-modified-since(이름이 맞는지 잘 기억이..)해더값을 신규날자를 셋팅해주지 않으면 expire 타임 까지 캐시가 살아있게 되죠.
expire 타임은 캐시의 유효날자 역할만 하는 것으로 압니다. 기본적으로 대부분의 웹브라우저와 웹서버는 정적인 파일에 대해 클라언트캐시와 서버캐시를 모두 사용합니다.
그렇군요.
사실 헤더를 프로그램적으로 셋팅한건 아니고, IIS셋팅에서 어떻게 했었고 그렇게 문제가 해결되어서 그랬었거니 하고 있었는데...
댓글을 쓸때마다 무식이 새록새록하네요. ^ ^ ;
이미지라 그렇게 셋팅하기 전에도 Not modified로 처리되었을텐데... 왜 문제가 해결되었던건지 미스테리네요. 암튼 걍 대충 짐작으로 넘어가는 저의 습관에 대해서 다시 한번 반성하는 계기가 되네요. ㅋㅋ
expire 해더는 3번째에서 다뤄지네요.
저도 다시 한번 봐야 겠네요
아니군요. 제가 잘못 알았네요.
Expires 가 설정된 컨텐츠는 그 기간까지 서버로 요청을 보내지 않는다고 합니다.
석님 말씀이 맞네요...^^;
ㅎㅎ 아침에 덧글을보고 말씀 안해주셨슴 평생모를뻔했네요~^^*
언제나 유용한 정보 감사드리고요~ㅎㅎ
자주 놀러와도 되죠?^^*
편안한 하루 되세요!!!!!!!!!!!!!!!
^^ 아 넵 방문해 주셔서 감사합니다.