티스토리 마크쿼리 스켈레톤 4.0 로딩효과 제거해서 블로그 속도 높이기

생활정보|2019. 1. 7. 16:54

티스토리 마크쿼리 스켈레톤 4.0.0 반응형 스킨 로딩 속도에 대한 정보글 입니다 스켈레톤 스킨을 적용 시키고 글을 보거나 블로그에 접속을 하면은 로딩 화면이 나오면서 블로그의 반응 속도가 느려서 글을 볼려면 너무 오래 걸립니다 블로그를 운영하는 입장에서는 매우 치명적이죠! 심플한 디자인으로 여러면에서 다 좋아지만 로딩 화면을 추가 시킨것이 단점이였죠 이 해결방법은 로딩 화면을 제거 하는것이였습니다 제거만 해주면 pc와 모바일에서 빠른 블로그 속도를 볼수 있더군요!

네이버,다음,구글 검색엔진은 느린 블로그 보다 빠른 블로그를 좋아하기 때문에 별거 아니다 하지 마시고 꼭 수정 하시길 바랍니다 검색엔진 상위노출과 방문자 증가를 위한 수정이라고도 생각 하시면 됩니다

로딩 효과를 제거 하는 방법은 내 티스토리 관리자 로그인을 하시고 스킨 편집에서 html편집을 클릭 합니다 html에서 ctrl+f 단축키를 눌러서 검색창에

<div class="animsition" data-animsition-in="fade-in" data-animsition-out="fade-out"> 을 검색해서 삭제를 하시거나 주석 처리를 하시면 됩니다

주석 처리 방법은 간단 합니다 밑에 처럼 첫부분에 <!--  끝 부분에 -->추가 시켜주시고 적용을 누르면 주석 처리가 끝납니다 주석 처리를 하는 이유는 난중에 다시 쓸수 있는 코드가 될지도 몰라서 주석처리를 해놓고 다시 쓰고 싶은 마음이 들면은 주석처리를 제거하고 사용 한답니다


<!--<div class="animsition" data-animsition-in="fade-in" data-animsition-out="fade-out">-->

 


로딩 효과를 삭제하시고 적용이 끝나면 이제 pc와 모바일에서 로딩 화면이 더 이상 안나오게 되게 속도가 몇배 더 빨라진것을 느낄수 있을 겁니다

이글공유하기

댓글()

티스토리 CCZ-CROSS 스킨 데스크탑,모바일 로딩 속도[로드] 빠르게 하기

생활정보|2018. 12. 30. 09:53

티스토리 CCZ-CROSS 스킨 로딩 속도 높이는 방법에 대한 포스팅 입니다 CCZ-CROSS 스킨은 다 좋지만 로딩속도 즉 웹페이지 로드 속도가 느린게 단점 입니다 그 이유는 치환자 Ajax와 fouc를 적용 시켰기 때문 입니다 Ajax는 이미지를 추출로 페이지를 제작을 해서 블로그 로딩 속도에 영향을 미쳤고 fouc 치환자는 글이 노출된 과정에서 변경되는 것을 감추기 위해서 fouc 치환자가 기본적으로 적용되었다고 합니다



그래서 로딩[로드]속도가 매우 느립니다 이 단점을 보완하기 위해서는 스킨 수정을 해주어야 합니다 총 두가지 방법인데 어렵지 않게 누구나 쉽게 수정 할수 있습니다

CCZ-CROSS 스킨을 계속 사용 하신다면은 지금 당장 수정하세요^^





CCZ-CROSS 스킨을 적용 하셨겠죠? 그럼 내 티스토리 관리자 화면으로 가서 스킨 편집을 누르셔서 html 화면으로 이동을 합니다

그리고 CTRL+F 단축키를 눌러서 <img src=""> 붙여넣기후 검색을 하시고 찾으셨다면 삭제를 해줍니다




삭제후

<img src="//i1.daumcdn.net/thumb/C240x180/?fname="> ◀ 이 글을 복사하시고

붙여넣기후 적용을 하시면 됩니다

이 부분은 이미지 로딩 속도를 개선해주는 방법이라고 합니다




다음은 fouc 치환자 제거 방법 입니다 로딩 속도에 가장 영향을 미치는 부분이라고 합니다 마찬가지로 html 편집에서 CTRL+F 단축키를 눌러서 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">





마지막으로 한번 더 검색을 해줍니다 fouc 같고요~

<div class="e-content post-content fouc"></div> 부분을 찾아주시고 fouc를 삭제 해줍니다



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


이렇게 되겠죠? 어렵지 않죠? 어렵다면은 제가 설명을 잘 못한거네요~이래도 느리시면 fouc를 검색해서 모두 삭제를 하시면 됩니다


이글공유하기

댓글()
__+@_