오디오 플레이어는 기본적으로 지연 로드됩니다. 방문자가 플레이어 근처로 스크롤하기 전까지 JavaScript나 CSS를 로드하지 않습니다. 이를 통해 페이지의 LCP(Largest Contentful Paint)를 빠르게 유지합니다.
지연 로드의 동작 방식
- 페이지 로드 시, 플레이어 위치에 작은 플레이스홀더가 렌더링됩니다
- 전체 플레이어의 JavaScript와 CSS는 아직 로드되지 않습니다
- 방문자가 플레이어 500px 이내로 스크롤하면 전체 플레이어가 로드되어 플레이스홀더를 대체합니다
- 전환은 시각적으로 부드럽습니다(보통 100ms 이내)
Core Web Vitals 개선 효과
지연 로드 없이는 플레이어가 있는 모든 페이지가 초기 로드 시 플레이어 JS와 CSS 비용을 부담합니다. 지연 로드를 사용하면:
- LCP: 영향 없음 - 플레이어가 스크롤 없이 보이는 영역에 없습니다
- INP: 영향 없음 - 로드 시 무거운 JS가 실행되지 않습니다
- CLS: 영향 없음 - 플레이스홀더가 최종 플레이어와 동일한 높이를 가집니다
지연 로드를 끄는 경우
지연 로드는 기본적으로 켜져 있습니다. 다음 경우에는 끄십시오:
- 플레이어가 항상 스크롤 없이 보이는 위치에 있는 경우(드묾)
- 자동 재생을 사용하고 플레이어가 즉시 준비되길 원하는 경우(매우 드묾)
- 디버깅을 위해 지연 로드 없이 테스트하려는 경우
끄는 방법
- 텍스트 음성 변환 → 고급으로 이동합니다.
- 지연 로드 플레이어를 꺼짐으로 전환합니다.
- 저장합니다.
기술적 동작 원리
- 플러그인은
IntersectionObserver를 사용하여 플레이어가 화면에 들어오는 시점을 감지합니다 - 교차 시, 필요한 JS와 CSS를 동적으로 로드합니다
- 로드된 이후에는 스크립트가 세션 동안 브라우저에 캐시됩니다
IntersectionObserver를 지원하지 않는 구형 브라우저는 페이지 로드 시 스크립트를 로드하는 방식으로 대체됩니다.
알려진 예외 사항
숨겨진 요소 안의 플레이어
플레이어가 display: none 섹션(예: 접힌 아코디언) 안에 있으면, 해당 섹션이 표시될 때까지 지연 로드가 실행되지 않습니다. 보통 이는 의도된 동작입니다. 표시되지 않는 것을 미리 로드할 필요가 없습니다.
오디오 자동 재생
플레이어에 자동 재생을 설정하고 지연 로드 상태라면, 방문자가 스크롤하여 플레이어에 도달할 때까지 재생되지 않습니다. 자동 재생은 플레이어가 로드되는 즉시 시작됩니다.