Zasoby innych firm są często używane do wyświetlania reklam lub filmów oraz do integracji z mediami społecznościowymi. Domyślnie zasoby z innych witryn są ładowane od razu po wczytaniu strony, ale może to niepotrzebnie spowalniać ładowanie strony. Jeśli treści pochodzące od innej firmy nie są kluczowe, można zmniejszyć koszt wydajności, stosując leniwe wczytywanie.
Ten audyt wskazuje umieszczone na stronie elementy z innych witryn, które można leniwie ładować po interakcji. W takim przypadku zamiast treści pochodzących od zewnętrznego dostawcy używana jest fasada, dopóki użytkownik nie wejdzie z nią w interakcję.
Jak Lighthouse wykrywa osadzone elementy firm zewnętrznych, które można odroczyć
Lighthouse wyszukuje produkty innych firm, których wczytywanie można opóźnić, np. widżety przycisków społecznościowych lub umieszczone filmy (np. umieszczony odtwarzacz YouTube).
Dane o produktach, których zakup można odłożyć, i dostępnych fasadach są przechowywane w usłudze third-party-web.
Audyt zakończy się niepowodzeniem, jeśli strona wczyta zasoby należące do jednego z tych elementów osadzonych pochodzących od osób trzecich.
Opóźnianie zewnętrznych stron za pomocą komponentu fasadowego
Zamiast dodawać element do umieszczenia dostarczony przez firmę zewnętrzną bezpośrednio do kodu HTML, wczytaj stronę ze statycznym elementem, który wygląda podobnie do rzeczywistego elementu do umieszczenia dostarczonego przez firmę zewnętrzną. Wzorzec interakcji powinien wyglądać mniej więcej tak:
- Po wczytaniu: dodaj fasadę do strony.
- Po najechaniu kursorem: komponent fasadowy nawiązuje wstępne połączenie z zasobami z innych witryn.
- Po kliknięciu: fasada zostaje zastąpiona produktem innej firmy.
Zalecane fasady
Ogólnie rzecz biorąc, wzorzec fasady można stosować w przypadku osadzonych filmów, widżetów przycisków społecznościowych i widżetów czatu. Wybierając fasadę, weź pod uwagę równowagę między rozmiarem a zestawem funkcji.
Poniżej znajdziesz nasze rekomendacje dotyczące fasad open source. Możesz też użyć narzędzia do leniwego ładowania elementów iframe, np. vb/lazyframe.
Umieszczony odtwarzacz YouTube
Umieszczony odtwarzacz Vimeo
Czat na żywo (Intercom, Drift, Help Scout, Facebook Messenger)
Tworzenie własnej fasady
Możesz utworzyć niestandardowe rozwiązanie fasadowe, które wykorzystuje opisany wcześniej wzorzec interakcji. Fasada powinna być znacznie mniejsza w porównaniu z odroczonym produktem innej firmy i zawierać tylko tyle kodu, aby 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 audytu Leniwe ładowanie zasobów z innych witryn z użyciem komponentu fasadowego.