Szybki WordPress – obrazki – leniwe ładowanie

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.

Poprzedni

PWA + WordPress – jak to zrobić bezboleśnie?

Następne

Jak sprawić żeby wpisy w WordPressie miały losowe adresy?

8 komentarzy

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

    • Nie, nie trzeba, same się „wygenerują” – dlaczego w cudzysłowie – bo nie ma ich na dysku tylko w bazie jako meta.

  2. 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.

  3. 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

  4. 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?

    • 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.

Oparte na WordPress & Theme by Anders Norén