웹사이트 최적화 기법
로빈아빠
본문
관련책 링크 : http://book.naver.com/bookdb/book_detail.php?bid=4587095
큰제목 속성 : #882222, 16px, bold
소제목 속성 : bold
규칙 1 : HTTP 요청을 줄여라
1) 이미지맵
이미지맵을 사용해서 한 이미지에 여러개의 URL을 이용한다.
http 요청을 줄이기 때문에 성능향상이 있다.
2) CSS Sprite 이용
하나의 이미지 파일에 여러 이미지를 넣은 후 css로 각 이미지에 접근 할 수 있는 클래스를 정의해 놓는다.
이미지맵과 css sprite가 이미지를 짤라서 사용하는 틀은 동일하지만 이미지맵보다는
css sprite가 아무래도 css를 이용해서 여러 속성들을 사용할 수 있기 때문에 더 유연하다.
단, 이미지맵이나 css sprite나 성능상 차이는 거의 없단다.
예제링크 : http://stevesouders.com/hpws/sprites.php
2000년대 초반만 하더라도 html 마크업 할 때 큰 이미지는 일부러 분할해서 사용하는 것이 대세여서 그렇게 배웠는데
최근 트렌드는 예전과 다르게 이미지를 분할하지 않고 그냥 그대로 이용한다. 이렇게 하는데는 여러 이유가 있겠지만
단순히 이미지 파일크기 측면에서 볼때, 하나의 큰 이미지로 할 경우 컬러테이블, 포맷정보와 같은 동일한 이미지 정보들이
중복되지 않기때문에 이미지 크기가 줄어든다.
3) 인라인 이미지
data:라는 URL 스키마를 이용하는 방식인데 IE에서는 지원하지 않고 책에서 사용방법을 보니
그닥 효율적이지 않아보인다. 그냥 이미지맵, css sprite를 이용하는게 낫다
4) script, css의 결합
보통 사이트에 script, css 몇개씩 인클루드해서 사용하고 있는데 각각 하나의 파일로 만들면
http 요청을 줄이기 때문에 성능향상이 있다.
하지만 이럴 경우 개선, 유지보수 비용이 늘어나기 속도좀 느리더라도 그냥 파일 여러개 사용하자!
5) 결론
HTTP 요청을 최소화 하라
규칙 2 : 콘텐츠 전송 네트워크를 이용하라
1) 콘텐츠 전송 네트워크(CDN : Content Distribution Network)
한 지역에 여러서버를 두는 것 보다는 여러 지역에 분산시켜 서버를 위치시키는게 더 좋다.
CDN 서비스를 이용하면 알아서 가장 응답속도가빠른(위치가 가까운) 서버로 연결시켜준다.
하지만, CDN 서비스 서버가 느리면 아무 효과 없다.
아파치에서 이용할 수 있는 무료 CDN 모듈 : http://www.globule.org/
헌데, 실제 사용할일은 별로 없을듯 -_-;;;
규칙 3 : 헤더에 만료기한을 추가하라
브라우저의 캐시를 이용하여 HTTP의 요청수를 줄인다.
1) 헤더의 Expires 속성 (HTTP/1.0)
지정된 날짜를 이용하는 방법이기 때문에 서버와 클라이언트 시간을 맞춰야하고
만료일이 되었을 경우 만료일을 다시 갱신해 줘야하는 불편함이 있다.
2) 헤더의 Cache-Control 속성 (HTTP/1.1)
얼마동안 캐시에 보관할지 초단위로 지정해서 Expires 속성보다 편리하다. 단, HTTP/1.1만 지원함
Expires와 Cache-Control 두 가지 속성 동시에 사용되었을 경우 Cache-Control 속성이 우선한다.
3) 아파치의 mod_expires 모듈
mod_expires 모듈을 이용하면 Expires를 max-age와 비슷하게 상대적인 시간으로 지정할 수 있다.
<FilesMatch "\.(gif|jpg|js|css)$">
ExpiresDefault "access plus 10 years"
</FilesMatch>
이렇게 설정하면 아파치가 Expires, Cache-Control의 max-age 속성을 둘다 설정하여 응답을 보낸다.
4) 파일 이름의 활용
헤더를 사용함으로써 발생하는 문제점 중 하나는 문서내용이 변경되었더라도 만료일이 지정되어 있으면
그 만료일이 되기 전까지는 문서내용을 갱신하지 않는다는 것이다.
이에 대한 해결책으로 문서의 파일 이름을 변경하는 것이다.
네이버를 예를 들자면 js, css 같은 경우 아래와 같이 날짜를 이용해서 캐시처리 및 버젼관리를 한다.
<link rel="stylesheet" type="text/css" href="/css/naver_20090803.css?0813"/>
response.setHeader("Expires",..) 와 response.setDateHeader("Expires",..)의 차이점은 뭐지 -_-?
규칙 4 : Gzip 컴포넌트
규칙1~3은 불필요한 HTTP 요청을 줄이는 방법이라면 규칙4는 HTTP 응답 크기를 줄이는 방법이다.
1) 클라이언트 브라우저의 압축 지원여부 확인
서버에서 압축된 페이지를 보내준다해도 클라이언트 브라우저가 지원못할수도 있다.
HTTP/1.1에서는 Accept-Encoding 헤더에 브라우저의 압축지원여부를 보여준다.
test.jsp를 만들어서 아래 코드를 넣어보자
이 페이지를 각각 브라우저에서 실행시켰을 경우 다음과 같이 지원하는 압축 포맷을 보여준다.
이미지가 찌그러져있으나 클릭하면 크게 잘 보인다 -_-;
책 내용에 따르면 브라우저 종류별, 버젼별로 지원하는 압축 포맷들이 여러가지 있는데 gzip 현재 가장많이 사용되고 효과도 뛰어나다고 한다.
gzip 포맷은 GNU 프로젝트에서 개발되었고 RFC 1952 표준에 등록되어 있는 무료 압축 포맷이다.
2) 무엇을 압축해야 하는가
이미 압축 된 gif, jpg, pdf 와 같은 파일을 다시 압축해서 전송하면 CPU 리소스 낭비만 한다.
css, js, html 파일등을 압축하는게 좋다. 이 파일들을 gzip로 압축할 경우 50% 이상의 압축률을 보여준다.
3) 톰캣 설정파일을 이용한 압축
톰캣 서버에서 압축을 이용하려면 server.xml 파일을 연다.
아래와 같이 속성 추가한다.
톰캣 서버 재시작 한 후 html 파일 하나 만들어서 위에서 설정한 2048 bytes 값보다 크도록 내용을 입력한다.
이 값보다 커야만 톰캣에서 압축해서 전송한다.
2048bytes 값 이상의 내용을 입력한 후 html 파일을 실행시켜서 fiddler로 헤더 내용을 보면 다음과 같이
Content-Encoding: gzip 로 gzip로 문서내용이 압축되었음을 나타낸다.
4) 아파치 2.x에 압축 적용
http://httpd.apache.org/docs/2.2/mod/mod_deflate.html 이 링크가서 설정하면 된다.
귀찮아서 테스트 안해봤다 -_-
5) 프로그래밍을 통한 압축
java의 경우 java.util.zip.GZIPOutputStream 클래스를 이용해 해당 내용을 압축할 수 있다.
관련 내용은 네이버에서 "jsp gzip"로 검색하면 찾을 수 있다.
6) 프락시 캐싱
웹서버와 클라이언트가 직접 통신하면 압축방법이 문제가 없지만
[클라이언트] - [프락시서버] - [웹서버] 로 통신을 하는데 캐쉬 기능까지 이용하게 된다면
각 요청 단계에서 gzip을 이용하거나/안하거나 할수도 있고 갑자기
[클라이언트] - [웹서버] 직접 통신 할 경우 캐쉬에 저장된 내용이 이리저리 꼬이게 되므로 문제가 생길수 있다.
이럴 경우 응답헤더에 Vary 속성을 추가 해 준다.
이 설정은 프록시로 하여금 받은 요청의 헤더에 따라 응답을 바꾸어 전달하도록 명령한다.
7) 예외적인 경우
내용을 압축해서 보내기 때문에 클라이언트와 웹서버 사이에는 정확하게 동작해야한다.
대부분은 제대로 나오겠지만 간혹가다가 지원하지 않는 브라우저가 있을 경우에 처리하는 방법이 책에 기술되어 있다.
규칙 5 : 스타일시트는 위에 넣어라
1) 스타일 시트를 페이지 아래 넣은 경우
아래 두가지 현상이 나타날 수 있다.
i) FOUC(flash of unstyled content)
파폭의 경우에는 css가 로딩 중일 때도 화면을 그리도록 처리한다.
그래서 css를 아래두면 처음 html이 로딩 될 땐 css적용 안된 화면이 나타나다가 css가 로딩 완료되면 css가 적용된 화면이
나타나게 되는데 이와 같이 스타일이 적용되지 않은 컨텐츠가 나타나지 않는 것을 FOUC라 한다.
ii) 빈 흰색스크린
IE의 경우 FOUC 현상을 막기 위해서 css가 로딩중일 때는 화면에 그리는 작업을 피한다.
css가 모두 완료된 이후에 html 렌더링 해서 화면에 그리기 때문에 css를 아래 둘 경우 빈화면이 나타난다.
2) 스타일 시트를 페이지 위에 넣은 경우
css를 페이지 상단에 넣으나 하단에 넣으나 클라이언트가 html 구성요소를 다운받는 시각이나 전체적인 html 내용을 그리는 시각은 동일하다.
하지만 css를 페이지 상단에 넣어서 html 렌더링에 필요한 css정보를 초기에 로딩시키면 html 내용을 바로바로 렌더링해서 그리기 때문에
사용자들은 페이지가 더 빨리 로딩된다고 느낀다.
HTML 스펙에서는 다음과 같이 정의되어 있다.
3) LINK와 import
css를 문서에 포함시키는 방법은 2가지가 있다.
큰제목 속성 : #882222, 16px, bold
소제목 속성 : bold
규칙 1 : HTTP 요청을 줄여라
1) 이미지맵
이미지맵을 사용해서 한 이미지에 여러개의 URL을 이용한다.
http 요청을 줄이기 때문에 성능향상이 있다.
2) CSS Sprite 이용
하나의 이미지 파일에 여러 이미지를 넣은 후 css로 각 이미지에 접근 할 수 있는 클래스를 정의해 놓는다.
이미지맵과 css sprite가 이미지를 짤라서 사용하는 틀은 동일하지만 이미지맵보다는
css sprite가 아무래도 css를 이용해서 여러 속성들을 사용할 수 있기 때문에 더 유연하다.
단, 이미지맵이나 css sprite나 성능상 차이는 거의 없단다.
예제링크 : http://stevesouders.com/hpws/sprites.php
2000년대 초반만 하더라도 html 마크업 할 때 큰 이미지는 일부러 분할해서 사용하는 것이 대세여서 그렇게 배웠는데
최근 트렌드는 예전과 다르게 이미지를 분할하지 않고 그냥 그대로 이용한다. 이렇게 하는데는 여러 이유가 있겠지만
단순히 이미지 파일크기 측면에서 볼때, 하나의 큰 이미지로 할 경우 컬러테이블, 포맷정보와 같은 동일한 이미지 정보들이
중복되지 않기때문에 이미지 크기가 줄어든다.
3) 인라인 이미지
data:라는 URL 스키마를 이용하는 방식인데 IE에서는 지원하지 않고 책에서 사용방법을 보니
그닥 효율적이지 않아보인다. 그냥 이미지맵, css sprite를 이용하는게 낫다
4) script, css의 결합
보통 사이트에 script, css 몇개씩 인클루드해서 사용하고 있는데 각각 하나의 파일로 만들면
http 요청을 줄이기 때문에 성능향상이 있다.
하지만 이럴 경우 개선, 유지보수 비용이 늘어나기 속도좀 느리더라도 그냥 파일 여러개 사용하자!
5) 결론
HTTP 요청을 최소화 하라
규칙 2 : 콘텐츠 전송 네트워크를 이용하라
1) 콘텐츠 전송 네트워크(CDN : Content Distribution Network)
한 지역에 여러서버를 두는 것 보다는 여러 지역에 분산시켜 서버를 위치시키는게 더 좋다.
CDN 서비스를 이용하면 알아서 가장 응답속도가빠른(위치가 가까운) 서버로 연결시켜준다.
하지만, CDN 서비스 서버가 느리면 아무 효과 없다.
아파치에서 이용할 수 있는 무료 CDN 모듈 : http://www.globule.org/
헌데, 실제 사용할일은 별로 없을듯 -_-;;;
규칙 3 : 헤더에 만료기한을 추가하라
브라우저의 캐시를 이용하여 HTTP의 요청수를 줄인다.
1) 헤더의 Expires 속성 (HTTP/1.0)
지정된 날짜를 이용하는 방법이기 때문에 서버와 클라이언트 시간을 맞춰야하고
만료일이 되었을 경우 만료일을 다시 갱신해 줘야하는 불편함이 있다.
1.response.setDateHeader("Expires",0); // 캐시 사용 안함 2.response.setDateHeader("Expires",System.currentTimeMillis() + 60*60*24*1000); // 캐시 사용(하루) 3.response.setHeader("Expires","Fri, 21 Aug 2009 06:00:00 GMT"); // 캐시 기간지정2) 헤더의 Cache-Control 속성 (HTTP/1.1)
얼마동안 캐시에 보관할지 초단위로 지정해서 Expires 속성보다 편리하다. 단, HTTP/1.1만 지원함
Expires와 Cache-Control 두 가지 속성 동시에 사용되었을 경우 Cache-Control 속성이 우선한다.
1.response.setHeader("Cache-Control","no-cache"); // 캐시 사용 안함 2.response.setHeader("Cache-Control","public"); // 캐시 사용 3.response.setHeader("Cache-Control","max-age=3600"); // 한시간(1 hour)뒤 만료3) 아파치의 mod_expires 모듈
mod_expires 모듈을 이용하면 Expires를 max-age와 비슷하게 상대적인 시간으로 지정할 수 있다.
<FilesMatch "\.(gif|jpg|js|css)$">
ExpiresDefault "access plus 10 years"
</FilesMatch>
이렇게 설정하면 아파치가 Expires, Cache-Control의 max-age 속성을 둘다 설정하여 응답을 보낸다.
4) 파일 이름의 활용
헤더를 사용함으로써 발생하는 문제점 중 하나는 문서내용이 변경되었더라도 만료일이 지정되어 있으면
그 만료일이 되기 전까지는 문서내용을 갱신하지 않는다는 것이다.
이에 대한 해결책으로 문서의 파일 이름을 변경하는 것이다.
네이버를 예를 들자면 js, css 같은 경우 아래와 같이 날짜를 이용해서 캐시처리 및 버젼관리를 한다.
<link rel="stylesheet" type="text/css" href="/css/naver_20090803.css?0813"/>
response.setHeader("Expires",..) 와 response.setDateHeader("Expires",..)의 차이점은 뭐지 -_-?
규칙 4 : Gzip 컴포넌트
규칙1~3은 불필요한 HTTP 요청을 줄이는 방법이라면 규칙4는 HTTP 응답 크기를 줄이는 방법이다.
1) 클라이언트 브라우저의 압축 지원여부 확인
서버에서 압축된 페이지를 보내준다해도 클라이언트 브라우저가 지원못할수도 있다.
HTTP/1.1에서는 Accept-Encoding 헤더에 브라우저의 압축지원여부를 보여준다.
test.jsp를 만들어서 아래 코드를 넣어보자
01.<%@ page contentType="text/html; charset=UTF-8"%> 02.<%@ page import="java.util.*"%> 03.<% 04.Enumeration enum1 = request.getHeaderNames(); 05.while (enum1.hasMoreElements()) { 06. String name = (String)enum1.nextElement(); 07. out.println(name + ": " + request.getHeader(name) + "<br>"); 08.} 09.%>이미지가 찌그러져있으나 클릭하면 크게 잘 보인다 -_-;
책 내용에 따르면 브라우저 종류별, 버젼별로 지원하는 압축 포맷들이 여러가지 있는데 gzip 현재 가장많이 사용되고 효과도 뛰어나다고 한다.
gzip 포맷은 GNU 프로젝트에서 개발되었고 RFC 1952 표준에 등록되어 있는 무료 압축 포맷이다.
2) 무엇을 압축해야 하는가
이미 압축 된 gif, jpg, pdf 와 같은 파일을 다시 압축해서 전송하면 CPU 리소스 낭비만 한다.
css, js, html 파일등을 압축하는게 좋다. 이 파일들을 gzip로 압축할 경우 50% 이상의 압축률을 보여준다.
3) 톰캣 설정파일을 이용한 압축
톰캣 서버에서 압축을 이용하려면 server.xml 파일을 연다.
1.<Connector URIEncoding="UTF-8" connectionTimeout="20000" port="8080" protocol="HTTP/1.1" redirectPort="8443" />1.<Connector URIEncoding="UTF-8" connectionTimeout="20000" port="8080" protocol="HTTP/1.1" redirectPort="8443" 2. compression="on" 3. compressionMinSize="2048" 4. noCompressionUserAgents="gozilla, traviata" 5. compressableMimeType="text/html,text/xml,text/css,text/javascript" 6./>이 값보다 커야만 톰캣에서 압축해서 전송한다.
2048bytes 값 이상의 내용을 입력한 후 html 파일을 실행시켜서 fiddler로 헤더 내용을 보면 다음과 같이
Content-Encoding: gzip 로 gzip로 문서내용이 압축되었음을 나타낸다.
4) 아파치 2.x에 압축 적용
http://httpd.apache.org/docs/2.2/mod/mod_deflate.html 이 링크가서 설정하면 된다.
귀찮아서 테스트 안해봤다 -_-
5) 프로그래밍을 통한 압축
java의 경우 java.util.zip.GZIPOutputStream 클래스를 이용해 해당 내용을 압축할 수 있다.
관련 내용은 네이버에서 "jsp gzip"로 검색하면 찾을 수 있다.
6) 프락시 캐싱
웹서버와 클라이언트가 직접 통신하면 압축방법이 문제가 없지만
[클라이언트] - [프락시서버] - [웹서버] 로 통신을 하는데 캐쉬 기능까지 이용하게 된다면
각 요청 단계에서 gzip을 이용하거나/안하거나 할수도 있고 갑자기
[클라이언트] - [웹서버] 직접 통신 할 경우 캐쉬에 저장된 내용이 이리저리 꼬이게 되므로 문제가 생길수 있다.
이럴 경우 응답헤더에 Vary 속성을 추가 해 준다.
이 설정은 프록시로 하여금 받은 요청의 헤더에 따라 응답을 바꾸어 전달하도록 명령한다.
1.response.setHeader("Vary", "Accept-Encoding");내용을 압축해서 보내기 때문에 클라이언트와 웹서버 사이에는 정확하게 동작해야한다.
대부분은 제대로 나오겠지만 간혹가다가 지원하지 않는 브라우저가 있을 경우에 처리하는 방법이 책에 기술되어 있다.
규칙 5 : 스타일시트는 위에 넣어라
1) 스타일 시트를 페이지 아래 넣은 경우
아래 두가지 현상이 나타날 수 있다.
i) FOUC(flash of unstyled content)
파폭의 경우에는 css가 로딩 중일 때도 화면을 그리도록 처리한다.
그래서 css를 아래두면 처음 html이 로딩 될 땐 css적용 안된 화면이 나타나다가 css가 로딩 완료되면 css가 적용된 화면이
나타나게 되는데 이와 같이 스타일이 적용되지 않은 컨텐츠가 나타나지 않는 것을 FOUC라 한다.
ii) 빈 흰색스크린
IE의 경우 FOUC 현상을 막기 위해서 css가 로딩중일 때는 화면에 그리는 작업을 피한다.
css가 모두 완료된 이후에 html 렌더링 해서 화면에 그리기 때문에 css를 아래 둘 경우 빈화면이 나타난다.
2) 스타일 시트를 페이지 위에 넣은 경우
css를 페이지 상단에 넣으나 하단에 넣으나 클라이언트가 html 구성요소를 다운받는 시각이나 전체적인 html 내용을 그리는 시각은 동일하다.
하지만 css를 페이지 상단에 넣어서 html 렌더링에 필요한 css정보를 초기에 로딩시키면 html 내용을 바로바로 렌더링해서 그리기 때문에
사용자들은 페이지가 더 빨리 로딩된다고 느낀다.
HTML 스펙에서는 다음과 같이 정의되어 있다.
| A 태그와는 다르게 [LINK] 태그는 어떤 상황에서도 항상 문서 HEAD 에만 선언해야 한다. |
css를 문서에 포함시키는 방법은 2가지가 있다.
1.<link rel="stylesheet" href="css1.css"/>1.<style> 2.@import url("css1.css"); 3.</style>@import보다는 link 태그를 이용하는게 더 좋다.
@import는 head에 선언했다 하더라도 "빈 흰색스크린"이 나타난다.
규칙 6 : 스크립트는 아래에 넣어라
HTTP/1.1 스펙에서는 한 호스트당 동시에 2개의 구성요소를 다운로드 하는 것을 제안하고 있다.
이렇기 때문에 레지스트리 설정을 수동으로 바꾸지 않는 이상 브라우저는 페이지 안의 구성요소를 2개씩 동시에 다운로드 한다.
(레지스트리를 이용해 수동으로 동시 다운로드 수 변경 하는 방법 : http://support.microsoft.com/?kbid=282402)
하지만 페이지 중간에 스크립트 구성요소를 만나면 스크립트가 다운로드 되는 동안에는 동시다운로드가 불가능하다.
이렇게 제한하는 이유는 스크립트에 document.write가 있을 수 있고, 여러개 스크립트가 동시다운로드 되면 실행 순서를 보장 할 수 없기 때문에 에러날 확률이 높다. 때문에, 스크립트를 페이지 아래에 넣어두면 페이지 구성요소를 일찍 다운로드 받기 때문에 좀 더 화면이 일찍 나타나고 페이지 렌더링의 방해도 받지 않는다.
규칙 7 : CSS Expression을 피하라
CSS Expression은 css속성을 javascript를 이용해 동적으로 설정하는 기능으로 IE 5.0 이상에서만 지원한다.
매시간 다른색이 나타나도록 하려면 다음과 같이 하면 된다.
1.<style type="text/css"> 2.p {background-color : expression((new Date()).getHours()%2 ? "red" : "blue"); 3.</style>위와 같이 사용한 경우에는 처음 페이지 로드시 한번만 동작한다.
하지만 아래와 같은 코드는 브라우저 크기를 바꿀때마다 계속 동작한다. 이것이 좋을수도 있지만 코딩을 잘못하면
그마만큼 클라이언트 브라우저에 부하를 주게 된다. 실제로 책 내용을 보면 잘못사용할 경우 먹통이 된다고 나와있다.
1.<style type="text/css"> 2.p {width : expression(document.body.clientWidth < 600 ? "600px" : "auto"); 3.</style>CSS Expression은 자바스크립트만 이용해서도 충분히 구현가능하고, IE만 동작하기 때문에 굳이 사용할 필요가 없다.
즉, CSS Expression과 그 영향을 명확하게 이해하지 못한다면 CSS Expression 사용하지 말아라.
관련링크
댓글목록
등록된 댓글이 없습니다.