퍼사드로 서드 파티 리소스 지연 로드

서드 파티 리소스는 광고 또는 동영상을 표시하고 소셜 미디어와 통합하는 데 자주 사용됩니다. 기본 접근 방식은 페이지가 로드되는 즉시 서드 파티 리소스를 로드하는 것이지만, 이렇게 하면 페이지 로드가 불필요하게 느려질 수 있습니다. 서드 파티 콘텐츠가 중요하지 않다면 지연 로드하여 이 성능 비용을 줄일 수 있습니다.

이 감사에서는 상호작용 시 지연 로드될 수 있는 서드 파티 삽입을 강조 표시합니다. 이 경우 사용자가 서드 파티 콘텐츠와 상호작용할 때까지 서드 파티 콘텐츠 대신 파사드가 사용됩니다.

파사드로 YouTube 삽입 플레이어를 로드하는 예 파사드는 3KB이며, 540KB인 플레이어는 상호작용 시 로드됩니다.
Loading YouTube embedded player with a facade.

Lighthouse에서 지연 가능한 서드 파티 삽입을 감지하는 방법

Lighthouse는 소셜 버튼 위젯이나 동영상 삽입 (예: YouTube 삽입 플레이어)과 같이 지연될 수 있는 서드 파티 제품을 찾습니다.

지연 가능한 제품과 사용 가능한 파사드에 관한 데이터는 third-party-web에 유지됩니다.

페이지에서 이러한 서드 파티 삽입 중 하나에 속하는 리소스를 로드하면 감사가 실패합니다.

Vimeo 삽입 플레이어와 Drift 실시간 채팅을 강조하는 Lighthouse 서드 파티 파사드 감사
Lighthouse 서드 파티 파사드 감사입니다.

퍼사드로 서드 파티 지연

HTML에 서드 파티 삽입을 직접 추가하는 대신 실제 삽입된 서드 파티와 유사한 정적 요소로 페이지를 로드합니다. 상호작용 패턴은 다음과 같이 표시됩니다.

  • 로드 시: 페이지에 파사드 추가
  • 마우스 오버 시: 퍼사드가 서드 파티 리소스에 사전 연결됩니다.
  • 클릭 시: 파사드가 서드 파티 제품으로 대체됩니다.

일반적으로 동영상 삽입, 소셜 버튼 위젯, 채팅 위젯은 모두 퍼사드 패턴을 사용할 수 있습니다. 외관을 선택할 때는 크기와 기능 세트 간의 균형을 고려하세요.

다음 목록은 오픈소스 파사드에 대한 권장사항을 제공합니다. vb/lazyframe과 같은 지연 iframe 로더를 사용할 수도 있습니다.

YouTube 내장 플레이어

Vimeo 삽입된 플레이어

실시간 채팅 (Intercom, Drift, Help Scout, Facebook Messenger)

자체 파사드 작성

앞서 설명한 상호작용 패턴을 사용하는 맞춤 파사드 솔루션을 빌드할 수 있습니다. 파사드는 지연된 서드 파티 제품에 비해 훨씬 작아야 하며 제품의 모양을 모방하는 데 충분한 코드만 포함해야 합니다.

솔루션을 목록에 포함하려면 제출 절차를 확인하세요.

리소스

퍼사드로 서드 파티 리소스 지연 로드 감사의 소스 코드입니다.