[블로그] 티스토리 최적화 '오프스크린 이미지 지연하기' 해결 방법 (Lazy Load)

 

 

 

그냥 글만 잘 쓰고 꾸준히 쓴다면 내 블로그는 잘 될 수 있을 줄 알았다. 하지만 그게 아니다. 날이 갈 수록 구글 봇은 내 게시글을 긁어가지도 않아 지금 현재 30개 넘게 게시글이 쌓이는 중이다. 제발 좀 긁어가주었으면 좋겠다. 너무 동일한 형식의 게임 포스팅을 해서 그런가 아무리 써도 내 포스팅은 구글에서 검색이 되지 않는다.

 

뭐, 이참에 블로그를 최적화하는 방법을 알아가는 단계라서 참 좋기는 하다. 많이 글을 쓰는 내 자신에게 취해서 자아도취 할 때 쯤 이런 고통과 시련이 있어야 그나마 조금 사람답게 살 수 있지 않을까라는 생각이 가득하다. 페이지의 성능을 알아보기에 좋은 사이트들이 많이 있지만 그중에서 PageSpeed Insights를 제일 많이 활용하는 듯 하다. 이번에 최적화로 도전해볼 친구는 바로 '오프스크린 이미지 지연하기'이다.

 

PageSpeed Insights 캡쳐

 

 

아니 그럼, 오프스크린이 뭐길래 자꾸 이렇게 내 홈페이지 시간을 로딩하는데 시간만 잡아먹을까. 나는 잘못한게 없는 것 같은데 말이다. 오프스크린. Off screen으로 화면에 보이지 않는 영역을 이야기한다. 결국 사용자가 바라볼 때 화면에 아직 등장하지 않은 이미지들이 벌써 로딩이 되어 기다리고 있다는 뜻이다. 만약 이 이미지들이 사용자 스크롤이 도달하였을 때 로딩이 된다고 하면 굳이 지금 가져올 필요가 없다는 의미라고 볼 수 있다.

 

대부분 오프스크린이라고 평가받는 사진들을 보면 제일 하단에 있는 관련글의 썸네일 그림 사진이었다. 대부분. 이런 글들은 글의 최하단에 등록되기 때문에 페이지가 처음 오픈할 때 굳이 필요한 부분은 아니라고 판단한다. 그렇기에 이 이미지들을 지연시키는 작업이 필요하다. 너희들 아직 필요 없으니 잠시 후 등장을 해주었으면 좋겠다는 의미를 전달해줄 예정이다. 그것을 우리는 Lazy Lord, 혹은 Lazy Loading이라고 부른다.

 

오프스크린 적용 jpg

 

자, 이제 오프스크린을 하기 위해서는 조금 복잡한 방법이 필요하다. 다만 뭐 크게 어려운 부분은 없기 때문에 두려워할 필요는 없다. 전반적인 내용은 marshallku 님의 블로그를 참고하여 작성되었다. 오프스크린을 하기 위한 재료들은 아래 알집 파일에 추가해두었다.

 

off_screen.zip

0.00MB

 

 

압축파일을 다운로드하면 2개의 파일이 있을 것인데 그 중 하나인 '1x1.jpg' 파일을 먼저 티스토리에 업로드를 할 것이다. 업로드 하는 링크는 '꾸미기 - 스킨 편집 - HTML 편집 - 파일 업로드' 순으로 타고 들어가면 된다. 파일 업로드에서 추가를 한 후 다운로드 한 작은 그림파일을 업로드하면 된다. 시작이 좋다.

 

파일업로드 위치

 

 

marshallku님께서 작성해주신 자바스크립트를 사용하기 위해서는 방금 올릴 그림파일의 주소를 확인하여야 한다. 그림파일의 주소는 그림파일 선택 후 우클릭하면 링크 주소 복사를 할 수 있게 된다. 그 주소가 바로 내가 방금 올린 작고 귀여운 그림파일의 주소가 된다.

 

링크 주소 복사

 

링크 주소를 복사했다면, 압축 파일 내부에 있는 'off_screen.js' 파일을 열어본다. ctrl + f 로 '복사'를 검색하면 바로 수정할 부분이 등장한다. 해당 부분을 방금 위에서 복사해온 이미지의 링크 주소를 붙여넣기하여 변경을 해준다. 그리고 저장하면 거의 대부분의 절차가 완료가 되었다.

 

링크 설명 변경

 

따로 별도의 서버가 있으신분들은 해당 스크립트롤 업로드하여도 상관 없지만, 없다면 깃허브나 구글 드라이브를 사용해도 좋다. 하지만 귀찮으니 해당 자바스크립트도 티스토리에 업로드하여 사용해보도록 하자. 그림파일을 업로드 했던 것처럼 동일하게 JS의 경로를 복사해두어 어딘가에 잘 저장해두자.

 

경로를 복사해두어 아래의 스크립트 안에 복사를 해두면 된다. 그러면 거의 완성이 되었다고 볼 수 있다.

 

<script src="수정한 JS 주소를 여기가 입력하세요"></script>

 

 

복사한 주소를 들고 다시 한 번 HTML 편집기로 달려간다. 그 후 </body> 바로 위에 내 코드를 붙여넣으면 끝이 난다. 근데 뭔가 눈에 띄게 확 빨라졌다고 느끼기에는 조금 부족한 느낌이다. 뭔가 잘못하진 않았을까 생각해도 별 특이점을 못찾으니 조금 답답한 실정이다. 그래도 뭐 결과는 좋아졌으니 그런가보다 하면 될 것 같다.

 

JS HTML 삽입

 

 

몇 가지 주소로 검색을 해 보았을 때 '오프스크린' 항목이 없어지긴 했지만 그 외에 수정할 사항들이 너무 많아서 큰일이다. 특히 게임 포스팅이 많다보니 데이터 크기가 엄청 커져서 압축하는 작업을 조금 진행하는게 좋을 것 같다. 너무 잘못된 길로 오랜 시간 달려와서 고치는 시간이 꽤나 오래걸리지 않을까 생각이 된다. 하나씩 고쳐보면 될 것 같다.

 

 

고칠 것이 산더미이다