[티스토리] 반응형 웹 스킨 CCZ-CROSS 스킨 로드 속도 높이기

 

 

반응형 웹 스킨 CCZ-CROSS 스킨을 쓰다보니

 

속도가..... ㅠ.ㅠ

 

데스크톱에선 그다지 느껴지지 않는데

 

모바일에선 로드 속도가 느린게 느껴지더라는... ㅠ.ㅠ

 

[티스토리] 블로그 로드 속도 향상 방법은 이미 샐리는 쓰고 있으므로

 

CCZ-CROSS 스킨은 어떡해야 하나 했는데요.

 

반응형 웹 스킨 CCZ-CROSS 스킨에 아래 2가지만 해놓아도

 

모바일에서도 로드속도가 괜찮아진듯한 느낌이라 글을 적어봅니다.

 

먼저 썸네일 부분을 수정하는건데요.

 

블로그의 첫화면에 보이는 본문의 대표 사진들을 보여주는 부분이랍니다.

 

 

데스크톱에서는 그럭저럭 괜찮은데 모바일에선 약간 느린것 같더라구요.

 

그래서~!! 먼저 썸네일을 약간 수정해봅니다.

 

 

html편집에서 thumbnail으로 검색하면 아래와 같은 소스가 나온답니다.

 

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

<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%2F221C954C57228F2012">

</div>

</div>

</a>

</s_article_rep_thumbnail>

 

 

그 중에서 표시해둔 부분만 아래처럼 변경을 해주면 됩니다.

 

 

<s_article_rep_thumbnail>
<a class="has-object t-photo" href="/1780">
<div class="thumbnail">
<div class="cropzone">
<img src="//i1.daumcdn.net/thumb/C240x180/?fname=https://t1.daumcdn.net/cfile/tistory/221C954C57228F2012">
</div>
</div>
</a>
</s_article_rep_thumbnail>

 

http://cocosoft.kr/349의 글을 보고 수정한 부분으로

 

더 자세한 내용이 궁금하신 분은 방문해보시기 바랍니다. ^^

 

 

두번째로는 fouc 처리된 것을 없애는 것인데요.

 

반응형 웹 스킨 CCZ-CROSS 스킨은 기본적으로 fouc처리가 되어있기 때문에~

 

샐리는 본문 부분과 블로그 홈 화면 부분만 수정하였습니다.

 

 

위 썸네일 바로 위에 있는

 

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

 

fouc 부분만 지우면 됩니다.

 

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

 

 

 

html편집에서 e-content post-content 로 검색하면 본문부분을 찾을수 있는데요.

 

 

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

 

 

반응형 웹 스킨 CCZ-CROSS 스킨을 쓰다보니

 

속도가..... ㅠ.ㅠ

 

데스크톱에선 그다지 느껴지지 않는데

 

모바일에선 로드 속도가 느린게 느껴지더라는... ㅠ.ㅠ

 

[티스토리] 블로그 로드 속도 향상 방법은 이미 샐리는 쓰고 있으므로

 

CCZ-CROSS 스킨은 어떡해야 하나 했는데요.

 

반응형 웹 스킨 CCZ-CROSS 스킨에 아래 2가지만 해놓아도

 

모바일에서도 로드속도가 괜찮아진듯한 느낌이라 글을 적어봅니다.

 

먼저 썸네일 부분을 수정하는건데요.

 

블로그의 첫화면에 보이는 본문의 대표 사진들을 보여주는 부분이랍니다.

 

 

데스크톱에서는 그럭저럭 괜찮은데 모바일에선 약간 느린것 같더라구요.

 

그래서~!! 먼저 썸네일을 약간 수정해봅니다.

 

 

html편집에서 thumbnail으로 검색하면 아래와 같은 소스가 나온답니다.

 

<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>

 

http://cocosoft.kr/349의 글을 보고 수정한 부분으로

 

더 자세한 내용이 궁금하신 분은 방문해보시기 바랍니다. ^^

 

 

두번째로는 fouc 처리된 것을 없애는 것인데요.

 

반응형 웹 스킨 CCZ-CROSS 스킨은 기본적으로 fouc처리가 되어있기 때문에~

 

샐리는 본문 부분과 블로그 홈 화면 부분만 수정하였습니다.

 

 

위 썸네일 바로 위에 있는

 

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

 

fouc 부분만 지우면 됩니다.

 

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

 

 

 

html편집에서 e-content post-content 로 검색하면 본문부분을 찾을수 있는데요.

 

 

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

 

 

아래처럼 fouc 부분만 삭제해주면 된답니다. ^^*

 

 

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

 

모바일에선 본문의 사진크기등 변경되는 과정이 보이긴 하던데

 

샐리는 개인적으로 속도빠른게 더 좋기에 변경하고 사용하고 있습니다. ^^*

</div>

 

 

아래처럼 fouc 부분만 삭제해주면 된답니다. ^^*

 

 

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

 

 

반응형 웹 스킨 CCZ-CROSS 스킨을 쓰다보니

 

속도가..... ㅠ.ㅠ

 

데스크톱에선 그다지 느껴지지 않는데

 

모바일에선 로드 속도가 느린게 느껴지더라는... ㅠ.ㅠ

 

[티스토리] 블로그 로드 속도 향상 방법은 이미 샐리는 쓰고 있으므로

 

CCZ-CROSS 스킨은 어떡해야 하나 했는데요.

 

반응형 웹 스킨 CCZ-CROSS 스킨에 아래 2가지만 해놓아도

 

모바일에서도 로드속도가 괜찮아진듯한 느낌이라 글을 적어봅니다.

 

먼저 썸네일 부분을 수정하는건데요.

 

블로그의 첫화면에 보이는 본문의 대표 사진들을 보여주는 부분이랍니다.

 

 

데스크톱에서는 그럭저럭 괜찮은데 모바일에선 약간 느린것 같더라구요.

 

그래서~!! 먼저 썸네일을 약간 수정해봅니다.

 

 

html편집에서 thumbnail으로 검색하면 아래와 같은 소스가 나온답니다.

 

<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>

 

http://cocosoft.kr/349의 글을 보고 수정한 부분으로

 

더 자세한 내용이 궁금하신 분은 방문해보시기 바랍니다. ^^

 

 

두번째로는 fouc 처리된 것을 없애는 것인데요.

 

반응형 웹 스킨 CCZ-CROSS 스킨은 기본적으로 fouc처리가 되어있기 때문에~

 

샐리는 본문 부분과 블로그 홈 화면 부분만 수정하였습니다.

 

 

위 썸네일 바로 위에 있는

 

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

 

fouc 부분만 지우면 됩니다.

 

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

 

 

 

html편집에서 e-content post-content 로 검색하면 본문부분을 찾을수 있는데요.

 

 

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

 

 

아래처럼 fouc 부분만 삭제해주면 된답니다. ^^*

 

 

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

 

모바일에선 본문의 사진크기등 변경되는 과정이 보이긴 하던데

 

샐리는 개인적으로 속도빠른게 더 좋기에 변경하고 사용하고 있습니다. ^^*

</div>

 

모바일에선 본문의 사진크기등 변경되는 과정이 보이긴 하던데

 

샐리는 개인적으로 속도빠른게 더 좋기에 변경하고 사용하고 있습니다. ^^*