블로그 속도 빠르게 하기 (특히 CCZ-CROSS 스킨)

현재 제 티스토리 블로그에 적용하고 있는 스킨은 CCZ-CROSS 스킨입니다. 전체적으로 제가 원해던 깔끔한 헤더와 사이드 바를 구성하고 있어서 이 스킨을 사용하기로 결정했습니다. (스킨 다운로드 경로 : http://webdir.tistory.com/491) 

CCZ-CROSS 스킨을 사용하고 전반적으로 깔끔한 느낌이어서 굉장히 마음에 들었는데, 딱 한 가지 걸리는 점이 있었는데요.

바로 블로그의 로딩 속도였습니다ㅠㅠ

웹에서도 그렇고 모바일에서도 글 제목은 빨리 뜨는데 본문 내용이 한참 있다가 뜨는 현상이 있었습니다. 얼핏 보기에 뭔가 에러가 발생해서 본문이 안 나오는 듯 한 느낌이 들더라고요. 특히 모바일 같은 경우 1초만 늦게 나와도 사용자들이 Back 버튼을 누르기 시작하기 때문에 이 상태로는 안 되겠다 싶어서 구글링을 해봤습니다. 

그 와중에 CCZ-CROSS 스킨 로드 속도 높이기(http://sallykim.tistory.com/1780) 라는 글을 찾았고, 실제로 적용을 해보니 굉장히 속도가 향상된 느낌이 들었습니다.

CCZ-CROSS 스킨의 로딩 속도를 높히기 위해 적용한 방법은 다음 2가지 입니다.

1. 썸네일 로딩 URL 형태 변경

관리자 페이지 > HTML/CSS 편집으로 들어가서 아래 코드를 찾은 후 색칠되어 있는 부분의 코드를

[변경 전]

<s_article_rep_thumbnail>

<a class="has-object t-photo" href="/entry/%EB%B8%94%EB%A1%9C%EA%B7%B8-%EC%86%8D%EB%8F%84-%EB%B9%A0%EB%A5%B4%EA%B2%8C-%ED%95%98%EA%B8%B0-%ED%8A%B9%ED%9E%88-CCZ-CROSS-%EC%8A%A4%ED%82%A8">

<div class="thumbnail">

<div class="cropzone">

<img src="https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Ft1.daumcdn.net%2Fcfile%2Ftistory%2F256C0B3E586CE05413">

</div>

</div>

</a>

</s_article_rep_thumbnail>

[변경 후]

<s_article_rep_thumbnail>

<a class="has-object t-photo" href="/entry/%EB%B8%94%EB%A1%9C%EA%B7%B8-%EC%86%8D%EB%8F%84-%EB%B9%A0%EB%A5%B4%EA%B2%8C-%ED%95%98%EA%B8%B0-%ED%8A%B9%ED%9E%88-CCZ-CROSS-%EC%8A%A4%ED%82%A8">

<div class="thumbnail">

<div class="cropzone">

<img src="//i1.daumcdn.net/thumb/C240x180/?fname=https://t1.daumcdn.net/cfile/tistory/256C0B3E586CE05413">

</div>

</div>

</a>

</s_article_rep_thumbnail>

로 변경해주면 됩니다. 일단 원리는 기존에 썸네일을 로드하는 방식을 티스토리 치환자를 사용하는 방법 대신 img 태그에 직접 src 경로의 앞부분을 지정하여 주고 썸네일의 raw url 을 붙이는 방식으로 변경한 것 입니다. 여기서 핵심적인 부분은 URL에 C204x180 로 사이즈를 직접 적어 준 부분인데요. 변경 전 방식으로 하면 750px 크기의 썸네일을 로드하기 때문에 용량 큰 이미지를 로드하게 된다고 하네요. (http://cocosoft.kr/349 글 참조)

하지만 안타깝게도 저는 이렇게 첫번째 방식을 적용했는데.. 웹과 모바일 모두 테스트 했을 때 뭔가 드라마틱한 속도 개선은 되지 않았습니다. 아마도 썸네일이 적어서 그런지 속도에 큰 영향을 미친 것은 아니었던 것 같습니다. 하지만! 다음 2번 째 방법을 적용했더니 바로 효과가 나타났습니다!

2. 태그에서 fouc 속성 제거

<s_article_rep_thumbnail> 태그 바로 위에 있는 

<div class="list-row pos-right ratio-fixed ratio-4by3 crop-center lts-narrow fouc clearfix"> 태그와

글 부분에 있는

<div class="e-content post-content fouc">

현재 제 티스토리 블로그에 적용하고 있는 스킨은 CCZ-CROSS 스킨입니다. 전체적으로 제가 원해던 깔끔한 헤더와 사이드 바를 구성하고 있어서 이 스킨을 사용하기로 결정했습니다. (스킨 다운로드 경로 : http://webdir.tistory.com/491) 

CCZ-CROSS 스킨을 사용하고 전반적으로 깔끔한 느낌이어서 굉장히 마음에 들었는데, 딱 한 가지 걸리는 점이 있었는데요.

바로 블로그의 로딩 속도였습니다ㅠㅠ

웹에서도 그렇고 모바일에서도 글 제목은 빨리 뜨는데 본문 내용이 한참 있다가 뜨는 현상이 있었습니다. 얼핏 보기에 뭔가 에러가 발생해서 본문이 안 나오는 듯 한 느낌이 들더라고요. 특히 모바일 같은 경우 1초만 늦게 나와도 사용자들이 Back 버튼을 누르기 시작하기 때문에 이 상태로는 안 되겠다 싶어서 구글링을 해봤습니다. 

그 와중에 CCZ-CROSS 스킨 로드 속도 높이기(http://sallykim.tistory.com/1780) 라는 글을 찾았고, 실제로 적용을 해보니 굉장히 속도가 향상된 느낌이 들었습니다.

CCZ-CROSS 스킨의 로딩 속도를 높히기 위해 적용한 방법은 다음 2가지 입니다.

1. 썸네일 로딩 URL 형태 변경

관리자 페이지 > HTML/CSS 편집으로 들어가서 아래 코드를 찾은 후 색칠되어 있는 부분의 코드를

[변경 전]

<s_article_rep_thumbnail>

<a class="has-object t-photo" href="">

<div class="thumbnail">

<div class="cropzone">

<img src="">

</div>

</div>

</a>

</s_article_rep_thumbnail>

[변경 후]

<s_article_rep_thumbnail>

<a class="has-object t-photo" href="">

<div class="thumbnail">

<div class="cropzone">

<img src="//i1.daumcdn.net/thumb/C240x180/?fname=">

</div>

</div>

</a>

</s_article_rep_thumbnail>

로 변경해주면 됩니다. 일단 원리는 기존에 썸네일을 로드하는 방식을 티스토리 치환자를 사용하는 방법 대신 img 태그에 직접 src 경로의 앞부분을 지정하여 주고 썸네일의 raw url 을 붙이는 방식으로 변경한 것 입니다. 여기서 핵심적인 부분은 URL에 C204x180 로 사이즈를 직접 적어 준 부분인데요. 변경 전 방식으로 하면 750px 크기의 썸네일을 로드하기 때문에 용량 큰 이미지를 로드하게 된다고 하네요. (http://cocosoft.kr/349 글 참조)

하지만 안타깝게도 저는 이렇게 첫번째 방식을 적용했는데.. 웹과 모바일 모두 테스트 했을 때 뭔가 드라마틱한 속도 개선은 되지 않았습니다. 아마도 썸네일이 적어서 그런지 속도에 큰 영향을 미친 것은 아니었던 것 같습니다. 하지만! 다음 2번 째 방법을 적용했더니 바로 효과가 나타났습니다!

2. 태그에서 fouc 속성 제거

<s_article_rep_thumbnail> 태그 바로 위에 있는 

<div class="list-row pos-right ratio-fixed ratio-4by3 crop-center lts-narrow fouc clearfix"> 태그와

글 부분에 있는

<div class="e-content post-content fouc"></div> 태그의 

fouc 부분을 삭제하시면 됩니다. 간단하죠? 저는 이 방법을 적용하고 드라마틱하게 로딩 속도가 빨라지는 것을 느꼈습니다. 

아마도 fouc 속성은 티스토리 자체 라이브러리에서 구분하는 속성으로 보여집니다. (혹시 자세히 아시는 분 있으시면 설명 부탁드립다^^;) 

원리를 간단히 설명드리자면, 프론트 앤드 개발을 할 때 보통 FOUC 라는 것은 Flash Of Unstyled Content의 약자로 현업에 있을 때 저희는 그냥 스켈레톤 현상이라고 했습니다. (정식명칭은 아니고 약간 슬랭? 같은 표현이었던 것 같습니다) 아무튼 이 현상은 페이지가 로드 될 때 일시적으로 CSS가 적용되지 않은 페이지가 보여지는 현상을 말하는데요. 리소스 로딩이나 CSS관련 연산이 지연되면서 html 뼈대가 먼저 보이는 일시적인 현상이라고 보시면 됩니다. 하지만 사용자들 입장에서는 잠깐이나마 시스템 에러가 났나? 라고 생각할 수 있기 때문에 조치해야 하는 현상이기도 합니다. 

아무튼 티스토리에서는 그러한 조치의 일환으로 fouc 현상이 나타나지 않도록 티스토리 라이브러리에서 fouc 라는 속성을 만들어 태그에 적용을 한 것 같습니다. 그리고 fouc 속성이 있으면 리소스 로딩이나 CSS 적용이 완전히 종료되고 나서 해당 태그가 보여지도록 조치를 한 것 같고, 그래서 페이지가 한 동안 안 보이다 나타나는 현상이 발생한 것으로 생각됩니다. 

아무튼 fouc 라는 속성을 제거해서 리소스 로딩이나 CSS 적용이 완료되지 않더라도 무조건 바로 랜더링을 시작해서 조금 더 빨라지게 보여지는 것 같습니다. 단, 문제는 앞서 말씀드린 스켈레톤 현상 나타날 수 있는 문제가 있는데 제 생각에는 느린 것 보다 차라리 스켈레톤 현상이 나타나는게 더 낫다고 판단해서 fouc 를 지우기로 결정하였습니다.

3. 공통적인 티스토리 블로그 로딩 속도 개선 방법

위 방법으로도 블로그 로딩 속도가 개선되지 않는다면 티스토리 블로그의 공통적인 로딩 속도 개선 방법을 적용해봐야할 것 같습니다. 

(1) 이미지 최적화

 한 마디로 로딩되는 이미지의 용량을 줄이는 것 입니다. 업로드 된 이미지를 조금 더 낮은 해상도나 크기로 올리는겁니다. (이미지가 많다면 왠지 엄청난 수작업일 것 같긴 하네요;;)

(2) 티스토리 플러그인 정리

 아무래도 플로그인도 로딩을 해야하니 속도에 영향을 미치겠죠. 사용성이 낮은 플러그인은 정리해줍니다.

(3) HTML 과 CSS 압축 하기 (용량 축소)

 프론트 앤드 개발할 때 자주 쓰는 방법 중 하나로 HTML, CSS, javascript 파일의 사이즈를 줄이는 방식입니다. 간단히 여백을 다 없애고 긴 내용들을 짧게 만드는 것이라고 보시면 됩니다. 단, 개인적으로 커스터마이징 해서 HTML, CSS, javascript 파일 많지 않다면 그다지 효과가 없을 것 같기는 합니다. (소스를 잘 다루지 못하시는 분 들에게는 그다지 추천하는 방법은 아닙니다)

 

이상 블로그 (특히, CCZ-CROSS 스킨을 사용하고 있는 블로그) 의 로딩 속도를 빠르게 하는 방법을 살펴 보았습니다. 블로그 운영에 있어서 로딩 속도는 중요한 문제라고 생각을 합니다. 꼭 웹과 모바일 모두 페이지 로딩 속도를 체크해보시고 만약 사용자 입장에서 느리다고 판단되시면 위의 조치들을 취해주시면 될 것 같습니다^^

</div> 태그의 

fouc 부분을 삭제하시면 됩니다. 간단하죠? 저는 이 방법을 적용하고 드라마틱하게 로딩 속도가 빨라지는 것을 느꼈습니다. 

아마도 fouc 속성은 티스토리 자체 라이브러리에서 구분하는 속성으로 보여집니다. (혹시 자세히 아시는 분 있으시면 설명 부탁드립다^^;) 

원리를 간단히 설명드리자면, 프론트 앤드 개발을 할 때 보통 FOUC 라는 것은 Flash Of Unstyled Content의 약자로 현업에 있을 때 저희는 그냥 스켈레톤 현상이라고 했습니다. (정식명칭은 아니고 약간 슬랭? 같은 표현이었던 것 같습니다) 아무튼 이 현상은 페이지가 로드 될 때 일시적으로 CSS가 적용되지 않은 페이지가 보여지는 현상을 말하는데요. 리소스 로딩이나 CSS관련 연산이 지연되면서 html 뼈대가 먼저 보이는 일시적인 현상이라고 보시면 됩니다. 하지만 사용자들 입장에서는 잠깐이나마 시스템 에러가 났나? 라고 생각할 수 있기 때문에 조치해야 하는 현상이기도 합니다. 

아무튼 티스토리에서는 그러한 조치의 일환으로 fouc 현상이 나타나지 않도록 티스토리 라이브러리에서 fouc 라는 속성을 만들어 태그에 적용을 한 것 같습니다. 그리고 fouc 속성이 있으면 리소스 로딩이나 CSS 적용이 완전히 종료되고 나서 해당 태그가 보여지도록 조치를 한 것 같고, 그래서 페이지가 한 동안 안 보이다 나타나는 현상이 발생한 것으로 생각됩니다. 

아무튼 fouc 라는 속성을 제거해서 리소스 로딩이나 CSS 적용이 완료되지 않더라도 무조건 바로 랜더링을 시작해서 조금 더 빨라지게 보여지는 것 같습니다. 단, 문제는 앞서 말씀드린 스켈레톤 현상 나타날 수 있는 문제가 있는데 제 생각에는 느린 것 보다 차라리 스켈레톤 현상이 나타나는게 더 낫다고 판단해서 fouc 를 지우기로 결정하였습니다.

3. 공통적인 티스토리 블로그 로딩 속도 개선 방법

위 방법으로도 블로그 로딩 속도가 개선되지 않는다면 티스토리 블로그의 공통적인 로딩 속도 개선 방법을 적용해봐야할 것 같습니다. 

(1) 이미지 최적화

 한 마디로 로딩되는 이미지의 용량을 줄이는 것 입니다. 업로드 된 이미지를 조금 더 낮은 해상도나 크기로 올리는겁니다. (이미지가 많다면 왠지 엄청난 수작업일 것 같긴 하네요;;)

(2) 티스토리 플러그인 정리

 아무래도 플로그인도 로딩을 해야하니 속도에 영향을 미치겠죠. 사용성이 낮은 플러그인은 정리해줍니다.

(3) HTML 과 CSS 압축 하기 (용량 축소)

 프론트 앤드 개발할 때 자주 쓰는 방법 중 하나로 HTML, CSS, javascript 파일의 사이즈를 줄이는 방식입니다. 간단히 여백을 다 없애고 긴 내용들을 짧게 만드는 것이라고 보시면 됩니다. 단, 개인적으로 커스터마이징 해서 HTML, CSS, javascript 파일 많지 않다면 그다지 효과가 없을 것 같기는 합니다. (소스를 잘 다루지 못하시는 분 들에게는 그다지 추천하는 방법은 아닙니다)

 

이상 블로그 (특히, CCZ-CROSS 스킨을 사용하고 있는 블로그) 의 로딩 속도를 빠르게 하는 방법을 살펴 보았습니다. 블로그 운영에 있어서 로딩 속도는 중요한 문제라고 생각을 합니다. 꼭 웹과 모바일 모두 페이지 로딩 속도를 체크해보시고 만약 사용자 입장에서 느리다고 판단되시면 위의 조치들을 취해주시면 될 것 같습니다^^