Jak korzystać z leniwego ładowania, aby uzyskać doskonały wynik prędkości mobilnej

Czy Twoja witryna pomyślnie przeszła test szybkości witryny mobilnej Google? Nie? Możesz spojrzeć na leniwe ładowanie obrazów.

Wydajność witryny jest krytyczna. Jeśli Twój blog lub witryna ładuje się wolno, jest to okropne dla użytkownika.

Nikt nie będzie czekał pięć lub dziesięć sekund na załadowanie witryny. Szybkość Internetu lub prędkość pobierania musi być szybka. Wolna witryna zwiększy współczynnik odrzuceń i obniży współczynnik konwersji.

Kiedy przeprowadzasz test szybkości witryny dla swojej witryny, prędkość komputera jest zwykle w porządku. Ale jak Twoje strony radzą sobie w teście szybkości na urządzeniach mobilnych?

Przygotuj się na użytkowników mobilnych

Większość programów do blogowania i stron internetowych jest dość dobrze zbudowana do przeglądania na komputerze.

Używają responsywnego projektu, aby dostarczyć wersję mobilną.

Chociaż jest to praktyczne rozwiązanie, ma ono istotną wadę.

Jeśli Twoja strona jest responsywna, będzie działać na urządzeniach mobilnych.

Ale rozmiary plików Twoich obrazów dotyczą komputerów stacjonarnych, więc prędkość witryny mobilnej jest znacznie mniejsza.

Jeśli wykonasz test Google Pagespeed Insights, Twój wynik może być rozsądny i zielony dla komputerów stacjonarnych, ale wygląda to tak dla Twojej wersji mobilnej.

Jeśli weźmiesz pod uwagę, że połowa lub nawet więcej odwiedzających Twoją witrynę korzysta z urządzeń mobilnych, naprawdę musisz poprawić czas ładowania strony i szybkość mobilną.

Google zamierza wykorzystać indeks mobile-first jako czynnik rankingowy.

Istnieje wiele bezpłatnych usług testowania szybkości witryny, których można użyć do monitorowania wydajności.

Jednak nie wszystkie aplikacje speedtest mierzą prędkość witryn mobilnych. Nie daj się więc uspokoić dobrymi wynikami szybkości strony w witrynie na komputery.

WebpageTest pozwala wybrać różne wersje mobilne, więc jest alternatywą dla Google.

Zawsze upewnij się, że możesz sprawdzić wersję mobilną, ponieważ urządzenia łączą się ze znacznie wolniejszym łączem internetowym.

Jeśli Twoje wyniki są niezadowalające, czeka Cię praca.

Jak poprawić wydajność mobilną?

Wiele czynników wpływa na powolną prędkość witryny zarówno na komputerze, jak i na urządzeniu mobilnym.

Pliki JavaScript i CSS mogą ładować się zbyt wcześnie i blokować renderowanie. Jeśli używasz WordPressa, możesz to łatwo naprawić za pomocą wtyczki buforującej.

Być może masz problem z usługodawcą hostingowym, który powoduje, że Twój TTFB (Time To First Byte) jest nieco wyższy niż pół sekundy.

Jednak większość hostów ma najwyżej 10 do 20 procent powyżej tego czasu, co nie jest dużym problemem.

Największym problemem są prawie zawsze obrazy i elementy iframe. Kiedy dodajesz obraz do posta, nie jest on skompresowany, dostosowany do rozmiaru ani sformatowany dla urządzeń mobilnych.

Możesz użyć wtyczki, aby pomóc. Smush to popularna wtyczka do kompresji obrazów podczas przesyłania. Rezultat poprawi nieco wersję na komputer, ale nie wersję mobilną.

Aby skrócić czas ładowania strony na urządzeniach mobilnych, musisz wyświetlać znacznie mniejsze obrazy. Ale to wymaga dużo pracy.

Jeszcze do niedawna najlepszym rozwiązaniem było posiadanie osobnej mobilnej wersji serwisu lub korzystanie ze stron AMP. Tak czy inaczej, wszystkie obrazy w istniejącej witrynie musiały zostać zastąpione obrazami nowej generacji.

Praca związana z każdym rozwiązaniem może zająć tygodnie lub miesiące, w zależności od rozmiaru Twojej witryny.

W przypadku większości właścicieli witryn, jeśli nie wiesz o interfejsie API obserwatora skrzyżowań lub img src, atrybucie data src, class lazy, tagach img lub klasie img, nie będziesz tworzyć nowej witryny mobilnej.

Spojrzmy prawdzie w oczy. To wszystko jest zbyt trudne i czasochłonne.

Więcej do przeczytania: Jak zatrzymać formularz kontaktowy i spam w komentarzach

Stosowanie leniwego ładowania

Na szczęście istnieje prosty sposób na naprawienie czasu ładowania strony mobilnej. Odpowiedzią jest leniwe ładowanie wszystkich obrazów.

Leniwe ładowanie opóźnia dostarczanie obrazów, dopóki czytelnik ich nie potrzebuje. Gdy czytelnik przewija stronę internetową, obrazy poniżej tego, co jest widoczne, są zatrzymywane.

W ten sposób początkowy czas ładowania strony jest znacznie skrócony w porównaniu z czasem szybkiego ładowania. Istnieje wiele wtyczek i rozwiązań do dodawania leniwego ładowania do Twojego bloga lub strony internetowej.

Uruchamianie leniwych testów obciążenia

Przez ostatnie kilka tygodni testowałem wersję beta nowego sposobu, aby witryna mobilna tętniła życiem.

Być może słyszałeś o sieciach dostarczania treści, leniwym ładowaniu i odroczonych obrazach poza ekranem.

Jeśli nie, są to elementy, które wyświetlają obrazy tylko podczas ładowania strony i przewijania strony w dół. Być może widziałeś to w akcji na stronach takich jak Medium.

Kiedy po raz pierwszy odwiedzasz witrynę, obraz będzie przez ułamek sekundy zamazany. Nazywa się je obrazami zastępczymi.

Następnie obraz pojawia się wyraźnie w jednej chwili.

To leniwe ładowanie w akcji. Gdy użytkownik przewija stronę w dół, obrazy nie są ładowane, dopóki nie są potrzebne.

Sprawia, że ​​strona działa bardzo szybko, szczególnie na urządzeniach mobilnych. Lazy loader można zastosować do dowolnej liczby obrazów na stronach internetowych.

Ale w tym rozwiązaniu brakuje jeszcze jednego elementu. Obrazy nie są w formatach nowej generacji.

Na szczęście istnieje teraz rozwiązanie, więc nie musisz zastępować wszystkich swoich obrazów. Optimole to wtyczka WordPress, która wykonuje wiele ciężkich zadań.

Nie tylko leniwie ładuje obrazy, ale także zastępuje je nowym adresem URL obrazu, który dostarcza obrazy nowej generacji.

Co więcej, zmienia rozmiar obrazów w locie.

Test Optimole'a

Przeprowadziłem wiele testów i za każdym razem, gdy sprawdzałem stronę, osiągała ona bardzo wysokie wyniki w teście szybkości Google na urządzeniach mobilnych.

Jeden z moich testów dotyczył strony internetowej o pełnej szerokości, zawierającej dziesięć dużych, nieskompresowanych i nieskompresowanych obrazów.

Innymi słowy, po prostu umieściłem stos dużych obrazów na stronie i opublikowałem go. (Obrazy zostały udostępnione dzięki uprzejmości Pixabay, więc nie wymagały uznania autorstwa na licencji Creative Commons.)

Strona była tak duża, że ​​nie mogłem pokazać obrazu. Dlatego pokażę ci to na filmie.

Kiedy testowałem stronę w Google, taki był wynik.

Nic dziwnego, biorąc pod uwagę rozmiar wszystkich obrazów.

Następnie aktywowałem Optimole. Możesz zobaczyć ustawienia, których użyłem poniżej. To wszystko, co musisz zrobić.

Jaki był więc wynik?

Na komputery stacjonarne, doskonały wynik.

W przypadku urządzeń mobilnych prawie doskonały wynik.

W GTmetrix wynik znów jest bliski ideału.

Pamiętaj, że są to rzeczywiste wyniki dla strony pełnej ogromnych obrazów w wysokiej rozdzielczości.

Zainstalowanie wtyczki i uzyskanie klucza API zajęło tylko kilka minut, a następnie tylko kilka sekund, aby aktywować ustawienia.

Tak więc w mniej niż pięć minut miałem niemal idealną stronę mobilną i witrynę.

Dowiedz się więcej o Optimole

Aby zobaczyć wtyczkę w akcji w prawdziwym świecie, odwiedź witrynę CodeinWP. Działa na Optimole, więc możesz przeprowadzać testy szybkości jego witryny.

Możesz sprawdzić swoją witrynę wchodząc na stronę Optimole.

Kliknij przycisk Sprawdź moją witrynę i wprowadź adres URL swojej witryny. Zobaczysz listę wszystkich swoich zdjęć i oszczędności, które możesz poczynić na swojej stronie internetowej.

Jeśli masz małą witrynę, dostępna jest bezpłatna wersja wtyczki. Ale jeśli masz dużą witrynę, możesz rozważyć opcję premium.

Przeczytanie tego artykułu zajęło Ci więcej czasu niż sprawienie, by Twoja witryna działała bardzo szybko dla użytkowników mobilnych. Więc na co czekasz?

Bardziej leniwe alternatywy ładowania

Jeśli nie chcesz konfigurować dostarczania obrazów Nextgen przez CDN, możesz skorzystać z wielu bezpłatnych opcji.

WordPress domyślnie zawiera teraz leniwe ładowanie. Jednak masz niewielką kontrolę nad tym, jak to działa. Zwykle lepiej jest użyć wtyczki, aby można było dostroić wydajność.

Smush to popularna i bezpłatna wtyczka WordPress do zmniejszania obrazów podczas ładowania ich do biblioteki multimediów.

Ale ma opcję aktywacji leniwego ładowania. Wypróbowałem to na kilku moich stronach i działa bez zarzutu. Po prostu aktywuj opcję i gotowe.

A3 Lazy Load to kolejna darmowa wtyczka. Używam go od dłuższego czasu na wielu moich stronach, w tym na tej.

Podoba mi się to, że mogę dopracować wiele opcji. Ma opcję wykluczenia widżetów, co rozwiązuje niektóre problemy z przeskakiwaniem w przypadku niektórych motywów.

BJ Lazy Load istnieje już od dłuższego czasu. Ma ponad 90 000 użytkowników. Jednak od dłuższego czasu nie jest aktualizowany.

Lazy Load to darmowa wtyczka z 60 000 instalacji. Jest to darmowy komponent WP Rocket, który jest kompleksowym rozwiązaniem do optymalizacji szybkości witryny.

Ostatnią wtyczką jest Lazy Load for Videos. Jest to dobre narzędzie do użycia, jeśli masz dużo filmów z YouTube na swojej stronie.

Co za wybór! Teraz nie masz żadnego powodu, aby mieć powolną witrynę mobilną.

Uwaga: nie mam powiązań z tym produktem. Moja recenzja Optimole opiera się na moich doświadczeniach jako użytkownika.

Więcej do przeczytania: Bezpłatne narzędzia do sprawdzania witryn i narzędzia SEO