Wpis jest jednym z cyklu:
Szybki WordPress – czyli co?

Co to właściwie znaczy „lazy load”? – Aby szybciej załadować stronę, ładowanie obrazków pozostawiamy na sam koniec, a właściwie na początek, ale już po załadowaniu całej strony. Brzmi może dziwaczenie, ale działa i mocno przyspiesza działanie witryny.

Z angielskiego „lazy load” – całe szczęście WordPress w wersji 5.4 wprowadził leniwe ładowanie do standardu z wykorzystaniem, zrozumiałego dla nowoczesnych przeglądarek, atrybutu loading="lazy", więc pozostaje nam przypilnowanie aby wszystkie wystąpienia obrazków miały zdefiniowaną długość (width) oraz wysokość (height) bo tylko wtedy atrybut loading będzie użyty.

Można oczywiście pokusić się o jeszcze agresywniejsze (choć nadal leniwe) ładowanie obrazków. Najmocniejszą, znaną mi metodą to wygenerowanie malutkiego podglądu 5×4 px pliku oraz zapisanie go jako meta, aby potem produkując stronę umieścić ten mikroskopijni plik, zakodowany metodą base64 jako źródło obrazka w HTML.

Gotowy plik obsługujący taką formą publikuję w moim repozytorium mu-wtyczek, który jest dostępny na gicie: iWorks WordPress MU Plugins, jako plik: iworks-aggresive-lazy-load.php

Jeżeli chcesz z niego skorzystać, to pobierz go i wrzuć do katalogu:

wp-content/mu-plugins

Co da wystarczająco dobrą integrację, natomiast do pełnej potrzeba dodatkowo pracy przy plikach motywu.

Komentarze

By to działało, trzeba przebudować miniaturki, by mieć tą 4*5? Bo szczerze, w moim pluginie do regenerowania miniaturek, nie widzę takiej.

I czemu jako MU, a nie zwykła wtyczka? Pytam, w sensie iż przy zwykłej WP zapewnia mechanizm ew. aktualizacji. MU trzeba aktualizować ręcznie :/

Nie ma tej wtyczki w żadnym repo, więc i tak nie ma możliwości aktualizacji, zresztą od dawana jest już dojrzałą wersją i nie pamiętam kiedy ostatni raz coś w niej zmieniałem.

To jak to sprawdzić, czy działa. Bo nie widzę u siebie, żadnych obrasków w meta. Co prawda img ma jakiegoś base64, ale z tego co widzę tam są obrazki 1×1

Piszesz w artykule o konieczności zastosowania atrybutu width i bright żeby działał Łazy loading natywny…a jak tego używać żeby strona działała responsywnie? Podawać minimalne wartości dla mobile, a na wyższych rozdzielczościach „naprawiać” to CSS?

WordPress produkuje „srcset”, który zawiera różne wielkości plików i przeglądarka sama wie co podstawić. A w CSS (z grubsza) dajemy „max-width:100%” – co zapobiega obrazkom większym niż ekran na którym są wyświetlane.

iWorks Marcin Pietrzak

Wykorzystujemy ciasteczka do spersonalizowania treści i reklam, aby oferować funkcje społecznościowe i analizować ruch w naszej witrynie.

Informacje o tym, jak korzystasz z naszej witryny, udostępniamy partnerom społecznościowym, reklamowym i analitycznym. Partnerzy mogą połączyć te informacje z innymi danymi otrzymanymi od Ciebie lub uzyskanymi podczas korzystania z ich usług.

Informacja o tym, w jaki sposób Google przetwarza dane, znajdują się tutaj.