← 질문 목록
#117깊이 0
화면 밖 이미지는 언제 불러와야 하는가?
화면 밖 이미지는 사용자가 가까이 스크롤했을 때 불러온다. 첫 화면 이미지는 지연 로딩하지 않는다. 그중 LCP 후보에 높은 우선순위를 줘야 표시를 늦추지 않는다.
초기 진입→핵심 이미지
즉시 요청한다
관찰 영역 접근→화면 밖 이미지
다운로드를 시작한다
로드 완료→자리 표시자
실제 이미지로 바꾼다
loading=lazy는 브라우저가 거리와 네트워크 상황에 따라 로드를 미룬다. 더 세밀한 제어가 필요하면 IntersectionObserver로 접근 시점을 감지한다.
이미지 공간을 미리 예약하지 않으면 로드 순간 레이아웃이 움직인다. width와 height 또는 aspect-ratio를 지정해 누적 레이아웃 이동을 막는다.
추천 꼬리질문
관련 질문
- 첫 화면을 빠르게 띄우려면 무엇을 미뤄야 하는가?모바일첫 화면 렌더링 최적화를 위해 중요하지 않은 리소스(화면 밖 이미지 등)의 로드 시점을 미루는 전략을 공유한다.
- 첫 화면을 막는 리소스는 어떻게 줄이는가?프론트엔드두 질문 모두 초기 로딩 속도 향상을 위한 리소스 로드 시점 최적화 및 렌더링 차단 리소스 제거를 다룹니다.
- 체감 성능은 어떤 세 지표로 판단하는가?프론트엔드화면 밖 이미지의 지연 로딩(Lazy Loading)은 LCP와 같은 사용자 체감 성능 지표를 개선하는 구체적인 방법이다.
- 화면이 바뀐 뒤 포커스는 어디로 보내는가?프론트엔드
- 외부 링크를 곧바로 화면에 열어도 되는가?모바일