PageSpeed 통찰웹 페이지 URL을 진단하고 웹 문서 성능을 개선할 수 있는 방법을 제안합니다.
그들 중 사용하지 않는 JavaScript 줄이기티스토리 블로그의 성능을 향상시키는 방법에 대해 알아보겠습니다.
티스토리 스킨 이슈로 인한 jQuery 자바스크립트 더블로딩 문제 해결 방법입니다.
색인
1. 자바스크립트 비활성화
먼저 PageSpeed Insights는 웹 페이지를 진단합니다.
Page Speed Insights는 아래 링크를 통해 액세스할 수 있습니다.
PageSpeed 통찰
유효한 URL을 입력 해주세요.
pagespeed.web.dev
진단할 URL을 입력하고 분석을 시작합니다.
그러면 성능 점수가 나오게 됩니다.
살펴보겠습니다.
성능 문제 진단 항목에서는 성능 점수와 개선을 위한 제안을 제공합니다.
추천 이유는 저장된 데이터 전송량과 각 옵션이 절약할 수 있는 예상 시간 값을 기반으로 합니다.
오프스크린 이미지 지연 등 다양한 방법이 있습니다.
그들 중 사용하지 않는 JavaScript 줄이기보자
사용하지 않는 JavaScript 항목도 있습니다.
이 기사에서 사용하지 않는 JavaScript를 줄이는 방법 중 하나는 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는 HTML을 사용하여 웹 문서에서 다양한 클라이언트 측 기능을 제공하는 JavaScript 라이브러리입니다.
JavaScript 코드가 블로그에서 제대로 작동하려면 이 jQuery가 작동하도록 로드해야 합니다.
구글 크롬 개발자 도구블로그 페이지를 살펴보겠습니다.
네트워크 섹션을 보면 웹 페이지가 로드될 때 어떤 파일이 로드되는지 확인할 수 있습니다.
그러나 두 개의 jQuery가 로드됩니다.
버전 3.5.1과 버전 1.12.4입니다.
왜?
티스토리 블로그 스킨을 보시면 그 이유를 알 수 있습니다.
변경 전 코드
티스토리 스킨 헤더 부분의 스크립트 코드는 위와 같습니다.
다음은 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월에 나왔고 티스토리 스킨 업데이트 당시 최신 버전인 것 같다.
하지만 버전이 바뀌었으니 스킨의 코드도 최신 버전으로 업데이트해야 합니다.
변경된 코드
최신 버전 3.5.1로 jQuery를 위와 같이 로드하도록 코드를 수정합니다.
jquery JavaScript 파일은 별도로 업로드할 필요가 없습니다.
daumcdn에 업로드하면 티스토리 웹페이지에서 자동으로 파일을 불러오기 때문이다.
이 수정으로 jquery-3.5.1.min.js는 성능상의 이유로도 사용하지 않는 JavaScript 임대에서 사라집니다.