설치형 블로그 트래픽 줄이는 방법, 개인적인 후기 (워드프레스 카페24)

내멋대로 하고 싶어서 설치형 블로그를 유료로 사용중이지만
돈이 든다는 것이나 트래픽이나 용량에서 제한이 있다는 점에서 티스토리나 구글 블로그나 네이버 블로그 같은 무료 서비스를 사용하고 싶을 때도 있다.
어쨌든 일단은 최대한 트래픽을 아껴서 버텨보려고 하는데 내가 해봤고 현재 활용중인 트래픽 다이어트 방법, 시도, 결론, 후기를 써보려고 한다. (참고로 야매인 것도 많고 나는 전문적인 지식은 없다는 것을 미리 알린다.)

지금 이 블로그는 카페24 웹호스팅에 워드프레스를 설치한 것이다.
한달 500원짜리(10G 광아우토반 FullSSD 절약형)를 사용중이다.

매우 저렴하지만 그만큼 용량도 작다.
하드 용량은 200메가에 트래픽은 600메가이다.

방문자가 적어서 크게 부족한 용량은 아니었는데 최근에 방문자가 많이 늘었다.
구글 검색에서 상위에 뜨는 글이 생겨서 그렇다.
이전에는 하루에 많아봤자 페이지 뷰 수가 200 정도였는데 블로그에 이제는 매일 뷰 수가 1,000이 넘는다.

하루에 정해진 트래픽 용량을 초과하면 그날은 더이상 접속을 할 수 없게 된다.
만약 트래픽 용량을 초과해서 사이트가 차단되면 여러모로 큰 손해, 타격이 된다. (페이지가 정상적으로 뜨지 않으니 사용자도 떠나고 검색엔진에도 영향을 끼쳐서 검색 결과에서 순위가 내려갈 가능성도 있을 것이다.)

그 사태를 피하려면 트래픽이 초과되기 전에 리셋신청을 하거나 상위 웹호스팅 서비스로 변경을 해야 한다. (또는 지금 쓰는 글의 내용처럼 최대한 트래픽을 줄여야겠지.)

리셋신청은 카페24에서는 1회당 250원이다.
가격이 저렴해서 단기적으로 트래픽이 몰릴 때는 유용하겠지만
꾸준하게 방문자가 들어온다면 매일 리셋신청을 하는 것은 비용적인 측면도 그렇고 너무 귀찮은 일이 될 것이다.

상위 웹호스팅으로 변경한다면···.
일단 한달에 500원이면 정말 싼거다.
그 상위 서비스는 한달 1,100원, 5,500원 뭐 이런식인데 그것도 매우 저렴한 편이다.
카페24에서는 “파워업 무제한 광호스팅”이라고 한달 33,000라는 아주 비싸지는 않은 가격에 무제한 트래픽을 제공하기도 한다. (물론 무제한이라고는 했지만 너무 과도하게 많은 트래픽을 사용하면 쫓겨나거나 속도가 심각하게 느려지겠지.)

하지만 한 번 상위 서비스로 올리면 다시 예전의 저렴한 서비스로 내릴 수는 없다고 한다.
그러니 블로그를 운영하는 동안은 매달 내야 하는 돈이기 때문에 쉽게 생각할 문제는 아닌 것이다.
또한 방문자가 지금은 확 늘었지만 어느 순간 다시 예전처럼 뚝 떨어질지도 모르는 일이다.

그리고 사실 한달 1,100원, 5,500원짜리도 하루 트래픽이 800메가, 2.5기가 정도일 뿐이라서
이미지가 어느정도 있고 방문자가 많아지면 트래픽은 순식간에 소진될 것이다.
한마디로 무제한이면 모르겠는데 어설프게 상위 올리는 것은 아무 소용이 없을 수도 있다는 것이다.
그래서 나는 일단 최대한 트래픽을 줄이고 아껴서 버텨보기로 했다.

jquery.min.js를 구글에서 가져다 쓰자.

(참고로 이 내용은 아래에 젯팩의 “사이트 가속기 활성화” 기능을 사용한다면 적용할 필요가 없는 기능이다. 그런데 젯팩은 사용하지 않으면서 jquery는 사용하는 사람에게 필요한 기능이다.)

jquery.min.js 뭐 이런식의 파일이 있는데 (아마 화려하거나 특이한 기능이 있는 블로그 스킨을 사용중이라면 이런 파일이 삽입됐을 가능성이 크다.)
이게 트래픽을 꽤 먹는다.
이런 jquery파일을 구글에서 공식적으로 올려놓고 가져다 쓰라고 링크를 제공한다. (해외 어디에서든 빠른 접속이 가능하도록 해주는 CDN 이라는 서비스인 것 같은데 트래픽을 줄이기 위해서 사용하는 것도 좋은 방법이라고 생각한다.)

사용법은 간단하다.
“워드프레스에서 관리자화면/테마 디자인/테마 에디터/테마 함수”에서 맨 밑줄에
아래의 코드를 추가해주기만 하면 된다.
// google jquery CDN caching
function wpfme_jquery_enqueue() {
wp_deregister_script('jquery');
wp_register_script('jquery', "http" . ($_SERVER['SERVER_PORT'] == 443 ? "s" : "") . "://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js", false, null);
wp_enqueue_script('jquery');
}
if (!is_admin()) add_action("wp_enqueue_scripts", "wpfme_jquery_enqueue", 11);

그런데 jquery가 버전이 여러개라서 내가 사용중인 테마디자인에서 사용되고 있는 버전을 잘 찾아서 써야 할 것 같다.

관련 링크
https://developers.google.com/speed/libraries/#jquery
https://code.jquery.com/

워드프레스 플러그인 사용하기

Autoptimize
html, css 파일, js 파일 코드의 공백을 없애서 속도를 향상시키고 트래픽을 약간 줄여준다.
(하지만 나는 트래픽을 더 줄이기 위해서 css 파일이나 js파일은 다른 곳에 올려놓고 링크해서 사용하기 때문에 html을 제외하고는 이 플러그인의 기능을 활용할 수 없는 상태다. 더 자세한 내용은 아래에서 설명하겠다.)
(그런데 이 플러그인은 css나 자바스크립트를 하나로 통합해버리다가 오류가 날 때가 좀 있다. 잘 써야 할 것 같다.)

WP Super Cache
블로그의 페이지들을 캐시해서 한 번 연 파일을 다시 열 때는 빠르게 열 수 있는 기능으로 이해하고 있는데 트래픽 절감 효과도 있을 것이다.

젯팩의 사이트 가속기 활성화
젯팩 플러그인을 설치하고 “관리자화면/젯팩/설정/성능/성능 및 속도”에서 “사이트 가속기 활성화”를 활성화해준다.“정적 파일 로드 시간이 빨라짐” 기능은 위에서 설명했던 jquery.min.js 같은 독립적인 파일을 젯팩 서버에 올려놓고 가져다 쓰게 돼서 트래픽을 아낄 수 있다.
(그런데 한가지 큰 함정이 있는게 젯팩 플러그인을 사용하지 않으면 딱히 워드프레스에서 js파일을 사용하지 않는다. 그러니까 젯팩 플러그인을 설치하면 여러가지 js, css 파일이 붙게 된다는 것이다. 애초에 젯팩 플러그인을 사용하지 않으면 깔끔하고 빠른 블로그 운영이 가능하다. 물론 젯팩에 유용한 편의기능들이 정말 많긴 하다.)

그런데 위에 이미지를 보면 알겠지만 나는 “정적 파일 로드 시간이 빨라짐”만 사용중이다.
“이미지 로드 시간이 빨라짐” 기능은(“포톤”이라고 불리기도 한다.) 워드프레스 글을 쓰면서 올린 이미지들을 모조리 젯팩 서버에다 올려서 그 링크로 대체해주는 기능이다. (이것도 CDN 기능인듯)
블로그에서 발생하는 트래픽 중에 이미지는 정말 큰 부분인데 그것을 해결해주는 것이다!

그런데 왜 나는 그 기능을 사용하지 않냐 하면···.
1. 이미지 화질을 떨군다.
좀 티가 많이 나는 편이다. (팁을 주자면 사진 같은게 아니고 색이 많지 않은 이미지는 gif로 올리면 젯팩에서 화질을 떨궈도 티가 거의 안 난다.)

2. 이미지가 이상하게 나오거나 안 나올 때가 있다.
(썸네일이 이상하게 나올 때가 있고 어떤 이미지는 엑박 표시가 될 때도 있더라.)

3. 트래픽은 줄지만 하드 용량은 줄어들지 않는다.
이미지를 다른 곳에 올리는게 아니고 내가 업로드해서 올린 이미지를 대체해주는 기능이기 때문에 하드 용량은 그대로라는 것이다. 사실 이건 나쁜 건 아니다. 블로그에 이미지를 업로드에서 운영하면서 잘 백업해두기만 하면 나중에 문제가 생겼을 때도 백업해둔 파일로 쉽게 복구가 가능하다.(만약 다른 서비스에 이미지를 올려서 사용하면 그 서비스에 문제가 생기면 하나하나 다시 업로드해서 연결해줘야 하는 중노동을 하게 될수도 있다.) 사실 하드 용량을 늘리는 것은 그렇게 비싼 편은 아니다. (카페24 기준으로 한달 1,100원짜리 “10G 광아우토반 Full SSD 일반형”은 500메가를 준다. 아 물론 이미지, 사진 위주로 올린다면 부족한 용량이겠지.) 그런데 나는 한달 500원 짜리 웹호스팅으로 계속 버텨보고 싶었다.(쓸때없는 도전정신) 그러려면 계속 이미지를 업로드해야 하는데 하드 용량의 압박이 있었다. (현재도 전체 200메가 중에 75% 정도를 사용중이다.)

4. 속도가 느린 편이다.
사실 지금은 예전에 비해서는 정말 많이 빨라졌다. 크게 불편함을 느끼지 못할 정도이다. 하지만 이미지 화질이 줄어드는 것도 그렇고 약간이라도 느리거나 하면 방문자도 떠날 위험이 있고 검색엔진에서도 안 좋은 영향을 끼쳐서 상위에 내 글이 노출되지 않을 것 같아서 걱정된다. (그래서 나는 이미지 트래픽 문제를 어떻게 해결했는지는 아래에서 설명하겠다.)

다른 무료 블로그 서비스에 업로드해서 링크하기

이미지는 구글 블로그에 올려서 퍼온다.
나는 구글 블로그에 글을 게시하지는 않은 상태로 이미지를 업로드해서 하나하나 블로그에 퍼와서 사용중이다.

위의 이미지처럼 크롬에서는 올려놓은 이미지 위에 커서를 대고 마우스 오른쪽 버튼을 클릭해서 “링크 주소 복사(E)”를 해서 해당 이미지의 주소를 쉽게 파악할 수 있다.

꼭 포스팅의 이미지가 아니더라도 블로그 디자인에서 사용되는 이미지도 구글 블로그에 올려서 링크를 걸어서 사용하면 많은 트래픽 절감 효과를 볼 수 있을 것이다.

구글 블로그는 1600*1600픽셀까지는 제한없이 올릴 수 있는 것 같다. (더 큰 이미지는 자동으로 줄어든다.)
이미지 화질도 떨어지지 않고 속도도 빠르고 하드 용량도 차지하지 않으니 귀찮은 것만 빼면 괜찮은 방식이다.

참고로 나는 구글 블로그에 올린 이미지들을 수작업으로 PC에 백업해두고 있다.
글의 제목으로 된 폴더를 만들어서 그 안에 사용된 이미지들을 저장해두는 방식으로 말이다.

style.css 파일은 티스토리 블로그에 올려 링크한다.
카페24에서는 “관리자화면/호스팅관리/기본관리/사용량 모니터링”을 보면 오늘 몇메가의 트래픽을 사용했고 어떤 페이지, 어떤 파일이 어느정도의 트래픽을 소모했는지 등등의 자세한 정보를 제공해주는데 확인해보니 style.css가 생각보다 트래픽을 많이 잡아먹었다.

티스토리 관리자모드에서 “스킨 편집/html 편집/파일업로드”에 보면 최대 20메가까지 업로드를 할 수 있는 공간이 있는데
그곳에 내블로그의 style.css 파일을 올려서 링크해서 사용중이다.
(기존의 style.css에 있는 코드는 다 지워서 백지상태로 만들어야 내 호스팅의 트래픽 용량이 소비되지 않는다.)

현재 이 블로그의 소스 코드 상단에 보면
<link rel="stylesheet" type="text/css" media="all" href="https://tistory4.daumcdn.net/tistory/1745843/skin/images/s.css?ver=7.5" />
이 코드가 스타일시트를 티스토리 블로그에 올려서 퍼온 코드이다. (테마 에디터에서 테마 헤더, 그러니까 <head>와 </head> 사이에 코드를 입력해주면 되는 것이다.)

그 스타일시트를 수정할 일이 있을 때는
티스토리 블로그에 수정된 s.css를 업로드한 후에(그냥 같은 이름의 파일을 올리면 덮어쒸워진다.) 위에서 말한 테마 에디터에서 테마 헤더에 썼던 코드의 뒷자리에 있는 7.5를 7.6으로 바꿔줘야 한다. (숫자에 정해진 의미가 있는 건 아니다. 그냥 임의로 정한 숫자를 조금씩 바꿔주면(올려주면) 된다. 이렇게 바꿔주지 않으면 기존에 방문했던 사람은 새로 수정한 파일이 적용되지 않아서 이전의 모습으로 보일 수 있기 때문에 해주는 작업이다.)

주의할 점은 티스토리의 스킨을 바꾸면 업로드해놨던 파일들이 다 날라간다.

그래서 트래픽 얼마나 줄였나?

위의 작업들을 해주기 전에는 하루 2,000 뷰 정도가 되면 트래픽의 70% 이상을 소비해서 사이트가 차단될까봐 걱정했었는데
현재는 약 100뷰에 10메가 이하의 트래픽만 사용한다.
그러니까 내가 지금 사용하는 웹호스팅 서비스의 하루 트래픽이 600메가니까 약 6,000뷰 정도까지는 충분히 버틸 수 있을 거라는 얘기다.

만약 하루 6,000명 이상이 들어오게 된다면 그때는 “10G 광아우토반 Full SSD 비즈니스”(한달 5,500원, 하루 트래픽 2.5기가)나 “파워업 무제한 광호스팅”(한달 33,000원 트래픽 무제한)을 사용할 생각이다.