Osadzenie YouTube pobiera wlasne skrypty odtwarzacza oraz miniature podgladowa w momencie zaladowania, a na stronie z kilkoma filmami szybko sie to sumuje. Oto jak zachowac szybkosc bez rezygnacji z osadzonego wideo.
Dlaczego osadzenia wplywaja na szybkosc strony
Jeszcze zanim odwiedzajacy nacisnie play, osadzony iframe zada zasobow odtwarzacza YouTube oraz obrazu miniatury. Na stronie z recenzja zawierajacej piec osadzonych filmow to piec zestawow zadan wystrzeliwujacych jednoczesnie przy zaladowaniu strony, konkurujacych z zasobami Twojej wlasnej strony o przepustowosc i czas renderowania.
Rozwiazanie 1: natywne leniwe ladowanie
Najprostsza naprawa to pojedynczy atrybut HTML. Dodanie loading=”lazy” do <iframe> mowi przegladarce, aby odlozyla jego zaladowanie do momentu, gdy zbliza sie do widocznego obszaru:
<iframe src="..." loading="lazy" ...></iframe>Jest to wspierane przez wszystkie nowoczesne przegladarki, nie wymaga JavaScript i jest pojedyncza zmiana o najwiekszej wartosci dla strony z osadzonym wideo ponizej widocznego obszaru.
Rozwiazanie 2: kliknij, aby zaladowac
Dla stron z wieloma osadzeniami jeszcze bardziej zdecydowana opcja to niezaladowanie zadnego iframe, dopoki odwiedzajacy go nie kliknie. Pokaz statyczny obraz miniatury, pobrany z publicznych adresow miniatur YouTube, z nakladka przycisku odtwarzania, a rzeczywisty iframe wstaw dopiero po kliknieciu. Oznacza to zero zadan do YouTube dla filmow, ktorych odwiedzajacy nigdy faktycznie nie odtworzyl.
Rozwiazanie 3: autoodtwarzanie tylko tam, gdzie naprawde potrzebne
Autoodtwarzanie filmu dodaje realna prace w momencie zaladowania strony: odtwarzacz musi natychmiast buforowac zamiast czekac na intencje uzytkownika. Zarezerwuj autoodtwarzanie dla naprawde waznych osadzen, a dla reszty polegaj na leniwym ladowaniu i widocznym przycisku odtwarzania.
Mierzenie wplywu
Narzedzia takie jak Google PageSpeed Insights czy panel Lighthouse we wlasnej przegladarce beda bezposrednio oznaczac niezoptymalizowane osadzenia zewnetrzne i pozwola porownac czasy ladowania przed i po zastosowaniu leniwego ladowania. Na stronach z wieloma filmami roznica jest zwykle latwo widoczna zarowno w liczbach, jak i w odczuwalnej szybkosci ladowania.
Wbudowane domyslnie
Nasz generator kodu osadzania domyslnie dodaje loading=”lazy” do kazdego wygenerowanego osadzenia, wiec ta optymalizacja jest juz zalatwiona w chwili skopiowania kodu.