질문/조언팁/리소스 공유

국내 통신 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 커넥션 갯수만 늘어납니다.

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

TAG •

글쓴이 기진곰

profile
GitHub 아이디는 @kijin입니다. 사람을 위한 인터넷 생태계의 발전과 웹 보안에 많은 관심을 가지고 있습니다.
오픈소스 도로명주소 검색서버 및 API Postcodify를 개발, 운영하고 있습니다.
우리가 만들어 가는 XE의 새 이름, 라이믹스(Rhymix) 프로젝트에 참여하고 있습니다.
국내외 서버 및 클라우드서버 세팅, 이전, 튜닝해 드립니다.
  • profile
    전 극혐이라 모두 서버에 올려서 사용하고 이미 웹폰트에는 초극혐을 경험한지라..
    네트워크를 이용하는 건 폰트 css뿐 아니라 서비스도 가급적 안씁니다. 사이트 느리게 하는데 일등 공신들이죠.

    제가 얼마전 단축주소 애드온도 딱 한번만 api에서 받아오게 하고 그 정보를 어딘가에 저장하려고 애썼던게 이런 맥락이었습니다.
    파싱모듈로 나오게 된 애드온도 그랬죠....

    최대한 저희 서버 내에서 모든 것이 처리 되게 하려고 노력 하는 스타일의 운영입니다.
  • ?
    하하.. 전 서버가 미국이라 body 아래에 cdnjs 만 쓰고있습니다..
    jquery,popper,bootstrap / bootstrap,fa 이렇게요......

    근데 cdnjs 핑때려보면 6-7ms 나오던데 이거 인천엣지에서 캐시해주는거 아닌가요?
    구글 폰트도 마찬가지고...

    http2 적용중인데 그냥다 제서버에 올려둘까요? 최근에 저위에것만 cdn 돌렷는데 ㅠㅠ
  • ? profile
    cdnjs는 클플 인천엣지로 걸리기 때문에 위에 나열한 것들 중 그나마 빠른 편입니다.
    물론 인천엣지가 잘 작동한다는 가정 하에 그렇습니다. 가끔 장애 발생하면 꼼짝없이 해외로 가죠.

    구글 웹폰트는 해외입니다. 구글은 한국에서 서버를 운영하지 않습니다.
  • profile ?

    아 핑40때나오네요 ㅋㅋ 다른거랑 착각한듯 ㅠㅠ
    제가 kt 미국핑 150 쯤인데 stk,lg 는 몇나올지 궁금하네요
    일단 cdnjs가 느려졋을때나 제서버나 핑은 비슷할거 같아서 그냥 냅둬야겟습니당 ㅎㅎ

  • profile profile
    아아악!! 구글 웹폰트가 해외이네요... 그럼 ... 그럼 구글을 아주 원천봉쇄한 중국에선 제 사이트가 아무리 웹폰트를 설정을 해놔도 중국인들의 컴터에선 다른 폰트가 보여지겠네요?! 아오 썅 ~~ 여태 맨땅에 헤딩을 했네요 !!! ㅠㅠ
  • profile
    CDNJS와 JsDelivr 모두 클플 인천엣지로 가지 않나요?
  • profile profile

    CDNJS는 특별한 문제가 없으면 클플 인천엣지로 걸립니다. jsDelivr는 클플과 제휴한다고 광고하는데도 실제로는 엉뚱한 데로 넘어가는 일이 많습니다.

     

    방금 테스트해 보니 CDNJS는 10~20ms만에 TCP 연결과 SSL 악수가 모두 완료되는데 jsDelivr는 250ms 이상 걸리네요. 국내라면 절대로 나올 수 없는 굼벵이 속도죠. 클플과 직접 제휴하는 게 아니라 Cedexis를 경유하기 때문에 이상하게 라우팅되는 것 같습니다.

  • profile
    "모든 스크립트와 웹폰트를 국내 서버에 직접 올려놓고 .htaccess로 캐시 기간을 길게 주는 것이 훨씬 빠릅니다." ------> 이거 어떻게 하는거예요? ^_____^
  • profile profile
    외부에서 로딩하는 파일들을 일일이 다운받아서 국내 서버의 적당한 폴더에 올려놓고 경로를 그쪽으로 연결해 줘야죠... 그냥 js 파일 한두 개라면 간단한 일인데, 웹폰트처럼 연결된 파일이 많으면 좀 귀찮습니다.
  • profile profile
    갑자기 머리가 아파옵니다 ㅋ ^____________^
  • profile profile
    곰님 그러면 구글 웹폰트를 제가 사용하는 호스팅 서버에 올리고 css에서 @import url이런식으로 해주면 되는건가요?
  • profile profile
    웹폰트를 서버에 직접 올리시는 것까지는 맞고요, @import는 사용하지 마세요. @import를 사용하면 @import가 선언된 파일을 다운로드하고 해석한 후에야 웹폰트 로딩을 시작하기 때문에, HTML 소스에서 <link rel="stylesheet">로 직접 선언하는 것보다 한참 늦어집니다. (XE 문법으로는 <load target="파일명">이 되겠지요.)
  • profile profile
    곰님한테서 또 한 수 배웠어영 !!!!
  • profile
    트래픽 비용 줄일려고 하시는 분들이 많은듯요
  • profile
    패키지에 포함해버리면 리이센스 규정에 어긋나는 경우도 있어서 오픈소스라고 막 가져다가 쓸 수는 또 없더라구요..ㅠ
  • profile
    CDN을 끌어다 쓰는 것도 잘 생각하고 써야겠네요.
    특히나 빠른 속도를 위해서는요.
  • profile
    CDN 자체가 빠른 속도를 위해서 있는것인데..
    더욱 느려진다니..
  • profile profile
    한국에서는 빠를수 없죠 굳이 서울에서 서울까지 통신인데 일본 미국을 경유할필요는없잖아요.

    CDN은 그냥 미국같은 나라때문에 나온것이라 생각하시는게...
  • profile
    xe타운의 폰트는 어떤것이고 어디에서 읽어오는 건가용? 제 사이트에도 따라해보고 싶습니다. 최적화를 조금씩 공부해보고싶어요
  • profile profile
    기본폰트에요.
  • profile profile
    헐 웹폰트 그런거 안넣어도 깔끔하군요.. 제것도 지워야겠어요

서버에 요청 중입니다. 잠시만 기다려 주십시오...