W Tildzie leniwe ładowanie jest domyślnie włączone dla wszystkich stron internetowych. Pozwala na szybsze ładowanie stron internetowych, nawet na urządzeniach mobilnych.
Wdrożenie leniwego ładowania to kolejny krok w optymalizacji stron internetowych na Tildzie w celu szybszego ładowania. Technologie stale się rozwijają, a my zawsze pracujemy nad tym, aby ładowanie było jeszcze szybsze.
Lazy Load to wtyczka, która blokuje ładowanie obrazów poza obszarem wyświetlania. Oznacza to, że obrazy są ładowane, gdy użytkownik przewija stronę. Przyjrzyjmy się, jak to działa.
Wybierzmy zwykły szablon Tildy i opublikujmy go:http://project130385.tilda.ws/
Otwórz konsolę programisty przeglądarki, włącz imitację niskiej prędkości (3G) w ustawieniach i odśwież stronę.
Wybierzmy zwykły szablon Tildy i opublikujmy go:http://project130385.tilda.ws/
Otwórz konsolę programisty przeglądarki, włącz imitację niskiej prędkości (3G) w ustawieniach i odśwież stronę.
DOMContentLoaded: 628 milisekund
Ten parametr wskazuje, że wszystkie podstawowe skrypty i HTML zostały załadowane, umożliwiając użytkownikowi natychmiastowe wyświetlenie strony.
Ukończenie: 1,65 sekundy
Ten parametr wskazuje, ile czasu zajęło załadowanie całej witryny.
Przeniesione: 263KB
Ten parametr pokazuje, ile danych zostało przesłanych (w bajtach).
Ten parametr wskazuje, że wszystkie podstawowe skrypty i HTML zostały załadowane, umożliwiając użytkownikowi natychmiastowe wyświetlenie strony.
Ukończenie: 1,65 sekundy
Ten parametr wskazuje, ile czasu zajęło załadowanie całej witryny.
Przeniesione: 263KB
Ten parametr pokazuje, ile danych zostało przesłanych (w bajtach).
Te liczby wyglądają bardzo optymistycznie, ale wszystko jest względne, prawda? Przejdź do → Więcej ustawień witryny i zaznacz pole wyboru "Wyłącz leniwe ładowanie obrazów". Przetestuj stronę jeszcze raz.
DOMContentLoaded: 697 milisekund
Ten parametr wskazuje, że wszystkie podstawowe skrypty i kod HTML zostały załadowane, co oznacza, że użytkownik może od razu wyświetlić stronę.
Ukończenie: 10,14 sekundy
Ten parametr pokazuje, ile czasu zajęło załadowanie całej witryny.
Przeniesione: 1,8MB
Ten parametr pokazuje, ile danych zostało przesłanych (w bajtach).
Ten parametr wskazuje, że wszystkie podstawowe skrypty i kod HTML zostały załadowane, co oznacza, że użytkownik może od razu wyświetlić stronę.
Ukończenie: 10,14 sekundy
Ten parametr pokazuje, ile czasu zajęło załadowanie całej witryny.
Przeniesione: 1,8MB
Ten parametr pokazuje, ile danych zostało przesłanych (w bajtach).
Całkowity czas ładowania strony i ilość przesyłanych danych uległy zwielokrotnieniu.
Zobaczmy, czego jeszcze możemy się dowiedzieć, korzystając z PageSpeed Insights. Sprawdźmy stronę z wyłączoną optymalizacją.
Zobaczmy, czego jeszcze możemy się dowiedzieć, korzystając z PageSpeed Insights. Sprawdźmy stronę z wyłączoną optymalizacją.
Teraz włączmy Lazy Load dla obrazów:
Lazy Load blokuje obrazy, które nie są widoczne dla użytkowników,
co pozwala na szybsze ładowanie stron internetowych.
co pozwala na szybsze ładowanie stron internetowych.
Notatka
Jak usunąć kod JavaScript i CSS, który uniemożliwia wyświetlanie górnej części strony?
To pytanie często pojawia się po zrobieniu testu. Google odradza używanie skryptów u góry strony.
Teoretycznie możesz usunąć skrypty. Należy jednak pamiętać, że jest to analiza automatyczna i nie jest dokładna. Jak widzieliśmy, strony ładują się bardzo szybko, gdy włączone jest Lazy Load, ponieważ zoptymalizowaliśmy wszystko, co było do optymalizacji. Analiza wykazała, że usunięcie skryptów oszczędza 0,3 sekundy, ale prawie nie robi różnicy.
Dlatego zalecamy ignorowanie wyników automatycznego testu, który tak słabo reaguje na skrypty u góry strony.
Swoją drogą, jak Google zdaje własny test?
Dlatego zalecamy ignorowanie wyników automatycznego testu, który tak słabo reaguje na skrypty u góry strony.
Swoją drogą, jak Google zdaje własny test?
Ups!
