Web Guide지연 로딩이미지 최적화초기 로딩
이미지 지연 로딩 적용하기
보지도 않을 이미지를 처음부터 다 받을 이유가 없습니다.
설정 한 줄로 초기 로딩이 크게 가벼워집니다.
01효과
첫 화면이 빨라집니다.
01
초기 용량 감소
처음 받는 양이 줄어듭니다.
02
첫 화면 속도
보이는 것만 먼저 뜹니다.
03
데이터 절약
안 본 이미지는 안 받습니다.
04
서버 부담 감소
요청 수가 줄어듭니다.
05
긴 페이지 효과
이미지가 많을수록 큽니다.
06
성능 점수
측정 지표가 개선됩니다.
02적용 기준
모든 이미지에 적용하면 안 됩니다.
적용할 것
화면 아래 이미지 · 긴 목록의 썸네일 · 본문 중간 삽화 · 갤러리
적용 금지
첫 화면 대표 이미지 · 로고 · 화면 상단 배너 · 오히려 느려집니다
03같이 해야 할 것
지연 로딩만으로는 부족합니다.
크기 지정
미리 자리를 잡아 밀림 방지.
형식 최적화
차세대 형식으로 변환.
크기별 제공
화면에 맞는 크기로.
압축
화질을 유지하며 용량 축소.
우선순위 지정
중요한 이미지는 먼저.
대체 텍스트
안 뜰 때와 접근성 대비.
04확인 방법
제대로 동작하는지 봐야 합니다.
스크롤 테스트내려가며 이미지가 뜨는지.
밀림 확인뜰 때 자리가 안 밀리는지.
빠른 스크롤급히 내려도 따라오는지.
검색 수집이미지가 인식되는지.
느린 통신환경을 제한해 확인.
속도 측정적용 전후를 비교.
CHECK POINT
□ 화면 아래 이미지에 지연 로딩을 적용했는가
□ 첫 화면 이미지는 제외했는가
□ 이미지 크기를 미리 지정했는가
□ 뜰 때 레이아웃이 밀리지 않는가
□ 빠르게 스크롤해도 잘 뜨는가
□ 검색에서 이미지가 인식되는가
□ 대체 텍스트를 넣었는가
□ 적용 전후 속도를 비교했는가
#지연 로딩#이미지 최적화#초기 로딩#레이아웃 밀림#크기 지정#속도#성능#반응형#웹비스타#홈페이지 제작