Odłóż ładowanie obrazów poza ekranem w WordPressie

PageSpeed Insights przy sprawdzaniu strony wyświetla komunikat „Odłóż ładowanie obrazów poza ekranem”? To nic innego jak brak funkcji lazy load. Zobacz, co to znaczy, co to daje i jak zaimplementować tę funkcję w WordPressie.

Staramy się, aby strony otwierały się jak najszybciej i były najlżejsze. Każda sekunda ma wpływ na pozycjonowanie strony, a także na konwersję. Niestety, obecne trendy dotyczące popularnych treści potrafią znacząco to utrudniać. Dziś uwagę najbardziej przyciągają zdjęcia oraz materiały wideo. Pamiętajmy jednak, że te bez odpowiedniej optymalizacji (oraz umieszczone w nadmiarze) potrafią mocno spowolnić działanie witryny. Wiedzą o tym zwłaszcza osoby, które przetestowały swoją stronę pod kątem optymalizacji w narzędziu PageSpeed Insights i na szczycie problemów zobaczyły komunikat „Odłóż ładowanie obrazów poza ekranem”.

Szukasz sprawdzonego hostingu? Wybierz LH.pl i przyspiesz swoją stronę WWW.

Co oznacza komunikat „Odłóż ładowanie obrazów poza ekranem” w PageSpeed Insights?

Komunikat ten oznacza, że mamy sporo zdjęć, które ładują się od razu po wywołaniu danej strony, mimo że nie jest to konieczne. Duża część ładowanych obrazów znajduje się „poza ekranem”. Innymi słowy, są one w dalszej części witryny, poza widocznym początkowo fragmentem.

PageSpeed Insights - komunikat "Odłóż ładowanie obrazów poza ekranem"

Przeglądarka niepotrzebnie ładuje wszystko od razu, co zwiększa czas ładowania strony. I tu z pomocą przychodzi tzw. lazy load (z ang. leniwe ładowanie), czyli opóźnianie ładowania obrazów niewidocznych na ekranie.

Co to jest lazy load, czyli odkładanie ładowania obrazów poza ekranem?

Lazy load to technika optymalizacji strony, która polega na ładowaniu tylko tych zasobów, które są konieczne do wyświetlenia widocznej części. Wszystkie zdjęcia czy filmy umieszczone znacznie niżej, poza aktualnie widoczną częścią strony, pozostają niezaładowane. Do ich doczytania dochodzi dopiero wtedy, gdy użytkownik przewinie stronę do miejsca, w którym powinny być one wyświetlone.

Działa to na dość prostej zasadzie. Użytkownik wchodzi na stronę i przeglądarka buduje najpierw „szkielet”, bez automatycznego ładowania wszystkich obrazów i filmów. Następnie kod JavaScript sprawdza, jakie obrazy i filmy użytkownik powinien widzieć w danym miejscu na stronie, i ładuje te elementy. Reszta multimediów znajdujących się poza widoczną częścią strony pozostaje niezaładowana. Do jej załadowania dochodzi dopiero wtedy, gdy użytkownik przewinie treść do odpowiedniego miejsca.

W jaki sposób lazy load wpływa na optymalizację strony?

W ten sposób znacznie zmniejszamy „ładunek”, jaki przeglądarka musi odebrać z serwera przy otwarciu strony. Spowoduje to znaczne przyspieszenie ładowania witryny. Oczywiście, wynik ten będzie się różnić w zależności od tego, ile obrazków znajduje się na danej stronie. W PageSpeed Insights może się to przełożyć na kilka lub nawet parędziesiąt punktów.

Jak z pewnością wiesz, szybkość działania strony pozytywnie wpływa na pozycjonowanie strony, a więc na pozycję w wynikach wyszukiwania Google. Jeśli masz dużo obrazków, to powinieneś zadbać o to, aby audyt „odłóż ładowanie obrazów poza ekranem” był zaliczony.

Odłóż ładowanie obrazów poza ekranem w WordPressie

Najpierw warto sprawdzić, czy taka potrzeba w ogóle występuje, gdyż niektóre motywy obsługują ją domyślnie. Jeśli PageSpeed wyświetla ten komunikat na liście zaliczonych audytów, to nie musisz niczego zmieniać.

Jeśli jednak otrzymujesz czerwony komunikat „odłóż ładowanie obrazów poza ekranem”, a w opcjach Twojego motywu nie ma żadnej opcji typu „Enable lazy load”, to najprostszym sposobem jest skorzystanie z odpowiedniej wtyczki. A tych jest całkiem sporo. Poniżej pokażę tylko te, które są najpopularniejsze.

Wtyczka Smush – Compress, Optimize and Lazy Load Images

Wtyczka Smush jest od wielu lat popularnym rozwiązaniem (ponad milion aktywnych instalacji) do automatycznej kompresji zdjęć. Jeśli już ją posiadasz, to warto się jej bliżej przyjrzeć, gdyż posiada ona funkcję lazy load – wystarczy ją tylko ręcznie uruchomić.

Wejdź do w panelu WordPressa do Smush > Dashboard, a następnie udaj się do zakładki Lazy Load i kliknij przycisk Activate. Funkcja leniwego ładowania zostanie uruchomiona i wyświetlą się jej ustawienia.

Domyślne ustawienia sprawiają, że odkładanie ładowania obrazów poza ekranem działa w obrębie całej strony, wszystkich kategorii i wpisów, a także wpływa na wszystkie formaty zdjęć. Jeśli jednak włączenie tej opcji powoduje problemy z działaniem motywu lub wybranych typów podstron, to możesz np. wyłączyć działanie funkcji lazy load na stronie głównej, zignorować wybrane rozszerzenia plików bądź ręcznie wpisać identyfikatory lub klasy obrazów, które mają być pomijane. W ten sposób możesz szczegółowo dostosować, w jakim stopniu lazy load ma działać na Twojej stronie.

Wtyczka a3 Lazy Load

Jeśli preferujesz wtyczkę dedykowaną typowo pod funkcję lazy load, bez żadnych dodatkowych funkcji, to najpopularniejszym rozwiązaniem jest a3 Lazy Load. Wtyczka jest bardzo prosta w użyciu.

Po zainstalowaniu funkcja odkładania wczytywania obrazów poza ekranem działa automatycznie. Ustawienia wtyczki pozwalają dodatkowo dostosować, na jakie elementy lazy load ma działać (obrazy, elementy typu iframe, czyli np. osadzone materiały wideo), a także, w jakich miejscach ma działać. Istnieje też możliwość wykluczenia wybranych podstron z funkcji lazy load na podstawie adresu.

Jakich efektów oczekiwać po włączeniu odkładania ładowania obrazów poza ekranem?

Na potrzeby artykułu sprawdziłem oba powyższe rozwiązania w PageSpeed Insights na podstawie przykładowego, prostego bloga i dość długiego artykułu, zawierającego w treści kilkanaście słabo zoptymalizowanych obrazków w formacie JPG, o dość wysokiej wadze (słaba kompresja). Wykorzystany został motyw Oblique, który w repozytorium WordPressa wyświetla się dość wysoko na liście popularnych motywów.

Celem takiej kombinacji było odwzorowanie często spotykanej sytuacji wśród początkujących użytkowników, gdzie sytuacja z obrazkami jest mocno zaniedbana – są one duże, liczne i niezoptymalizowane (zbyt wysoka rozdzielczość, duża waga plików), a także ładują się one wszystkie bez funkcji lazy load. W takiej sytuacji, na wersji mobilnej PageSpeed pokazał wynik na poziomie 60 punktów.

Sytuacja zmieniła się dość mocno po włączeniu funkcji Lazy Load za pomocą dowolnej wtyczki. Ocena wzrosła do 81 punktów. To aż 21 punktów różnicy! Wykonując teraz kolejne czynności, takie jak dalsza optymalizacja obrazków (odpowiednia ich kompresja, ewentualna konwersja na format WebP) bez większych problemów wkroczymy w „zielone terytorium” na pułapie ponad 90 punktów.

Jak widzisz, optymalizacja zdjęć jest kluczowa, a funkcja Lazy Load w wielu przypadkach potrafi robić znaczącą różnicę.

Jeśli chcesz dowiedzieć się jeszcze więcej o tym, jak przyspieszyć swoją stronę WWW, to zapoznaj się z poniższym artykułem, który pomoże Ci podjąć odpowiednie decyzje dotyczące dalszej optymalizacji witryny.

jak przyspieszyć stronę,konferencja, influencer

ZOBACZ RÓWNIEŻ

Jak przyspieszyć stronę WWW? Optymalizacja strony od podstaw

Jak przyspieszyć stronę WWW? To pytanie, które zadaje sobie prawie każdy właściciel strony internetowej…

Sprawdź

Szukasz sprawdzonego hostingu? Wybierz LH.pl i przyspiesz swoją stronę WWW.
Default image
Błażej Starosta
Wieloletni webmaster, tworzący serwisy przy użyciu popularnych CMS typu WordPress oraz Prestashop. Ma doświadczenie w prowadzeniu sklepów internetowych i stara się być na bieżąco ze wszystkimi nowinkami technologicznymi. Uwielbia dzielić się swoją wiedzą, zawsze chętnie pomoże rozwikłać problemy.

Zostaw komentarz