티스토리 속도 개선 (jQuery 이중 로드 제거)

해당 포스팅은 티스토리의 기본 북클럽 스킨(Book Club)에서 진행되었습니다.
티스토리의 jQuery 버전이 바뀌므로, 다른 별도의 커스터마이징 된 스킨을 이용하시는 경우 문제가 발생할 수 있습니다.

1. 티스토리 jQuery 이중 로딩확인

자신의 티스토리 블로그의 아무 글에 들어갑니다.

티스토리 글에서 F12 Network 탭 (크롬 브라우저)

글에서 키보드의 F12 버튼을 누르고 Network 탭으로 들어가 F5를 눌러 새로고침을 해줍니다.
따로 티스토리 jQuery 관련 스크립트를 수정한 적이 없다면,
위와 같이 Network 탭에서 jquery~min.js 항목이 두 개 존재하는 것을 확인할 수 있습니다.

2. 그래서 그게 문제가 되나요?

결론부터 말하자면 문제는 없습니다.
다만 저부분을 하나 제거함으로써 얻는 약간의 이점이 있습니다.

1. 자신의 티스토리 방문자에게 조금 더 빠른 페이지 화면을 제공할 수 있습니다.
   (캐싱 없이 초기 접근 시, ms 수준으로 방문자가 크게 체감 가능한 수준은 아닙니다.
   하지만 이런 부분이 많이 쌓인다면 또 다르겠죠.) 
2. 더 높은 버전의 jQuery를 사용 가능합니다.
   기본 사용 버전은 위의 이미지에서 확인했다시피 jquery-1.12.4 버전입니다.
   (이 부분은 직접 코딩을 하시지 않는다면 크게 의미가 없을 것 같습니다.)

저는 북클럽(Book Club) 기본 스킨에서 아래와 같이 진행하였습니다.
코딩 지식이 약간 있으시다면 어렵지 않게 하실 수 있다고 생각됩니다.

3. 기존 jQuery 1.12.4 추가 스크립트 제거

티스토리 '스킨 편집 > HTML 편집' 항목으로 이동합니다.

 

티스토리 스킨 편집 HTML 편집 창

위의 이미지와 같이 기본으로 추가되어 있는 script를 아래와 같이 주석처리해줍니다.

<!-- <script src="https://t1.daumcdn.net/tistory_admin/lib/jquery/jquery-1.12.4.min.js"></script> -->

티스토리 스킨 편집 HTML 편집 창 script 주석 처리

위와 같이 처리되었다면 '적용' 버튼을 눌러 적용해줍니다.

4. 자동으로 추가되는 jQuery 리소스 이용 처리

목차 1번에 이미지에서 확인했듯이 jquery 3.2.1 버전을 기본적으로 로드되는 것을 알 수 있습니다.
이는 티스토리 내부적으로 추가되는 리소스로, 티스토리 개인 관리자가 제어할 수 없습니다.
그래도 해당 jQuery가 추가되므로 위에서 제거하였던 jQuery 1.12.4 버전 대신 사용하도록 수정합니다.
아래의 스크립트 코드를 위에서 jQuery 1.12.4 버전 주석처리하였던 곳에 추가해줍니다.

<script type="application/javascript">
	window.jQuery = window.$ = window.tjQuery; 
</script>

티스토리 HTML 편집 스크립트 코드 추가

위의 이미지와 같이 추가해 준 후, '적용'버튼을 클릭해줍니다.

5. jQuery 3.2.1 버전으로 정상 반영되었는지 확인하기

이제 다시 목차의 1번으로 돌아가 크롬 개발자 도구의 네트워크 탭에서 jQuery가 한 번만 노출되는지 확인합니다.

크롬 개발자 도구 네트워크 화면

정상적으로 jquery-3.2.1.min.js만 보이는 것을 확인 가능합니다. 
위 이미지의 하단에 보이는 Error의 경우, jQuery 버전이 3 버전대로 바뀌어 나타는 오류입니다.
티스토리에서 기본적으로 추가되는 script.js 파일에 한 줄을 수정하면 됩니다. 
아래 글의 목차 4번을 진행해주시면 됩니다.

티스토리 jQuery 버전 올리기

티스토리 jQuery 버전 올리기

자신의 티스토리 블로그에 정상적으로 jQuery가 반영되었는지 확인하기 위해 개발자 도구 창에서 아래와 같이 입력해 줍니다.

티스토리 jQuery 반영 확인

jQuery().jquery

위의 코드를 Console 창에 입력했을 때, 위와 같이 '3.2.1'이 나온다면 정상적으로 반영된 것입니다.