Atrybut loading=”lazy” – kiedy, jak i dlaczego go stosować

Atrybuty HTML

Loading to kolejny atrybut HTML, o których sporo już pisaliśmy na naszym blogu. W skrócie mówiąc atrybuty HTML to znaczniki, które pozwalają w kodzie przekazać konkretne wytyczne dla przeglądarki internetowej. Atrybuty HTML są częścią specyfikacji HTML, która cały czas jest rozwijana, a więc cyklicznie pojawiają się w niej nowe elementy, bądź też usuwane są te, które nie są już dalej przydatne we współczesnym internecie.

Atrybuty HTML mają więc istotne znaczenie dla działania całej strony internetowej pozwalając jednocześnie wpłynąć pozytywnie m.in. na pozycjonowanie strony w Google, czy też optymalizację jej wydajności. Nie inaczej jest w przypadku atrybutu loading, który w tym przypadku pozwala w pewien sposób wymusić sposób wczytywania obrazków po stronie użytkownika.

Zanim jeszcze przejdziemy do następnego rozdziału, w którym umówimy już sam atrybut loading="lazy" mamy dla Ciebie listę wszystkich poradników na naszym blogu, które mogą okazać się dla Ciebie przydatne w tym temacie:

I to tyle słowem wstępu. A teraz przejdźmy do tego jak działa oraz w jaki sposób stosować atrybut loading=”lazy” ☺️

Atrybut loading

Atrybut loading jak sama nazwa wskazuje odnosi się do ładowania, a w tym przypadku wykorzystywany jest tylko i wyłącznie na ten moment w odniesieniu do elementów <img> pozwalających na wczytywanie obrazków. Nie możesz więc stosować go np. w linkach <a> lub akapitach <p>. Atrybut loading jest wspierany przez wszystkie nowoczesne przeglądarki internetowej i bardzo prosty w użyciu. Atrybut loading posiada dwa możliwe do określenia stany: loading="lazy” i loading="eager". O tym jak one działają przeczytasz poniżej jednak warto tutaj wskazać, że leniwe wczytywanie zdjęć jest bardzo znaczące w kwestii SEO. Stosowanie atrybutu loading jest bowiem zalecane przez samo Google, a korzystanie z niego w UMIEJĘTNY sposób pozwala znacznie przyspieszyć stronę internetową, a także poprawić tak krytyczny parametr na stronie jak Largest Contentful Paint.

Z drugiej strony złe korzystanie z atrybutu loading=”lazy” może spowodować wzrost czasu przesunięcia układu określanego jako Cumulative Layout Shift. Jak więc poprawnie stosować atrybuty loading=”lazy” i loading=”eager”, aby nie zrobić krzywdy swojej stronie internetowej, a jeszcze lepiej zoptymalizować ją pod SEO?

O tym przeczytasz w następnym rozdziale tego poradnika 👇

Loading=”eager”

Atrybut loading=”eager” wskazuje przeglądarce internetowej, aby natychmiast po znalezieniu obiektu <img> załadowała również przypisaną do niego grafikę. Loading=”eager” jest domyślnym stanem tego atrybutu HTML i nie różni się niczym od sytuacji, gdy w ogóle nie umieścisz go w kodzie strony.

Warto jednak w miejscach tam gdzie to potrzebne skorzystać z tej możliwości i dodać loading=”eager”. A gdzie one występują? 🤨 Przede wszystkim dotyczy to miejsc w tzw. sekcji Above the Fold, czyli pierwszym, widocznym obszarze strony internetowej po załadowaniu.

Na przykładzie wpisu na naszym blogu w sekcji Above the Fold widocznej powyżej znajduje się wyróżniający obrazek, którego załadowanie z atrybutem loading=”lazy” negatywnie wpłynie na SEO i wspomniany parametr Cumulative Layout Shift. Z tego powodu wczytujemy go z atrybutem eager, co możesz zobaczyć w kodzie naszej strony:

Drugim takim elementem jest np. logo, które jest zawsze widoczne i zdecydowanie nie powinno być wczytywane leniwie. Wystarczy więc dodać do elementu <img> kod loading=”eager”, a przeglądarka będzie wiedziała, aby element ten wczytać natychmiast i bez żadnego opóźnienia.

A co z loading=”lazy”? 🤔

Loading=”lazy”

Ten atrybut wskazuje przeglądarce, aby wczytać element z opóźnieniem i dopiero, gdy pojawi się on w widocznym obszarze użytkownika. Z tego powodu loading=”lazy”, czyli leniwe wczytywanie zdjęć pozwala znacząco przyspieszyć stronę internetową, szczególnie jeżeli pod wskazanym adresem URL znajduje się wiele grafik. Atrybut loading=”lazy” powinien być więc stosowany dla wszystkich obrazków, które nie są od razu widoczne dla użytkownika.

W przypadku posta stosujemy więc na naszej stronie atrybut lazy dla grafik w jego treści, co możesz zobaczyć w kodzie strony:

Jego dodanie jest bajecznie proste i wystarczy w znaczniku <img> wstawić kod loading="lazy" i gotowe 💁‍♂️ Nasza strona zyska więc na takim zabiegu w oczach Google, a użytkownik otrzyma jeszcze szybciej oczekiwane treści, szczególnie w przypadku urządzeń mobilnych. W dodatku odpocznie także Twój serwer, ponieważ w ten sposób oszczędzisz mu sporo pracy i transferu danych.

Loading lazy i eager w praktyce

Powyższe sposoby polegają na ręcznym dodawaniu atrybutów loading=”lazy” i loading=”eager” do obiektów na stronie internetowej, co może być trochę karkołomne. Aby jednak zadanie to było w pełni zautomatyzowane potrzebne jest skorzystanie ze skryptów, które zrobią to za Ciebie. Wymaga to modyfikacji części kodu strony odpowiadającej za wyświetlanie obrazków, a więc i sporo pracy programisty.

W przypadku platformy WordPress, w której się specjalizujemy od lat, od wersji WordPress 5.7 atrybut loading=”lazy” jest automatycznie dodawany do wszystkich grafik na stronie. Jak już jednak wiesz nie jest to najlepsze rozwiązanie, dlatego warto skorzystać z tej prostej funkcji, która pozwoli Ci wyłączyć całkowicie leniwe ładowanie zdjęć:

Wystarczy, że w pliku functions.php dodasz poniższy kod:

add_filter( 'wp_lazy_loading_enabled', '__return_false' );

Istnieją co prawda gotowe skrypty i wtyczki, które w teorii rozwiązuje całkowicie problem leniwego wczytywania zdjęć, jednak tylko ręcznie wykonana praca w tym zakresie pozwoli osiągnąć Ci zadowalające efekty na stronie internetowej. W Z tego powodu nie polecamy w tym poradniku żadnych gotowych modułów, które nie zastąpią analizy i pracy naszego eksperta w tej dziedzinie ☺️

Dodaj loading=”lazy” razem z nami w WordPress

Nasi programiści są zawsze gotowi, aby pomóc Ci w każdym problemie ze stroną WordPress, także dotyczącym atrybutu loading lazy. Jeżeli chcesz abyśmy za Ciebie poprawnie wdrożyli na stronie internetowej leniwe wczytywanie obrazków to skontaktuj się z nami już teraz. Szybko i skutecznie pomożemy Ci poprawić działanie systemu WordPress zgodnie z Twoimi potrzebami 🤓 Opisz nam więc dokładnie jak możemy Ci pomóc i do usłyszenia niebawem 🖐