Jekyll 기반의 Juchive 개인 블로그를 3달동안 잘 활용하고 있다. 이제 틀도 잡혀서 카테고리별로 글도 꽤 쌓였다. 그러다보니 정보들을 불러오는데 생각보다 오랜 시간이 걸리고 웹사이트의 속도가 느려진 기분이 들었다. 이것을 해결해보고자 고민하다가 이미지를 불러오는 과정을 손봐야겠다는 생각을 하게 되었다.
현재 블로그에 있는 모든 이미지는 개인 Onedrive 클라우드에 저장해두고 embed해서 불러오는 방식을 취하고 있다. 지난 6월부턴가 Onedrive 측에서 embedding에 대한 정책을 바꾼건지 전보다 로딩 속도가 느려지고 링크도 바뀌었다. 과거에는 embed 했을 때에 주소가 https://phx02pap001files.storage.live.com/...였다면 이제는 https://onedrive.live.com/...로 바뀌었다. 링크가 바뀐 것은 큰 문제가 아니나, 로딩 속도가 느려졌다는 점은 굉장히 거슬렸다.
이런 현상을 해결하기 위해서 img을 불러올 때 lazy loading 방식을 택하기로 결정했다. 생각보다 적용 방법은 간단한데 img loading="lazy" width="192" height="192" src="이미지 위치" alt="Loading Image.." 처럼 html상의 img 태크 안에 loading="lazy"을 추가해주면 된다. 그리고 오류를 막기 위해서 width와 height는 알맞게 설정해주는 것이 권장된다. jekyll layout 폴더 안에서 필요한 부분은 모두 lazy loading으로 설정해주었더니 컨텐츠를 불러오는 속도가 개선된 것이 느껴졌다.
이미지가 불러와지는 동안은 alt로 지정한 Loading Image.. 텍스트가 표시되고 이미지는 차근차근 불러와진다. 극적인 차이는 아니지만 개발자 도구(F12)를 통해 확인했을 때에 로딩시간의 감축이 이루어졌다. 더욱 빠르게 불러오기 위해서는 Google Adsense도 지우는게 맞지만 일단 냅두련다…