이제 우리 생활에서는 뗄레야 땔 수 없는, 그야 말로 TV와 같은 존재가 되어 버린 것이 유투브 입니다. 티스토리에서도 게시글에 유투브를 넣으시는 분이 꽤 많으실겁니다. 하지만 유투브 동영상 한 두편이면 모를까 여러 편을 넣게 되면 사이트의 로딩 속도가 심각할 정도로 느려집니다.
특히 유투브 동영상을 게시글에 넣게 되면 해당 동영상을 보지 않아도 그 게시글을 클릭한 방문자는 유투브 플레이어를 모두 로드 하게 됩니다. 유투브 동영상이 삽입된 게시글을 클릭할 시에 브라우저의 프레임 드랍 만 봐도 결코 무시할만한 수준의 로드가 아니라는 것을 눈치챌 수 있습니다. 게다가 모바일로 접속시에는 상태가 더 심해집니다. 유투브 플레이어가 로드 되는 동안 스크롤링 조차 불가능 해질 정도 입니다. 물론 요즘은 브라우저 엔진이 많이 빨라졌다고는 하지만 여전히 프레임 드랍은 존재합니다.
유투브 플레이어 하나가 로드되는데 드는 데이터는 평균적으로 약 400kb입니다. 게다가 추가로 약 12개의 HTML 요청이 발생하고 300ms 가량의 로딩 시간과 5ms 정도의 레이턴시가 발생합니다. 데이터야 PC에서 볼 때는 별거 아니지만 여전히 모바일에서는 어마어마한 시간과 용량입니다.
저 만해도 유투브가 많이 들어간 페이지는 들어가기를 많이 꺼려 하는 편입니다. 더군다나 메모리 처먹는 괴물인 크롬을 즐겨찾기 동기화 때문에 울며 겨자먹기로 쓰는 입장에서는 더더욱 그렇습니다. 그래서 유투브 플레이어가 3개이상 삽입된 페이지는 가차없이 플레시를 꺼버립니다. 동영상이야 궁금하면 따로 로드해서 보면 되니까요.
제 블로그 게시글을 보면 많은 비중의 차지하는게 유투브 동영상 인지라 블로그를 운영하는 입장에서 정말 많은 고민을 했습니다. 그럴거면 유투브 주소만 링크걸면 되지 않느냐 라고도 할 수 있지만, 그래서는 모양이 살지 않습니다. 웹을 돌아다니면서, 특히 소셜 네트워킹을 하면서 발견한 것이 외부링크를 작은 섬네일로 대체한다는 것입니다. 페이스북만 해도 유투브를 링크걸면 플레이어를 긁어오는게 아니라 커버 사진만 불러와서 화면에 뿌려주고 링크를 누르면 플레이어를 로딩하는 방식입니다. 이 방식을 사용하면 유투브가 들어간 페이지 로드속도를 비약적으로 향상 시킬수 있을 것 같았습니다.
그래서 한번 적용해보려고 여러군데를 기웃거리고 자료를 모으던 중, 유투브를 로드하는대신 커버로 로드하는 플러그인을 찾았습니다. 이 플러그인이 좋은 점은 커버만 로드해놓고 커버를 클릭하면 그 순간 진짜 유투브 플레이어를 로드합니다. 소셜 서비스에서 제공하는 기능과 완전 동일한 기능인 셈 입니다.
그러나 플러그인만 딸랑 적용했더니 그다지 고화질 이미지를 끌어오지도 않고, 재생버튼도 이쁘지 않아서 제가 좀 커스텀을 했습니다. 섬네일 블러 처리는 웹킷/블링크 (사파리,크롬,오페라)에서만 확인 하실 수 있습니다. IE나 파폭에서는 아주 자글자글한 이미지가 뜹니다. ㅠㅠ
견본 동영상 - 시청후 멘탈 붕괴 주의
