블로그스팟 이미지 지연 읽기 설정하기 / 떠다니는 Q

블로그 속도에 있어서 이미지 지연 읽기(lazyload, 레이지로드)는 중요한 요소입니다. 이미지가 글자 하나하나보다 더 많은 용량을 차지하다 보니 이미지를 지연 읽기하면 얻을 수 있는 페이지 로딩 속도 감소 효과는 큰 편입니다. 이 글에서는 이미지 지연 읽기란 무엇인지, 블로그스팟에서 어떻게 이미지 지연 읽기를 설정하는지에 대하여 다루겠습니다.

이미지 지연 읽기란?

웹사이트는 웹사이트에 있는 콘텐츠를 읽어올 때 일정량의 데이터를 사용합니다. 그 콘텐츠가 이미지나 동영상 같은 미디어일 경우 큰 용량 때문에 많은 데이터를 사용합니다.

더 큰 이미지를 불러오기 위해서는 더 많은 데이터와 시간이 필요합니다. 이러면 웹사이트의 로딩 시간이 길어지고 방문자에게 사이트에 대한 안 좋은 인상을 심어 줍니다. 생각해 봅시다. 페이지 로딩이 느린 사이트에 접속해 본 경험이 있나요? 대부분 해당 페이지가 중요한 페이지가 아닌 경우 바로 페이지를 닫아 버렸을 것입니다.

이미지 지연 읽기는 당장 읽을(로딩할) 필요가 없는 이미지의 로딩을 지연시킵니다. 페이지를 처음 열 때는 당장 필요한 이미지만 읽고, 사용자가 글을 읽어 나가면서 필요한 이미지들을 추가로 로딩시킵니다.

loading="lazy" 설정하기

이미지 지연 읽기를 설정하는 가장 간단한 방법은 img 태그의 속성에 loading="lazy"를 설정하는 것입니다. 직접 이미지 지연 읽기를 설정해 봅시다.

우선 게시글을 하나 클릭합니다. 왼쪽 위를 클릭해 HTML 보기 모드로 전환합니다. HTML에서 이미지는 <img> 태그로 둘러싸여져 있습니다. 예시로 글에 있는 이미지를 하나 선택했습니다. <img loading="lazy"처럼 코드를 추가하면 됩니다. 아래 스크린샷을 보면, 위 이미지에는 이미지 지연 읽기를 설정하지 않았고 아래 사진에는 이미지 지연 읽기를 설정했습니다. 둘의 차이를 비교해 보세요.

글에 있는 모든 이미지에 지연 읽기를 적용하려면 찾아 바꾸기 기능이 유용합니다. 위 바에서 바꾸기 아이콘을 클릭합니다. 찾는 문자열에 <img를 입력하고 바꿀 문자열에 <img loading="lazy"를 입력합니다. All을 선택하면 모든 이미지에 지연 읽기를 쉽게 적용할 수 있습니다.

블로그스팟 자체적으로 이미지 지연 읽기 기능을 사용할 수 있습니다. 설정으로 들어가서 글 > 이미지 지연 로드를 켜면 됩니다. 그러면 글의 모든 이미지에 loading="lazy"가 붙게 됩니다. HTML과 씨름하고 싶지 않은 경우 가장 간단한 방법입니다. 아래 스크린샷은 현재 이 블로그의 글 설정을 보여줍니다. 저는 블로그스팟이 자체적으로 지원하는 이미지 지연 로드 기능을 사용하지는 않고 있습니다.

개발자 도구로 이미지 지연 확인하기

개발자 도구의 네트워크 탭을 활용하면 이미지 지연 읽기가 제대로 이루어지는지 확인할 수 있습니다. 고양이 사진 100장이 있는 웹사이트입니다. 원래라면 이미지를 로딩하느라 웹사이트 속도가 느려져야 정상일 겁니다.

https://mathiasbynens.be/demo/img-loading-lazy

컴퓨터에서 이미지 지연 읽기를 설정한 블로그 글에 접속합니다. F12를 눌러서 개발자 도구를 켭니다. Network(네트워크) 탭으로 들어갑니다. 이미지 로딩을 확인하기 위해 Img를 클릭합니다. 크롬 기준으로 Ctrl + F5를 눌러 캐시를 삭제하는 강력 새로고침을 합니다.

천천히 스크롤을 내리면 이미지 파일들이 차례로 로딩되는 것을 확인할 수 있습니다. transferred의 용량이 늘어나는 것과 request의 수가 늘어나는 것을 확인하면 됩니다. transferred는 웹사이트가 로딩한 자원(리소스)의 총 용량이니 이미지가 로딩될수록 그 용량이 늘어납니다.