웹 속도 향상을 위한 도전

제목이 블로그에 대한 설명으로 보이긴 하지만 다른 웹서비스에서도 동일하게 적용될수있는 부분이라 기술합니다.
 ie6에서 css를 잘 못불러오는 경향이 있는데 그이유가 중간에 자바스크립오류로 인한 것이 아닌가 하는 생각이 "자바스크립을 페이지 아래에 넣는 방법" 이거 한번 사용해봐야겠는데..

블로그 속도 향상을 향한 도전

블로그 · Tags: css, javascript, jQuery, prototype, 구글, 블로그, 워드프레스, 플러그인, 호스팅

현재 Plan9 Blog는 미국의 블루호스트에서 호스팅 서비스를 받고 있다. 무제한 용량, 무제한 트래픽, 무제한 도메인연결, 무제한 도메인파킹, 이메일 계정2500개, MySQL db 100개에 블로그 설치에서 백업, FTP, php설정관리까지 컨트롤 패널에서 다 되면서 월 7달러라는 가격은 굉장히 매력적이다.(워드프레스 공식사이트 추천 호스팅업체)

하지만 단 하나의 단점은 서버가 해외에 있어서 접속 속도가 비교적 느리다는 점이다. 이건 개인에 따라 치명적인 단점이 될 수도 있기 때문에 아직 선뜻 다른 분들에게 추천해주지는 못하고 있다. 이 속도 문제 때문에 이 호스팅을 계속 이용해야 되나 생각까지 했었는데 우리나라가 워낙 빨라서 상대적으로 느려보이는 것도 있고 대륙간 인터넷 속도도 점점 빠..빨라질 것이라고 믿고 있기 때문에 그냥 계속 가기로 했다.

예전 텍스트큐브 블로그에서 트래픽을 줄이기 위한 방법들에 대해 이야기 한 적이 있는데 이제 트래픽은 걱정 없지만 블로그 로딩속도가 꽤 신경쓰이는 문제가 되었다.

블로그 로딩 속도 향상을 위한 작업은 다음과 같이 진행했다.

1. 블로그 플러그인을 통한 속도 향상
2. 블로그 구조 수정을 통한 속도향상

1. 블로그 플러그인을 통한 속도 향상

설치형 블로그의 재밌는 점은 블로그 수정이 자유롭다는 점이다. 워드프레스의 경우에 전세계적으로 수많은 사람들이 사용하고 있기 때문에 우리가 있었으면 하는 것들은 대부분 플러그인으로 구현되어 있는데 블로그 성능을 위한 플러그인들도 굉장히 많다.(너무 많아서 혼란스러울 정도)

이 블로그에서는 WP Super Cache, WP Widget Cache, Script Compressor의 세가지 플러그인(워드프레스)을 사용했다.

WP Super Cache의 첫번째 주된 기능은 워드프레스에서 매번 php로 동적으로 생성하는 각 페이지와 포스트들을 정적인 html파일로 저장해주는 것이다. 워드프레스의 기본 WP-Cache를 기본으로 여러 기능을 추가한 것인데 한때 무버블 타입 블로그의 장점(?)이었던 각 페이지의 html파일화도 해 줄 뿐만 아니라 자동으로 캐시의 만기시간과 갱신에 맞추어 새로운 캐시를 생성해 준다.

두번째 기능은 압축 전송의 지원이다. 텍스트큐브의 경우엔 도아님께서 만든 압축전송 플러그인이 있는데 90%이상의 브라우저가 지원하는 gzip압축전송 기능을 이용하여 텍스트위주로 된 웹 페이지를 압축해서 전송하고 클라이언트(브라우저)가 해제하여 보여주는 기능이다. 국내외 대부분의 포탈도 gzip 압축 전송을 지원 할 정도로 이점이 많은 기능이다.

자신의 블로그에서 압축 전송 기능이 제대로 되고 있는지 확인할 수 있는 사이트가 있다.

WP Widget Cache는 말그대로 사이드바의 위젯들을 캐시해주는 플러그인이다. Super Cache가 있는데 왜 위젯 캐시를 할까라는 생각이 들텐데 플러그인 제작자도 그런 질문을 많이 받았는지 플러그인 소개 페이지에 위젯 캐시를 해야 하는 이유를 적어 놓았다. 간단하게 말해서 WP Cache나 WP Super Cache는 페이지를 캐시해 주는 것이고 방문자들이나 구글 크롤러가 사이트에 접근하면 위젯은 매번 서버에 요청을 하기 때문에 위젯 캐시가 필요하다는 것이다.

플러그인 제작자들이 실제로 테스트 해 본 결과 위젯으로 인한 요청이 70%가 줄어들었다고 한다.

Super Cache가 압축전송을 해주지만 외부 파일로 링크된 자바스크립트나 CSS파일은 압축 해 주지 않는다. 그런 JS파일과 CSS파일을 압축해 주는 것이 Script Compressor의 역할이다. 스크립트 콤프레셔는 자동으로 헤더에 들어가있는 자바스크립트와 CSS파일을 압축하고 그것을 캐시해둔다. 이 블로그에서도 CSS파일이 30kb나 되는데(플러그인들이 사용하는 CSS를 한곳에 모두 합침) Super Cache는 그걸 압축해 주지 않는다. 그걸 이 플러그인을 이용하면 5kb로 줄일 수 있다. 자바스크립트도 압축 할 수 있지만 하지 않았는데 그 이유는 뒤에 설명 할 것이다.

2. 블로그 구조 수정을 통한 속도향상

며칠전에 회사에서 신청한 오라일리의 “웹사이트 최적화 기법” 한국어 판을 받아 보았다. 야후의 성능 최적화 팀장이 쓴 책이라는데 얇아서 금방 읽지만 자신이 연구하고 경험한 웹사이트 최적화에 대한 이야기로 채워져 있어서 꽤 볼만했다.(하지만 가격의 압박)

이 책은 야후! 같은 큰 웹사이트를 기준으로 쓰여진 터라 블로그에 맞지 않는 부분도 있는데 그 중에 블로그에 바로 적용해도 좋을 만한 내용은 다음과 같다.

• http 요청을 줄여라 - CSS스프라이트의 이용, 스크립트와 스타일 시트의 결합
• Gzip 컴포넌트의 사용
• 스타일시트는 위에 넣어라
• 스크립트는 아래에 넣어라
• 자바스크립트와 CSS를 외부 파일에 넣어라

이 외에도 여러가지 신기한 테크닉들(data:라는 URL 스키마, Etag설정)이 나오지만 그건 책에서 확인하면 되겠고 블로그에서는 위의 항목들을 적용 시켜 보았다.

적용한 이야기를 하기 전에 이 책에서 소개한 툴 하나를 소개한다. Yslow라는 툴인데 파이어폭스의 firebug라는 강력한 애드온 위에 새로운 기능으로 추가시켜서 사용하는 애드온이다.(firebug가 설치되어있어야 한다)

firebug와 같이 설치를 끝내고 나면 퍼포먼스라는 탭에서 현재 웹페이지를 분석해 주는데 책에서 말하는 웹 사이트 최적화 규칙들을 잘 지켰나 검사하는 것이다. 블로그에서는 쉽게 지킬 수 없는 규칙이 많기 때문에 점수는 F가 떴다. 리다이렉트를 줄이라는 11번 항목만 봐도 gravatar의 이미지들을 불러오는 워드프레스에서는 아바타 기능을 끄지 않는 한 지키기 힘든 규칙이다.

그럼에도 불구하고 Yslow는 사이트 최적화에 대한 다양한 정보를 제공해 줌으로써 충분히 값어치 있는 플러그인이다. 파이어폭스3를 쓴다면 설치해봐도 좋을 것이다.

그럼 첫번째 ‘http요청을 줄여라’라는 항목부터 보자. 평균적으로 웹사이트에서 화면에 표시될 html 문서를 다운받는 데 소비되는 시간은 전체 응답시간의 10~20%이고 나머지 80~90%는 이미지나 스크립트, 스타일시트, 플래시에 대한 http 요청을 보내고 응답을 받는데 걸리는 시간이라고 한다. 그런 요청들을 최대한 적게 줄이면(이미지를 합치고, 스크립트를 합치고) 응답을 최대 50%까지 줄일 수 있다고 한다.

현재 블로그에서 쓰는 이미지들은 하나를 로드해서 여러번 사용하는 방식이라 따로 합치지 않았다.(외부에서 불러오는 이미지도 많고) 이미지나 자바스크립트를 합치는 것에 비해 CSS를 합치는 것은 쉬운편인데 여러 플러그인에서 사용하는 CSS를 주석을 달아 하나의 파일에 모았다.

자바스크립트를 합치는 건 까다롭다. 워드프레스의 경우에는 각 플러그인이 사용하는 프레임워크나 독립된 스크립트 파일이 php를 이용해 자동으로 헤더에 삽입되는데 순서에 따라 동작하지 않거나 충돌하는 경우도 있다. 여기에선 자바스크립트를 하나로 합치는 극단적인 방법을 사용하지 않고 구글의 자바스크립트 프레임워크 호스팅을 사용했다.

가장 많이 쓰이는 프레임워크들을 코드를 줄이고 gzip을 사용해서 빠르게 전송해주기 때문에 prototype이나 jquery등을 사용해야 한다면 고려해 볼 만한 방법이라고 생각한다.(이걸 사용하는 사이트가 많아지면 방문자들의 브라우저 캐시에 저 파일들이 남아있을 가능성도 높다)

1 2	<script src="http://ajax.googleapis.com/ajax/libs/prototype/prototype.js"> </script>

위와같이 일반적으로 외부 자바스크립트 파일을 불러오는 방식으로 사용해도 되고 구글 API를 사용해도 된다.

Gzip 압축 전송은 위에서 플러그인이 해결해 주었으니 마지막으로 ‘스타일 시트는 위에 넣어라’, ‘스크립트는 아래에 넣어라’, ‘자바스크립트와 CSS를 외부 파일에 넣어라’라는 세 항목을 살펴보자.

html문서에 스타일시트(CSS파일)가 있다면 스타일시트가 전부 로딩 될 때까지 페이지는 랜더링 되지 않고 흰 화면만 몇초동안 볼 수도 있다. 그래서 CSS파일이 용량이 크더라도 문서의 최상단에 위치하는 것이 사이트의 구성요소들을 최대한 빨리 보여주는 방법이다. 여기에 http 요청을 줄이기위해 모든 CSS들을 하나로 합치고 gzip으로 압축 전송까지 적용시킨다면 속도 향상을 위해 해줄 수 있는건 거의 다 해줬다고 봐도 될 것이다.

반면에, 스트립트 파일들은 되도록 아래쪽에 두는 것이 좋다. 대부분의 사이트들이 자바스크립트 파일을 <head></head>사이에 집어넣지만 갈수록 자바스크립트들은 많아지고 용량도 커지고 있기 때문에 블로그가 늦게 뜨게 하는 주요 원인이 될 수 있다. CSS로딩이 끝나지 않았을 때 처럼 자바스크립트 파일을 다운받는 동안에도 사이트의 렌더링은 중단 된다. 그래서 CSS처럼 사이트 렌더링의 핵심적인 요소가 아닌 자바스크립트 파일을 아래로 내리라는 것이다.(여기에선 스킨의 푸터 footer.php 파일 안에 집어넣었다.) 하지만 호출 순서에 민감한 자바스크립트의 특성상 꼭 상단에 위치해야 할 스크립트는 위에 놔둘 수 밖에 없다.

로딩이 오래걸리는 자바스크립트파일을 위에 넣었을 때와 아래에 넣었을 때를 비교해주는 페이지: http://stevesouders.com/hpws/move-scripts.php

마치며…

10월 말에 호스팅을 옮기고 도메인을 바꾸고 워드프레스로 새 블로그를 만든 이후에 속도 문제 때문에 많은 시도를 했지만 여전히 블로그 속도가 왜 그렇게 느리냐는 이야기를 듣는다. ㅜ.ㅜ 그래도 개인적으로 워드프레스가 좋고 호스팅 업체 스펙도 좋기 때문에 쉽게 포기 못하겠다. 블로그 속도 향상을 위한 도전은 계속되니까 지켜봐 주시길….

본 글은 http://plan9blog.com/archives/361 에서 퍼온 글입니다.