Jak leniwie ładować obrazy i filmy w WordPressie (i zamieniać iFrame YouTube na obraz podglądu), aby uzyskać lepsze wyniki GTmetrix

Co jest najlepszym sposobem leniwe ładowanie zdjęć i filmów w WordPress?


Zależy to od tego, czy używasz już wtyczki pamięci podręcznej, która obsługuje opóźnione ładowanie (WP Rocket, W3 Total Cache, Swift, LiteSpeed ​​Cache). Jeśli wtyczka pamięci podręcznej obsługuje leniwe ładowanie zdjęć i filmów, najlepiej jej użyć, aby uniknąć konieczności instalowania dodatkowej wtyczki. Ale jeśli Twoja wtyczka pamięci podręcznej nie obsługuje leniwego ładowania, zalecamy użycie takiej, która to robi (szczególnie WP Rocket), w przeciwnym razie wymieniłem poniżej alternatywne leniwe wtyczki ładowania, które możesz zainstalować osobno.

Co to jest Leniwe ładowanie?
Leniwe ładowanie oznacza, że ​​obrazy i filmy są ładowane tylko wtedy, gdy użytkownik przewinie stronę i faktycznie je zobaczy. Powoduje to mniej żądań HTTP na stronie, jednak jeśli masz dużo obrazów lub osadzonych filmów, to wymaga ciągłego ładowania ich, przewijasz stronę w dół.

Co to znaczy zastąpić iframe YouTube obrazem podglądu?
Jeśli umieścisz wideo na swojej stronie WordPress, spowoduje to załadowanie „grubego odtwarzacza YouTube” po kliknięciu przycisku Odtwórz. Innymi słowy, jedyne, co ładowane jest na początku, to podgląd.

Powinieneś leniwie ładować obrazy i filmy?
Nie leniwie ładuję obrazów, ponieważ ciągłe ładowanie obrazów podczas przewijania strony może być denerwujące dla użytkowników. Jednak wszystkie moje obrazy są zoptymalizowane do 100% w GTmetrix. Leniwie ładuję filmy i zastępuję ramkę iframe obrazem podglądu. Ponieważ ładowanie każdego osadzonego wideo może potrwać 2 sekundy (znacznie cięższe niż obraz), korzyści z leniwego ładowania filmów są znaczące.

1. WP Rocket

WP Rocket to mój wybór nr 1 dla leniwego ładowania i był numerem 1 wtyczki pamięci podręcznej w ankietach na Facebooku.

Ponieważ ma już wbudowane opóźnione ładowanie, oznacza to, że nie musisz instalować dodatkowej wtyczki. To cała korzyść z WP Rocket; ma więcej funkcji niż prawie jakakolwiek inna wtyczka pamięci podręcznej (co skutkuje lepszymi czasami ładowania i wynikami GTmetrix), ale mniej wtyczek na twojej stronie. WP Rocket ma obszerne dokumentacja leniwego ładowania i konfigurowanie ustawień WP Rocket.

WP Rocket

Jak włączyć Lazy Load w WP Rocket
Aby włączyć leniwe ładowanie w WP Rocket, przejdź do Ustawień > WP Rocket > Głoska bezdźwięczna > LazyLoad. Możesz włączyć tę funkcję dla obrazów, ramek i filmów i zastąpić ramki iframe YouTube obrazem podglądu.

Lazy Load Images WP Rocket

2. SG Optimizer

SiteGround wprowadzono leniwe ładowanie w ich dużej aktualizacji SG Optimizer.

Oczywiście, aby korzystać z tej wtyczki, musisz być klientem SiteGround (co zrobiłbym dla hostingu współdzielonego, biorąc pod uwagę, że zostali ocenieni jako gospodarze numer 1 w ponad 20 ankietach na Facebooku). SG Optimizer jest porównywalny z WP Rocket, ale nie ma tak wielu funkcji. Więc jeśli używasz SiteGround dla swojego hosta, nadal wolałbym WP Rocket niż jego SG Optimizer.

SiteGround SG Optimizer

Jak włączyć Lazy Load In SG Optimizer
Aby włączyć leniwe ładowanie w SG Optimizer, przejdź do Ustawień > SG Optimizer > Domyślne ustawienia witryny > Optymalizacja obrazu. Możesz leniwie ładować obrazy, Gravatary, miniatury, responsywne obrazy i widżety. Jeśli masz komentarze na swoim blogu, leniwe ładowanie Gravatars może ogromnie pomóc.

SG Optymalizator Leniwe ładowanie

3. W3 Total Cache

Jeśli już używasz W3 Total Cache, mają również leniwa opcja ładowania.

W3 Total Cache był przez pewien czas uważany za porzucony, ale od tego czasu programista zaczął utrzymywać swoją wtyczkę. Mam obszerny samouczek na temat konfigurowania ustawień Total Cache W3.

Wtyczka W3 Total Cache

Jak włączyć Lazy Load In W3 Total Cache
Aby włączyć ładowanie ładowania w W3 Total Cache, przejdź do Ustawień > Ustawienia główne > Doświadczenie użytkownika > Powolne ładowanie. Włącz to, a następnie przejdź do User Experience > Powolne ładowanie. Wybierz przetwarzanie znaczników obrazu HTML, obrazów tła, wykluczania słów i metody osadzania skryptów.

W3 Leniwe ładowanie pamięci podręcznej ogółem

4. Pamięć podręczna Litespeed

Pamięć podręczna Litepseed powolne ładowanie zrobi to samo (Litespeed to dobrze sprawdzona wtyczka pamięci podręcznej).

Wtyczka LiteSpeed ​​Cache

Jak włączyć Leniwe ładowanie w pamięci podręcznej LiteSpeed
Aby włączyć ładowanie ładowania w LiteSpeed ​​Cache, przejdź do LiteSpeed ​​Cache > Ustawienia > Głoska bezdźwięczna > Ustawienia mediów. Tutaj możesz włączyć leniwe ładowanie obrazów, ramek iframe, wykluczać obrazy, automatycznie żądać optymalizacji za pomocą zadania cron, dołączać wbudowaną bibliotekę JavaScript i przełączać inne ustawienia.

Lazy Załaduj obrazy Filmy Pamięć podręczna Litespeed

5. Szybka wydajność

Szybka wydajność to kolejna wtyczka pamięci podręcznej, która obsługuje leniwe ładowanie. Swift uzyskał świetne recenzje w grupie WordPress Speed ​​Up Facebook, ale recenzje na stronie wtyczek WordPress mają tylko około 4 gwiazdki. Nie wypróbowałem Swift Performance; Jestem całkowicie zadowolony z WP Rocket.

Wtyczka Swift Performance Lite

Jak włączyć leniwe ładowanie w szybkiej wydajności
Aby włączyć ładowanie ładowania w Swift Performance, przejdź do Ustawień > Głoska bezdźwięczna > Leniwy ładunek. Tutaj będziesz mieć możliwość leniwego ładowania obrazów, wykluczania niektórych obrazów i wstawiania leniwych obrazów ładowania.

Leniwe ładowanie obrazów Szybka wydajność

6. Automatyczna optymalizacja

Automatyczna optymalizacja jest często używana w przypadku hostów takich jak GoDaddy i WP Engine, gdzie mają one swój własny wbudowany system buforowania i wtyczki pamięci podręcznej czarnej listy. W tym przypadku (ponieważ chcesz zająć się innymi optymalizacjami prędkości), automatyczna optymalizacja jest zwykle wtyczką do tego celu. Jedną z wielu funkcji jest powolne ładowanie, ale umożliwia także optymalizację czcionek HTML, CSS, JavaScript i Google.

Automatyczna optymalizacja wtyczki

Jak włączyć Lazy Load In Autoptimize
Aby włączyć ładowanie ładowania w funkcji automatycznej optymalizacji, przejdź do Ustawień > Obrazy > Leniwe ładowanie obrazów. Możesz również skorzystać z CDN ShortPixel, który służy do optymalizacji obrazu (to wtyczka, której używam).

Leniwe ładowanie obrazów Automatyczna optymalizacja

7. Smush

Smush to wtyczka do optymalizacji obrazu obsługuje leniwe ładowanie. Został on opracowany przez WPMU, ale osobiście używam ShortPixel do bezstratnej kompresji, ponieważ jest to jedyny używany, który sprawia, że ​​moje obrazy są w 100% w GTmetrix (i przetestowałem wiele wtyczek optymalizacji obrazu).

Wtyczka Smush

Jak włączyć Lazy Load In Smush
Aby włączyć ładowanie ładowania w Smush, przejdź do Smush > Deska rozdzielcza > Leniwy ładunek. Możesz wybrać typy plików, które chcesz ładować leniwie (.jpeg, png, .gif, .svg, iframe) i czy chcesz, aby były włączone dla zawartości, widżetów, miniatur, Gravatars. Ma nawet ustawienia animacji leniwego ładowania.

Smush Lazy Load

8. Lazy Load By WP Rocket

Lazy Load By WP Rocket jest dobry, jeśli nie używasz WP Rocket, ale chcesz leniwie ładować obrazy.

Wtyczka Lazy Load

Jak włączyć Lazy Load w Lazy Load przez WP Rocket
Przejdź do ustawień > LazyLoad. Masz opcję leniwego ładowania obrazów, ramek iframe & filmy i zamień filmy z YouTube na miniatury. Nie ma wielu ustawień do skonfigurowania; Osobiście chciałbym, żeby było ich więcej. Być może dlatego ta leniwa wtyczka ładowania nie ma najlepszych recenzji.

Lazy Load By WP Rocket

9. A3 Leniwy ładunek

A3 Leniwy ładunek obsługuje leniwe ładowanie zarówno zdjęć, jak i filmów.

a3 Lazy Load Plugin

Jak włączyć Leniwe ładowanie w A3 Leniwe ładowanie
Aby włączyć ładowanie ładowanie w A3 Lazy Load, przejdź do ustawień > A3 Leniwy ładunek. Możesz skonfigurować ustawienia leniwego ładowania zdjęć, filmów, ramek iframe, Gravatars i wybrać obszary witryny, które chcesz zastosować leniwe ładowanie (w tym mobilne). Istnieją również opcje włączenia leniwego efektu ładowania, ładowania koloru tła oraz wykluczania adresów URL i typów postów.

a3 Ustawienia Leniwego ładowania

10. BJ Lazy Load

BJ Leniwy ładunek nie wydaje się być dobrze utrzymany, więc prawdopodobnie użyłbym innej wtyczki.

Wtyczka BJ Lazy Load

Jak włączyć Lazy Load w BJ Lazy Load
Aby włączyć ładowanie ładowanie w BJ Lazy Load, przejdź do Ustawienia > BJ Leniwy ładunek. Ustawienia są stosunkowo proste i dają opcję leniwego ładowania obrazów, ramek iframe, Gravatars oraz wykluczania leniwego ładowania z treści, widżetów tekstowych i miniatur postów. Istnieje również opcja dołączenia obrazu zastępczego, progu rzutni i użycia obrazu podglądu w niskiej rozdzielczości podczas leniwego ładowania.

Ustawienia BJ Lazy Load

11. Leniwe ładowanie obrazów

Leniwe ładowanie obrazów jest dobry, jeśli chcesz to zrobić tylko dla obrazów.

Wtyczka Lazy Load for Images

Jak włączyć leniwe ładowanie obrazów
Nie ma żadnych ustawień do skonfigurowania we wtyczce Lazy Load For Images (jest to automatyczne).

12. Leniwe ładowanie filmów

Leniwe ładowanie filmów zamienia osadzone filmy na klikalne obrazy podglądu.

Wtyczka Lazy Load for Videos

Jak włączyć leniwe ładowanie w leniwym ładowaniu filmów
Aby włączyć ładowanie ładowania w Lazy Load For Video, przejdź do Ustawień > Leniwe ładowanie filmów. Wybierz ładowanie CSS / JS tylko w razie potrzeby, dostosuj przycisk odtwarzania i zastosuj niestandardowy CSS.

Wtyczka Lazy Load For Video

13. Leniwe ładowanie komentarzy

Możesz leniwie ładować komentarze za pomocą Leniwe ładowanie komentarzy podłącz.

Może to pomóc w tworzeniu mniejszej liczby żądań HTTP, jeśli masz dużo komentarzy na swoim blogu, zwłaszcza że Gravatars może długo ładować się między wszystkimi żądaniami stron trzecich.

Leniwe ładowanie wtyczki komentarzy

Jak włączyć leniwe ładowanie w leniwym ładowaniu komentarzy
Aby włączyć ładowanie ładowanie w Leniwe ładowanie komentarzy, przejdź do Ustawień > Dyskusja > Leniwe ładowanie komentarzy. To jedyna konfiguracja ustawień dla tej wtyczki, ale ma dobre recenzje.

Leniwe ładowanie komentarzy

14. WP YouTube Lyte

WP YouTube Lyte jest jedną z moich ulubionych (i najlepiej ocenianych) wtyczek do leniwego ładowania filmów. Został stworzony przez zespół z Autoptimize, który zazwyczaj ma dobre recenzje wtyczek dookoła.

Wtyczka WP YouTube Lyte

Jak włączyć Lazy Load In WP YouTube Lyte
Aby włączyć ładowanie ładowania w WP YouTube Lyte, przejdź do Ustawień > WP YouTube Lyte. Złap swój Klucz API YouTube i wprowadź go w opcji Autoptimize. Wybierz rozmiar odtwarzacza, czy chcesz dołączać linki, pozycję odtwarzacza, wymuszać HD, działać jak zwykły link / iframe YouTube i dodawać mikrodane. Lokalne buforowanie miniatur może często naprawić błędy GTmetrix podczas osadzania filmów z YouTube.

Miniatury YouTube GTmetrix

Wp YouTube Lyte Settings

Nadal potrzebujesz pomocy?

Mam świetne wideo na temat optymalizacji prędkości WordPress:

Mam również samouczki dotyczące optymalizacji obrazów, konfiguracji WP Rocket, skrócenia czasu reakcji serwera i innych. Jestem w stanie uzyskać 100% (lub zbliżone) wyniki GTmetrix dla prawie każdego z moich postów, korzystając z tych wskazówek. Jeśli masz pytania, napisz do mnie komentarz – chętnie pomogę!

Często Zadawane Pytania

&# x2705; Która wtyczka jest najlepsza do leniwego ładowania zdjęć?

Jeśli już używasz wtyczki pamięci podręcznej, która obsługuje leniwe ładowanie (np. WP Rocket, SG Optimizer, W3TC, Swift, LiteSpeed), najlepiej wypróbuj to najpierw. W przeciwnym razie Autoptimize lub wtyczka Lazy Load firmy WP Rocket to dobre wtyczki leniwe.

&# x2705; Co powiesz na leniwe ładowanie filmów?

WP Rocket i niektóre inne wtyczki pamięci podręcznej pozwalają leniwie ładować filmy i zastępować iframe YouTube obrazem podglądu. W przeciwnym razie WP YouTube Lyte będzie działać.

&# x2705; Leniwe ładowanie będzie miało negatywny wpływ na wygodę użytkownika?

Nie leniwie ładuję zdjęć na tej stronie, ale leniwie ładuję filmy, ponieważ ładowanie ich trwa znacznie dłużej. Leniwe ładowanie zdjęć może być denerwujące dla użytkowników i zmniejszać moją sprzedaż partnerską, więc ją wyłączyłem.

&# x2705; Co robi leniwe ładowanie?

Leniwe ładowanie przyspiesza początkowe czasy ładowania, czekając na załadowanie zdjęć i filmów, dopóki użytkownicy nie przewiną strony i nie zobaczą ich.

&# x2705; Jak wyłączyć leniwe ładowanie na określonych stronach?

Większość wtyczek pozwala to zrobić. Na przykład, jeśli używasz WP Rocket i edytujesz stronę lub post, zobaczysz opcję na pulpicie nawigacyjnym, aby wyłączyć (lub włączyć) leniwe ładowanie tego konkretnego fragmentu treści.

Twoje zdrowie,
Tomek

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map