Lazy Load Video na WordPressie

Chcesz leniwie załadować wideo na WordPress?

Media są tak skuteczną strategią, która sprawia, że ​​Twoje treści są ekscytujące.

Rzeczy takie jak obrazy i filmy mogą naprawdę ożywić to, co masz do powiedzenia w swojej witrynie.

Jedynym minusem jest to, że pliki multimedialne są duże i ładowanie trwa dłużej niż tylko tekst.

Jeśli korzystasz z WordPressa od jakiegoś czasu i kładziesz nacisk na optymalizację szybkości i upewnienie się, że wszystkie Twoje strony ładują się tak szybko, jak to możliwe, prawdopodobnie słyszałeś o leniwym ładowaniu.

Czym na świecie jest Lazy Loading?

Lazy loading to proces opóźniania faktycznego ładowania treści do momentu, gdy stanie się ona widoczna w widocznym miejscu użytkownika. Widoczny obszar to obszar w przeglądarce, który użytkownik przegląda podczas przewijania Twojej strony internetowej.

Dostępnych jest wiele wtyczek WordPress, które umożliwiają Lazy ładowanie obrazów na każdej stronie Twojej witryny. Oznacza to, że jeśli masz obrazy, które znajdują się dalej na stronie internetowej, nie zostaną one w pełni załadowane, dopóki odwiedzający nie zetknie się z tym obszarem strony.

Ten proces jest niezwykle skuteczny w przyspieszaniu czasu ładowania adresu URL w Twojej witrynie.

Istnieją dwa główne czynniki podczas ładowania strony internetowej w stosunku do faktycznego czasu, jaki zajmuje. To jest czas Onload i czas pełnego załadowania.

Proszę zapoznać się z poniższym wyjaśnieniem różnicy między nimi.

Co to jest czas obciążenia?

Onload Time oblicza prędkość po zakończeniu przetwarzania strony i zakończeniu pobierania wszystkich zasobów na tej konkretnej stronie, takich jak obrazy, CSS i inne funkcje.

Po zakończeniu strona uruchomi window.onload, aby zakończyć wyniki dotyczące szybkości. Onload Time to prawdziwa reprezentacja tego, jak szybko Twoja witryna będzie się poprawnie ładować.

Jednak jedną poważną usterką wykrytą w funkcji Onload Time jest to, że niektóre elementy ładowania strony mogą nie zdążyć przed uruchomieniem zdarzenia wyzwalającego, takie jak pliki JavaScript, karuzele obrazów lub funkcja/treść jest ustawiona na opóźnienie czasowe, więc ładunki w określonej kolejności.

Zmienne te spowodują niespójne czasy ładowania strony, a nawet mogą błędnie zgłaszać, że Twoja witryna jest szybsza/wolniejsza niż w rzeczywistości.

Co to jest czas pełnego obciążenia?

Biorąc pod uwagę to, czego nauczyliśmy się o „Czasie ładowania”, „Czas pełnego załadowania” wykorzystuje dokładnie ten sam proces do rejestrowania szybkości strony, ale dodaje dodatkowe dwie sekundy po uruchomieniu wyzwalacza „Onload”, aby upewnić się, że nie ma dalszej aktywności w sieci. Powodem tego jest zapewnienie większej spójności z testami.

Jednym z możliwych problemów z testowaniem czasu pełnego załadowania jest to, że to zdarzenie jest uruchamiane tylko wtedy, gdy strona całkowicie przestaje wczytywać treść, w tym reklamy i inne funkcje.

Jeśli więc Twoja witryna została załadowana przed punktem odcięcia i nadal nadaje się do użytku, narzędzie testowe nadal będzie czekać, aż cała witryna przestanie ładować dane, co ponownie może prowadzić do niespójnych wyników testów prędkości.

Czy masz pełną kontrolę nad czasem ładowania?

Poniżej znajduje się ładna, prosta grafika ilustrująca rzeczy, na które należy zwrócić uwagę podczas odwiedzania witryny oraz wszystkie elementy, które łączą się, aby zdecydować, jak szybko się ładuje.

Jak widać na powyższym obrazku, niektóre rzeczy są poza twoją kontrolą. Na przykład prędkość dostawcy usług internetowych osoby odwiedzającej Twoją witrynę jest całkowicie poza Twoją kontrolą.

Jeśli chcesz wycisnąć jak najwięcej prędkości ze swojej witryny WordPress, musisz skupić się na rzeczach, nad którymi masz kontrolę.

Optymalizacja prędkości WordPress Rzeczy, nad którymi masz kontrolę

1. Środowisko hostingowe
2. Aktualizacje oprogramowania
3. Aktywny motyw
4. Aktywne wtyczki
5. Optymalizacja treści

Wróćmy do Lazy Load Video na WordPress

Tak więc na powyższej liście na temat optymalizacji prędkości WordPress rzeczy, które masz kontrolę nad ostatnią pozycją na liście, to optymalizacja treści.

Oznacza to upewnienie się, że cała zawartość Twojej witryny została zoptymalizowana, aby ładować się tak szybko, jak to możliwe, bez zmiany jakiejkolwiek funkcjonalności lub sposobu wyświetlania treści.

Przyjrzyjmy się temu szczegółowo i pozwól nam pokazać różnicę w szybkości między filmem, który był tradycyjnie osadzony, jak większość ludzi w ich witrynie, a filmem, który został skonfigurowany do leniwego ładowania.

Eksperyment zaczyna się tutaj

Poszliśmy dalej i stworzyliśmy domyślną instalację WordPressa, a w niej oddzielne strony.

Jedna strona ma osadzony film z YouTube, który został osadzony przy użyciu natywnej opcji osadzania rdzenia WordPress, po prostu umieszczając link do filmu YouTube w edytorze Gutenberg. Spowoduje to wygenerowanie osadzonych na stronie wideo YouTube.

Druga strona to ten sam film, ale skonfigurowany zbyt leniwy ładowanie, co oznacza, że ​​rzeczywisty kod wideo nie zostanie uruchomiony i uruchomiony, dopóki odwiedzający nie naciśnie przycisku odtwarzania.

Spójrz poniżej na oszałamiające różnice między dwoma procesami wyświetlania wideo w treści WordPress.

Przykład osadzonej strony wideo

Poniższy obraz to test wizualizacji prędkości wykonany w GTmetrix strony, która miała osadzony tradycyjny film z YouTube.

Proszę zwrócić szczególną uwagę na czas onload i czas pełnego załadowania poniżej.

Poniższy obrazek to lista procesów, które miały miejsce podczas ładowania tej strony. Proszę zwrócić uwagę na całkowitą liczbę próśb.

Przykład strony Lazy Load Video

Poniższy obraz jest testem wizualizacji szybkości wykonanym w GTmetrix strony, która zawierała osadzony film o leniwym wczytywaniu.

Proszę zwrócić szczególną uwagę na czas onload i czas pełnego załadowania poniżej. To mniej niż 1 sekunda czasu ładowania i porównanie z ponad 1 sekundą dla tradycyjnie osadzonego wideo.

Czas pełnego załadowania jest również krótszy niż 1 sekunda w porównaniu do ponad 3 sekundowego czasu pełnego załadowania tradycyjnie osadzonego wideo.

Możesz zobaczyć w kaskadzie testu prędkości poniżej, że podczas wczytywania strony jest wywoływanych o 21 żądań mniej, ponieważ leniwie załadowaliśmy osadzony film.

Jedną z najlepszych rzeczy, które możesz zrobić, aby przyspieszyć działanie dowolnej strony internetowej, jest obniżenie żądania. Im więcej żądań potrzebuje strona do załadowania, oznacza to, że potrwa to dłużej.

Skrypty i style potrzebne do załadowania odtwarzacza wideo będą nadal obowiązywać, ale dopiero wtedy, gdy użytkownik naciśnie przycisk odtwarzania na filmie.

Jest to niezwykle potężne, ponieważ wyobraź sobie, że jeśli odwiedzający wchodzi na Twoją stronę i nigdy nie odtwarza wideo, oznacza to, że ładujesz zasoby, które nigdy nie będą używane przez odwiedzającego.

Teraz wiesz, że Lazy Load Video na WordPress jest dobre… CO DALEJ?

Wyjaśniliśmy już wcześniej, że istnieje wiele wtyczek WordPress, które umożliwiają leniwe ładowanie obrazów w Twojej witrynie, ale nie ma wielu wtyczek, które pozwalają to zrobić w przypadku filmów.

Jedyne BEZPŁATNE wtyczki skupiające się na leniwym ładowaniu filmów w Twojej witrynie WordPress to wtyczka Lazy Load for Videos i a3 Lazy Load, o których możesz dowiedzieć się więcej, klikając poniższe obrazy.

Istnieje kilka dodatkowych wtyczek do optymalizacji prędkości, które zawierają tę funkcję, która pozwoli Ci leniwie ładować filmy z YouTube lub iFrames. Zobacz nazwy tych wtyczek poniżej.

1. Swift Performance Pro
2. Rakieta WP

Wtyczki sprawiają, że nie jest leniwy Załaduj wideo na WordPress

W większości przypadków będziesz mógł użyć jednej z wyżej wymienionych wtyczek do leniwego ładowania wideo na WordPress. Są jednak sytuacje, w których to, co próbujesz leniwie ładować, nie jest kompatybilne z funkcjami oferowanymi przez te wtyczki.

Te leniwe wtyczki WordPress do filmów często integrują się tylko z YouTube i Vimeo. Istnieje wiele innych rozwiązań do hostingu wideo, z których możesz korzystać.

W tym miejscu mamy alternatywne rozwiązanie, które pozwoli Ci wziąć dowolny fragment kodu iFrame i przekształcić go w arcydzieło leniwego ładowania na Twojej stronie internetowej.

SUPER FAJNE DARMOWE narzędzie do leniwego ładowania wideo na WordPress

Istnieje super fajne, łatwe i bezpłatne narzędzie online, w którym możesz pobrać dowolny adres URL z obsługą iFrame i skonfigurować fragment kodu, który będzie leniwy ładowany.

Ta opłata nazywa się IFRAMELY i można z niej korzystać bezpłatnie pod adresem https://iframely.com/embed

Poniższy obrazek to zrzut ekranu narzędzia do osadzania IFRAMELY, które pomoże Ci wygenerować kod do osadzania potrzebny do umieszczenia na Twojej stronie internetowej i leniwego ładowania wideo na WordPress.

Tylko pakowanie

Mamy nadzieję, że ten post był przydatny i pomógł Ci zrozumieć wzrost prędkości, który można osiągnąć w witrynie WordPress, gdy zdecydujesz się leniwie ładować filmy, których używasz w swoich treściach.

Jeśli masz jakiekolwiek pytania dotyczące tego, co zostało tutaj omówione, prosimy o komentarz poniżej.