블로그 체류 시간을 늘려주는 로딩 이미지 설정하기

 

 

안녕하세요? 빵순쓰 블로그입니다.

 

오늘은 블로그의 체류시간을 높여주는 로딩 이미지 설정에 대하여 알아보겠습니다.

구글 설문조사에 따르면 모바일 웹 사이트의 로딩 시간이 3초 이상일 때 32%의 이탈률이 발생한다고 합니다.

 

긴 로딩 시간은 단순히 답답하기도 하지만, 궁극적으로 '이 블로그가 잘 로딩이 되고 있는가'에 대한 찰나의 의문감을 줍니다.

마치 오류가 발생한 것 같은 착각을 불러일으키게 됩니다.

따라서 텅 빈 로딩화면은 블로그에 정보를 얻으러 온 방문객들로부터 '정보를 잘 정리해 둔 다른 블로그에 방문하자'는 생각을 하게 합니다. 질 높은 정보를 제공하는 블로그는 차고 넘치니까요.

 

 

 

 

 

 

따라서 다음 페이지로 이동할 때 막연히 빈 화면을 보여주는 것 보다는

'이 사이트는 잘 운영되고 있으며, 당신이 원하는 정보를 로딩하고 있다'는 것을 로딩 이미지를 통해 알려주는 것이

체류시간을 높이는 데 도움이 될 것입니다.

 

이번 포스팅에서는 화면 전환 시 방문객의 이탈을 줄여 줄 로딩이미지 설정에 대하여 알아보겠습니다.

이번 방법도 매우 간단하니 천천히 따라해보시기 바랍니다.

 

[목차]

 

---

 

1. 원하는 로딩 이미지 다운로드하기

우선 원하는 로딩 이미지를 다운로드합니다.

 

https://icons8.com/preloaders/

 

icons8 사이트 화면 캡쳐

 

위의 사이트에서 마음에 드는 로딩 이미지를 다운로드합니다.

다음은 사이트에서 제공하는 무료 로딩 이미지의 몇 가지 예시입니다.

 

 

사이트에서 제공하는 대로 사용해도 좋지만 커스터마이징이 가능하므로

원하는 대로 조정 후 다운로드를 눌러줍니다.

저장 시 파일명을 'loading'으로 정해 줍니다.

 

 

2. 로딩 이미지 업로드하기

블로그 관리 -> 스킨편집 -> html 편집으로 진입 후 상단의 파일업로드를 눌러줍니다.

추가 버튼을 눌러 저장해 둔 loading.gif를 업로드합니다.

 

아래와 같이 로딩이미지가 업로드 되었으면 두 번째 단계도 성공입니다.

 

 

 

 

 

 

 

3. html 코드 붙여넣기

아래 텍스트 파일을 다운로드하여 html의 </body>위에 붙여넣기합니다.

 

로딩 이미지 추가 코드(:body위에 붙여넣기).txt

0.00MB

 

 

html까지 추가하시고 스킨 편집 왼편의 미리보기를 누르면 정상적으로 로딩 이미지가 추가된 것을 확인하실 수 있습니다.

 

---

 

글을 마치며

지금까지 수익형 블로그의 체류시간 상승에 영향을 주는 로딩 이미지 설정에 대하여 알아보았습니다.

html에 복사 붙여넣기만을 통해 아주 간단하게 생성할 수 있으니, 이 글을 보는 여러분께 블로그를 통한 수익 창출에 도움이 되셨으면 좋겠습니다.

 

저도 배워가고 있는 초보자라 많이 알지는 못하지만 혹시 설정하면서 잘 되지 않거나 질문사항이 있다면 성심성의껏 답변해 드리겠습니다.

오늘도 좋은 하루 보내세요.

 

 

 

 

 

 

함께 보면 좋은 글

티스토리 블로그 상단 광고 두 개 설정하기

 

수익형 블로그에 필수인 자동목차 설정(복붙 한번으로 해결했어요)