Leniwe ładowanie zasobów z innych witryn za pomocą komponentu fasadowego

Do wyświetlania reklam i filmów oraz integracji z mediami społecznościowymi często służą zasoby firm zewnętrznych. Domyślnym sposobem jest wczytywanie zasobów zewnętrznych zaraz po załadowaniu strony, ale może to niepotrzebnie spowolnić wczytywanie strony. Jeśli zawartość stron zewnętrznych nie jest kluczowa, można obniżyć koszty wydajności przez leniwe ładowanie.

Ten audyt wskazuje elementy z innych witryn, które mogą być leniwie ładowane po interakcji. W takim przypadku zamiast treści osób trzecich jest używana fasada, dopóki użytkownik nie wejdzie z nią w interakcję.

Przykład wczytywania umieszczonego odtwarzacza YouTube z fasadą Facade waży 3 KB, a odtwarzacz o rozmiarze 540 KB jest wczytywany po interakcji.
Ładowanie wbudowanego odtwarzacza YouTube z fasadą.

Jak Lighthouse wykrywa umieszczanie elementów innych firm z możliwością odroczenia

Lighthouse szuka produktów innych firm, które można odroczyć, takich jak widżety przycisków społecznościowych lub umieszczone filmy (np. odtwarzacz YouTube).

Dane o produktach z możliwością odroczenia dostawy i dostępnych fasadach są przechowywane w usłudze internetowej innej firmy.

Kontrola kończy się niepowodzeniem, jeśli strona wczytuje zasoby należące do jednego z tych elementów umieszczonych na zewnętrznych stronach.

Zewnętrzny audyt fasady w Lighthouse z wyróżnionym odtwarzaczem Vimeo i czatem na żywo w aplikacji Drift.
Audyty fasady w Lighthouse.

Odroczanie innych firm za pomocą komponentu fasadowego

Zamiast umieszczać kod embed firmy zewnętrznej bezpośrednio w pliku HTML, załaduj stronę z elementem statycznym, który wygląda podobnie do rzeczywistego kodu embed firmy zewnętrznej. Schemat interakcji powinien wyglądać mniej więcej tak:

  • Podczas wczytywania: dodaj fasadę do strony.
  • Po najechaniu kursorem myszy: fasada wstępnie łączy się z zasobami zewnętrznymi.
  • Po kliknięciu: fasada zastępuje się produktem innej firmy.

Ogólnie rzecz biorąc, w przypadku wstawianych filmów, widżetów przycisków społecznościowych i widżetów czatu można stosować wzór fasady. Wybierając elewację, weź pod uwagę równowagę między rozmiarem a zestawem funkcji.

Na liście poniżej znajdziesz nasze rekomendacje dotyczące fasad typu open source. Możesz też użyć leniwego ładowania elementów iframe, np. vb/lazyframe.

Osadzony odtwarzacz YouTube

Odtwarzacz Vimeo umieszczony na stronie

Czat na żywo (Intercom, Drift, Help Scout, Facebook Messenger)

Tworzenie własnej fasady

Możesz utworzyć niestandardowe rozwiązanie fasadowe, które wykorzystuje omówiony wcześniej wzorzec interakcji. Fasada powinna być znacznie mniejsza w porównaniu z odroczonym produktem innej firmy i zawierać tylko tyle kodu, by imitować wygląd produktu.

Jeśli chcesz, aby Twoje rozwiązanie znalazło się na liście, zapoznaj się z procesem przesyłania.

Zasoby

Kod źródłowy leniwego ładowania zasobów zewnętrznych z kontrolą komponentu fasadowego.