보이는 사진은 네 장인데 받은 것은 서른일곱 장
휴대폰 화면 크기로 홈페이지를 엽니다. 첫 화면에 보이는 사진은 큰 배너 한 장과 카드 세 장, 모두 네 장입니다. 그런데 개발자 도구의 네트워크를 열어 보면 이미 서른일곱 장이 내려와 있습니다. 스크롤은 아직 하지 않았습니다.
목록을 내려 보면 첫 화면에 없는 이름이 줄줄이 있습니다. 후기 사진, 하단 배너, 지도 이미지, 브랜드 로고 같은 것들입니다. 손님이 그 자리까지 내려가지 않아도 데이터는 이미 받은 뒤이고, 그 데이터는 손님이 냅니다.
페이지가 열리는 순간 아래쪽까지 한꺼번에 부릅니다
브라우저는 문서를 읽으면서 만나는 이미지를 순서대로 요청합니다. 그 이미지가 화면 안에 있는지 밖에 있는지는 따로 챙기지 않습니다. 그래서 아무 설정도 하지 않으면 페이지 맨 아래 이미지까지 첫 화면과 함께 내려옵니다.
홈페이지 94곳을 재 보니 내려받은 이미지가 첫 화면에 보이는 이미지의 세 배를 넘는 곳이 74곳이었습니다. 첫 화면 이미지는 중앙값 4장, 내려받은 이미지는 중앙값 37장이었습니다.
화면은 빨리 떴는데 데이터는 계속 내려옵니다
| 잰 것 | 94곳 중앙값 |
|---|---|
| 첫 화면이 뜬 시각 | 1.2초 |
| 그동안 받은 데이터 | 10.2MB |
| 그중 이미지 | 5.0MB (전체의 약 절반) |
| 첫 화면에 보이는 이미지 | 4장 |
| 내려받은 이미지 | 37장 |
첫 화면이 1.2초에 뜬 것은 좋은 값입니다. 문제는 화면이 뜬 뒤에도 데이터가 계속 내려온다는 점입니다. 빨라 보이는 것과 적게 받는 것은 같은 말이 아닙니다.
측정 조건을 밝힙니다. 2026년 8월 31일에 100곳을 390×844 모바일 화면 크기로 한 곳씩 한 번만 열었고, 열리기는 했지만 받은 바이트가 20KB 도 되지 않는 6곳을 뺀 94곳이 위 중앙값의 분모입니다. 캐시는 껐습니다. 사무실 유선 회선에서 잰 값이라 이동통신에서는 시간이 다르게 나옵니다. 다만 바이트는 회선 상태에 흔들리지 않습니다.
사진을 빼는 게 아니라 부르는 순서를 바꿉니다
- 첫 화면 밖 이미지는 나중에 부릅니다.
<img loading="lazy">한 줄이면 손님이 그 자리까지 내려왔을 때 받습니다. 다만 첫 화면 이미지에는 걸지 마십시오. 걸면 오히려 늦어집니다. - 첫 화면의 가장 큰 사진 한 장을 가볍게 만듭니다. 그 한 장의 중앙값이 281KB였고, 500KB를 넘는 곳이 38곳, 1MB를 넘는 곳이 24곳이었습니다(히어로를 잴 수 있었던 93곳 기준). 웹피나 AVIF로 내보내는 곳은 8곳뿐이었습니다.
사진을 줄이라는 이야기가 아닙니다. 보여 줄 것은 그대로 두고 언제 부를지만 바꾸는 일입니다.
오늘 해 보실 확인은 30초입니다
- 페이지를 열고 스크롤하지 않은 채로 둡니다.
- 개발자 도구를 열어 Network → Img 를 봅니다. 이미 내려온 이미지 개수와 합계 크기가 그 자리에 나옵니다.
- 목록에서 첫 화면에 없는 사진 이름을 찾습니다. 후기 사진, 하단 배너, 지도 이미지가 보이면 표시해 둡니다.
그 이름들이 보이면 지금 손님이 그만큼 먼저 받고 있다는 뜻입니다. 담당자에게 「첫 화면 밖 이미지를 나중에 부르게 해 달라」고 요청하시면 됩니다. 보낸 뒤의 화면이 궁금하시면 상담 신청을 눌러도 아무 화면이 안 뜨는 페이지를 이어서 보시면 됩니다.
본문과 영상에 나오는 휴대폰 화면, 네트워크 목록, 파일 이름은 특정 사이트가 아니라 재현 예시입니다.
