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.


Opublikowano

in

by

Komentarze

8 odpowiedzi na „Szybki WordPress – obrazki – leniwe ładowanie”

  1. Awatar 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.

    1. Awatar Marcin Pietrzak

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

  2. Awatar 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 :/

    1. Awatar 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.

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

    1. Awatar Marcin Pietrzak

      select * from {$wpdb->postmeta} where meta_key = '_iworks_tiny’;

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

    1. Awatar 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.

Jeżeli chcesz skomentować, napisz mail na adres marcin w domenie strony na której jesteś. Dodam twoj komentarz.