[티스토리] 로딩속도 올리기(이미지, 유튜브)

로딩속도를 올리기 위해 별 짓을 다하다가 데스크탑모드에서만이라도 좋은 점수가 나왔다. 일단, 티스트로 자체에서 호출하는 코드가 굉장히 많기 때문에, 가능한 부분 중 가장 큰 리소스를 잡아먹을 수 있는 두가지에 대해서만 언급한다.

 

 

 

이미지 로딩 속도 올리기 (webp format)

이미지를 포토샵에서 webp 포맷으로 변환하거나 온라인상의 변환 서비스를 사용하면 된다. 특정 서비스에 대한 링크를 걸지 않는 이유는 사실 그들의 서비스를 나도 믿지 못하기 때문이다. 하지만 구글 검색 한번으로 처리가 가능하다.

라이트룸에서 해당 포맷을 지원하지 않는 것은 상당히 아쉬운 부분이고 변환 유틸리티가 많지 않은 점도 좀 아쉽긴 하다.

구글에서 배포하는 소스 경로만 공유를 한다.

 

WebP 다운로드 및 설치  |  Google for Developers

 

 

 

 

 

가벼운 유튜브 영상 호출 코드 (lite-youtube-embed)

가끔. 유튜브 영상을 올린 포스팅이 있는데, iframe으로 해놨더니, 해당 페이지가 매우 느려진다. 구글에서 추천해준 lite-youtube-embed 코드를 사용해본다.

 

해당 코드(js, css)는 다음 주소에서 확인할 수 있다.

GitHub - paulirish/lite-youtube-embed: A faster youtube embed.

 

 

방법은 js 파일은 파일로 다운받아 첨부로 올리고, css는 그냥 입력하고, js 호출코드만 헤드태그에 넣으면 끝이다. 포스팅에서는 아래와 같은 코드로 불러올 수 있다.

<lite-youtube videoid="영상id" playlabel="영상설명"></lite-youtube>

 

 

성능을 측정해보니, 놀랍게도 효과가 있기는 한거 같다.

 

위가 데스크탑, 아래가 모바일

 

 

끝.