01DEFINITION
한 줄로 말하면
목록이나 갤러리처럼 사진이 수십 장인 페이지에서, 아래쪽 사진까지 처음에 다 받으면 정작 첫 화면이 늦게 그려집니다. loading 속성 한 줄로 화면 밖 사진을 미룰 수 있습니다. 다만 첫 화면에 보이는 사진에까지 걸면 오히려 늦어지므로, 전부가 아니라 아래쪽부터 거는 것이 맞습니다.
02RISK
없으면 무슨 일이 생기나
상품 목록이나 포트폴리오처럼 사진이 많은 화면에서 손해가 큽니다. 사용자는 위쪽 몇 장만 보고 판단하는데, 브라우저는 아래쪽 열 몇 장을 같이 받느라 대역폭과 시간을 씁니다. 모바일 데이터로 들어온 방문자에게는 그 비용이 그대로 요금입니다.
느려지는 방식이 눈에 잘 안 띕니다. 전체 페이지가 멈추는 것이 아니라 위쪽 중요한 이미지가 뒤쪽 사진들과 순서를 다투면서 늦게 도착합니다. 그래서 담당자가 자기 화면에서 테스트하면 대개 멀쩡해 보입니다 — 캐시가 남아 있고 회선이 빠르기 때문입니다.
반대 방향의 사고도 흔합니다. 템플릿에서 모든 이미지에 일괄로 지연 로딩을 걸면 첫 화면 대표 이미지까지 미뤄집니다. 그러면 방문자가 처음 보는 것이 빈 자리이고, 가장 중요한 이미지가 가장 늦게 뜹니다. 이 상태는 아무것도 안 한 것보다 체감이 나쁩니다.
03CHECK IT YOURSELF
직접 확인하는 방법
아래는 저희를 거치지 않고 지금 해 보실 수 있는 방법입니다. 결과를 저희에게 보내실 필요도 없습니다.
-
01
지연 로딩이 걸린 이미지가 몇 개인지 센다
이 항목이 세는 것이 그것입니다. 이미지가 여덟 개 이상인 페이지에서만 판정합니다.
$ curl -s https://example.com/portfolio | grep -o '<img[^>]*>' \ | grep -c 'loading="lazy"'
나머지 확인 방법 2단계는 셀프수리 가이드에 있습니다.
04HOW TO FIX
고치는 방법
서버 환경에 따라 적을 자리가 다릅니다. 아래는 가장 흔한 구성 기준이고, 적용 전에 현재 설정을 백업하십시오.
자바스크립트가 필요 없습니다. 지금 브라우저는 이 속성을 그대로 지원합니다.
가이드 안내 보기 · 먼저 무료로 진단받기
이미 열람권을 구매하셨다면 안내 메일의 가이드 링크로 바로 열립니다 — 링크를 잃으셨다면 문의 주시면 다시 보내 드립니다.
05FAQ
자주 묻는 질문
자바스크립트 라이브러리를 쓰고 있습니다
- 브라우저가 직접 지원하므로 대부분 걷어내실 수 있습니다. 라이브러리 방식은 스크립트가 실행돼야 이미지가 뜨는데, 스크립트를 안 돌리는 크롤러에게는 이미지가 없는 페이지로 보입니다.
지연 로딩을 걸면 검색에서 이미지가 빠지나요
- 브라우저 기본 방식은 문제 되지 않습니다. src 가 그대로 HTML 에 있기 때문입니다. 자바스크립트로 src 를 나중에 채우는 방식은 이미지가 안 보일 수 있으므로 그쪽을 피하십시오.
몇 장부터 미루는 게 좋나요
- 첫 화면에 실제로 보이는 것까지는 미루지 않는 것이 원칙입니다. 화면 크기에 따라 다르므로 앞의 두세 장을 예외로 두고 나머지를 미루는 규칙이 무난합니다.
RELATED
같이 보시면 좋은 항목
GET STARTED
내 사이트는
이 항목을 통과할까요
주소만 넣으시면 이 항목을 포함해 51가지를 판정해 점수와 실패 개수를 보여 드립니다. 로그인도, 소유 확인도 필요 없습니다 — 전부 밖에서 관찰만 하는 항목이기 때문입니다.