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ę.
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.
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.
Zalecane fasady
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.