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"를 이미지에 혼합 사용할 때 권장되는 전략은?

해설

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

관련 문제

시장과 사람의 답을 봤다면,다음 결과물의 구조를 고릅니다.

시장과 사람의 답을 봤다면,
다음 결과물의 구조를 고릅니다.