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. Czytaj dalej, lub Skocz do przodu, korzystając z tych linków:
- Co To jest leniwe Ładowanie?
- Dlaczego leniwe ładowanie jest lepsze niż zwykłe ładowanie?
- Jak Działa Leniwe Ładowanie?
- Zapobiegaj ładowaniu obrazów w normalny sposób
- Określ, w jaki sposób przeglądarka wykryje obrazy w widoku
- Obsługa Zdarzeń JavaScript
- API obserwatora przecięcia
- Przenieś adres URL obrazu do atrybutu src
- Jak leniwie ładować obrazy w WordPress
- Opcja 1: użyj zwykłego JavaScript, aby odroczyć obrazy Offscreen w WordPress
- Opcja 2: Użyj JavaScript Lazy Loading Library
- Opcja 3: Użyj wtyczki Lazy Load
- Rzeczy, na które należy uważać, gdy leniwe ładowanie obrazów
- To wszystko.
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 sposób pośrednio poprawić swój wizerunek SEO.
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.
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 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
Intersection Observer API to nowoczesny I mOst skuteczny sposób 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.
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ć
srcatrybut pusty. Określ wysokość i szerokość obrazu, aby zawartość nie zmieniała się podczas ładowania obrazów. - Użycie
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
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.
