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.
SpeX
By to działało, trzeba przebudować miniaturki, by mieć tą 4*5? Bo szczerze, w moim pluginie do regenerowania miniaturek, nie widzę takiej.
Marcin Pietrzak
Nie, nie trzeba, same się „wygenerują” – dlaczego w cudzysłowie – bo nie ma ich na dysku tylko w bazie jako meta.
SpeX
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 :/
Marcin Pietrzak
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.
SpeX
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
Marcin Pietrzak
select * from {$wpdb->postmeta} where meta_key = '_iworks_tiny’;
Dominik
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?
Marcin Pietrzak
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.