Chcesz dowiedzieć się, jak zaimplementować leniwe ładowanie w WordPressie?

Jeśli Twoja witryna WordPress w dużej mierze opiera się na treści wizualnej, może być konieczne dodanie do niej funkcji Lazy Loading. Ta funkcja WordPress pomaga poprawić szybkość i wydajność strony internetowej, dzięki czemu jest niezbędna dla Twoich działań SEO.

W tym artykule omówimy, jak działa Lazy Loading, a także jego zalety i wady. Dowiesz się również, jak zaimplementować go na swojej stronie internetowej i jak zoptymalizować jego wykorzystanie w celu uzyskania najlepszych rezultatów.

Bez zbędnych ceregieli zapraszamy do zapoznania się z naszą listą Motywy WordPress. Ale wcześniej, jeśli nigdy nie instalowałeś WordPress, odkryj Jak zainstalować WordPress blogu kroki 7 et Jak znaleźć, zainstalować i aktywować WordPress na swoim blogu 

Wróćmy do tego, dlaczego tu jesteśmy.

Co to jest leniwe ładowanie?

Jest to funkcja, która pozwala stronie internetowej ładować tylko obrazy widoczne dla użytkownika. Pomaga witrynie utrzymać szybką prędkość ładowania, nie przesyłając obrazów poza obszar wyświetlania.

Jak działa leniwe ładowanie WordPressa?

Gdy użytkownik odwiedza witrynę WordPress, jego przeglądarka jednocześnie pobiera wszystkie obrazy na stronie. W przypadku stron zawierających wiele obrazów w wysokiej rozdzielczości proces ten może znacznie skrócić czas ładowania, co może negatywnie wpłynąć na wydajność witryny.

Dodanie Lazy Loading do Twojej witryny powoduje, że pobiera ona tylko obrazy widoczne na ekranie użytkownika. Pozostałe pliki multimedialne są zastępowane obrazem zastępczym i ładowane tylko wtedy, gdy użytkownik przewinie stronę internetową.

Zalety i wady leniwego ładowania WordPressa

Jeśli nadal zastanawiasz się, czy powinieneś wdrożyć leniwe ładowanie obrazu w WordPressie, oto zalety i wady tej funkcji:

Zalety:

  • Zmniejsza wykorzystanie przepustowości, zmniejszając koszty hostingu.
  • Poprawia szybkość strony internetowej, poprawiając w ten sposób przeglądanie przez odwiedzających.
  • Poprawia wrażenia mobilne.
  • Poprawia wysiłek SEO, podnosząc pozycję Twojej witryny w wyszukiwarkach.

przed:

  • Powoduje buforowanie treści, co wpływa na szybkość ładowania.
  • Spowalnia szybkie przewijanie.

Jak dodać leniwe ładowanie do swojej witryny WordPress: 3 metody

Istnieją trzy sposoby na zaimplementowanie leniwego ładowania w witrynie WordPress. Zalecamy wybór metody, która najlepiej pasuje do Twojej sytuacji.

1. Zaktualizuj do WordPress 5.4 lub nowszy

WordPress w wersji 5.4 i nowszych domyślnie obsługuje leniwe ładowanie. Aktualizacja WordPressa do najnowszej wersji będzie automatycznie wspierać leniwe ładowanie.

Chociaż jest to najłatwiejsza metoda, nie pozwala na skonfigurowanie, które obrazy mają ładować się leniwie. W związku z tym Twoja witryna może nadużywać tej funkcji, przejawiając powyższe wady.

Innym czynnikiem, który należy wziąć pod uwagę, jest inny charakter funkcji Lazy Loading w każdej wersji WordPressa. Niedawno WordPress wydał nową wersję WordPressa, która wprowadza ulepszenia mające na celu rozwiązanie problemów ze słabymi ogólnymi wynikami treści ze starszych wersji.

Oznacza to, że strony internetowe działające na starszych wersjach WordPressa nie uzyskują takich samych korzyści, jak te korzystające z WordPressa 5.9, który jest najnowszą wersją.

2. Włącz natywne leniwe ładowanie przez przeglądarkę

Popularne przeglądarki, takie jak Chrome, Firefox i Opera, obsługują leniwe ładowanie. Wystarczy dodać atrybut do docelowych obrazów i filmów, aby aktywować je automatycznie.

W natywnym leniwym ładowaniu WordPressa atrybut ładowania obsługuje te trzy wartości:

  • Samochody : domyślnie wyzwala leniwe ładowanie, co jest równoznaczne z nieuwzględnianiem atrybutu ładowania.
  • leniwy : Rozkłada ładowanie zasobów, aż każdy osiągnie określoną odległość od rzutni.
  • Chętny : ładuje wszystkie zasoby natychmiast po załadowaniu strony, niezależnie od ich lokalizacji.

Oto przykład użycia:

<img src=”nom-image.png” loading=”lazy” alt=”alt attribute” width=”800″ height=”411″>

Ta metoda jest świetna do leniwego ładowania niektórych obrazów, dając każdemu atrybut ładowania, który dyktuje, kiedy pojawiają się w widocznym obszarze. Jednak leniwe ładowanie poszczególnych obrazów może trochę potrwać, zwłaszcza jeśli Twoja witryna zawiera wiele plików multimedialnych.

3. Zainstaluj wtyczkę WordPress

Ponieważ nie wszystkie przeglądarki obsługują leniwe ładowanie obrazów i filmów, druga metoda może nie działać przez cały czas. Możesz złagodzić ten problem instalując wtyczkę WordPress Lazy loading. Ta metoda daje większą kontrolę nad tym, które obrazy należy ładować leniwie bez kodowania.

Oto najlepsze wtyczki WordPress leniwego załadunku do wyboru, dostępne przez katalog WordPress wtyczki.

Popraw szybkość ładowania swojej witryny

Jedną z dobrych rzeczy w tej wtyczce WordPress jest to, że obsługuje ona wszystkie typy obrazów, w tym AVIF. Ta leniwa wtyczka WordPress freemium zapewnia optymalizację i aktualizację. skala obrazu dostosować je do urządzeń zwiedzających, zapewniając: doświadczenie użytkownika optymalny.

wdrożyć leniwe ładowanie

Gdy wykryje wolniejszą sieć, ta wtyczka WordPress daje możliwość obniżenia jakości obrazu. Co więcej, możesz zaoszczędzić miejsce do przechowywania, przechowując obrazy w bibliotece w chmurze tej wtyczki WordPress.

Ta bezpłatna wtyczka umożliwia optymalizację obrazów do 5 miesięcznych wizyt. Zakup planu Pro umożliwi leniwe ładowanie obrazów dla 000 25 aktywnych użytkowników miesięcznie i nie tylko. Obrazy dla obu planów są udostępniane przez CDN AWS ​​Cloudfront.

Pobierz | Demo | hosting

Smush

Smush to popularna wtyczka do optymalizacji obrazu, która obsługuje leniwe ładowanie. Jest kompatybilny z Motywy WordPress popularne, wtyczki do tworzenia stron i biblioteki multimediów. Co więcej, pozwala zapisywać ustawienia wtyczek w nieograniczonych konfiguracjach i stosować je za pomocą zaledwie kilku kliknięć.

wdrożyć leniwe ładowanie

Inne przydatne funkcje to wykrywanie nieprawidłowego rozmiaru obrazu, obsługa wielostanowiskowa oraz narzędzia do kompresji obrazu. Aktualizacja do Smush Pro umożliwia optymalizację dużych obrazów bez ograniczeń rozmiaru, zapisywanie oryginalnych obrazów i dostęp do innych wtyczek WPMU Pro. Ceny zaczynają się od 5 $ / miesiąc.

Pobierz | Demo | hosting

a3 Lazy Load

a3 Lazy Load to darmowa wtyczka leniwego ładowania zorientowana na urządzenia mobilne. Jest w pełni kompatybilny z WordPress 5.9 i wieloma popularnymi narzędziami, w tym wtyczkami WebP i AMP.

wdrożyć leniwe ładowanie

Oprócz oferowania podstawowej funkcji leniwego ładowania, a3 Lazy Load umożliwia również leniwe ładowanie filmów, w tym filmów osadzanych na stronach, postach, niestandardowych typach postów i widżetach. Dostępne są również efekty leniwego ładowania oraz możliwość ładowania skryptów z nagłówka lub stopki.

Inne godne uwagi funkcje, takie jak obsługa wielu witryn, obsługa obrazów WebP i leniwe ładowanie iframe – dotyczy to ramek iframe, których rdzeń WordPress nie ładuje, takich jak Mapy Google i osadzone media.

Pobierz | Demo | hosting

Wskazówki dotyczące leniwego ładowania WordPress

Kluczem do maksymalnego wykorzystania leniwego ładowania jest jego prawidłowe używanie. Oto kilka wskazówek, jak skonfigurować leniwe ładowanie w witrynie WordPress:

  • Nie leniwe ładowanie obrazów nagłówka. Ponieważ obrazy umieszczone na górze strony są widoczne podczas ładowania, ich leniwe ładowanie nie przynosi żadnych korzyści.
  • Wybierz odpowiednie symbole zastępcze. Zalecamy użycie jednolitego koloru lub obrazu o niskiej jakości jako miejsca zastępczego dla obrazów.
  • Dodaj czas buforowania do ładowania obrazu. W ten sposób Twoje obrazy są gotowe tuż przed wejściem do okna dla odwiedzających, eliminując czas oczekiwania.
  • Zdefiniuj wymiary kontenerów obrazów. Pomoże to uniknąć nagłych zmian w układzie, które sprawią, że Twoja strona będzie wyglądać schludnie podczas ładowania.
  • Zaimplementuj leniwe ładowanie tylko na długich stronach. Długie strony obejmują te, które wymagają więcej niż dwóch obrotów, aby dotrzeć do końca i mają więcej niż pięć obrazów.

Lazy loading w WordPress pozwala zapewnić odwiedzającym lepsze wrażenia podczas przeglądania. Oprócz poprawy szybkości witryny ta funkcja zmniejsza również wykorzystanie przepustowości. Podsumowując, pomaga to w wysiłkach SEO w celu uzyskania lepszych pozycji w wynikach wyszukiwania.

Inne zalecane zasoby

Zachęcamy również do zapoznania się z poniższymi zasobami, aby przejść dalej w zakresie kontroli nad witryną i blogiem.

Wnioski

To wszystko w tym samouczku, który pokazuje, jak zaimplementować Lazy Loading w witrynie WordPress. Mamy nadzieję, że ten artykuł pomógł Ci zrozumieć, jak w pełni wykorzystać funkcję leniwego ładowania w witrynach WordPress. Pamiętaj, aby użyć Hosting WordPress wysoka jakość, aby jeszcze bardziej poprawić wydajność Twojej witryny.

Jeśli masz jakieś wątpliwości lub sugestie, daj nam znać commentaires.

Będziesz jednak mógł również skonsultować się z nami Zasoby, jeśli potrzebujesz więcej elementów do realizacji projektów tworzenia stron internetowych, zapoznaj się z naszym przewodnikiem na stronie Tworzenie bloga WordPress lub ten na Divi: najlepszy motyw WordPress wszechczasów.

Tymczasem udostępnij ten artykuł w różnych sieciach społecznościowych.   

...