Jedną z sugestii wydajności Google PageSpeed Insights jest odroczenie obrazów offscreen w WordPress z leniwym ładowaniem.

Leniwe ładowanie obrazów w WordPress obniża początkowy czas ładowania i obciążenie strony, bez poświęcania zawartości. Leniwe Ładowanie poprawia wrażenia odwiedzających, służąc tylko tym, czego potrzebują odwiedzający, gdy tego potrzebują. Jest to o wiele bardziej wydajne niż podejście load-all-the-images-just-in-case, które skutkuje powolnym obciążeniem obrazu.

W tym poście pokażę Ci, jak leniwe ładowanie może poprawić wydajność strony i jak to działa. Następnie przyjrzymy się, jak leniwie ładować obrazy w WordPress.

Co To jest leniwe Ładowanie?

Leniwe Ładowanie to technika poprawiająca początkową szybkość i ładunek strony poprzez odroczenie ładowania niekrytycznych zasobów, które są “poniżej” lub innymi słowy, wszystko, co nie jest obecnie w widoku przeglądarki. Aby odroczyć obrazy offscreen w WordPress zasadniczo oznacza poczekać, aby załadować obrazy, których jeszcze nie widzimy.

Zauważ, że powiedziałem aktywa, a nie obrazy, ponieważ wiele rzeczy na twojej stronie internetowej może być leniwych załadowanych, o ile nie są one potrzebne do serwowania układu witryny i górnej części strony internetowej, którą pierwszy widzi odwiedzający.

Obrazy są idealnym sposobem na leniwe ładowanie, ponieważ są tak zasobochłonne. Filmy, skrypty i komentarze są również idealnymi kandydatami, ponieważ mają tendencję do dodawania dużej wagi do strony internetowej.

W przypadku leniwego ładowania zasób nie ładuje się, dopóki nie jest potrzebny moment, ale jeśli użytkownik nigdy go nie osiągnie, nigdy nie zostanie załadowany.

Dlaczego leniwe ładowanie jest lepsze niż zwykłe ładowanie?

Leniwe ładowanie zdjęć w WordPress poprawia wydajność witryny, SEO i wrażenia użytkownika.

Leniwe Ładowanie serwuje dużo lżejsze początkowy strony internetowej i dodaje elementy w razie potrzeby. Dzięki leniwemu ładowaniu przeglądarka najpierw zbuduje DOM, aby użytkownik mógł rozpocząć interakcję z Twoją witryną, nawet gdy pełna strona nie zostanie załadowana.

Leniwe ładowanie nie powoduje zmniejszenia rozmiaru plików graficznych ani rozmiaru strony internetowej. Jeśli masz rozmiar strony 3MB, tak duża będzie Twoja strona z leniwym ładowaniem lub bez niego. To nie jest jak kompresowanie obrazów. Ale leniwe Ładowanie znacznie poprawi sposób, w jaki użytkownik postrzega Twoją witrynę. Informatyka feels szybciej, a to może wystarczyć, aby utrzymać je na stronie.

Google wykorzystuje również strony peed jako czynnik rankingowy i zaleca leniwe ładowanie obrazów w celu poprawy wydajności. Wiemy również, że Google nagradza szybsze witryny z wyższymi rankingami, więc leniwe ładowanie zdjęć jest sposobem na pośrednio poprawę SEO obrazu.

Screenshot 89 Google Pagespeed Score Lazy Loading Example
Przed aktywacją Smush Pro leniwe Ładowanie

Stworzyłem stronę z kilkoma ogromnymi obrazkami. Przeprowadziłem audyt mojej witryny testowej na Google PageSpeed Insights, a mój wynik wzrósł z 89 do 91, dodając leniwe ładowanie za pomocą Smush Pro (tak, Smush ma teraz leniwe Ładowanie). To może nie wydawać się dużo, ale to jest różnica między średni (50-89) i szybki (90-100) moi przyjaciele.

Screenshot 91 Google Pagespeed Score Lazy Loading Example
Po aktywacji Smush Pro lazy loading

Leniwe Ładowanie również zużywa mniej danych. Twoi goście, którzy korzystają z powolnego połączenia mobilnego, będą Ci wdzięczni. Leniwe Ładowanie zmniejsza zasoby używane, gdy użytkownik nie ładuje wszystkich obrazów, ponieważ przestał przeglądać i przeszedł do następnej strony.

Jak Działa Leniwe Ładowanie?

Oto jak odkładasz obrazy offscreen w WordPress bez wtyczki.

Po pierwsze, musisz określić, jakie obrazy chcesz leniwie załadować. Powinieneś leniwie ładować wszystkie obrazy, które nie są widoczne w widoku i nie przyczyniają się do struktury strony. Na przykład obrazy logo w nagłówku lub obrazy postaci nad tekstem nie powinny być ładowane leniwie. Aby zapewnić najlepsze wrażenia użytkownika, powinieneś również załadować obrazy, które znajdują się w odległości około 500px od widoku, aby miały czas na załadowanie, zanim odwiedzający się do nich dotrze.

Zapobiegaj ładowaniu obrazów w normalny sposób

Kiedy korzystasz z leniwego ładowania, musisz zapobiec ładowaniu obrazów w zwykły sposób w witrynie. Jednym ze sposobów, aby to zrobić dla obrazów wykorzystujących <img> tag polega na usunięciu adresu URL obrazu z src atrybut i przeniesienie go do innego atrybutu, np. dane-src, do tymczasowego przechowywania.

Określ, w jaki sposób przeglądarka wykryje obrazy w widoku

Następną rzeczą, którą musisz zrobić, jest adres, w jaki sposób przeglądarka określi, czy obraz wszedł do widoku. Można użyć obsługi zdarzeń Javascript lub API obserwatora przecięcia.

Obsługa Zdarzeń JavaScript

Jeśli zgodność z przeglądarką jest kluczowa, to za pomocą scroll, Zmień rozmiar oraz orientationchange Obsługa zdarzeń JavaScript jest idealnym sposobem na określenie, czy element dotarł do widoku, ponieważ ta metoda jest kompatybilna ze wszystkimi przeglądarkami. Niestety wymaga to uwzględnienia dodatkowego kroku w celu wykrycia widoczności elementu za pomocą getBoundingClientRect. Może również powodować niewielkie opóźnienie podczas renderowania obrazów.  Przykład można zobaczyć tutaj.

API obserwatora przecięcia

Interfejs API obserwatora przecięcia jest nowoczesnym i najbardziej wydajnym sposobem dla kompatybilnych przeglądarek, aby dowiedzieć się, kiedy obraz przeszedł do widoku. Jest to również szybsze niż korzystanie z obsługi zdarzeń. Napiszesz znacznie mniej kodu, ponieważ możesz pominąć część, w której musisz wymyślić metodę wykrywania widoczności obrazu i po prostu zarejestrować obserwatora, aby obserwować elementy i określić, co przeglądarka powinna zrobić, gdy obraz jest widoczny.

API Intersection Observer ma całkiem dobre wsparcie wśród przeglądarek, ale nie zostało jeszcze powszechnie przyjęte, więc może być konieczne użycie obsługi zdarzeń Javascript jako awaryjnego rozwiązania dla niezgodnych przeglądarek.

Przenieś adres URL obrazu do atrybutu src

Gdy przeglądarka wykryje, że obraz jest “na scenie” lub blisko niego, nadszedł czas, aby wyciągnąć adres URL obrazu do src lub srcset atrybut umożliwiający pobranie i wyrenderowanie obrazu. Gdy to zrobisz, możemy usunąć wszystkie klasy dodane do obrazu, aby pomóc kodowi JavaScript zidentyfikować go i usunąć obserwatora.

Jak leniwie ładować obrazy w WordPress

Leniwe Ładowanie można dodać do witryny WordPress za pomocą wtyczek lub Javascript. Wszystkie dają podobne wyniki. Leniwe ładowanie jest stosunkowo łatwe do zaimplementowania, więc nawet jeśli zdecydujesz się na wtyczkę, rozmiary plików wynoszą zwykle około 1-3 Kb, a zatem są lekkie.

Opcja 1: użyj zwykłego JavaScript, aby odroczyć obrazy Offscreen w WordPress

Jeśli czujesz się komfortowo używając prostego JavaScript i chcesz mieć pełną kontrolę, możesz dodać leniwe ładowanie bezpośrednio do swojej witryny. Najlepszym sposobem na dodanie tej funkcjonalności jest oczywiście utworzenie wtyczki do kodu JavaScript. Na tej stronie znajdują się dwa przykłady. Jeden pokazuje, jak korzystać z obsługi zdarzeń, a drugi pokazuje, jak korzystać z interfejsu API obserwatora przecięcia.

Opcja 2: Użyj JavaScript Lazy Loading Library

Jeśli chcesz użyć biblioteki JavaScript, aby pomóc, Jest wiele do wyboru. Wielu stosuje się do procesu, który opisałem powyżej, dzięki czemu można szybko zacząć.

  • react-lazyload-React lazy loading library, nie używa obserwatora przecięcia
  • lozad.js-używa tylko obserwatora przecięcia, super lekki
  • blazy-również super lekki, ale nie używa obserwatora przecięcia
  • yall.js-używa obserwatora przecięcia i wraca do obsługi zdarzeń
  • lazysizes-może leniwie ładować wideo i iFrame także

Możesz również użyć wtyczki jQuery do zadania, ponieważ jQuery jest zawarty w rdzeniu WordPress.

Opcja 3: Użyj wtyczki Lazy Load

Ale zdecydowanie najłatwiejszym sposobem na rozpoczęcie leniwego ładowania jest użycie wtyczki WordPress.

Większość wtyczek do optymalizacji obrazu premium, takich jak Smush Pro, ma wbudowane leniwe Ładowanie. Dodaliśmy go również do naszej darmowej wersji Smush on WordPress.org

Aby aktywować leniwe ładowanie za pomocą Smush, uczyniliśmy ten proces bardzo prostym. Wszystko, co musisz zrobić, to udać się do Leniwe Ładowanie sekcja w Smush Pro i push the Aktywuj guzik.

Screenshot of Smush Pro lazy loading settings
Zainstaluj Smush Pro i leniwe ładowanie w mniej niż 2 minuty

To wszystko. Jeśli chcesz mieć większą kontrolę nad tym, które obrazy są leniwe wczytywane, będziesz mieć dodatkowe opcje dostępne po aktywacji leniwego wczytywania. Kiedy aktywujesz leniwe ładowanie w Smush Pro, będziesz również leniwie ładować obrazy dla użytkowników mobilnych.

Rzeczy, na które należy uważać, gdy leniwe ładowanie obrazów

  • Podczas leniwego ładowania może nie dodawać dodatkowej wagi, która spowalnia witrynę, może to zakłócać zdolność Wyszukiwarki do indeksowania witryny, jeśli nie zostanie to wykonane poprawnie.
  • Podczas próby trzymania obrazów powyżej zakładki, zakładka różni się w zależności od urządzenia, więc pamiętaj o tym, gdy próbujesz zdecydować, które obrazy odroczyć.
  • Użyj obrazu zastępczego zamiast opuszczać src atrybut pusty. Określ wysokość i szerokość obrazu, aby zawartość nie zmieniała się podczas ładowania obrazów.
  • Użycie < noscript> znaczniki określające, co powinno się stać, jeśli odwiedzający ma wyłączoną obsługę JavaScript.

To wszystko.

Odkładanie obrazów poza ekranem i innych zasobów to świetny i łatwy sposób na poprawę wydajności witryny. Technika ta będzie działać dla wszystkich obrazów w <img> Oznacz na swojej stronie, od obrazów na stronie głównej do obrazów w postach i stronach. Jeśli chcesz leniwie ładować obrazy tła w CSS, użyjesz podobnej techniki, ale użyjesz identyfikatorów CSS do kierowania obrazów. Oto przykład leniwego ładowania obrazów tła.

Najprostszym sposobem na rozpoczęcie leniwego ładowania jest użycie Smush free lub Smush Pro. Smush Pro dodaje inne funkcje, które mogą pomóc w innych możliwościach Google PageSpeed Insights. Może Ci pomóc Wyświetlaj obrazy w formatach nowej generacji poprzez konwersję obrazów do plików WebP i prawidłowo rozmiar obrazów skalując obrazy za pomocą Smush Pro CDN. Smush Pro jest nawet kompatybilny z popularną wtyczką WP Retina 2x, dzięki czemu możesz leniwie ładować te ogromne obrazy siatkówki bez spowalniania WordPressa.

Wypróbuj Smush Pro za darmo samodzielnie lub w ramach bezpłatnego okresu próbnego członkostwa i zobacz, jak wiele może to zrobić dla Twojej witryny.

Czy próbowałeś leniwego ładowania zdjęć na swojej stronie? Czy to poprawić swoją ocenę w Google Pagespeed Insights?

Tagi:

You May Also Like

Jak naprawić nieprawidłowy błąd JSON w WordPress (Przewodnik dla początkujących)

W artykule: Co powoduje błąd “nieprawidłowa odpowiedź JSON” w WordPress?1. Sprawdź adresy…

Jak naprawić błąd krytyczny w WordPress (krok po kroku)

W artykule: Co To jest błąd krytyczny w WordPress?Co powoduje krytyczny błąd…

Jak zmienić kolor linku w WordPress (poradnik dla początkujących)

W artykule: Dlaczego Linki Są Ważne?Jak dodawać linki w postach i stronach…

9 Najlepsze Darmowe Wtyczki WordPress Author Bio Box

W artykule: 1. Simple Author Box2. Branda3. Autor postu WP4. Author Bio…