티스토리 로딩 화면 이미지 설정하기 (이탈률 감소에 도움)

티스토리 로딩 이미지 설정

검색자 이탈률 감소 및 체류시간 증가 효과

난이도 ★★☆☆☆

어떤 티스토리 블로그를 방문하면, 화면 전환에 시간이 소요될 때 '로딩 중' 이미지가 나타나는 것을 본 적이 있습니다. 기본 설정이 아니기 때문에 별도 작업이 필요한데, 작업을 해야 할 필요가 있을까?

대답은 YES.
목적은 '유입자 이탈률 감소와 체류시간 증가'

로딩 중이라는 표시 없이 어떤 한 화면이 오랜 시간 유지된다면, 오류가 생겼다고 생각하고 사이트를 꺼버리는 경우가 많습니다. 하지만 로딩 중 이미지가 뜬다면, 좀 더 기다리면 되겠구나 하는 마음이 생겨서 콘텐츠가 로딩될 때까지 더 오랜 시간을 기다리게 됩니다.

그럼 티스토리 블로그 로딩 화면 설정 방법 공유드립니다.

---

목차

- 티스토리 로딩 중 이미지 설정하는 방법
- 맺음말

---

 

티스토리 로딩 중 이미지 설정하는 방법

---

1. 로딩 중임을 표현할 이미지 찾기
구글에서 '로딩 이미지'를 검색하거나, 무료 아이콘 사이트 ICONS8에서 원하는 이미지를 다운로드합니다. 개인적으로, 이미지보다 역동적이고 전문적인 느낌을 주는 GIF를 추천드립니다.

반응형

 

Icon8

이미지, GIF 중에 원하는 것으로 다운로드해주세요. ▶ 표시가 있는 것은 GIF입니다.

※ 다운로드 후 파일 이름을 'loading'으로 설정하여, 순서에 따라 진행할 때 헷갈리지 않도록 해주세요


2. 티스토리 관리자모드 꾸미기> 스킨 편집> HTML 편집 클릭> 파일 업로드 탭> 추가 버튼> 다운로드해둔 파일 열기> 적용

html편집

파일업로드

3. 로딩 화면 동작 코드 삽입 (HTML 편집)
HTML 탭 누른 후> Ctrl+ F 단축키로 </body> 코드 찾기 > body 위에 아래와 같이 코드 삽입하고 적용 버튼 클릭

로딩 코드 삽입

로딩 화면 동작 코드는 메모장으로 첨부하였으니, 다운로드하여 사용해주세요!

300x250

로딩 동작 코드 html 메모장

로딩 동작 코드 HTML.txt

0.00MB

 

※ 코드 설명 추가

아래의 코드는 로딩 이미지가 나왔다가 사라지는 시간에 대한 설정으로, 삭제하셔도 되는 부분입니다.

function closeTime() {
setTimeout(function(){
$("#load").hide();}, 2500);
}

설정하지 않는다면 로딩이 완료될 때까지 내가 설정한 이미지가 무한으로 재생됩니다.

사라지는 시간을 설정한 이유는, 이미지가 계속  재생되면 오류 났나? 하는 답답한 마음에 이탈자들이 생기므로, 어느 정도 재생 후 없애 줌으로써 화면이 로딩될 것이라는 신호를 보내주기 위해서입니다.

2500 숫자는 2.5초를 나타내는 것으로, 이것을 기준으로 원하는 만큼 설정해주시면 됩니다.

4. 적용 완료

스킨 편집 화면에서 새로고침 버튼을 누르면 내가 설정한 로딩 이미지를 볼 수 있습니다.

티스토리 로딩 이미지

이건 지니의 오늘 티스토리 화면인데요, 녹화한 화면 영상을 gif로 만들어서 삽입해 보았어요^^

맺음말

---

블로그를 잘 운영하기 위해서는 유입자의 이탈률을 줄이는 것이 필요한데, 코드를 다운로드해서 붙여 넣기만 하면 되기 때문에 전혀 어렵지 않습니다.

한 명의 소중한 유입자가 1분이라도 더 내 티스토리 블로그에 체류할 수 있도록 작업해보세요😊