젯팩 Image CDN 사용하기

젯팩(Jetpack)은 워드프레스 개발사인 Automattic에서 제공하는 인기있는 워드프레스 플러그인입니다. 그 이름에 걸맞게 워드프레스 자체에는 들어 있지 않지만 대부분의 워드프레스 사이트에서 꼭 필요로 하는 부가 기능들을 제공하기 때문에 많은 워드프레스 사용자들이 워드프레스 설치와 동시에 젯팩을 설치합니다.

젯팩이 제공하는 기능은 다양하고 또 계속 업데이트되기 때문에 젯팩의 모든 기능을 한번에 설명하기는 역부족입니다. 젯팩의 다른 여러 기능들은 다음 기회에 다른 곳에서 설명하기로 하고 이 글에서는 젯팩에서 제공하는 Image CDN 기능을 간단하게 소개합니다.

Image CDN은 예전에 ‘포톤(Photon)’이라는 이름으로 불리던 기능으로, 워드프레스 사이트의 각종 이미지 파일들을 워드프레스가 전세계에 위치한 자체 CDN(콘텐츠 배포 네트워크) 상에서 배포함으로써 웹사이트 성능을 향상시켜주는 기능입니다.

Image CDN 적용하기

Image CDN의 사용법은 설명이 필요 없을 정도로 간단합니다. 워드프레스 대시보드의 젯팩 “설정” 메뉴에서 다음과 같이 “사이트 속도 향상” 박스 아래에 있는 “서버에서 이미지 제공” 체크박스를 활성화시키기만 하면 됩니다.

그런 다음 잠시 기다리면 이제 내 웹사이트 내 모든 글(포스트)과 페이지 상에 위치하던 각종 이미지 파일들의 주소(URL)가 내가 호스팅하는 웹서버 도메인 주소가 아닌, 워드프레스가 호스팅하는 CDN 주소로 변경된 것을 확인할 수 있습니다. CDN이 정상적으로 적용된 것이죠.

내 사이트 콘텐츠 중 아무 거나 하나 선택한 다음, 마우스를 이미지 파일 위에 가져가서 이미지 파일의 주소(URL)를 한번 확인해 보세요. 이미지 URL이 다음과 같은 형식으로 변경된 것을 확인할 수 있을 것입니다.

http://i0.wp.com/$REMOTE_IMAGE_URL

이 때 wp.com 앞의 서브도메인값은 이 글을 쓰는 시점 현재 i0, i1, i2 중 하나를 갖습니다.

여기서 $REMOTE_IMAGE_URL 부분이 원래 내 웹사이트의 이미지 파일의 URL입니다. 예를 들어 내 워드프레스 사이트의 이미지 URL이 https://mysite.com/wp-content/uploads/2018/05/featured.jpg 라면 Image CDN을 통해 서비스되는 이미지 파일의 URL은 https://i0.wp.com/mysite.com/wp-content/uploads/2018/05/featured.jpg 로 맵핑되는 식입니다.

반대로, 기능을 더 이상 사용하지 않을 경우라면 체크박스를 끄면 됩니다. (기술적으로 Image CDN은 워드프레스의 image_downsize 필터를 통해 작동하며, 워드프레스 데이터베이스를 건드리지 않기 때문에 안심하고 켰다 끌 수 있습니다)

몇 가지 한계

젯팩 Image CDN 문서에 보면 다음과 같이 몇몇 한계 항목을 기술하고 있습니다.

• 캐시 무효화 미지원. 통상적으로 CDN에서는 데이터가 업데이트되면 CDN 상에 있는 데이터도 무효화되고 다시 저장되게 되며 이를 ‘캐시 무효화(cache invalidation)’라고 부릅니다. 젯팩 Image CDN은 현재 이 캐시 무효화를 지원하지 않습니다. 한번 저장되면 ‘영원히’ 갑니다. 유일한 해결책은 이미지 파일명을 변경하는 것 뿐이죠.
• 마찬가지로 CDN에 저장된 이미지 파일을 어떤 이유로 삭제할 필요가 생긴 경우, 현재로는 워드프레스사에 해당 이미지를 삭제해 달라고 요청하는 외에 다른 방법이 없습니다.
• Image CDN이 적용되는 이미지는 80번 및 443번 포트를 통해 제공되는 jpg, png, gif 파일에 한합니다.
• 이미지 크기 확장(upscale)은 지원하지 않습니다. 즉 작은 크기의 이미지를 크게 늘리는 것은 안된다는 말이죠.
• 너무 큰 이미지 파일(55M 이상)은 호스팅하지 않습니다.

Image CDN과 SEO

그 밖에 문제가 될만한 부분으로 SEO(검색최적화)와 연관된 문제가 생길 수 있습니다. 이미지 파일의 URL 주소가 웹사이트 도메인과 완전히 다를 경우 검색엔진에서 제대로 인덱스 처리가 안 되는 문제가 생길 수 있죠. 구글 이미지 검색 같은 곳에서 문제가 될 수 있습니다.

하지만 Image CDN의 경우, 비록 도메인이 다르더라도 CDN에서 각각의 이미지 파일에 대해 표준(canonical) URL을 제공하는 방식으로 이 문제를 해결하고 있습니다. curl로 확인해 보면 아래에서 보듯 HTTP Link 헤더로 원(original) 이미지 URL을 표준 URL로 표시하고 있음을 알 수 있죠.

$ curl -I https://i1.wp.com/edwardsturm.com/wp-content/uploads/2016/02/How-to-Make-a-Viral-Video-15-Simple-Ways-to-Harness-a-Viral-Trend.png
HTTP/1.1 200 OK
Server: nginx
Date: Tue, 12 Jul 2016 15:09:58 GMT
Content-Type: image/png
Content-Length: 1385220
Connection: keep-alive
Last-Modified: Tue, 12 Jul 2016 15:09:38 GMT
Expires: Fri, 13 Jul 2018 03:09:38 GMT
Cache-Control: public, max-age=63115200
Link: <http://edwardsturm.com/wp-content/uploads/2016/02/How-to-Make-a-Viral-Video-15-Simple-Ways-to-Harness-a-Viral-Trend.png>; rel="canonical"
X-Content-Type-Options: nosniff
ETag: "18c2a6e298505173"
X-Bytes-Saved: 843148
Vary: Accept
X-nc: HIT vie 20

쓸까 말까?

우리가 보통 CDN을 사용하는 이유는 크게 2가지 입니다.

• 첫째, 이미지를 사용자가 위치한 곳과 가능한 가까운 곳에서 제공함으로써 웹사이트 로딩속도를 향상시킬 수 있습니다. 이는 특히 전세계 사용자를 대상으로 콘텐츠를 제공하는 글로벌 사이트에서 아주 중요합니다.
• 둘째, 이미지가 CDN을 통해 제공되기 때문에 내 사이트의 트래픽을 줄일 수 있습니다. Image CDN 같은 경우는 이미지 파일의 최적화(optimization) 처리도 합니다.

하지만, 비록 Image CDN이 전세계에서 제공된다지만 아직은 서버 위치가 미국 내로만 한정된 것으로 보이며 그렇기에 로딩 속도 개선 효과가 크지 않을 수 있습니다. 만약 내 웹사이트가 국내에 호스팅 되어 있고 주로 국내 사용자들만을 대상으로 한다면 오히려 로딩 속도가 더 떨어질 수도 있구요.

그렇더라도 비교적 저렴한 웹호스팅 환경에서 서비스 중인 웹사이트라면 트래픽 감소 효과는 어느 정도 거둘 수 있을 것입니다.

설정을 껐다 켰다 하면서 한번 비교해 보세요. 체감 속도도 비교하고 여러 웹사이트 테스트 도구로 테스트도 해보면서요. 설정이 간단하니 부담없이 테스트할 수 있을 겁니다.

게다가 무엇보다 Image CDN은 무료랍니다! 🙂