Na stronie Tilda leniwe ładowanie jest domyślnie włączone dla wszystkich stron internetowych. Dzięki temu strony ładują się szybciej, nawet na urządzeniach mobilnych.
Wdrożenie leniwego ładowania to kolejny krok w optymalizacji stron internetowych na Tilda pod kątem szybszego ładowania. Technologie stale ewoluują, 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 Tilda 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 Tilda 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.
Finish: 1,65 sekundy
Ten parametr wskazuje, ile czasu zajęło załadowanie całej strony.
Transfer: 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.
Finish: 1,65 sekundy
Ten parametr wskazuje, ile czasu zajęło załadowanie całej strony.
Transfer: 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 Ustawień witryny → Więcej 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ę.
Finish: 10.14 sekund
Ten parametr pokazuje, ile czasu zajęło załadowanie całej witryny.
Transfer: 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ę.
Finish: 10.14 sekund
Ten parametr pokazuje, ile czasu zajęło załadowanie całej witryny.
Transfer: 1.8MB
Ten parametr pokazuje, ile danych zostało przesłanych (w bajtach).
Ogólny czas ładowania strony i ilość przesyłanych danych uległy zwielokrotnieniu.
Zobaczmy, czego jeszcze możemy się dowiedzieć za pomocą PageSpeed Insights. Sprawdźmy stronę z wyłączoną optymalizacją.
Zobaczmy, czego jeszcze możemy się dowiedzieć za pomocą 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.
Uwaga
Jak usunąć kod JavaScript i CSS, który uniemożliwia wyświetlanie górnej części strony?
To pytanie często pojawia się po wykonaniu testu. Google odradza używanie skryptów na górze strony.
Teoretycznie można 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 po włączeniu Lazy Load, ponieważ zoptymalizowaliśmy wszystko, co było do zoptymalizowania. Analiza wykazała, że usunięcie skryptów pozwala zaoszczędzić 0,3 sekundy, ale nie robi to prawie żadnej różnicy.
Dlatego zalecamy zignorowanie wyników automatycznego testu, który tak słabo reaguje na skrypty w górnej części strony.
Swoją drogą, jak Google przechodzi swój własny test?
Dlatego zalecamy zignorowanie wyników automatycznego testu, który tak słabo reaguje na skrypty w górnej części strony.
Swoją drogą, jak Google przechodzi swój własny test?
Ups!
