티스토리 스킨 jQuery 중복 로딩 피하기

자원 중복 로딩이 발생하면 좋을 이유가 전혀 없기 때문에 생각한 방법입니다. 다만 예기치 못한 문제가 발생할 수 있으므로 어느 정도 코딩 지식이 있으신 분만 참고 하시기 바랍니다.

 

목차

 

jQuery 중복 로딩 개선이 필요한 이유

티스토리는 자체적으로 jQuery를 로딩하여 사용합니다. 따라서 스킨에서 jQuery를 이용하려면 보통은 다시 jQuery를 임포트합니다. 지극히 일반적이고 상식적인 이야기 입니다. 그런데 저는 조금 다르게 생각을 해 보았습니다. 이미 jQuery를 로딩하여 사용하고 있는데 굳이 불필요하게 로딩하면 블로그 속도만 느려지게 만드는게 아닌가 한거죠. 실제 체감할 수 있을 정도는 아니겠지만 이런 작은 개선이 모여 큰 차이를 만들게 됩니다.

 

jQuery도 여러 버전이 있기 때문에 꼭 다른 버전을 이용해야 할 이유가 있으면 중복 로딩이 필요할 수도 있겠지만 일반적으로 사용하는 스킨에서는 두 가지 버전을 이용해야 할 이유가 거의 없습니다. 이미 내부적으로 jQuery가 로딩되고 있는 사실을 모른 체 그냥 아무 생각없이 jQuery가 필요하니까 임포트 하고 사용하는 사람이 대부분이죠. 아마 스킨 제작자 중에서도 이 사실을 모르는 사람이 있을 수도 있습니다.

 

이전에 아래 포스팅에서도 언급한 적이 있는데 참고 바랍니다.

티스토리 SEO(검색 엔진 최적화)를 위한 블로그 속도 개선 - jQuery 중복 로딩을 피했습니다

티스토리 SEO(검색 엔진 최적화)를 위한 블로그 속도 개선

 

 

스킨에 포함 된 jQuery 임포트 구문 제거

보통 스킨 상단에 보면 다음과 같은 구문이 있을 겁니다.

<script src="./images/jquery-3.3.1.min.js"></script>

 

과감하게 제거하거나 혹시 모를 상황에 대비하여 다음과 같이 주석 처리를 합니다.

<!-- <script src="./images/jquery-3.3.1.min.js"></script> -->

 

 

티스토리 자체 임포트 된 jQuery 사용

스킨에 따로 임포트 구문을 작성하지 않아도 티스토리 내부적으로 jQuery를 로딩하고 있는데, 우리가 알고 있는 $나 jQuery 변수명을 tjQuery로 대체하여 사용하고 있습니다. 아마 새로 임포트한 jQuery와 간섭을 일으키지 않게 하려고 그랬겠죠. 하지만 우리는 티스토리에서 로딩한 jQuery를 재사용 해 보겠습니다.

 

jQuery 임포트 구문을 주석 처리(또는 제거)한 위치 바로 아래에 다음과 같이 작성해 보겠습니다.

<script>
    window.$ = window.jQuery = window.tjQuery;
</script>

tjQuery를 다시 $와 jQuery 변수에 할당한 것입니다. 너무 간단하죠. 참고로 window 객체에 담으면 전역 변수처럼 활용할 수 있습니다.

 

위와 같이 작성한 것이 전부 입니다.

 

 

전체적인 테스트 필요

하지만 테스트는 필수적으로 해주어야 합니다. 스킨에서 사용한 jQuery와 버전이 다를 수 있으므로 (대부분은 다를 겁니다) 꼭 기능들을 꼼꼼히 테스트 해 주시고 개발자 모드에서 console 창에 스크립트 에러가 발생하고 있지 않은 지 체크가 필요합니다. 제가 여러 스킨에서 테스트 해 본 결과 에러가 발생한 사례는 많지 않았고 쉽게 고칠 수 있는 것이 대부분 이었습니다.

 

밑져야 본전이니 한 번 해 보시기 바랍니다.

감사합니다 :)