파사드를 사용하여 타사 리소스를 지연 로드
타사 리소스는 종종 광고 또는 동영상을 표시하고 소셜 미디어와 통합하는 데 사용됩니다. 기본 접근 방식은 페이지가 로드되는 즉시 타사 리소스를 로드하는 것이지만 이렇게 하면 페이지 로드가 불필요하게 느려질 수 있습니다. 타사 콘텐츠가 중요하지 않은 경우 지연 로드를 통해 이 성능 하락을 줄일 수 있습니다.
이 감사는 상호 작용 시 느리게 로드될 수 있는 타사 임베드를 강조합니다. 이 경우 사용자가 상호 작용할 때까지 타사 콘텐츠 대신 파사드가 사용됩니다.
Lighthouse가 지연 가능한 타사 콘텐츠를 감지하는 방법 #
Lighthouse는 소셜 버튼 위젯 또는 비디오 콘텐츠(예: YouTube 내장 플레이어)와 같이 지연될 수 있는 타사 제품을 찾습니다.
연기 가능한 제품 및 사용 가능한 외관에 대한 데이터는 타사 웹에서 유지 관리됩니다.
페이지가 이러한 타사 콘텐츠 중 하나에 속한 리소스를 로드하면 감사가 실패합니다.
파사드로 타사 콘텐츠를 연기하는 방법 #
HTML에 직접 타사 임베드를 추가하는 대신 실제 포함된 타사와 유사한 정적 요소가 있는 페이지를 로드합니다. 상호작용 패턴은 다음과 같아야 합니다.
로드 시: 페이지에 파사드를 추가합니다.
마우스 오버 시: 파사드는 타사 리소스에 미리 연결됩니다.
클릭 시: 외관이 타사 제품으로 교체됩니다.
추천 파사드 #
일반적으로 비디오 임베드, 소셜 버튼 위젯 및 채팅 위젯은 모두 파사드 패턴을 사용할 수 있습니다. 아래 목록은 오픈 소스 파사드에 대한 권장 사항을 제공합니다. 정면을 선택할 때 크기와 기능 세트 간의 균형을 고려하십시오. vb/lazyframe 과 같은 지연 iframe 로더를 사용할 수도 있습니다.
YouTube 내장 플레이어 #
Vimeo 내장 플레이어 #
실시간 채팅(Intercom, Drift, Help Scout, Facebook Messenger) #
나만의 파사드 쓰기 #
위에서 설명한 상호 작용 패턴을 사용하는 맞춤형 파사드 솔루션을 구축하도록 선택할 수 있습니다. 파사드는 지연된 타사 제품과 비교하여 훨씬 작아야 하며 제품의 모양을 모방할 수 있는 충분한 코드만 포함해야 합니다.
위 목록에 솔루션을 포함시키려면 제출 프로세스를 확인하세요.
참고 자료 #
파사드 감사를 사용하여 타사 리소스를 지연 로드하는 소스 코드.