Doktorat N. E. Lavlinsky, dyrektor techniczny, Method-Lab LLC 
Najpopularniejszym i najpopularniejszym rodzajem treści jest dziś wideo. Zdecydowana większość filmów prezentowana jest w postaci dołączonych elementów dowolnego hostingu wideo. Liderem wśród serwisów hostingowych jest YouTube, który zapewnia standardowy widget odtwarzacza w postaci ramki iframe do umieszczenia na stronach witryny. Wybór tej metody umieszczania jest zazwyczaj uzasadniony i optymalny, ponieważ pozwala na poprawne działanie odtwarzacza wideo na dowolnych urządzeniach i prędkościach kanałów internetowych.
Ale, jak to często bywa, zalety decyzji nie przychodzą same. Dla wygody i braku problemów musisz zapłacić pobierając dużą ilość kodu i dodatkowe połączenia z przeglądarką.
Przyspiesz widżety YouTube
Najpierw zajmijmy się istotą problemu: podczas ładowania strony, oprócz elementów niezbędnych dla samej strony, ładujemy dużą ilość JS-code YouTube (460 KB w skompresowanej formie, 1,5 MB w rozpakowanym). Nawet jeśli ten kod zostanie załadowany w trybie asynchronicznym, mamy przeciąganie, gdy strona jest rysowana z powodu obciążenia procesora i kanał jest pełny, gdy kod jest ładowany. Jeśli weźmiesz pod uwagę urządzenia mobilne, ta ilość kodu JS może poważnie spowolnić działanie witryny.
Ten film nie musi być odtwarzany natychmiast po odwiedzeniu strony. Z reguły przed tym filmem znajduje się tekst towarzyszący, inne elementy wymagające uwagi. Okazuje się, że pobieranie ciężkiego gracza można odłożyć do momentu rozpoczęcia oglądania tego filmu. Logiczne jest powiązanie momentu ładowania odtwarzacza z kliknięciem na obraz powitalny wideo. Opóźnienie ładowania odtwarzacza nie będzie krytyczne dla użytkownika, ponieważ jest on gotowy do opóźnienia z powodu buforowania samego wideo.
Wdrożenie
Aby wdrożyć odroczone ładowanie, możesz użyć YouTube JS API lub jQuery-plugin lazy load lazyYT.
Korzystanie z YouTube JS API pozwala w pełni kontrolować zachowanie odtwarzacza wideo na stronie, ale wymaga dość skomplikowanych manipulacji do użycia na stronie.
Druga opcja z lazyYT jest znacznie łatwiejsza do wdrożenia. Aby go użyć, musisz pobrać i podłączyć wtyczkę na stronie (kod js i css) z wideo (wymagane jest również jQuery).
Ponadto zamiast wynikowego kodu iframe wstawiamy następujący element:
Parametry wymagane do utworzenia odtwarzacza są przekazywane jako atrybuty znacznika div formularza „data-”. Na przykład data-youtube-id jest identyfikatorem wideo na YouTube, parametry danych są parametrami odtwarzacza.
Ta warstwa otrzyma miniaturowy obraz wideo z YouTube i pokaże go jako tło bloku. Klikając na zdjęcie, zwykły odtwarzacz załaduje się i rozpocznie się odtwarzanie wideo.
Zastosowanie tak prostej techniki znacznie zwiększy poczucie szybkości witryny wśród użytkowników. Zwłaszcza przy włączaniu dużej liczby filmów na jednej stronie.
Wady tego rozwiązania obejmują niestabilne zachowanie YouTube w stosunku do miniatur wideo (ekranów powitalnych). Wtyczka, w zależności od wielkości warstwy, próbuje pobrać wysokiej jakości wersję obrazu, która może być nieobecna na YouTube. W tym przypadku, w miejscu ekranu powitalnego, zobaczymy nieokreślony skrót rozciągnięty do rozmiaru bloku. Możesz rozwiązać ten problem, wprowadzając niewielką modyfikację wtyczki i przesyłając jej adres obrazu (a tym samym eliminując potrzebę łączenia się z YouTube przed rozpoczęciem odtwarzania).
Dla profesjonalistów przyspieszenie witryn skontaktuj się z nami.