[중국 쇼핑몰 분석] dns-prefetch

중국 웹서비스 준비를 하면서 한국처럼 인터넷 인프라가 좋지도 않으면서

땅은 또 수십배 큰 중국 전역에 어떻게 안정적인 서비스를 할 수 있을까 항상 고민을 하게 된다.

서버 배치도 골치가 아프고, 페이지 자체 로딩도 한국처럼 이것저것 다 붙여 놓으면 로딩 속도가 느려서 문제가 많다.

그래서 우리 회사의 메인페이지와, 타오바오나 진둥 같이 중국 메이저 쇼핑몰 메인 페이지를 비교하기 시작했다.

(상품 상세는 걔들도 페이지뷰가 높은 것들은 빨리 뜨고, 아닌것들은 이미지가 안뜰 때가 있으니 비슷하다고 보고...)

1. Lazy Loading 사용과 가벼운 메인 페이지

중국 대부분의 쇼핑몰이 lazy loading 방식의 사용으로 보이는 부분만 로딩하고, 나머지는 스크롤 이동시 보이게 하는 방식인데,

제일 큰 문제는 메인 페이지 자체의 용량 차이가 10배 정도 나는 것이였다.

한국에서는 로딩에 별 신경도 안쓰던 메인페이지가 중국에 가니 문제가 많이 발생했다.

(무작정 고퀄의 이미지를 여기저기 박아뒀으니...)

중국 자체가 땅덩이가 너무 커서 유선 인터넷보다 무선 인터넷이 오히려 활성화가 되어있는데

페이지가 무겁다 보니깐 여기저기 이미지가 안뜨는 현상까지 발생을 하였다.

그리고 용량이 많다보니 그 수많은 인구가 들어가게 되면 트래픽 비용도 기하급수적으로 늘어날 것이라

사용자는 눈치채지 못할 만큼 이미지 화질을 낮추고 lazy loading 을 적용했다.

그리고 메이저 쇼핑몰들은 이미지를 가져올 때, 자체 CDN에서 가져오니 이건 우리 입장에서는 어떻게 할 수가 없었다.

안그래도 서버 비용도 어마어마한데 CDN까지 하려면 돈이 얼마나 있어야 하는건지...

한국 대기업이 사업하기도 벅차지 않을까 생각되는 부분이기도 하다.

2. dns-prefetch

비교 사이트들을 둘러보면서 한국에서는 잘 쓰지 않는 특이했던 점은 다들 dns-prefetch 를 사용하고 있는 것이였다.

dns-prefetch를 사용하면 해당 url의 웹페이지 로딩을 더 빠르게 하기 위해 미리 ip를 조회해준다고 합니다.

말 그대로 Domain name을 미리 prefetching 해두기 때문에 많은 여러 도메인 링크가 걸려있는 페이지의 경우 효과가 좋다고 한다.

 

일단 사용자가 다른 도메인으로 링크되어있는 하이퍼 링크를 클릭하면, 캐쉬를 검색하고, DNS 서버를 통해 IP주소를 찾게 되는데

dns-prefetch를 사용하면 페이지 로딩 시 백그라운드에서 병렬로 이런 작업이 이루어지기 때문에 페이지 렌더링에 간섭이 없다고 한다.(CPU나 네트워크 자원 소모도 극미하다고 합니다)

이렇게 때문에 캐쉬되지 않은 컨텐츠에 대해서는 200 milliseconds 의 시간을 절약할 수 있고, DNS 서버가 좋지 않은 경우 1~2초까지 시간이 줄어든다고 한다.

사실 한국은 인터넷 강국이라 저런거 필요없어도 사이트가 잘만 돌아가기 때문에 우리 프론트 개발자도 생각을 못했다고 한다.

그래서 혹시나 아마존도 dns-prefetch를 쓰진 않을까 했는데 진짜 쓰고 있었다.

사실 규모가 작은 웹인 경우에는 이 작업이 필요없을 수도 있는데, 사용자가 많아지고 서버도 늘어나게 되면

자연스럽게 dns-prefetch 도 고려를 해야할 것 같다.

  

타오바오

<link rel="dns-prefetch" href="//g.tbcdn.cn"> <link rel="dns-prefetch" href="//g.alicdn.com"> <link rel="dns-prefetch" href="//img.alicdn.com"> <link rel="dns-prefetch" href="//gtms01.alicdn.com"> <link rel="dns-prefetch" href="//gtms02.alicdn.com"> <link rel="dns-prefetch" href="//gtms03.alicdn.com"> <link rel="dns-prefetch" href="//gtms04.alicdn.com"> <link rel="dns-prefetch" href="//log.mmstat.com"> <link rel="dns-prefetch" href="//p.tanx.com"> <link rel="dns-prefetch" href="//i.mmcdn.cn"> <link rel="dns-prefetch" href="//delta.taobao.com">

JD.com

<link rel="dns-prefetch" href="//misc.360buyimg.com" />  <link rel="dns-prefetch" href="//img10.360buyimg.com" /> <link rel="dns-prefetch" href="//img11.360buyimg.com" /> <link rel="dns-prefetch" href="//img12.360buyimg.com" /> <link rel="dns-prefetch" href="//img13.360buyimg.com" /> <link rel="dns-prefetch" href="//img14.360buyimg.com" /> <link rel="dns-prefetch" href="//img30.360buyimg.com" /> <link rel="dns-prefetch" href="//d.3.cn" />             <link rel="dns-prefetch" href="//d.jd.com" />

Amazon.com 

<meta http-equiv="x-dns-prefetch-control" content="on"> <link rel="dns-prefetch" href="//g-ecx.images-amazon.com"> <link rel="dns-prefetch" href="//z-ecx.images-amazon.com"> <link rel="dns-prefetch" href="//ecx.images-amazon.com"> <link rel="dns-prefetch" href="//completion.amazon.com"> <link rel="dns-prefetch" href="//fls-na.amazon.com">