본문 바로가기
수익형 블로그/티스토리

블로그 속도 확인방법 (+향상방법 2가지)

by 여의도 제갈량 2021. 9. 12.
반응형

요새 기회가 있을 때마다 검색엔진 최적화, 일명 SEO(Search Engine Optimization)를 공부하고 있습니다. 솔직히 저같이 한가지 주제를 깊이 파는 스타일에게는 매일 같이 콘텐츠를 제작해서 업데이트하는 것이 쥐약과도 같습니다. (그래서 그동안 본능적으로 롱테일 키워드에 집착하지 않았나 싶습니다.) 다음 검색결과의 상단을 노리는 전략은 부지런함이 수익을 좌지우지 하지만, 구글 검색결과의 상단을 노리는 것은 결이 다른 얘기이기 때문에 저에게 맞다고 생각했습니다.

 

 

사실 저 역시 아직 구글 SEO를 완벽하게 이해한 상태가 아니기 때문에 단언할 순 없지만, 한가지 확실한 것은 구글 검색엔진의 경우, 좋은 콘텐츠를 판단하는 기준 자체가 상대적으로 고도화됐다는 점입니다. 특히 체류시간을 볼 때도 단순히 해당 콘텐츠에 얼마나 오래 머물렀는지를 확인할 뿐만 아니라 콘텐츠의 어느 부분에 주목했는지도 체크하고 있음을 알게 됐을 땐 정말 대단하다고 생각했습니다. 유튜브 알고리즘만큼이나 블로그 로직도 정교하다는 것을 알고 나니, 빨리 구글 애널리틱스를 공부해봐야겠다는 생각이 듭니다.

 

블로그 속도 확인방법

체류시간만큼이나 중요한 것이 바로 블로그 자체의 반응속도가 얼마나 빠르냐입니다. 한국은 독보적으로 인터넷 속도가 빠른 나라인 만큼 고화질의 사진을 여러장 첨부해도 독자들이 별탈없이 바로 볼 수 있습니다. 하지만 인터넷 속도가 느린 국가에서는 사진 1장을 로딩하는데도 엄청난 시간이 걸리기 때문에, 구글봇은 블로그의 반응속도를 주요한 평가요소로 다루어 검색결과 상단에 위치시킬지 여부를 결정합니다.

 

티스토리가 제공하는 기본스킨을 사용하면 속도가 나쁘지 않을거라 생각했는데, 의외로 상당히 안좋습니다. 사실 저는 블로그 스킨을 이미 상당히 수정한 상태인지라, 완전 최악의 상태는 아닐 줄 알았는데, 처음 웹페이지 다운로드 속도를 체크했을 때 예상보다 훨씬 낮은 결과가 나와서 충격받았던 기억이 납니다.

 

블로그 속도

 

블로그 속도는 구글이 공식적으로 제공하고 있는 Page Speed Insights에서 확인할 수 있습니다. 해당 웹사이트에서는 PC와 모바일을 구분해서 속도를 측정합니다. 대체로 모바일 속도가 훨씬 더 느리게 나오며, 이는 검색의 패러다임이 PC에서 모바일로 넘어가는 현 상황에서 굉장히 안좋은 신호라 할 수 있습니다. 물론 걱정할 필요는 없습니다. 아래의 방법들을 적용해주면 블로그 속도를 상당히 향상시킬 수 있습니다. 개중에는 즉시 효과가 있는 방법도 있고, 천천히 개선되는 좋은 습관도 있습니다.

 

블로그 속도 향상방법

방법 1 : 사진용량 줄이기

사실 사진만큼 블로그 속도를 좌지우지하는 것은 없습니다. 글밥이 많아지는 것은 애초에 텍스트 자체의 용량이 적기 때문에 전혀 문제가 안되지만, 용량이 큰 고화질의 사진은 단 한장만으로도 엄청난 과부하를 일으킬 수 있습니다. 저는 개인적으로 사진 한장(당) 100KB 이하면 따로 수정하지 않았지만, 전문적으로 하는 전업 블로거들은 20~30KB 이하로 줄이려고 노력합니다. 사진용량을 줄이는 방법은 다음 2단계를 거치는 것입니다.

 

① 이미지 형식을 웹피로 전환

일단 이미지 형식을 jpeg나 png가 아닌 웹피(WebP)로 바꿔줍니다. 웹피는 구글이 자체 개발한 이미지 형식인 만큼, 각종 가이드를 보면 아예 대놓고 사용을 추천하는 분위기입니다. 실제로 웹피는 동일한 품질의 이미지를 작은 크기로 구현 가능하다는 장점이 있기 때문에 사용하면 좋습니다. 이미지 형식을 웹피로 바꾸는 것은 해당 웹사이트에서 가능합니다. 사진을 변환기 안에 넣어주기만 하면 되기 때문에, 사용방법 자체는 상당히 직관적이라고 할 수 있습니다. 사진을 한장 한장 일일이 바꿔줄 필요없이, 여러장을 단번에 변환시킬 수 있습니다.

 

다만, 방문자가 웹 브라우저로 크롬이 아닌 인터넷 익스플로러를 사용한 경우에는 웹피의 이미지가 제대로 활성화되지 않는 경우가 많습니다. (종종 엑박으로 활성화됩니다.) 이 경우에는 도리어 이탈률과 체류시간에 악영향을 미칠 수 있으므로, 웹피 적용에 관해서는 충분한 고민이 필요합니다.

 

② 용량을 한번 더 압축

사실 이미지 형식을 웹피로 전환하는 과정에서 사진의 용량이 어느 정도 줄어드는 것은 사실이지만, 전문 프로그램을 통해 한번 더 쥐어짜듯 줄일 수 있습니다. Tinypng 웹사이트는 jpeg, png와 같은 이미지 형식은 물론 웹피 역시 용량을 줄일 수 있습니다. 해당 웹사이트 역시 여러장의 사진을 단번에 변환시켜주니, 손쉽게 사용이 가능합니다.

 

방법 2 : 웹폰트 설정 삭제

개인적으로 웹폰트를 사용하면, 블로그 속도가 개선될 거라 생각했는데, 오히려 떨어진다는 것을 확인했습니다. 따라서 특별히 선호하는 폰트가 있는 것이 아니라면, 그냥 웹폰트를 사용하지 않는 것을 추천합니다. 웹폰트와 관련된 코드를 발라서 삭제해도 되지만, 혹시 모를 상황을 대비해 아래와 같이 주석처리하도록 하겠습니다. 주석처리를 하면, 해당 코드가 주석으로 변하기 때문에, 굳이 삭제를 안해도 됩니다.

 

웹폰트 주석처리

 

블로그관리 홈 → 꾸미기 → 스킨편집 → html 편집으로 이동한 뒤, 상단에 있는 CSS 카테고리를 선택합니다. 대략 22번째 줄에서 웹폰트와 관련된 정보를 찾을 수 있습니다. 위와 같이 현재 사용되고 있는 웹폰트들을 주석처리합니다.

 

웹폰트 type selector reset 주석처리

 

27번째 줄 근방에 있는 /* Type Selector Reset */으로 이동한 뒤, 31번째 줄에 잇는 폰트 패밀리와 관련된 코드를 주석처리합니다.

 

웹폰트 input_select_textarea_button 주석처리

 

57번째 줄에 있는 input, select, textarea, button {으로 이동한 뒤, 하단에 있는 폰트 패밀리를 역시 주석처리합니다. 마지막으로 티스토리 블로그 제목과 관련된 h1입니다. 127번째 줄에 있는 #header h1 {으로 이동한 뒤, 129번째 줄 근방에 있는 폰트 패밀리를 주석처리해서 마무리합니다.

 

웹폰트 블로그제목 주석처리

 

참고로 Page Speed Insights에서 자세히 살펴보면 진단이라는 카테고리가 있는데, 이곳에서 문제가 된 부분을 개괄적이나마 확인할 수 있습니다. 일부는 잘못된 블로깅 습관 때문에 발생한 것도 있고, 불필요한 자바 스크립트를 제거해야 되는 등 자체적인 스킨의 문제, 혹은 티스토리가 갖고 있는 태생적인 문제도 있습니다. 이 부분들은 솔직히 코딩에 대한 깊이 있는 이해가 없는 초보자들이 수정하기 어렵습니다. (그래서 결국 전업 블로거들은 유료스킨을 사용하는 것 같습니다.)

 


 

반응형

댓글