Zasoby innych firm są często wykorzystywane do wyświetlania reklam lub filmów oraz integracji z mediami społecznościowymi. Domyślnym podejściem jest wczytywanie zasobów zewnętrznych zaraz po wczytaniu strony, ale może to niepotrzebnie spowalniać jej wczytywanie. Jeśli treści innych firm nie są kluczowe, możesz obniżyć ten koszt dzięki leniwemu ładowaniu.
Ten audyt wskazuje umieszczone zewnętrzne strony, które można leniwie ładować podczas interakcji. W takim przypadku w miejscu treści innych firm używany jest fasada, dopóki użytkownik nie wejdzie z nią w interakcję.
Jak Lighthouse wykrywa elementy umieszczone na innych stronach, które można odroczyć
Lighthouse szuka produktów innych firm, które można odroczyć, takich jak widżety przycisków społecznościowych czy umieszczone filmy (np. odtwarzacz YouTube umieszczony na stronie).
Dane o produktach, które można odroczyć, i dostępnych fasadach są przechowywane w sieci zewnętrznej.
Audyt nie powiedzie się, jeśli strona wczyta zasoby należące do jednego z tych umieszczonych przez inne firmy zasobów.
Jak opóźnić realizację stron zewnętrznych za pomocą komponentu fasadowego
Zamiast dodawać do kodu HTML umieszczoną treść należącą do innej firmy, wczytuj stronę za pomocą elementu statycznego, który wygląda podobnie do rzeczywistego elementu zewnętrznego. Wzorzec interakcji powinien wyglądać mniej więcej tak:
Po wczytaniu: dodaj do strony elementy fasadowe.
Po najechaniu kursorem myszy: witryna fasady łączy się wstępnie z zasobami zewnętrznymi.
Po kliknięciu: fasada zastępuje się produktem innej firmy.
Zalecane fasady
Ogólnie rzecz biorąc, umieszczone na stronie filmy, widżety przycisków społecznościowych i widżety czatu mogą wykorzystywać wzór fasadowy. Poniższa lista zawiera nasze rekomendacje dotyczące fasad fasadowych typu open source. Wybierając fasadę, weź pod uwagę równowagę między rozmiarem a zestawem cech. Możesz też użyć leniwego modułu ładowania elementów iframe, takiego jak vb/lazyframe.
Odtwarzacz YouTube umieszczony na stronie
Odtwarzacz umieszczony z Vimeo
Czat na żywo (Intercom, Drift, Help Scout, Facebook Messenger)
Tworzenie własnej fasady
Możesz utworzyć niestandardowe rozwiązanie fasadowe wykorzystujące opisany powyżej wzorzec interakcji. Elewacja powinna być znacznie mniejsza w porównaniu z odroczonym produktem innej firmy i zawierać tylko tyle kodu, aby naśladować wygląd produktu.
Jeśli chcesz, aby Twoje rozwiązanie było na tej liście, zapoznaj się z procesem przesyłania zgłoszeń.
Zasoby
Kod źródłowy leniwego ładowania zasobów zewnętrznych z kontrolą fasad.