제발 해외 CDN 좀 사용하지 맙시다.

국내 통신 3사 중 최소 한두 군데는 저녁때마다 해외 접속이 느려지곤 합니다.

요즘은 대부분의 해외 사이트가 https인데, 이러면 훨씬 더 느려집니다.

암호화를 위한 패킷이 몇 번 더 오가야 하니 접속이 느린 것이 좀더 티가 나는 것은 물론이고,

80 포트가 아니면 QoS를 더 심하게 거는 것 같거든요.

그런데 최근 나오는 레이아웃, 스킨, 위젯스킨 등을 보면 해외 CDN으로 떡칠해 놓은 것들을 많이 봅니다.
CDNJS, jsDelivr, Bootstrap CDN, 구글 웹폰트 등

하나만 쓰는 것도 아니고 아주 종합 세트로 이것저것 다 불러 씁니다.

CSS, JS 라이브러리 개발하시는 분들이 추천하는 CDN이 다 제각각이거든요. 그걸 그냥 복붙해서 쓰시니까 이렇게 됩니다.

같은 분이 만들어서 세트로 판매하는 테마 내에서도 CDN을 두세 군데씩 섞어쓰는 일이 흔하니

서로 다른 자료를 조합하면 더 가관입니다.

현존하는 모든 CDN을 한 페이지에서 아주 다 찍어볼 기세입니다.

일부 CDN은 국내에도 엣지서버가 있지만, 대부분은 최소한 일본으로 넘어갑니다.

국내에 엣지서버가 있는 업체도 툭하면 장애나 트래픽 초과 때문에 미국이나 홍콩으로 넘어갑니다.

여러 군데의 느려터진 해외서버에서 웹폰트나 아이콘, 자바스크립트 등을 불러오는 동안

사용자는 보통 3~5초, 길게는 10초 이상 기다리고 있습니다.

예전에도 스케치북 스킨에 비슷한 문제가 있어서 폰트어썸을 국내로 들여오라는 팁글을 작성한 적이 있습니다.

https://xetown.com/rxe_tip/377384

남들도 모두 쓰는 CDN을 사용하면 스크립트나 웹폰트가 이미 캐싱되어 있어서 빠를 거라는 주장을 종종 봅니다.

죄송하지만 속으셨어요. 그건 미국이나 유럽에서나 해당되는 얘기입니다.

같은 스크립트라도 여러 버전이 존재하기 때문에 정확히 똑같은 파일이 캐싱되어 있을 가능성은 의외로 낮습니다.

한글 웹폰트처럼 용량이 큰 파일은 캐시 용량 제한 때문에 비교적 빨리 캐시에서 퇴출되기도 하고,

대다수를 차지하는 모바일 사용자들은 "최적화"라는 이름으로 캐시를 자주 비우기 때문에 이 문제가 더 심각합니다.

해외 CDN이 빨리 뜨는 곳은 스킨 만드시느라고 하루종일 새로고침하며 캐시가 단단히 박힌 개발자님 본인 컴퓨터뿐입니다.

게다가 구글 웹폰트 earlyaccess CSS 파일들은 캐시 유효기간이 24시간밖에 안 됩니다.

통신사와 시간대에 따라서는 폰트 파일은 고사하고 CSS 파일을 받아오는 데만도 몇 초가 걸립니다.

동일한 레이아웃에서 웹폰트와 아이콘폰트만 뺐는데도

최초 방문시 페이지 전체 로딩속도가 5초에서 1초대로 줄어드는 것을 목격했습니다.

서버 속도와는 전혀 상관없이, 페이지에 포함된 CSS, JS, 웹폰트 등을 해외 CDN에서 불러오는 데 걸리는 시간 때문입니다.

그나마 해외 접속이 빠른 편으로 알려진 KT 회선이 이 모양이니, 다른 통신사는 오죽할까요?
 

아무 데나 CDN을 끌어다 쓰는 것이 유행이다 보니 스킨 제작하시는 분들도 별 생각 없이 갖다붙이기 쉬운데,

미국이나 유럽의 인터넷 환경에 맞게 만들어진 유행이라는 점을 유념해 주시면 감사하겠습니다.

갈라파고스 뺨치는 대한민국이라는 특수한 인터넷 환경에서는 국내 CDN 업체를 사용하지 않는 이상

모든 스크립트와 웹폰트를 국내 서버에 직접 올려놓고 .htaccess로 캐시 기간을 길게 주는 것이 훨씬 빠릅니다.

특히 http/2를 지원하는 사이트라면 커넥션 하나로 모든 파일을 주르륵 이어서 전송하기 때문에

해외든 국내든 모든 파일을 동일한 서버에 올려놓는 것이 가장 빠릅니다.

꼭 필요하다면 한 개의 CDN에 몰아서 씁시다. http/2 지원되잖아요. CDNJS와 jsDelivr를 동시에 쓸 필요가 없습니다.

가능하면 구글 웹폰트 외에는 모두 스킨에 포함하여 배포하는 것이 이상적이고,

웹폰트도 트래픽 폭증 우려가 있는 대용량 한글폰트가 아니라 간단한 영문 폰트 정도라면

스킨에 포함하여 배포하는 것이 좋습니다. 폰트어썸 등 아이콘 폰트도 마찬가지고요.

당장 필요하지 않은 스크립트는 헤더가 아니라 body 맨 아랫부분에서 로딩하는 것도 도움이 됩니다.

이 차이를 고려하지 않고 레이아웃이나 스킨에 해외 CDN을 함부로 사용하시면

제일 중요한 사이트 첫인상부터 느려져서 사용자들에게 고스란히 피해가 돌아갑니다.

사이트 전체를 클라우드플레어 같은 해외 CDN으로 운영하는 경우에도 마찬가지입니다.

클플 쓰신다면 모든 이미지, CSS, JS, 웹폰트 등을 클플에서 로딩하시는 것이 가장 빠릅니다.

괜히 다른 CDN을 기웃거리면 불필요한 https 커넥션 갯수만 늘어납니다.

안 그래도 클플 때문에 느린데 더 느려지면 안되잖아요. 클플 트래픽 무제한이니 웹폰트고 뭐고 다 올려놓고 쓰세요.

2022년 업데이트: 최근에는 CDNJS, jsDelivr 등 일부 CDN들이 국내서버를 운영하고 있습니다.

단, 예전에도 명목상 국내서버를 운영한다고 해놓고 실제로는 해외지점으로 연결되는 일이 종종 있었으니

해외망 시정이 좋지 않은 통신사(예: SK브로드밴드)에서 충분히 테스트해 보고 적용하시기 바랍니다.