Napraw odroczone obrazy poza ekranem w WordPress z leniwym ładowaniem

Większość witryn z treścią jest wypełniona dużą ilością treści multimedialnych, czy to grafik, zdjęć czy filmów. Chociaż tego typu treści zapewniają doskonały wygląd estetyczny i wyjątkową formę dostarczania informacji, wadą jest to, że zajmują one dość dużą wagę na Twojej stronie internetowej. To z kolei skutkuje dużą liczbą zasobów, które użytkownik końcowy musi pobrać i wyrenderować, zanim będzie mógł uzyskać do nich dostęp. Niestety dotyczy to plików, które początkowo nie są widoczne na ekranie. W tym miejscu w grę wchodzi Lazy Loading, aby załadować multimedia tylko wtedy, gdy jest to potrzebne. W tym artykule dowiemy się, jak naprawić sugestie narzędzia Google PageSpeed ​​Insights, takie jak odroczenie obrazów poza ekranem w WordPress przy użyciu techniki leniwego ładowania.

Czym jest technika leniwego ładowania?

Twoja strona internetowa składa się z dwóch części, które otwierają użytkownicy:

• Nad zakładką lub ATF – jest to obszar widoczny na ekranie, który roboty indeksujące, takie jak Googlebot, pokazują na zrzutach ekranu Google PageSpeed ​​Insights. Pamiętaj, że nad obszarem zagięcia będzie inaczej w urządzeniach mobilnych i stacjonarnych. To jest powód, dla którego uzyskasz różne wyniki szybkości na urządzeniach mobilnych i komputerach stacjonarnych.
• Poniżej zakładki – jest to obszar na Twojej stronie, który nie jest widoczny przy pierwszym załadowaniu.

Cała optymalizacja WordPressa polega na optymalizacji plików ładowanych w powyższym obszarze fold. Niezależnie od tego, czy chodzi o usuwanie zasobów blokujących renderowanie, usuwanie nieużywanych CSS/JS, czy skrócenie całkowitego czasu blokowania, chodzi o optymalizację zasobów potrzebnych do szybkiego ładowania strony powyżej części przewinięcia. Lazy loading to jeden z takich procesów optymalizacji, który początkowo ładuje pliki multimedialne widoczne tylko w górnej części strony. Jednak o ile inne techniki nie poprzestają na tym. Lazy loading opóźnia również wszystkie pliki multimedialne na stronie, w tym te znajdujące się poniżej obszaru zawinięcia, i renderuje je tylko wtedy, gdy użytkownik przewinie do tej pozycji na stronie internetowej. To drastycznie poprawi szybkość Twojej witryny i czas ładowania, prowadząc do lepszego doświadczenia użytkownika.

Lazy Loading to funkcja ładowania treści, która zapewnia, że ​​witryna ładuje treści multimedialne tylko do sekcji strony, do której została przewinięta, poprawiając w ten sposób wydajność witryny i czas ładowania strony.

Sprawdzanie błędów w narzędziu Google PageSpeed ​​Insights

Google PageSpeed ​​Insights (PSI) to jedno z najpopularniejszych narzędzi dla webmasterów do mierzenia szybkości ich witryn. Ponieważ jakość i szybkość strony są częścią sygnału rankingowego, wszyscy właściciele witryn muszą mierzyć szybkość swojej witryny i w razie potrzeby podejmować niezbędne działania. Poniżej znajduje się przykład komunikatu o możliwości „Odłóż obrazy poza ekranem” wyświetlanego w narzędziu Google PSI.

Jeśli przefiltrujesz wyniki za pomocą FCP, TBT, LCP i CLS, zdziwisz się, że odroczone obrazy poza ekranem nie należą do żadnej z tych grup. Jednak naprawienie problemu znacznie poprawi Twój wynik szybkości, chociaż zobaczysz komunikat, że możliwości nie wpłyną bezpośrednio na wynik wydajności.

Kiedy potrzebujesz leniwego ładowania?

Wielu użytkowników WordPressa po prostu umożliwia leniwe ładowanie za pomocą wtyczki dla wszystkich plików multimedialnych. Jak wspomniano powyżej, podczas ładowania początkowego należy leniwie ładować tylko obrazy znajdujące się pod zakładką, a nie pliki multimedialne wymagane do załadowania nad zakładką. Oto kilka przykładów, których potrzebujesz z leniwym ładowaniem:

• Obrazy Gravatara wyświetlane w komentarzach i biografii autora.
• Powiązany wpis lub inne miniatury ładujące się z ekranu.
• Zawartość iframe, galeria i obrazy sliderów dostępne w części strony widocznej na ekranie.
• Duże obrazy infografik i obrazy podglądu wideo w YouTube nie są widoczne dla użytkowników przy pierwszym wczytaniu.

Jak widzisz, potrzebujesz leniwego ładowania nie tylko plików graficznych, ale także treści iframe i filmów. Mówiąc, że istnieją pewne przypadki, które należy wykluczyć z leniwego ładowania, aby uniknąć kolejnego problemu w narzędziu Google PSI.

• Obraz logo na komputerze stacjonarnym i telefonie komórkowym, który jest ładowany nad obszarem składania.
• Małe ikony i obrazy SVG używane w menu nawigacyjnym nagłówka.
• Wszelkie inne mniejsze obrazy, które są ładowane w sekcji nagłówka Twojej strony internetowej.

Jest jednak jeden wyjątek od tej logiki – największy contentful paint image. Powiedzmy, że masz obraz tła w sekcji nagłówka, który ma bardzo duży rozmiar, np. 1 MB. Musisz wstrzymać ładowanie tego obrazu tła, chociaż znajduje się on w widocznym obszarze, aby uniknąć wyświetlenia ostrzeżenia „Największy obraz treści treści nie został leniwie załadowany” w narzędziu Google PSI.

Uwaga: Czasami możesz celowo wykluczyć ważny obraz z poniższej zakładki, który chcesz, aby użytkownicy widzieli bez czekania na leniwe ładowanie. Ponadto większy problem z powodu odroczenia obrazów poza ekranem wynika z zasobów stron trzecich. Wyjaśnimy to na końcu tego artykułu po wyjaśnieniu leniwego ładowania pliku multimedialnego Twojej własnej witryny.

Leniwe ładowanie w WordPressie

Teraz, gdy wiemy, czym jest Lazy Loading i dlaczego jest to konieczne, nadszedł czas, aby zrozumieć, jak możesz zaimplementować w swojej witrynie WordPress. Jest na to kilka sposobów, a w tym samouczku omówimy kilka różnych wtyczek, które pomogą Ci się tam dostać. Zwróć uwagę, że niektóre wtyczki mają opcję wyłączania leniwego ładowania, podczas gdy wiele wtyczek nie oferuje tej funkcji. Jak wspomniano powyżej, jeśli masz logo tekstowe i żadne inne obrazy powyżej obszaru zagięcia, zalecamy korzystanie z prostych wtyczek bez opcji wykluczenia. W przeciwnym razie musisz wypróbować wtyczkę, która oferuje wykluczenie listy obrazów z leniwego ładowania.

1. Wtyczka Lazy Load od WP Rocket

Ta wtyczka jest bez wątpienia najlepsza z dostępnych i ma do tej pory ponad 100 000 aktywnych instalacji. Został opracowany przez WP Rocket, dość łatwo najlepszą wtyczkę do wydajności sieci WordPress na rynku. Dzięki tej wtyczce będziesz mógł nie tylko zoptymalizować swoje obrazy, ale także zastąpić iframe YouTube miniaturą podglądu. Spowoduje to dalsze zmniejszenie wagi strony i poprawę szybkości ładowania strony w tym procesie.

Ponieważ jest to darmowa wtyczka dostępna w repozytorium WordPress, możesz zainstalować ją z pulpitu administratora WordPress, przechodząc do sekcji „Wtyczki > Dodaj nowy”. Po prostu wpisz „Lazy Load” w polu wyszukiwania i znajdź wtyczkę opracowaną przez WP Rocket.

Zainstaluj, a następnie aktywuj wtyczkę, klikając najpierw przycisk „Zainstaluj teraz”, a następnie przycisk „Aktywuj”. Przejdź do menu „Ustawienia > Lazy Load”, aby uzyskać dostęp do strony ustawień wtyczki. Kliknij pola wyboru, aby zastosować leniwe ładowanie obrazów, ramek iframe i filmów oraz zastąpić filmy z YouTube miniaturami.

Kliknij przycisk „Zapisz zmiany” w lewym dolnym rogu strony przed wyjściem. To wszystko, a wtyczka zrobi resztę za Ciebie. Wtyczka będzie teraz wyświetlać obrazy, ramki iframe i filmy na stronie tylko wtedy, gdy są one widoczne dla użytkownika końcowego, co skutkuje mniejszym wykorzystaniem przepustowości i krótszym czasem ładowania. Chociaż wtyczka Lazy Load jest prosta w użyciu za pomocą kilku kliknięć, nie oferuje funkcji wykluczania. W tym celu może być potrzebna kompletna wtyczka premium WP Rocket, w tym funkcje buforowania, aby poprawić ogólny stan SEO witryny. Jeśli korzystasz z WP Rocket, przejdź do sekcji „Media” i włącz leniwe ładowanie obrazów, ramek iframe i podglądów obrazów YouTube.

Jeśli masz już wtyczkę do buforowania i chcesz wypróbować inną wtyczkę do optymalizacji wydajności, Perfmatters jest idealnym wyborem. Oferuje również leniwe ładowanie za pomocą kilku kliknięć, aby włączyć obrazy, miniaturę podglądu YouTube, ramki iframe i filmy. Możesz włączyć te opcje w sekcji „Opcje > Lazy Loading” wtyczki.

2. Leniwe ładowanie za pomocą wtyczki Smush

Oto kolejna wtyczka, która może zdziałać cuda dla Twoich potrzeb związanych z leniwym ładowaniem treści. Wtyczka Smush może być bardziej znana ze swoich możliwości kompresji obrazu i optymalizacji, ale wtyczka oferuje między innymi leniwe ładowanie. Wtyczka ma ponad milion instalacji i jest jedną z najlepszych wtyczek do WordPressa ukierunkowanych na SEO. Najpierw znajdź i zainstaluj wtyczkę z bezpłatnego repozytorium WordPressa.

Włącz leniwe ładowanie za pomocą Smush

Po aktywacji wtyczki zobaczysz kreatora konfiguracji, który przeprowadzi Cię przez wszystkie funkcje. Możesz włączyć leniwe ładowanie z kreatora konfiguracji lub na razie pominąć ten krok.

Przejdź do panelu sterowania wtyczki Smush, klikając pozycję menu „Smush > Lazy Load” w panelu administratora WordPress.

Jeśli nie aktywowałeś z kreatora konfiguracji, tutaj możesz aktywować funkcję lazy loading, a teraz będziesz mógł wprowadzać niestandardowe zmiany w konfiguracji lazy loading swojej witryny. W przeciwieństwie do wtyczki Lazy Load by WP Rocket, możesz wybrać typy mediów i wyjścia multimedialne za pomocą wtyczki Smush. Domyślnie wszystkie typy multimediów (takie jak .png, .jpeg itp.) oraz wszystkie wyjścia multimedialne, takie jak zawartość, widżety, miniatury i gravatary, zostaną włączone do leniwego ładowania. Jeśli masz jakieś konkretne preferencje, odznacz opcję, której nie chcesz stosować leniwego ładowania.

Następnie przychodzi fajna część; możesz wybrać, w jaki sposób chcesz wczytywać obrazy i jaki typ animacji ma być wyświetlany. Różne opcje oferowane przez wtyczkę to:

• Fade In: Ta funkcja wyświetla obraz po wczytaniu z opóźnieniem.
• Spinner: zostanie pokazana animacja spinnera, w której obraz będzie leniwy Ładowanie. Możesz użyć jednego z gotowych gifów typu spinner lub przesłać swój, taki jak logo firmy.
• Symbol zastępczy: Jak sama nazwa wskazuje, możesz również wyświetlić obraz zastępczy zamiast rzeczywistej treści podczas leniwego ładowania. Tak samo jak poprzednio, możesz użyć jednego z dostarczonych szablonów lub wgrać własny.
• Brak: tutaj nie zostanie zastosowane nic wyszukanego, a obrazy pojawią się zaraz po załadowaniu.

Wykluczenie i inne ustawienia Smush

Jak wspomniano, musisz mieć leniwe wykluczenia ładowania, aby wykluczyć określone przedmioty, a Smush oferuje wiele opcji, których nie oferują nawet wtyczki premium. Masz opcje wykluczenia na podstawie typu posta, adresów URL stron/postów i klas/identyfikatorów CSS.

• Będzie to bardzo przydatne, aby wykluczyć wszystkie archiwa lub tylko stronę główną, wyłączając te opcje.
• Niektóre treści strony, takie jak strona portfolio z filtrami, mogą nie działać poprawnie przy leniwym ładowaniu. Możesz po prostu wpisać adres URL strony i wykluczyć ją z leniwego ładowania.
• Wreszcie w przypadku elementów, takich jak logo i obrazy nagłówka, możesz użyć odpowiedniej klasy CSS lub identyfikatora i wykluczyć z leniwego ładowania.

Oprócz wyżej wymienionych opcji konfiguracyjnych możesz także zmienić miejsce ładowania skryptu, włączyć obsługę natywnego ładowania przeglądarki oraz wyłączyć Noscript podczas leniwego ładowania. Ogólnie rzecz biorąc, możesz użyć lokalizacji stopki dla skryptów i wyłączyć opcje natywne i noscript.

Po zaktualizowaniu ustawień kliknij „Zapisz zmiany” w prawym dolnym rogu strony, aby zastosować wybrane przed chwilą ustawienia opóźnionego ładowania.

Uwaga: przeglądarki takie jak Google Chrome oferują natywną funkcję leniwego ładowania. Jednak włączenie tego we wtyczce Smush nie rozwiąże problemu „Odrocz obrazy poza ekranem” w Google PSI. Możesz również zobaczyć to ostrzeżenie pod opcją w ustawieniach wtyczki.

3. Korzystanie z SiteGround Optimizer

Ta wtyczka na naszej liście jest przeznaczona tylko dla użytkowników hostingu SiteGround. Ponieważ wtyczka SiteGround Optimizer ma ponad 1 milion aktywnych użytkowników, omówimy to dla użytkowników SiteGround.

• SG Optimizer jest domyślnie dołączany do wszystkich instalacji WordPress w SiteGround. W związku z tym ta wtyczka zostanie wstępnie zainstalowana i nie będzie potrzeby ponownej instalacji.
• Przejdź do menu „SG Optimizer” i przejdź do sekcji „Media”.
• Przewiń w dół do sekcji „Optymalizacja multimediów” i włącz opcję „Lazy Load Media”.
• W tej sekcji wykluczasz również klasy CSS i typy mediów.

Niestety, leniwe ładowanie w SiteGround Optimizer nie będzie działać, gdy hostujesz pliki multimedialne z subdomeny. Spowoduje to naruszenie Cross-Origin Resource Sharing (CORS) i zablokuje zasoby z wtyczki, a zamiast obrazów zobaczysz puste miejsca. Dlatego upewnij się, że wyczyściłeś pamięć podręczną i przetestuj, czy obrazy działają dobrze po włączeniu funkcji leniwego ładowania za pomocą wtyczki SiteGround Optimizer.

4. Leniwe ładowanie za pomocą Jetpack

Ponad 5 milionów użytkowników korzysta z Jetpack do poprawy bezpieczeństwa, tworzenia kopii zapasowych i optymalizacji swoich witryn WordPress. Jeśli używasz Jetpack, przejdź do sekcji „Jetpack > Ustawienia” i włącz opcję leniwego ładowania obrazów w sekcji „Wydajność”.

5. Inne bezpłatne wtyczki do buforowania

Prawie każda wtyczka optymalizująca i buforująca oferuje funkcję leniwego ładowania, ponieważ ważne jest, aby uzyskać wysoki wynik szybkości strony w Google PageSpeed ​​Insights. Tutaj wymienimy dwie najpopularniejsze bezpłatne wtyczki do buforowania dla WordPressa.

• W3 Total Cache – możesz przejść do sekcji „Lazy Load” w „Instrukcji konfiguracji”, aby włączyć opcję Lazy Load.

• Autoptimze – przejdź do zakładki „Obrazy” i włącz opcję leniwego ładowania.

Testowanie leniwego ładowania działa w Twojej witrynie

Istnieją dwa sposoby sprawdzenia, czy leniwe ładowanie działa w Twojej witrynie. Pierwszą opcją jest przetestowanie witryny w Google PSI i potwierdzenie, że w sekcji „Przeddane audyty” wyświetla się „Odrocz obrazy poza ekranem”.

Następną opcją jest sprawdzenie źródła strony Twojej strony. Możesz znaleźć leniwy skrypt ładowania z używanej wtyczki. Ponadto sprawdź, czy obrazy są dołączone do klasy CSS z leniwym ładowaniem. Poniżej znajduje się przykład z wtyczki WP Rocket pokazujący, że obraz zawiera klasę CSS „rocket-lazy-load” i parametr „data-lazy-src”.

Leniwe ładowanie treści innych firm

Podczas korzystania z obrazów i osadzania filmów z usług innych firm zobaczysz problemy związane z leniwym ładowaniem w Google PSI. Ogólnie rzecz biorąc, zobaczysz „Lazy load zewnętrznych zasobów z fasadami” w sekcji zakończonych audytów. Przekonasz się jednak, że typowy test „Odrocz obrazy poza ekranem” kończy się niepowodzeniem podczas korzystania z osadzonych stron trzecich, takich jak filmy z YouTube lub banery reklamowe.

• Jak wyjaśniono powyżej, możesz zastąpić osadzone filmy z YouTube statycznym obrazem podglądu. Następnie możesz leniwie załadować ten podgląd obrazu, aby rozwiązać problem w narzędziu Google PSI.
• Niestety, niewiele można zrobić w przypadkach takich jak obrazy banerów z programów reklamowych Google AdSense. Ponieważ te reklamy są ładowane dynamicznie, zmieniają się one przy każdym wczytaniu strony i nie ma stałego sposobu na uniknięcie ostrzeżeń Google PSI. Istnieje jednak kilka motywów WordPress, które pomagają wykorzystać leniwe ładowanie i dynamicznie ładować reklamy. Poniżej znajduje się strona opcji motywu z minimalistycznego motywu Breek, w której można zobaczyć opcję leniwego ładowania dla reklam Google AdSense. Jak możesz w tekście, motyw prosi o usunięcie reklamy push w domyślnym kodzie reklamy i będzie dynamicznie wpychać, gdy użytkownik osiągnie pozycję na stronie. Nie zalecamy korzystania z tego typu funkcji, ponieważ może to wpłynąć na Twoje zarobki, a także może nie działać poprawnie (w żadnym wypadku nie możesz korzystać z tej funkcji poza AdSense)

Ostatnie słowa

Stosowanie Lazy Loading nie jest trudne ani skomplikowane, a postępując zgodnie z tym artykułem, możesz to zrobić w mgnieniu oka. Upewnij się, że wybrałeś najlepszą wtyczkę, która jest odpowiednia w Twoim przypadku i działa najlepiej dla Ciebie. Pamiętaj jednak, że leniwe ładowanie wymaga włączenia skryptu przez wtyczkę w sekcji stopki strony. Czasami ten skrypt może zostać zablokowany, a Twoje obrazy nie zostaną załadowane, jak wspomniano powyżej, za pomocą SiteGround Optimizer. Dlatego po włączeniu funkcji leniwego ładowania przetestuj dokładnie swoje strony w różnych przeglądarkach, zwłaszcza strony z ciężkim wbudowanym JavaScript.