[웹사이트/SEO] 티스토리 속도 개선을 위한 여러가지 방법

---

 

며칠 전 우연히 서치 콘솔을 둘러보다가
데스크톱 페이지에 오류가 있는 것을 확인하고
뭐지...🤔 하고 들어가 봤습니다.

 

 

제가 작성한 포스팅 중 일부가
접속하는 데 있어서 굉장히 느린 속도로 표시된다는 결과였습니다.

특정 일자를 기준으로 갑자기 왜 이러는 건지
의문이 들면서도 일단 원인 파악을 위해 보고서를 봤는데,

 

 

CLS 문제...?라고 나오네요.

뭔 소린가 싶어서 인터넷에 찾아보니,
사이트를 로딩하면서 이미지가 텍스트보다 늦게
출력되는 현상이라는 것 같네요.

세부 정보를 클릭하니까, 구글에서 제공하는
웹페이지 속도 측정 사이트가 자세한 결과를 얻을 수 있을 것 같아
들어가서 검사를 해보았습니다.

<페이지 스피드 인사이트>

PageSpeed Insights

---

 

 충격적인 결과

 

 

홀리 ㅆ... 100점 만점에
모바일은 3점, 데스크톱은 24점이 나왔네요.😰

또한 위에서 오류로 나왔던 CLS와 더불어서
사이트 내에 여러 가지 문제점들이 있다는 것을
추가로 확인할 수 있었습니다.

대충 보니까 이미지와 스크립트에 관한 최적화가
이루어지고 있지 않다고 나오네요.

점수로 인한 충격은 잠시 접어두고,
문제 해결을 위해 최적화하는 법을 찾아 진행해 보았습니다.

 

---

 

HTML/CSS 최적화

 

htmlcompressor.com/

HTML Compressor - Speed up your web pages.

 

본인의 티스토리에 적용되어 있는 HTML과 CSS의 압축을 통해
최적화를 기대해볼 수 있는 방법입니다.

 

 

먼저 스킨 편집에 들어간 다음
HTML 편집을 눌러, 본인의 HTML과 CSS의 항목을
[Ctrl + A]로 모두 복사해줍니다.

 

 

HTML을 압축하려면, 코드 선택에서 x/html을 고르신 후
'Drag a File or Paste Code' ←이곳에 아까 복사한 내용을 붙여 넣은 다음에
Compress를 눌러 압축한 다음 그 파일을 다운받아 주시면 됩니다.

CSS도 동일하게 진행해주시면 됩니다.

 

 

마지막으로 파일 업로드로 들어가
다운로드하신 파일을 추가해서 적용해주시면 끝납니다.

 

---

 

모바일 웹 자동 연결 사용

 

 

저 또한 그랬고, 많은 분들이 티스토리를 처음에 꾸미실 때
자동 연결을 해제했던 설정입니다.

모바일 웹 자동 연결을 사용한다고 바꾸면,
속도 면에서 많은 최적화가 이루어진다고 합니다.

다만 에드센스가 표시되지 않아서
모바일 수익이 떨어지는 것은 조금 아쉽네요.

---

 

포스팅에 사용하는 이미지
압축하기

 

www.iloveimg.com/ko

iLoveIMG | 쉽고 빠른 온라인 무료 이미지 편집 툴

 

위 사이트에서 이미지 압축을 통해,
포스팅에 사용하는 사진의 용량을
최대한 줄이는 작업입니다.

화질은 그대로 유지하지만 용량을 낮춤으로 인해
페이지 로딩 속도가 증가할 것으로 예상되네요.

해결책에는 이것 말고도 차세대 이미지 형식을 이용하라고 쓰여있기는 한데,
JPEG 2000 확장자가 아직 티스토리에 제대로 상용화가 되어 있지 않아
일단 이미지 압축 외에는 사용하기 어려워 보입니다.

 

---

 

결과

 

 

오~ 모바일은 확실히 개선되었네요.

데스크톱은 아직 만족할만한 점수는 아니지만,
아까보다는 나아져서 다행입니다.😅

웹페이지의 로딩 속도는
구글 검색 결과 순위에 꽤 많은 영향을 끼치므로
신경 써서 관리해야 하는 부분이라고 생각합니다.

이제부터 작성하는 포스팅에는
gif 사용을 줄이고, 이미지 및 스크립트를 좀 더
효율적으로 사용할 수 있도록 노력해야겠네요.

이번 글은 여기까지 입니다.
끝까지 봐주셔서 감사드리고,
다음번엔 좀 더 개선된 속도를 가지고 찾아뵙겠습니다!
이상 초코폴리였습니다 :)

 

---