PageSpeed Insights에서는 웹페이지 URL을 진단하고, 해당 웹문서의 성능을 개선할 수 있는 방법들을 제시합니다. 그중에서 사용하지 않는 자바스크립트 줄이기를 통해 티스토리 블로그의 성능을 개선하는 방법을 알아보겠습니다. 티스토리 스킨의 문제로 jQuery 자바스크립트가 중복해서 로드되는 문제의 해결법입니다.
목차
1. 사용하지 않는 자바스크립트
먼저 PageSpeed Insights에서 웹페이지를 진단합니다. 페이지 스피드 인사이츠는 아래 링크를 통해 접속할 수 있습니다.
PageSpeed Insights
올바른 URL을 입력하세요.
pagespeed.web.dev
내가 진단하고자 하는 URL을 입력하고 분석을 시작합니다. 그러면 성능 점수가 나오는데 해당 항목을 살펴보겠습니다.
성능 문제 진단하기 항목에 성능점수와 함께 개선할 수 있는 방법들이 제시되어 있습니다. 추천 사유는 해당 옵션마다 절감할 수 있는 데이터 전송량과 예상 시간치로 판단하여 제시된 것입니다. 오프스크린 이미지 지연하기 등 다양한 방법들이 있습니다. 그중에서 사용하지 않는 자바스크립트 줄이기를 봅시다.
사용하지 않는 자바스크립트도 여러가지 항목들이 있습니다. 이번 글에서는 사용하지 않는 자바스크립트 줄이기 중에서 jQuery가 이중으로 로드되는 문제의 해결법을 살펴보겠습니다.
위 사진에서는 가장 하단의 …jquery/jquery-3.5.1.min.js(t1.daumcdn.net) 이 부분입니다.
해당 항목의 링크는 https://t1.daumcdn.net/tistory_admin/lib/jquery/jquery-3.5.1.min.js 입니다.
2. jQuery 이중로드 이유
jQuery가 무엇일까요? jQuery는 HTML을 사용하는 웹 문서에서 다양한 클라이언트 기능을 제공하는 자바스크립트 라이브러리입니다. 블로그에서 자바스크립트 코드를 잘 사용하려면 이 jQuery를 로드해야 동작을 하는 것이죠.
구글 크롬의 개발자 도구를 통해 블로그 웹페이지를 살펴봅시다. 네트워크 항목을 보면 웹페이지가 로드될 때 어떤 파일들이 로딩되는지 확인할 수 있습니다. 그런데 jQuery가 2개가 로딩됩니다. 바로 3.5.1 버전과 1.12.4 버전입니다. 왜 그럴까요?
티스토리 블로그 스킨을 살펴보면 그 이유를 알 수 있습니다.
변경 전 코드
<script src="//t1.daumcdn.net/tistory_admin/lib/jquery/jquery-1.12.4.min.js"></script>
티스토리 스킨의 헤더 부분에는 위와 같은 스크립트 코드가 있습니다. 바로 jQuery 1.12.4 버전을 로드하는 코드입니다. 그런데 스킨 HTML 코드 어디를 살펴봐도 3.5.1 버전은 코드가 없습니다. 3.5.1 버전은 블로그 스킨과 관계없이 티스토리에서 로드시키는 jQuery이기 때문입니다.
정리하면, 티스토리 자체가 jQuery 3.5.1을 로드하고, 블로그 스킨에서도 jQuery 1.12.4를 로드시켜서 2개의 jQuery가 중복되어 로드되는 겁니다.
3. 이중로드 해결방법
해결방법은 간단합니다. 최신 버전인 3.5.1 버전을 로드시키면 됩니다. jQuery 1.12.4 버전은 2016년 5월 릴리즈 되었는데, 아마 티스토리 스킨이 업데이트된 당시의 최신버전이었던 것 같습니다. 하지만 버전이 바뀌었으니 스킨의 코드도 최신 버전으로 바꿔줘야죠.
변경 후 코드
<script src="https://t1.daumcdn.net/tistory_admin/lib/jquery/jquery-3.5.1.min.js"></script>
jQeury를 로드하던 코드를 위와 같이 최신 버전인 3.5.1로 변경해 줍니다. 해당 jquery 자바스크립트 파일은 별도로 파일 업로드를 할 필요는 없습니다. 왜냐하면 daumcdn에 업로드되어 있고, 티스토리 웹페이지가 자동으로 해당 파일을 로드하기 때문입니다.
이렇게 수정하면 성능 문제에서도 사용하지 않는 자바스크립트 리스에서 jquery-3.5.1.min.js가 사라집니다.
'생활 > 꿀팁' 카테고리의 다른 글
| 어도비 학생할인 받는 방법, 3가지 장점과 이용후기 (0) | 2023.03.15 |
|---|---|
| 티스토리 블로그 목차 부드러운 스크롤 적용 방법(문서 내부 링크 이동) (0) | 2023.03.13 |
| [ChatGPT] 답변을 이미지, 사진으로 받는 방법, 챗GPT 사용법 (0) | 2023.03.11 |
| ChatGPT 오류 해결법, Too many requests in 1 hour. Try again later. (0) | 2023.03.10 |
| 챗GPT 유료버전 ChatGPT Plus 가입방법 및 사용후기 (0) | 2023.03.09 |
댓글