티스토리 블로그 속도 개선하는 방법 7가지 총정리

구글의 PageSpeed Insights에서는 티스토리 블로그의 성능을 검사하고, 개선할 수 있는 요소들을 진단합니다. 성능문제 진단을 통해 웹페이지의 성능, 접근성, 권장사항, 검색엔진 최적화 점수를 개선하고 발전시킬 수 있는 방법들을 하나씩 알아보겠습니다.

 

 

목차

 

PageSpeed Insights

 

 

1. 블로그 성능 진단

 

PageSpeed Insights를 통해 블로그의 성능을 먼저 확인해 보겠습니다. 아래 링크를 통해 접속합니다.

 

https://pagespeed.web.dev/

PageSpeed Insights

 

위 링크에 접속하면 진단하고자 하는 웹페이지 URL을 입력합니다.

 

URL을 입력 후 분석

 

샘플로 https://widemoat.tistory.com/85 주소를 입력하고 분석을 진행해봅니다. URL을 분석하는데 시간이 약 1분 정도 소요됩니다.

 

코어 웹 바이탈 평가

 

먼저, 코어 웹 바이탈 평가입니다. 코어 웹 바이탈 평가는 필수적인 항목으로 통과하지 못하면 웹페이지에 큰 문제가 있다는 뜻입니다. 접속 자체에 문제가 발생한다는 의미이기 때문입니다. 그래서 분석을 진행하면 코어 웹 바이탈 평가는 빠르게 결과가 나옵니다.

 

그리고 상단에 보면 휴대전화, 데스크톱 2가지 항목이 있습니다. 기기 환경에 따라 점수가 달라지므로 각각 확인해서 개선하면 좋습니다. 성능 점수는 휴대전화 환경이 더 가혹합니다.

 

성능진단 결과

 

성능진단 결과입니다. 그다지 좋지 않네요. 이 점수가 나쁘다고 아주 큰 문제가 생기는 것은 아니지만 검색엔진에서 순위가 뒤로 밀릴 수는 있습니다. 특히 검색엔진 최적화 점수는 높게 유지하는 것이 좋습니다.

 

성능문제의 경우 상당수 항목들은 티스토리 자체의 문제가 있어서 완전히 개선하는 것은 불가능합니다. 따라서 개선할 수 있는 부분은 수정하되 성능 점수가 낮게 나오는 것은 어느 정도 감수하고 가야 하는 것이죠.

 

 

 

2. 진단결과 살펴보기

 

성능 진단이 완료되면 지적사항을 살펴보겠습니다.

 

개선할 수 있는 항목들

 

웹페이지를 로드할 때 시간을 지연시키는 항목들입니다.

 

 - 이미지 크기 적절하게 설정하기

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

 - 렌더링 차단 리소스 제거하기

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

 - 초기 서버 응답 시간 단축

 - 효율적으로 이미지 인코딩하기

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

 

이런 항목들이 있네요. 가장 크리티컬한 성능 항목은 바로 이미지입니다. 아무래도 텍스트는 용량이 적다 보니 비효율적인 부분들이 있어도 성능에 미치는 영향력은 작습니다. 그러나 이미지는 파일이 크니까 얼마나 압축하고, 용량을 줄이는지에 성능이 크게 좌우되는 것이죠.

 

각각의 항목들에 대해서는 하나씩 살펴보도록 하겠습니다.

 

 

3. 성능 개선방법 총정리

3-1. 이미지 크기 적절하게 설정하기

해상도가 너무 높고, 용량이 큰 이미지 파일은 로딩 시에 지연이 발생합니다. 따라서 읽는데 지장이 되지 않는 범위 내에서 적당히 압축하거나 사진 크기를 축소하여 첨부하는 것이 좋습니다.

 

이미지 편집

 

이미지 크기 편집은 티스토리의 자체 편집툴을 이용해도 됩니다.

 

크기 수정

 

이미지 편집의 첫번째 항목이 크기입니다. 위에서 선택한 이미지의 원본파일 크기는 982x510이라고 하네요. 원하는 사이즈로 직접 입력하면 사진의 해상도가 변경됩니다. 너무 해상도가 높은 사진은 이렇게 줄여주는 것이 좋습니다.

 

 

3-2. 차세대 이미지 형식 사용

이미지파일 용량 줄이는 프로그램, 꿀뷰로 사진 일괄 변환하기

이미지파일 용량 줄이는 프로그램, 꿀뷰로 사진 일괄 변환하기

 

이미지 파일을 꿀뷰에서 webp 파일로 변환하면 됩니다. 일반적으로 사용하는 이미지 포맷인 jpg, png 등은 비교적 옛날 기술로 웹에서 사용하기에는 압축률이 떨어집니다. 반면, 구글에서 개발한 webp는 웹 상의 환경에 최적화되어 이미지 파일의 용량을 크게 줄일 수 있습니다.

 

 

3-3. 렌더링 차단 리소스 제거하기

PageSpeed Insights의 렌더링 차단 리소스를 제거해보자.

PageSpeed Insights의 렌더링 차단 리소스를 제거해보자.

 

다른 블로그의 글이지만 내용이 좋아서 링크합니다. 렌더링 차단 리소스는 CSS, Javascript 등을 지연 로딩하는 것으로 로딩 시간을 줄일 수 있습니다. 한 가지 주의할 점은 자바스크립트의 경우 어떤 라이브러리를 먼저 로드하는지에 따라 웹페이지의 결과가 달라질 수 있기 때문에 웹페이지의 구조를 이해한 상태에서 작업해야 합니다.

 

이 항목은 웹에 대한 이해가 꽤 필요하고, 실제 개선을 하더라도 효과가 미약해서 큰 노력을 기울이지 않는 것을 추천드립니다. 어차피 애드센스를 적용하면 성능 점수가 많이 하락되고, 렌더링 차단 리소스 제거 정도로는 점수가 거의 오르지 않기 때문입니다.

 

 

3-4. 사용하지 않는 자바스크립트 줄이기

티스토리 성능 개선, jQuery 사용하지 않는 자바스크립트 줄이기

티스토리 성능 개선, jQuery 사용하지 않는 자바스크립트 줄이기

jQuery 중복 로딩 문제를 해결하는 방법입니다. 티스토리 스킨은 예전에 만들어진 코드라 당시 jQeury 최신 버전인 1.12.4 버전을 로딩합니다. 해당 코드를 티스토리에서 자동으로 로딩하는 최신 jQuery 버전으로 링크를 변경하면 중복되는 자바스크립트 로딩을 해결할 수 있습니다.

 

 

3-5. 초기 서버 응답 시간 단축

웹 서버를 최적화하여 서버의 응답시간을 단축할 수 있습니다. 다만 이 부분은 전적으로 티스토리와 카카오에 달려있습니다. 워드프레스 같이 개인이 호스팅을 하는 설치형 블로그는 호스팅 업체를 바꾸는 등의 개선 방법을 찾을 수 있지만 가입형 블로그는 전적으로 해당 서비스 제공자의 서비스 품질에 달려있습니다. 티스토리 블로그를 운영하는 개인이 개선할 수 없는 항목입니다.

 

 

3-6. 효율적으로 이미지 인코딩하기

웹페이지에 JPG 이미지가 존재하는 경우 뜰 수 있는 메시지입니다. JPEG 확장자는 이미지를 압축하는 파일 형식입니다. PageSpeed Insights는 압축 수준을 85로로 했을 때의 이미지 용량과 원본 용량을 비교해서 속도를 개선할 수 있으면 이 메시지를 띄우는 겁니다. 위에서 살펴본 대로 꿀뷰를 이용하여 WebP 형식으로 변환하거나 JPG의 품질 값을 80 정도로 낮게 설정해서 변환하면 해결됩니다.

 

 

3-7. 오프스크린 이미지 지연하기

티스토리 최적화 와 오프스크린 이미지 지연하기

티스토리 최적화 와 오프스크린 이미지 지연하기

 

레이지로드라고 부르는 기술입니다. 다른 블로그의 글이지만 잘 정리되어 있어서 위 글을 참고하시면 좋겠네요.

 

여러 가지로 장점이 있고, 페이지 로딩속도를 개선할 수 있습니다. 하지만 블로그에 접속하자마자 로딩창이 떠서 몇초간 대기해야 하는 것이 사용자 경험에 악영향을 준다고 보고 있습니다. 실제 많은 블로그들이 오프스크린 이미지 지연을 쓰지 않고도 잘 운영되고 있고요. 취향에 따라 선택할만한 사항이라고 생각됩니다.

 

 

 

4. 블로그 성능개선 후기

여러가지 방법을 사용해서 블로그의 성능을 개선해 봤습니다. 능력과 시간의 부족으로 완전히 최적화를 하지는 못했지만 그래도 최초의 스킨보다는 꽤 성능점수를 올릴 수 있었습니다. 특히 다른 항목보다 게시글에 첨부되는 이미지 파일을 WebP 형식으로 변환하고, 고해상도 사진을 웹 환경에 맞게 축소하는 것이 가장 효과가 좋았습니다.

 

다만 아무리 블로그의 성능을 개선하더라도 한계는 있습니다. 수익형 블로그는 웹페이지 내에 광고를 게시해야 하기 때문입니다. 아무리 블로그가 가볍고, 게시글 내의 이미지를 잘 압축하고 WebP로 변환해서 올려도 애드센스 광고가 발생시키는 로딩 지연이 훨씬 클 수 있습니다. 그래서 광고의 개수도 최대치가 아닌 50~80% 수준으로 적당히 줄여서 광고를 게시하는 것이 오히려 수익에 더 도움이 될 수 있습니다. 왜냐하면 로딩이 빨라지면 검색엔진의 게재순위가 상승할 수 있기 때문입니다.

 

따라서, PageSpeed Insight의 성능 점수는 적당히 신경을 쓰고, 너무 세세한 부분까지 모두 개선하려고 하는 것은 좋지 않습니다. 차라리 그 시간에 포스팅을 하나 더 하는 것이 낫겠죠. 언제나 본질은 블로그에 접속하는 방문자의 사용자경험이 가장 중요하다는 것을 기억해야겠습니다.