HTML에서 loading="eager"와 loading="lazy"를 이미지에 혼합 사용할 때 권장되는 전략은?

Q: HTML에서 loading="eager"와 loading="lazy"를 이미지에 혼합 사용할 때 권장되는 전략은?

스크롤 없이 보이는(above-the-fold) 이미지는 eager, 아래쪽 이미지는 lazy로 설정한다 초기 뷰포트에 보이는(above-the-fold) 이미지에 loading="lazy"를 적용하면 오히려 LCP(Largest Contentful Paint) 성능이 저하될 수 있습니다. 따라서 처음에 보이는 핵심 이미지는 eager(기본값), 스크롤해야 보이는 이미지는 lazy로 설정하는 것이 권장됩니다.

보통 MDN Web Docs

보기 및 정답

A 스크롤 없이 보이는(above-the-fold) 이미지는 eager, 아래쪽 이미지는 lazy로 설정한다

B 모든 이미지에 lazy를 적용하는 것이 항상 최적이며, eager는 사용할 필요가 전혀 없다

C eager와 lazy를 번갈아 적용하여 홀수 번째 이미지와 짝수 번째 이미지에 교대로 설정하는 것으로 알려져 있다

D 첫 번째 이미지만 lazy로 설정하고 나머지는 모두 eager로 설정하는 것이 가장 최적이다

해설

초기 뷰포트에 보이는(above-the-fold) 이미지에 loading="lazy"를 적용하면 오히려 LCP(Largest Contentful Paint) 성능이 저하될 수 있습니다. 따라서 처음에 보이는 핵심 이미지는 eager(기본값), 스크롤해야 보이는 이미지는 lazy로 설정하는 것이 권장됩니다.

코딩, 제대로 배우고 싶다면?

개념 확인은 퀴즈로, 실력은 실전 프로젝트로.
투더제이 코딩클래스에서 시작하세요.

정규반 살펴보기

로그인

추가 정보 입력

회원가입

비밀번호 찾기

HTML에서 loading="eager"와 loading="lazy"를 이미지에 혼합 사용할 때 권장되는 전략은?

해설

코딩, 제대로 배우고 싶다면?

관련 문제

모두를 위한 진짜 쎈 바이브코딩