“왜 안 보이는 사진까지 미리 로딩하나요?”
사용자가 블로그에 들어오면, 브라우저는 보통 맨 아래에 있는 사진까지 한 번에 다 불러오려고(다운로드) 합니다.
그러느라 정작 중요한 맨 위 화면이 늦게 뜨죠. 답답한 사용자는 나가버립니다.
그래서 나온 기술이 지연 로딩(Lazy Loading)입니다.
“지금 당장 화면에 필요한 거 먼저 보여주고, 아래(스크롤) 있는 건 나중에 천천히 불러오자.”
1. 30초 요약 (스크롤 할 때 로딩)
- 사용자 접속 -> 맨 위 텍스트와 이미지만 로딩 (0.5초 컷).
- 사용자가 스크롤을 내림 ⬇️
- 아래쪽 이미지가 화면에 나타나기 직전에 로딩 시작.
이렇게 하면 초기 로딩 속도가 비약적으로 빨라집니다. 데이터 낭비도 줄어들고요(끝까지 안 보고 나가는 경우도 많으니까).
2. 당신이 몰랐던 진실: 브라우저 기본 기능이 됐다
예전에는 이걸 하려고 복잡한 자바스크립트(JS) 코드를 짰어야 했습니다.
하지만 이제 크롬 등 최신 브라우저는 기본 기능(Native Lazy Loading)으로 지원합니다.
이미지 태그에 loading="lazy" 속성만 붙여주면 끝입니다.
<img src="image.jpg" loading="lazy">
워드프레스는 최신 버전(5.5 이상)부터 이걸 자동으로 붙여줍니다. (갓구글!)
티스토리도 최신 스킨들은 대부분 적용되어 있습니다.
3. 실전 활용법: 상단 이미지는 제외하라
모든 이미지에 Lazy Loading을 걸면 안 됩니다.
최상단 대표 이미지(Hero Image)는 들어오자마자 바로 보여야 하잖아요?
근데 이것까지 “천천히 로딩해~”라고 하면, 하얀 빈 화면(LCP 저하)이 뜹니다.
- 본문 이미지: 무조건 Lazy Loading 적용.
- 썸네일/상단 배너: Lazy Loading 끄기 (
eager속성 사용 또는 제외).
4. 도구로 해결하기 (feat. WebP 변환기)
“Lazy Loading에 용량 압축까지 더하면?”
금상첨화입니다.
- 이미지를 WebP로 변환해서 용량을 줄입니다. (1차 가속)
- 브라우저가 Lazy Loading으로 필요할 때만 불러옵니다. (2차 가속)
- 이 두 가지가 합쳐지면 여러분의 블로그는 KTX급 속도를 갖게 됩니다.
가장 좋은 기술은 사용자가 못 느끼는 기술입니다.
물 흐르듯 자연스럽게 뜨는 화면, 그 뒤에는 게으른 로딩의 부지런함이 숨어 있습니다.