웹 사이트 최적화 기법
UI 개발자를 위한 필수 지침서
스티브 사우더스가 지은 책으로 웹 사이트 서버단에서 수정하는 것이 아닌
UI 에 관계된 HTML, Javascript, CSS 에 관계된 Tip을 설명한다.
총 14가지의 Tip을 설명하는데, 필요한 부분만 간략하게 정리한다.
1. HTTP 요청을 줄여라.
1) HTTP 요청을 줄이는 방법은 Javascript, CSS 파일을 여러 모듈로 쪼개지 않고, 가능한 한 파일에 저장할 것
2) 이미지의 경우 <img src=""> 이미지 태그를 사용하여, 주소 참조 방식으로 하면 많은 이미지들이 필요하다.
이러한 많은 이미지들은 HTTP 요청이 많이 일어나며, 요청이 많이 일어난다는 것은 네트웍 요청이 많아져서
로딩 속도와 직접적인 연관을 가진다.
이러한 이미지를 처리하는 방법에 대해 3가지를 설명한다.
A. 이미지 맵 설정 : 좌표를 수동으로 입력해야 하며, 네모 모양으로 모두 같아야 한다.
B. CSS Sprite : 한 이미지 안에 여러 이미지를 담아, CSS 로 이미지를 표시하는 것이다.
이것은 꽤 유용한 방법으로 이미지가 모두 같은 크기가 아니더라도 사용할 수 있다.
C. 인라인 이미지 : 이미지를 다운받는 방식이 아닌 이미지를 data 스키마를 이용하여, 소스에 저장하는 방식이다.
이것 또한 많이 사용하는 방식이다.
2. Javascript와 CSS를 외부파일에 넣어라.
Javascript 와 CSS 을 HTML 하나에 파일에 모두 저장할 수 있다.
이럴 경우 속도적인 측면에서는 엄청난 이득일지 모르지만, 해당 사이트에 필요없는 내용들도 포함되게 되며,
특히 유지보수를 하는 입장에서 이러한 방식은 비추!!!
3. 콘텐츠 전송 네트워크를 이용하라.
나와는 별 상관없는 이야기...
4. DNS 조회를 줄여라.
보통 네이버나 다음과 같이 대형 포털 사이트의 경우 Domain Name 은 동일하지만,
( 예로 www.naver.com, www.daum.net 등이 있다. )
여러 IP 로 접속이 가능하다. 여러 IP 가 하나의 DNS 로 묶어져 있는 것이다.
이러한 IP 와 DNS 에 대한 정보는 DNS 캐시로 저장되게 된다.
그래서 OS 차원에서 DNS 에 대한 정보를 저장하는 캐시를 운영되며, 특정 사이트에 접속하기 전에 DNS 캐시에서
이러한 정보들을 조회한 후 사이트 DNS 로 접속하게 된다.
이렇게 DNS 에 IP 가 많이 연결된 경우는 DNS를 조회하는 시간이 많이 걸린다는 의미이다.
대형 사이트가 아닌 이상 그렇게 필요한 정보는 아닌듯 하다.
5. 헤더에 만료기한을 추가하라.
캐시 만료기한을 늘려서 캐시로 할 수 있는 것은 캐시로 실행하라는 의미이다.
6. 자바스크립트를 최소화하라.
불필요한 자바스크립트를 최소화하라는 것은 당연한 말이다.
여기에서 최소화라는 의미는 공백의 최소화, 난독화와 같은 기술들을 이용해서 속도를 최적화 시키는 방법이다.
최소화, 난독화를 도와주는 프로그램이 있으니, 그것을 이용하는 것도 괜찮을 듯 하다.
난독화는 최소화에 비해 속도는 조금 빠를 수 있으나, 긴 변수명을 줄이는 방식으로 오류가 발생할 가능성도 커진다.
7. Gzip 컴포넌트
Gzip 은 소스를 압축하는 방식이다. jpg 이미지의 경우 이미 압축을 거쳐 생성된 파일로서 이러한 파일에 대한 Gzip은
의미가 없으며, HTML, Javascript, CSS와 Text 파일에 대해서 Gzip 을 사용할 경우 크기를 어느 정도 줄일 수 있다.
하지만, 압축을 하게 되면 압축을 해제하는 작업이 들어간다.
보내는 쪽에서 압축을 해서 용량이 줄어들지는 모르지만, 받는 쪽에서 다시 CPU를 통해 압축 해제 작업을 하므로
큰 용량의 사이트가 아니라면 추천하지 않는 방식이다.
8. 리다이렉트를 피하라
리다이렉트를 할 경우 그 전 사이트를 저장하게 되며, 같은 사이트를 리다이렉트 할 경우는 같은 리소스를 2번 다운
받는 경우가 발생한다. 아무튼 한번에 할 수 있으며, 한번에 접속하는 것이 좋겠다.
9. 스타일시트를 위에 넣어라.
보통 사이트를 접속했을 경우 하얀 화면이 어느 정도 유지되다가 갑자기 화면에 이미지와 텍스트가 나타나는 경우가
많다. 스타일시트를 가장 마지막에 링크할 경우 발생하는데,
HTML, Javascript를 로딩 후 처리를 끝마쳤더라도 CSS가 로딩이 되지 않았다면 기다린 후 UI 처리를 한다.
HTML, Javascript를 먼저 처리 한 후 CSS 를 처리할 경우 Text가 나왔다가 다시 스타일이 변경되는 경우가 발생한다.
이러한 기능을 일부러 구현 하는 사이트도 있긴 하지만, 일단 CSS 를 상단에 위치시켜 로딩 후 HTML, Javascript를
위치하는 것이 체감 속도 측면에서 올바른 방식이다.
10. 중복되는 스크립트를 제거하라.
같은 스크립트를 중복으로 선언, 링크할 경우 필요없는 리소스를 2번 로딩하게 되므로 비효율적이다.
11. 스크립트를 아래에 넣어라.
9번 스타일시트를 위에 넣어라와 비슷한 개념이다.
CSS 를 먼저 로딩 후 스크립트를 처리하게 되면, 스크립트가 처리되면서 UI가 하나씩 하나씩 랜더링 되므로
사이트를 기다리는 사용자의 입장에서는 체감 속도가 더 빨라질 수 있다.
12. ETag 를 설정하라.
ETag 를 설정해서 뭐 어떻게 하라는데, 별 필요 없는 듯 함. 대형 사이트에 어울릴 법한 이야기.
13. CSS Expression 을 피해라.
CSS Expression 은 예전 IE 에서 제공하는 기능으로 CSS 에 동적으로 스크립트를 사용할 수 있게 한 기능이다.
동적으로 CSS 를 처리하는 만큼 Javascript 로딩 후 CSS 가 로딩되므로 속도가 느릴 수 있다.
14. 캐시를 지원하는 Ajax 만들기
Ajax 의 경우 수동형, 능동형 요청이 있다.
수동형 요청은 사용자가 실행 할 것을 미리 예측하여 비동기 방식으로 정보를 조회하는 방식으로
로그인을 할 때 주소록을 클릭하지 않더라도 미리 예측하여 비동기적으로 조회하여, 주소록을 클릭할 때 미리 조회된
내용을 보여주게 하는 방식이며,
능동형 요청은 주소록을 클릭했을 때 비로서 주소록 정보를 조회하는 방식이다.
Ajax 를 캐시를 이용해서 뭐 어떻게 하라는 내용은 없는 듯. ( 내가 이해 못함... )
이상 책의 내용을 간략하게 정리해 보았다.
책은 인덱스를 제외하고 179페이지로 구성되어 있으며, 비교적 얇은 책이다.
예전부터 알고 있는 내용이 대부분이었지만, 다시 한번 책을 읽고 정리를 하니 좀 더 내것이 되는 듯한 느낌이 든다.
이 책은 2008년에 집필하였으며, 2010년에 집필한 초고속 웹사이트 구축이란 책이 있다.
다음엔 이 책을 빌려서 한번 공부를 해 봐야겠다.
▶ 참고사항
Best Practices for Spedding Up Your Web Site
- Yahoo 에서 선정한 웹 사이트 최적화 기법 ( 참고로 영어닷... ㅎㅎㅎ )
http://developer.yahoo.com/performance/rules.html
FireFox 브라우저 설치
FireFox 브라우저의 YSlow ( 웹 사이트 최적화 측정 도구 )
'프로그래밍 세상 > 그 외...' 카테고리의 다른 글
| 데이터베이스 관리 및 솔류션 토드... 오타를 자동으로 수정하는 완성기능은 어떻게 설정할까? (1) | 2013.04.27 |
|---|---|
| 데이터베이스 토드(Toad) 그리드 값들이 NULL인 경우 색깔을 변경하는 방법은 무엇일까? (11) | 2013.04.26 |
