티스토리 성능 개선 방법(사용하지 않는 자바스크립트 줄이기, 오프스크린 이미지 지연하기)

이번 포스팅에서는 티스토리의 성능을 개선할 수 있는 방법에 대해 알아보도록 하겠습니다. 우선 내 블로그의 현재 상태를 파악해 보도록 하겠습니다.

2023.06.24 - [SEO 글쓰기] - 상위 노출의 지름길, 페이지 로딩 속도 줄이기

상위 노출의 지름길, 페이지 로딩 속도 줄이기

상위 노출의 지름길, SEO를 왜 강조하는걸까? SEO(Search Engine Optimization)이란 단어를 블로거라면 무조건 들어보셨을 겁니다. 블로그로 수많은 수익을 내고 있는 유명 블로거들도 항상 SEO를 강조합니

trip-moonsta.tistory.com

먼저 PageSpeed Insights에서 웹 페이지를 진단합니다.

https://pageSpeed.web.dev/

PageSpeed Insights

올바른 URL을 입력하세요.

pagespeed.web.dev

위의 사이트에 접속하여 나의 블로그에 접속 URL을 입력합니다.

현재 나의 블로그 진단 결과

보통 초기 블로그 개설 후 어떠한 세팅도 하지 않았다면, 성능 점수가 50점 미만으로 표시될 것입니다. 평소 SEO에 글쓰기를 하신 블로거라면 성능 외에 권장사항 및 검색엔진 최적화는 높은 점수를 받으셨을 겁니다. 이제 성능에 대한 문제를 확인해 보고 해결 방법을 알아보도록 하겠습니다.

블로그의 성능이 낮은 이유

우선 블로그의 성능이 낮은 원인을 알아보도록 하겠습니다. 진단을 하고 하단을 보면 다음과 같은 이유를 볼 수 있습니다.

내용을 확인해 보면, 페이지의 성능이 낮은 이유는 크게 4가지로 확인됩니다.

오프스크린 이미지 지연하기
사용하지 않는 자바스크립트 줄이기
렌더링 차단 리소스 제거하기
차세대 형식을 사용해 이미지 제공하기

이제 원인도 알았으니, 하나씩 해결 방법을 알아보도록 하겠습니다.

오프스크린 이미지 지연하기

위의 문제가 발생하는 이유는 내 블로그에 접근하여 포스팅을 열었을 때 아무 설정을 하지 않았다면, 이미지와 텍스트가 한 번에 로딩됩니다. 하지만 이렇게 설정이 되어있다면, 이미지나 텍스트가 많은 글의 경우 전체적으로 로딩되는 시간이 길어집니다. 따라서 사용자가 휠을 내릴 때마다 그 위치에 있는 이미지와 글이 노출되도록 설정해 주면 됩니다. 방법은 다음과 같습니다.

blank.png

0.00MB

우선 위의 blank.png 파일을 다운로드합니다. 해당 로딩은 로딩 대기 중인 이미지를 투명하게 노출시켜 줍니다. 사실 해당 내용을 이해하려면 Lazy loading의 개념을 알아야 하지만, 그냥 따라 하시면 됩니다!

파일을 다운로드하셨다면, 티스토리에 스킨편집에 들어가 다운로드한 파일을 업로드해 줍니다.

파일을 업로드하였다면, 해당 파일을 우클릭 후 링크 주소 복사를 클릭합니다.

스크립트.txt

0.00MB

그 후 위의 스크립트. txt 파일을 다운로드하고 스크립트 안에 있는 ★에 복사했던 링크를 입력합니다. 링크를 입력했다면 스크립트를 전체 복사하여 <head> </head> 안에 삽입합니다.

이렇게 설정을 끝마쳤다면, 블로그의 지연 로딩 적용을 다한 것입니다. 이제 다시 블로그를 진단하면 오프 스크린 이미지 지연하기 문제는 해결된 것을 알 수 있습니다.

사용하지 않은 자바스크립트 줄이기

위의 문제가 발생하는 이유는 다음과 같습니다. 사용되지 않는 자바스크립트가 많아 로딩 속도가 지연되고 네트워크 활동에 소비되는 용량이 많다는 것입니다. 우선 상세 내용에서 어떠한 스크립트가 사용되지 않는지 알아보도록 하겠습니다.

항목을 확인해 보면, 불필요하게 많은 스크립트가 사요 되고 있는 것을 알 수 있습니다. 이제 실제로 블로그가 로딩될 때 어떠한 파일을 이중으로 읽는지 개발자 도구로 확인해 보도록 하겠습니다.

블로그에 접속하여 F12번을 누르면 크롬 개발자 도구를 열 수 있습니다. 개발자 도구를 열고 네트워크에 들어가게 되면 위와 같은 파일이 로드되는 것을 알 수 있습니다. 제 블로그를 확인해 본바 jquery 파일 두 개가 중복으로 로드가 되었고, 이것 때문에 블로그 성능이 낮아진 것을 알 수 있습니다. 이제 원인을 알았으니 해결 방법을 알아보도록 하겠습니다.

하지만 여기서 궁금한 점은, 사용자가 추가하지 않았는데 왜 jquery 파일이 두 개가 있던 걸까요? 사실 이 문제는 티스토리의 스킨과 관계가 있습니다. 티스토리의 스킨 편집에 들어가게 되면, head에 다음과 같은 코드가 들어가 있습니다.

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

해당 코드는 스킨을 적용시키면서 스킨 안에 있는 코드가 들어가 있는 것으로 확인되고 있습니다. 하지만 jquery 3.5.1 버전은 아무리 찾아봐도 보이지 않습니다. 그 이유는 티스토리 자체에서 강제적으로 3.5.1 버전을 사용시키기 때문입니다. 이제 코드를 수정해 보겠습니다.

head안에 있는 코드를 다음의 코드로 대체합니다.

  <script src="//t1.daumcdn.net/tistory_admin/lib/jquery/jquery-3.5.1.min.js"></script>

이렇게 코드를 변경시켜 주고 새로이 페이지를 진단받는다면, 불필요하게 존재하는 jquery 파일은 사라진 것을 확인할 수 있습니다.

차세대 형식을 사용해 이미지 제공하기

2023.07.16 - [SEO 글쓰기] - 블로그 로딩 속도를 개선하는 이미지 최적화 하기

블로그 로딩 속도를 개선하는 이미지 최적화 하기

블로그의 대량의 트래픽을 유도해야지만 상위노출이 되고, 많은 수익을 발생시킬 수 있다. 하지만 포스팅을 하면서 놓치는 부분이 있다. 바로 이미지를 최적화시키지 않고 포스팅을 하는 것이