iframe 지연 로딩
loading=lazy로 화면 밖 iframe 로딩 지연하기
iframe 지연 로딩은(는) CoddyKit의 무료 HTML Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 HTML Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
지연 로딩이란 무엇입니까
지연 로딩은 리소스가 필요할 때까지, 즉 요소가 뷰포트 근처 또는 내부에 들어올 때까지 리소스 로드를 미루는 방식입니다. 아이프레임에서는 사용자가 아이프레임 근처까지 스크롤할 때까지 삽입된 문서와 그 스크립트, CSS 및 웹 자산을 다운로드하지 않습니다.
loading 속성
아이프레임에 loading="lazy"를 추가하십시오. <iframe src="embed.html" loading="lazy">. 브라우저는 자체 휴리스틱에 따라 로드를 시작할 시점을 결정합니다(일반적으로 아이프레임이 뷰포트에 들어오기 1000~2500px 전). JavaScript는 필요하지 않습니다.
성능 영향
아이프레임은 상당한 리소스를 로드할 수 있습니다(YouTube는 JavaScript를 약 500KB 로드합니다). 첫 화면 아래의 동영상 삽입을 지연 로드하면 초기 페이지 로드가 정확히 그만큼 줄어들어 첫 화면 위 콘텐츠의 LCP와 상호작용 가능 시간이 직접 개선됩니다.
loading="eager"
loading="eager"는 위치와 관계없이 아이프레임을 즉시 로드합니다. 이것이 기본 동작입니다. 전역적으로 지연 로딩을 추가하는 프레임워크처럼 기본값이 lazy인 환경에서 특정 아이프레임을 즉시 로드해야 한다면 eager를 명시적으로 추가하는 것이 유용합니다.
Intersection Observer 대안
복잡한 지연 로딩 로직(클릭할 때 로드하거나 연결 품질에 따라 로드하는 경우)에는 IntersectionObserver를 사용하십시오. 아이프레임 컨테이너를 observe하고, 뷰포트에 들어올 때만 src를 설정합니다. 이렇게 하면 아이프레임을 언제 로드할지와 로드할지 여부를 완전히 제어할 수 있습니다.
const observer = new IntersectionObserver(entries => {
if (entries[0].isIntersecting) {
iframe.src = iframe.dataset.src;
observer.disconnect();
}
});
observer.observe(iframe);파사드 패턴
기본적으로 아이프레임 대신 정적 미리 보기 이미지를 표시하십시오. 재생 버튼을 위에 배치하고, 클릭하면 미리 보기 이미지를 실제 아이프레임으로 바꾸십시오. YouTube 파사드 패턴은 동영상 미리 보기 이미지를 표시하고 사용자가 재생을 클릭할 때만 아이프레임을 로드하여 전체 YouTube 삽입 로드 비용을 줄입니다.
클릭하여 로드하는 패턴
상당한 JavaScript를 로드하는 소셜 삽입 콘텐츠(트위터 타임라인, 인스타그램 게시물)에는 "Load comments" 버튼을 표시하십시오. 클릭하면 아이프레임을 삽입합니다. 상호작용하지 않는 사용자는 로드 비용을 전혀 부담하지 않습니다. 이는 삽입된 소셜 콘텐츠를 위한 점진적 향상입니다.
브라우저 지원
아이프레임의 loading="lazy"는 크롬 77 이상과 파이어폭스 121 이상에서 지원됩니다. 사파리는 2024년 기준 아이프레임의 지연 로딩을 지원하지 않습니다. 여러 브라우저에서 지연 로딩을 구현하려면 신뢰할 수 있는 대안인 IntersectionObserver를 사용하십시오. 모든 현대적인 브라우저에서 작동합니다.
CLS 방지
누적 레이아웃 이동(CLS)을 방지하려면 명시적인 width, height 및 aspect-ratio CSS로 지연 로드되는 아이프레임을 위한 공간을 확보하십시오. 아이프레임이 로드되어 표시될 때 이미 공간이 할당되어 있으므로 주변 콘텐츠가 이에 맞춰 이동하지 않습니다.
분석 추적
지연 로드되는 아이프레임은 분석에 영향을 줄 수 있습니다. 추적 픽셀이나 분석 삽입 콘텐츠를 위한 아이프레임을 지연 로드하면 해당 위치까지 스크롤하지 않는 사용자에게는 실행되지 않을 수 있습니다. 중요한 분석 및 전환 추적 아이프레임은 즉시 로드하거나 첫 화면 위에 배치해야 합니다.
lazy와 sandbox 결합
lazy와 sandbox를 함께 사용하십시오. <iframe src="embed.html" loading="lazy" sandbox="allow-scripts">. 두 속성은 독립적으로 작동합니다. lazy는 시점을 제어하고 sandbox는 아이프레임이 할 수 있는 동작을 제어합니다. 효율적이고 안전한 타사 삽입을 위해 두 속성을 함께 사용하십시오.
지식 확인
인라인 프레임 지연 로딩의 파사드 패턴이란 무엇입니까?
요약
loading="lazy"를 사용해 인라인 프레임을 지연 로드하면 뷰포트 근처에 도달할 때까지 리소스 로딩을 미뤄 무거운 삽입 콘텐츠의 초기 페이지 로딩을 크게 줄일 수 있습니다. 파사드 패턴과 클릭하여 로드하는 방식을 사용하면 이를 한층 더 확장하여 사용자 상호작용이 있을 때만 인라인 프레임을 로드할 수 있습니다. IntersectionObserver는 복잡한 지연 로딩 상황을 브라우저 간에 제어할 수 있게 해 줍니다. CLS를 방지하려면 인라인 프레임의 크기를 미리 확보하십시오.
자주 묻는 질문
“iframe 지연 로딩” 강의는 무료인가요?
네 — “iframe 지연 로딩” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 HTML Academy 강의 전체를 잠금 해제할 수 있습니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“iframe 지연 로딩”에서 뭘 배우나요?
loading=lazy로 화면 밖 iframe 로딩 지연하기 브라우저에서 직접 실행하는 실습 코드로 HTML Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
HTML Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 HTML Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.
“iframe 지연 로딩” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 HTML Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 HTML Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.