티스토리 레이지로딩(lazy loading) 적용 방법

티스토리를 운영하면서 페이지 로딩 속도를 높이고 싶다면, 레이지 로딩(Lazy Loading)을 적용하는 것이 좋은 방법이에요. 레이지 로딩은 방문자가 웹페이지를 스크롤할 때 필요한 이미지나 콘텐츠만 로드하는 방식으로, 불필요한 리소스 로드를 줄여 사이트 속도를 최적화할 수 있어요. 이번 글에서는 티스토리 블로그에 레이지 로딩을 적용하는 방법을 쉽게 설명해 드릴게요.

---

 

 

티스토리 블로그 레이지로딩 적용방법

 

레이지 로딩이란?

레이지 로딩(Lazy Loading)은 웹페이지가 로딩될 때 화면에 보이는 콘텐츠만 먼저 불러오고, 사용자가 스크롤을 내리면 추가적인 리소스를 순차적으로 로드하는 방식이에요. 일반적으로 이미지, 동영상, iframe 등에 적용되며, 이를 통해 초기 페이지 로딩 속도를 빠르게 만들 수 있어요.

 

레이지 로딩을 적용해야 하는 이유

레이지 로딩을 적용하면 페이지 로딩 속도가 개선되며, 트래픽을 절감해 SEO를 최적화할 수 있어요.

1. 페이지 로딩 속도 개선: 방문자가 페이지에 처음 접속할 때 모든 이미지를 한 번에 불러오지 않고, 필요한 이미지만 로딩하기 때문에 속도가 빨라져요.
2. 트래픽 절감: 불필요한 이미지가 로딩되지 않아 데이터 사용량을 줄일 수 있어요.
3. SEO 최적화: 속도가 빠른 페이지는 검색엔진에서도 긍정적인 평가를 받을 가능성이 커요.

 

티스토리에 레이지 로딩 적용 방법

티스토리에 레이지 로딩을 적용하기 위한 방법에 대해 소개하면 다음과 같아요. 아래 파일을 다운로드한 후 압축을 제거하면 2개의 파일이 있는데 '1x1.jpg' 파일은 티스토리 블로그에 업로드해야 해요. 그런 후 자바스크립트 사용을 위해 앞서 업로드한 1x1.jpg 파일의 주소를 복사한 후 'off_screen.js'파일을 열어 해당 주소를 변경해 주어야 해요.

 

off_screen.zip

0.00MB

 

1. 1x1.jpg파일 업로드

위 파일을 다운로드 후 압축을 제거해요. 티스토리의 관리자 페이지로 이동하여 '꾸미기 > 스킨 편집 > HTML 편집 > 파일업로드'를 선택한 후 1x1.jpg 파일을 선택해요.

업로드된 파일의 리스트가 보이면 아래그림과 같이 1x1.jpg 파일에서 마우스 우측 클릭을 통해 "링크 주소 복사" 메뉴를 선택해요.

링크 주소 확인하기

 

2. off_screen.js 파일 수정

off_screen.js 파일을 메모장으로 연 후 ctrl + f로 "복사한"이라는 키워드로 검색해서 "복사한 작고 귀여운 친구의 링크를 붙여 넣기 하세요"라는 부분에 앞에서 복사한 링크 주소를 붙여 주세요. 주소 붙여놓기를 완료한 경우 아래와 같은 형태가 되어야 해요

,e.src"https://tistory1.daumcdn.net/tistory~"};

 

3. off_screen.js 업로드

2단계에서 수정한 off_screen.js파일을 앞의 1번 과정과 동일하게 티스토리 블로그로 업로드하세요. 그런 후 1단계의 마지막과 같이 업로드한 off_screen.js파일의 링크 주소도 복사해 두세요.

 

 

4. HTML 파일 수정

 

'꾸미기 > 스킨 편집 > HTML 편집' 메뉴를 통해 HTML 편집 창으로 이동한 후 </body> 태그 앞에 아래 코드를 추가해 주세요.

<script src="앞에서 복사한 js 파일 링크 주소"></script>

 

 

 

마치며...

레이지 로딩을 적용할 경우 눈에 띄게 페이지 로딩 속도가 개선되었다는 느낌을 받을 수는 없어요. 하지만 해당 방법을 통해 여러 가지의 효과를 얻을 수 있으니 사용자 경험 향상을 위해 꼭 적용해 보세요.

 

함께 읽으면 좋은 글

티스토리 반응형 스킨 장단점, 수익형 블로그를 위한 추천

티스토리 페이지 로딩속도 향상: 웹폰트 제거 방법 총정리