티스토리 SEO(검색 엔진 최적화)를 위한 블로그 속도 개선

페이징 로딩속도도 검색 사이트 노출에 영향을 미친다는 사실을 알고 구글에서 제공하는 페이지 속도 측정 사이트에서 측정 결과, 100점 만점에 5점이라는 충격적인 결과를 접하고 페이지 로딩에 신경써야겠다고 생각을 했습니다.

 

다음은 개선 전 포스팅 게시물 입니다.

블로그 속도와 SEO(검색 엔진 최적화)의 연관성

블로그 속도와 SEO(검색 엔진 최적화)의 연관성

 

목차

 

개선 내용

지금부터 독하게 마음 먹고 정비에 들어 가겠습니다.

앞으로 쓸데없는 기능은 굳이 넣지 않을 겁니다.

진짜 필요하다면 페이지 로딩 속도가 떨어지더라도 넣어야겠지만..

 

마우스 클릭 효과 제거했습니다

마우스 클릭하면 이런 연기가 나는 효과, 예쁘긴 한데 굳이 필요없죠.

 

혹시 필요하신 분은 링크 참고하세요 ㅎㅎ

RV's free Javascript/DHTML effects

RV's free DHTML and JavaScript text and graphic effects for your web-site

 

배경음악 자동 재생 제거했습니다

처음 음악을 다운로드 하는 것이 감점 요인이 된 것 같습니다.

그래서 사용자가 스스로 재생 버튼을 눌러야 동작하도록 했습니다.

사실 아예 빼버릴까 하다가 그래도 만들어 놓은 것이 아까워 유지는 하려고 합니다.

재생 컨트롤러 위치도 사이드바쪽으로 옮겼습니다.

 

혹시 배경음악 관심 있으시면 참고하세요~

티스토리 블로그 배경음악 직접 넣기 (초급 버전)

티스토리 블로그 배경음악 직접 넣기 (초급 버전)

 

얼마 전에 소개한 채팅(상담) 기능 제거했습니다

라이브러리 로딩하는데 약간의 부하가 있어 보입니다.

굳이 필요하진 않을 것 같아요.

정말 필요한 사람만 쓰면 될 것 같습니다.

 

혹시 관심 있으시면 참고하세요!

티스토리 블로그(홈페이지)에 무료 채팅(상담) 기능 넣기

티스토리 블로그(홈페이지)에 무료 채팅(상담) 기능 넣기

 

 

 

 

 

 

 

 

 

애드센스 및 애드핏 광고 개수 감소시켰습니다

원래 전체를 활성화 했었는데 욕심이었습니다.

애드센스 목록 상단과 본문 하단,

그리고 애드핏 목록 하단과 본문 상단을 제거했습니다.

 

아무리 광고가 많아도 방문자가 없다면 또는 방문자가 불편을 느낀다면 소용이 없겠죠!

 

 

이미지 지연 로딩 기능을 추가하였습니다

직접 티스토리 서버에 접근할 수 없어 완전하지는 않지만

적당한 트릭으로 지연 로딩을 시켜주는 방법을 찾아 적용하였습니다.

간단히 설명하면 화면상 보이지 않는 이미지를 실제로 보기 전까지 로딩하지 않는 것입니다.

티스토리에서 Lazy Load 사용하기

티스토리에서 Lazy Load 사용하기

티스토리 오프스크린 이미지 지연로딩하기(lazy loading)

티스토리 오프스크린 이미지 지연 로딩(Lazy loading) 하기1 - lazysizes 라이브러리 사용

자세한 건 위의 두 링크 중 하나 참고하시면 됩니다.

 

썸네일 이미지를 변경하였습니다

이미지 썸네일 가져오는 부분을 전부 C에서 S로 변경하였습니다.

S로 바꾸면 GIF 확장자의 경우 애니메이션 속성을 제거하고 첫번째 컷만 가져오게 됩니다.

특별히 애니메이션 욕심이 없으시다면 S로 하는 편이 나아 보입니다.

 

 

글꼴 변경 기능 제거했습니다

글꼴을 로드하는 것도 상당한 오버헤드를 발생시킵니다.

폰트는 한가지로 고정하고 글자 크기 변경만 가능하도록 했습니다.

스타일도 사용하는 것만 등록하도록 합니다.

예를 들면 font-weight별로 다 등록하지 말고 normal, bold, italic 효과를 위한 3개만 등록하세요.

 

글꼴 변경 방법이 궁금하신 분은 참고하세요 :)

티스토리 블로그 글꼴 변경 및 무료 폰트 사이트 추천 (초급 버전)

티스토리 블로그 글꼴 변경 및 무료 폰트 사이트 추천 (초급 버전)

 

폰트를 경량화하였습니다

한글 폰트는 사이즈가 크죠.

그래서 자주 쓰는 글자만 뽑아서 경량화 해주면 좋습니다.

 

경량화 방법은 찾아보면 많이 나옵니다.

웹폰트 경량화: 폰트툴즈

웹폰트 경량화: 폰트툴즈(fontTools)의 pyftsubset을 사용한 폰트 서브셋 만들기

저 같은 경우는 1mb에 육박하는 이롭게 바탕체 폰트를 160kb까지 줄였습니다.

 

 

jQuery 중복 로딩을 피했습니다

티스토리 블로그 자체에서 jQuery를 로딩하고 있는데 버전이 다른 jQuery 스크립트가 추가되어 있어서 제거하였습니다.

다만 그냥 제거하면 안 되고 스킨 편집에서 다음 구문을 추가해야 정상적으로 이용 가능합니다.

window.$ = window.jQuery = window.tjQuery;

티스토리 서버에서 tjQuery로 바꿔서 jQuery를 이용하는 것 같은데 정상적으로 원복이 되지 않아서 그냥 사용하면 오류가 나네요.

jQuery 버전에 따라 동작이 상이하거나 오류나는 부분이 있을 수 있으므로 해당 내용은 충분한 테스트가 필요합니다.

만약 오류가 발생한다면 그 부분을 수정하거나 이 단계는 스킵해 주세요!

예를 들면 저는 $(window).load(function({}) 구문을 $(window).on("load",function(){}) 으로 수정해 주었습니다.

 

 

레이아웃 변화를 최소화 하였습니다

실제 광고가 로드되기 전과 후의 다른 엘리먼트들의 위치 변경을 최소화 하였습니다.

CLS 지표 점수를 만족하기 위해 출력되는 광고 크기를 측정하여 미리 영역을 잡아 놓았습니다.

CLS(Cumulative Layout Shift) 지표: 느린 로딩 등으로 시간의 흐름에 따라 엘리먼트들의 위치가 얼마나 변경되는지 측정하는 지표

/* 광고 등 느린 로딩 일어나는 영역 고정 */
.sidebar-2 .revenue_unit_wrap {
	height: 605px;
}
#upper .revenue_unit_wrap {
	height: 105px;
}
.tt_article_useless_p_margin .revenue_unit_wrap  .responsive {
	height: 280px;
}
#lower {
	margin-top: 10px;
}
#lower .revenue_unit_wrap .responsive {
	height: 350px;
}
.tt_article_useless_p_margin .revenue_unit_wrap  .adfit {
	height: 95px;
}
.gcse-searchbox {
	height: 31px;
}

위의 코드는 제 블로그에 해당하는 코드이므로 참고만 하시기 바랍니다.

 

 

이미지를 최적화 하세요

전문적으로 고퀄리티 사진을 게재하는 분이 아니라면 굳이 사진 용량이 커서 좋을 것이 없습니다.

그런 분들을 제외한 일반 사용자들에게 적합한 이미지 사이즈를 크게 줄일 수 있는 방법을 소개하고자 합니다.

 

이건 아직 저도 적용 전이긴 한데 방법은 일단 알려 드릴게요!

 

먼저 아래 사이트에 접속합니다.

온라인 이미지 최적화하기

온라인 이미지 최적화기

파일 업로드를 클릭합니다.

퀄리티를 크게 손상시키지 않으면서 이미지 크기가 -79%까지 줄어든 것을 확인할 수 있습니다.

이미지에 따라 -90% 이상 줄어드는 것도 있습니다.

퀄리티는 오른쪽 바에서 조절하실 수 있습니다.

적용하고 다운로드 버튼을 누르면 사이즈 최적화 된 이미지를 얻으실 수 있습니다.

이 사이트에서는 최대 20개까지 한 번에 처리가 가능합니다.

 

 

그리고 기타 불필요한 플러그인 사용 해제 및 자잘한 부분을 수정한 다음

떨리는 마음으로 다시 측정을 해 보았습니다!

 

 

 

 

 

결과

두근두근..

 

세근네근..

 

 

결과가 나왔습니다!

생각보다 상당히 더 개선된 것 같습니다.

네이버 보다 높아요! ㅋㅋ

체감 속도도 엄청 빨라졌어요. 여태 전 뭘 한 걸까요?

 

 

31점은 모바일에서 봤을 때 점수이고, 데스크탑은 또 따로 있더라구요.

좌측상단에 있는 탭에서 둘 다 확인할 수 있어요.

 

그럼 데스크탑 점수도 한 번 보겠습니다.

데스크탑은 83점이나 되는군요.

솔직히 이 정도면 아무 문제 없는 것 같습니다.

아니 오히려 웬만한 사이트보다 빠른거 아닐까 싶네요 :)

 

 

마무리

이 글은 제 블로그를 기준으로 작성되어서 좀 공통적이지 않은 부분이 많은데

요지는 불필요하게 넣은 기능이 있으면 정리를 한 번 하는 편이 낫겠다는 것입니다.

나머지는 티스토리 블로그 운영팀이 알아서 잘 했을 것이고 부족한 부분은 앞으로 개선해 주리라 믿습니다.

 

모두 속도 개선 하세요! ㅎㅎ

 

 

+ 내용추가

 

본 글 URL로도 점검을 해 보았습니다.

모바일은 28점이 나왔어요.

나쁘지 않은 점수라고 생각합니다.

욕심 같아서는 모든 속도 저하 요소를 제거하고 싶지만

그러면 블로그 퀄리티도 떨어질 수 밖에 없고

제가 직접 운영하는 서버가 아니라서 분명 한계점도 많을 것이므로

일단 두 자리수 나왔다는 사실에 만족하겠습니다.

 

PC도 보겠습니다.

PC 점수도 제 기준에서 나쁘지 않습니다.

앞으로도 지속적으로 신경을 쓰겠지만

너무 여기에만 몰입해도 정신 건강에 좋을 것 같지는 않아요.

적당히 하겠습니다. 뭐든지 적당히가 좋죠! 점수도 적당히..

해당 페이지에 이미지가 얼마나 많느냐

애드핏, 애드센스 광고가 어떤 것이 뜨느냐

이런 사항에 따라서도 점수 차이가 나는 것으로 보입니다.

 

 

CLS 결과도 추가하였습니다.

 

각각 모바일, PC 점수인데 가장 좋은 점수가 나왔을 때 입니다.

두 경우 모두 매우 안정적인 모습을 보여줍니다.

 

얼마 지나지 않아 구글과 네이버 지표에도 변화가 있었습니다.

티스토리 블로그 속도 개선 후 구글, 네이버 지표 변화

티스토리 블로그 속도 개선 후 구글, 네이버 지표 변화

 

감사합니다!