Obrazy, infografiki i fantazyjne efekty stanowią doskonałą pomoc w promowaniu wszelkiego rodzaju treści na stronie internetowej. Z pewnością przyciągają uwagę i mogą przekazać istotę treści w jednej ramce. Nic dziwnego, że polegamy na obrazach, które przyciągają uwagę czytelnika i zwiększają zaangażowanie użytkowników w Internecie.


Z drugiej strony obrazy często ładują się na stronie internetowej. A jeśli masz wolne połączenie, ładowanie może trwać wiecznie. Może to być duże wyłączenie dla użytkowników, którzy prawdopodobnie odejdą od strony.

Zrzeczenie się: WPExplorer jest podmiotem stowarzyszonym dla jednego lub więcej produktów wymienionych poniżej. Jeśli klikniesz link i dokonasz zakupu, możemy dokonać prowizji.

Jak możemy sprawić, by obrazowanie ciężkich stron ładowało się szybciej?

Dlaczego ładowanie zdjęć zajmuje trochę czasu? Możemy to wyjaśnić w ten sposób – strona składa się z wielu elementów – tekstu, obrazów, multimediów, skryptu i innych. Aby załadować każdy element, przeglądarka wysyła żądanie do witryny (zwane żądaniem HTTP). Wiele elementów, zwłaszcza obrazy, jest bardzo bajtowych i wymaga czasu. Zwykle wszystkie elementy próbują załadować w tym samym czasie, co opóźnia ładowanie całej strony.

Logiczne jest, aby najpierw szybko ładować zawartość do przeglądarki i przyciągnąć uwagę widza. Jednocześnie opóźnij ładowanie ciężkich obrazów danych. Takie podejście może skłonić użytkowników do czekania, ponieważ na ekranie jest coś, co może zwrócić ich uwagę.

Co to jest Leniwe ładowanie?

Możemy opóźniać obrazy przy użyciu techniki leniwego ładowania – najpierw ładuj tylko tekst lub wybraną treść, a obrazy lub elementy wolno ładujące się opóźniają. Ładowanie obrazów jest rozłożone w czasie, więc czas do pierwszego bajtu na stronie ulega skróceniu. Gdy użytkownik przewija w dół, obrazy są pobierane pojedynczo. W konsekwencji liczba żądań HTTP trafiających jednocześnie do serwera jest zmniejszona.

Obrazy są umieszczane w symbolu zastępczym, do późniejszego załadowania. Gdy obrazy docierają do obszaru wyświetlania, są pobierane z serwera. Pojawiają się na ekranie, gdy przechodzą do obszaru „nad zakładką”. W przypadku nieskończonego przewijania, ajax jest używany do ładowania więcej, gdy użytkownik znajdzie się na dole ekranu.

Jak leniwe ładowanie może pomóc

Leniwe ładowanie skraca czas ładowania. Szybsza witryna jest wygodna dla użytkowników i wyszukiwarek. Zmniejsza to także przepustowość serwera, ładując obrazy tylko wtedy, gdy są naprawdę potrzebne. Oszczędza to przepustowość, zarówno po stronie serwera, jak i użytkownika. Możesz zastosować leniwe ładowanie do wybranych stron lub całej witryny.

Wadą leniwego ładowania jest to, że wyszukiwarki nie mogą znaleźć treści, która pojawia się po złożeniu. Wyszukiwarki mogą nie rozpoznawać nieskończonej przewijanej zawartości. Aby przynajmniej częściowo wyeliminować tę wadę, musimy uporządkować adresy URL, aby mogły być przetwarzane przez wyszukiwarki. Może to sprawić, że symbole zastępcze będą bardziej widoczne dla wyszukiwarek, dopóki obraz się nie załaduje.

Istnieje wiele wtyczek, które mogą powodować leniwe ładowanie do pracy w witrynie WordPress. Spójrzmy na niektóre z popularnych wtyczek,

BJ Leniwy ładunek

Aby zastąpić wszystkie lub dowolne z twoich zdjęć postów, miniatury postów, obrazy gravatar i iframe zawartości symbolem zastępczym, użyj BJ Leniwy ładunek. Może również zastąpić iframe, a to oznacza, że ​​możesz leniwie ładować osadzone filmy z YouTube i Vimeo. Działa również w przypadku widżetów tekstowych. Za pomocą prostego filtra obrazy i elementy iframe w Twoim temacie można opóźnić.

bj-lazy-load

Aby wtyczka działała w Twojej witrynie, wystarczy pobrać, zainstalować i aktywować. Następnie możesz przejść do ustawień i dowiedzieć się, jakie elementy należy opóźnić podczas ładowania. Dodaj własny obraz zastępczy, jeśli chcesz.

Ta wtyczka używa JavaScript. W rezultacie użytkownik bez JavaScript zobaczy oryginalne elementy bez opóźnionego ładowania.

Leniwy ładunek

Często używana wtyczka do dodawania leniwego ładowania do stron WordPress, Leniwy ładunek to prosta instalacja i aktywacja wtyczki. Możesz go wypróbować bez obaw, wiedząc, że został on opracowany przy użyciu mieszanki kodu od zespołu VIP WordPress.com w Automattic, zespołu redesign TechCrunch 2011 i Jake Goldman (10up LLC).

leniwy ładunek

Nie musisz też nic robić po aktywacji. Jeśli jednak chcesz wprowadzić pewne zmiany, możesz to zrobić, edytując plik php. Autorzy udostępnili przydatne fragmenty kodu, do których można się odwoływać w celu zmiany obrazu zastępczego, leniwego ładowania obrazów do motywu lub leniwego ładowania wszystkich obrazów przez buforowanie danych wyjściowych.

Ajax Załaduj więcej – Nieskończony zwój

Ajax Załaduj więcej może powodować opóźnione ładowanie na długich stronach przeglądanych w dół. Użyj go do leniwego ładowania postów, niestandardowych typów postów, pojedynczych postów, stron i komentarzy.

ajax-load-more

Ponadto możesz użyć Konstruktora kodów krótkich, aby sformatować niestandardowe zapytania WordPress. Dodaj wygenerowany krótki kod do stron wybranych za pomocą edytora treści lub bezpośrednio do plików szablonów. Wyświetl stronę z przodu i zaznacz Ajax Załaduj więcej ładując zawartość nawet podczas przewijania w dół.

Co więcej, Ajax Load More działa dobrze z WooCommerce i Easy Digital Downloads, więc jest odpowiedni dla długich stron produktów.

Leniwe ładowanie filmów

Jeśli prowadzisz witrynę z wieloma osadzonymi filmami, ten jest dla Ciebie. Leniwe ładowanie filmów zastępuje osadzone filmy wideo klikalnym obrazem. Strona nie ładuje filmów, gdy odwiedzający ją woła. Filmy są ładowane tylko po kliknięciu obrazu.

leniwe ładowanie filmów

Wtyczka sprawdza osadzone filmy i zastępuje wszystkie pliki zewnętrzne statycznym obrazem i przyciskiem odtwarzania. Filmy są ładowane tylko wtedy, gdy użytkownik kliknie przycisk. Może to mieć realny wpływ na szybkość ładowania strony, zwłaszcza jeśli zawiera wiele filmów. A dla użytkownika jest to płynne doświadczenie.

a3 Leniwy ładunek

Ponieważ strony internetowe są coraz częściej wyświetlane na urządzeniach przenośnych, należy je również zoptymalizować pod kątem mobilności. a3 Leniwy ładunek ma na celu poprawę szybkości witryny w telefonach komórkowych poprzez opóźnienie ładowania wybranych elementów strony. Elementy można wybrać w ustawieniach administratora.

a3-leniwy ładunek

Wtyczka oferuje obsługę treści w elementach iframe umieszczonych w dowolnym miejscu w treści lub widżetach. Media osadzone w WordPress, Facebook Like pola z profilami, Przyciski Like, Polecaj przyciski, Profile Google+, Mapy Google i inne podobne treści multimedialne mogą być wybrane do leniwego ładowania.

Co więcej, nie ma konfliktu z Przyspieszonymi stronami mobilnymi (AMP) – leniwe ładowanie nie jest stosowane do / amp punkt końcowy. Tylko wtedy, gdy przeglądarka obsługuje adres URL bez / amp ten leniwy ładunek wchodzi w grę.

WP YouTube Lyte

Jeśli Twoja strona mocno przyciąga uwagę na YouTube, WP YouTube Lyte może przynieść ci dobrą ofertę. Wstawia „Lite YouTube Embeds”, które wyglądają podobnie do osadzonych na YouTube. Ale filmy są wywoływane tylko po kliknięciu.

wp-youtube-lyte

Aby wtyczka działała w Twojej witrynie, konieczna jest rejestracja w YouTube jako nowy wnioskodawca. Wtyczka korzysta z interfejsu API YouTube każdego filmu, aby pobrać go z repozytorium YouTube. Aby korzystać z tego interfejsu API w witrynie, klucz API dostarczony przez YouTube musi być włączony. Klucz serwera otrzymany z YouTube musi zostać wypełniony.

Po włączeniu kluczy interfejsu YouTube API dostosuj ustawienia, aby dopasować wymiary i pozycję odtwarzacza do własnych upodobań.

Ładowanie strony z ekranem ładowania

Z Ładowanie strony z ekranem ładowania, użytkownicy mogą mieć pojęcie o czasie oczekiwania przed załadowaniem strony. Wtyczka wyświetla ekran pokazujący postęp ładowania jako procent ukończenia.

ładowanie strony z ekranem ładowania

Wybierz wyświetlanie postępu tylko na stronie głównej lub na wszystkich stronach. W wersji darmowej do wyświetlania używany jest tylko pasek postępu. Aby uzyskać więcej opcji, musisz zaktualizować do wersja premium. Również wersja premium stosuje leniwe ładowanie zdjęć.

Więcej wtyczek,

  • Ładuj więcej to przydatna funkcja na długich stronach produktów. Są one powszechnie spotykane na stronach internetowych WooCommerce. WooCommerce Infinite Scroll and Ajax Pagination konwertuje domyślną paginację produktu na nieskończone przewijanie lub paginację Ajax. Dla użytkownika oznacza to, że nie musi on wielokrotnie klikać „Następna strona”. Gdy użytkownik dojdzie do dolnej części strony, następny zestaw produktów zostanie automatycznie pobrany i załadowany. Różne opcje paginacji są dostępne dla urządzeń mobilnych.
  •  Załaduj więcej produktów do WooCommerce można dodać, aby załadować więcej produktów z następnej strony za pomocą Ajax z nieskończonym przewijaniem lub przyciskiem Załaduj więcej. Do efektów animacji i dostosowywania, wersja pro jest dostępny.
  • Obrazy Lazyload i pokaz slajdów – Dzięki tej wtyczce możesz dodać efekt lightbox lub niestandardowy efekt galerii do dowolnego obrazu, a także opóźnić ładowanie. Zawiera 3 efekty, a także możesz dodać własne.
  • Rakieta Leniwy ładunek – Jest wyjątkowo lekki (mniej niż 2kb). Wstrzykuje odrobinę kodu JavaScript do nagłówka witryny, który działa na miniatury, wszystkie obrazy w poście, tekst widżetu lub awatary. Opóźnia wyświetlanie obrazów w całej witrynie bez użycia biblioteki JavaScript, takiej jak jQuery.
  • Szalony Leniwy – Wykonuje tę samą pracę, a jednocześnie jest lekki, łatwy w instalacji i obsłudze i nie wymaga ustawień. Każdy obraz można wykluczyć, po prostu dodając do niego atrybut.
  • Lazy Load XT – To szybka wtyczka, która działa na obrazy, ramki, filmy z YouTube i Vimeo. Jest w pełni konfigurowalny.

Wiele suwaków lubi Royal Slider WP Electric Carousel uwzględnij również zasadę leniwego ładowania, aby ładować obrazy. Event Booking Pro obsługuje leniwy kalendarz ładowania.

Podsumowując

Leniwe ładowanie to skuteczny sposób na poprawę szybkości witryny, szczególnie na stronach internetowych zawierających wiele zdjęć i filmów. Istnieje wiele innych metod, takich jak optymalizacja obrazu i buforowanie, które mogą również pomóc poprawić szybkość witryny. Wybierz wtyczkę, która dobrze pasuje do Twojej witryny i zoptymalizuj wydajność, aby była lepsza dla użytkownika.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me