{"id":8399,"date":"2020-01-09T09:29:25","date_gmt":"2020-01-09T08:29:25","guid":{"rendered":"https:\/\/www.lh.pl\/pomoc\/odloz-ladowanie-obrazow-poza-ekranem-w-wordpressie\/"},"modified":"2021-11-04T12:38:27","modified_gmt":"2021-11-04T11:38:27","slug":"odloz-ladowanie-obrazow-poza-ekranem-w-wordpressie","status":"publish","type":"post","link":"https:\/\/www.lh.pl\/pomoc\/odloz-ladowanie-obrazow-poza-ekranem-w-wordpressie\/","title":{"rendered":"Od\u0142\u00f3\u017c \u0142adowanie obraz\u00f3w poza ekranem w WordPressie"},"content":{"rendered":"\r\n

PageSpeed Insights przy sprawdzaniu strony wy\u015bwietla komunikat „Od\u0142\u00f3\u017c \u0142adowanie obraz\u00f3w poza ekranem”? To nic innego jak brak funkcji lazy load. Zobacz, co to znaczy, co to daje i jak zaimplementowa\u0107 t\u0119 funkcj\u0119 w WordPressie.<\/strong><\/p>\r\n\r\n\r\n\r\n

\"\"<\/figure><\/div>\r\n\r\n\r\n\r\n

Staramy si\u0119, aby strony otwiera\u0142y si\u0119 jak najszybciej i by\u0142y najl\u017cejsze. Ka\u017cda sekunda ma wp\u0142yw na pozycjonowanie strony, a tak\u017ce na konwersj\u0119<\/strong><\/a>. Niestety, obecne trendy dotycz\u0105ce popularnych tre\u015bci potrafi\u0105 znacz\u0105co to utrudnia\u0107. Dzi\u015b uwag\u0119 najbardziej przyci\u0105gaj\u0105 zdj\u0119cia oraz materia\u0142y wideo. Pami\u0119tajmy jednak, \u017ce te bez odpowiedniej optymalizacji (oraz umieszczone w nadmiarze) potrafi\u0105 mocno spowolni\u0107 dzia\u0142anie witryny. Wiedz\u0105 o tym zw\u0142aszcza osoby, kt\u00f3re przetestowa\u0142y swoj\u0105 stron\u0119 pod k\u0105tem optymalizacji w narz\u0119dziu PageSpeed Insights i na szczycie problem\u00f3w zobaczy\u0142y komunikat „Od\u0142\u00f3\u017c \u0142adowanie obraz\u00f3w poza ekranem”<\/strong>.<\/p>\r\n\r\n\r\n\r\n

Szukasz sprawdzonego hostingu? Wybierz LH.pl <\/a>i przyspiesz swoj\u0105 stron\u0119 WWW.<\/strong><\/td><\/tr><\/tbody><\/table><\/figure>\r\n\r\n\r\n\r\n

Co oznacza komunikat „Od\u0142\u00f3\u017c \u0142adowanie obraz\u00f3w poza ekranem” w PageSpeed Insights?<\/h2>\r\n\r\n\r\n\r\n

Komunikat ten oznacza, \u017ce mamy sporo zdj\u0119\u0107, kt\u00f3re \u0142aduj\u0105 si\u0119 od razu po wywo\u0142aniu danej strony, mimo \u017ce nie jest to konieczne. Du\u017ca cz\u0119\u015b\u0107 \u0142adowanych obraz\u00f3w znajduje si\u0119 „poza ekranem”. Innymi s\u0142owy, s\u0105 one w dalszej cz\u0119\u015bci witryny, poza widocznym pocz\u0105tkowo fragmentem.<\/p>\r\n\r\n\r\n\r\n

\"PageSpeed<\/figure><\/div>\r\n\r\n\r\n\r\n

Przegl\u0105darka niepotrzebnie \u0142aduje wszystko od razu, co zwi\u0119ksza czas \u0142adowania strony. I tu z pomoc\u0105 przychodzi tzw. lazy load (z ang. leniwe \u0142adowanie), czyli op\u00f3\u017anianie \u0142adowania obraz\u00f3w niewidocznych na ekranie.<\/p>\r\n\r\n\r\n\r\n

Co to jest lazy load, czyli odk\u0142adanie \u0142adowania obraz\u00f3w poza ekranem?<\/h2>\r\n\r\n\r\n\r\n

Lazy load to technika optymalizacji strony, kt\u00f3ra polega na \u0142adowaniu tylko tych zasob\u00f3w, kt\u00f3re s\u0105 konieczne do wy\u015bwietlenia aktualnie widocznej cz\u0119\u015bci. Wszystkie zdj\u0119cia czy filmy umieszczone znacznie ni\u017cej, poza aktualnie widoczn\u0105 cz\u0119\u015bci\u0105 strony, pozostaj\u0105 nieza\u0142adowane. Do ich doczytania dochodzi dopiero wtedy, gdy u\u017cytkownik przewinie stron\u0119 do miejsca, w kt\u00f3rym powinny by\u0107 one wy\u015bwietlone.<\/p>\r\n\r\n\r\n\r\n

Dzia\u0142a to na do\u015b\u0107 prostej zasadzie. U\u017cytkownik wchodzi na stron\u0119 i przegl\u0105darka buduje najpierw „szkielet”, bez automatycznego \u0142adowania wszystkich obraz\u00f3w i film\u00f3w. Nast\u0119pnie sprawdza, jakie obrazy i filmy u\u017cytkownik powinien widzie\u0107 w danym miejscu na stronie, i \u0142aduje te elementy. Reszta multimedi\u00f3w znajduj\u0105cych si\u0119 poza widoczn\u0105 cz\u0119\u015bci\u0105 strony pozostaje nieza\u0142adowana. Do jej za\u0142adowania dochodzi dopiero wtedy, gdy u\u017cytkownik przewinie tre\u015b\u0107 do odpowiedniego miejsca.<\/p>\r\n\r\n\r\n\r\n

W jaki spos\u00f3b lazy load wp\u0142ywa na optymalizacj\u0119 strony?<\/h2>\r\n\r\n\r\n\r\n

W ten spos\u00f3b znacznie zmniejszamy „\u0142adunek”, jaki przegl\u0105darka musi odebra\u0107 z serwera przy otwarciu strony. Spowoduje to znaczne przyspieszenie \u0142adowania witryny. Oczywi\u015bcie, wynik ten b\u0119dzie si\u0119 r\u00f3\u017cni\u0107 w zale\u017cno\u015bci od tego, ile obrazk\u00f3w i innych multimedi\u00f3w znajduje si\u0119 na danej stronie. W PageSpeed Insights mo\u017ce si\u0119 to prze\u0142o\u017cy\u0107 na kilka lub nawet par\u0119dziesi\u0105t punkt\u00f3w.<\/p>\r\n\r\n\r\n\r\n

Jak z pewno\u015bci\u0105 wiesz, szybko\u015b\u0107 dzia\u0142ania strony pozytywnie wp\u0142ywa na pozycjonowanie strony, a wi\u0119c na pozycj\u0119 w wynikach wyszukiwania Google. Je\u015bli masz du\u017co obrazk\u00f3w, to powiniene\u015b zadba\u0107 o to, aby audyt „od\u0142\u00f3\u017c \u0142adowanie obraz\u00f3w poza ekranem” by\u0142 zaliczony.<\/p>\r\n\r\n\r\n\r\n

Najpierw warto sprawdzi\u0107, czy potrzeba implementacji tej funkcji w og\u00f3le wyst\u0119puje. Sprawd\u017a swoj\u0105 stron\u0119 w narz\u0119dziu PageSpeed Insights i przejrzyj raport. Je\u015bli PageSpeed wy\u015bwietla komunikat o odk\u0142adaniu obraz\u00f3w poza ekran na li\u015bcie zaliczonych audyt\u00f3w, to nie musisz niczego zmienia\u0107.<\/strong> Je\u015bli jednak pojawia Ci si\u0119 czerwona informacja, \u017ce ta funkcja wymaga poprawy, to masz kilka rozwi\u0105za\u0144.<\/p>\r\n\r\n\r\n\r\n

Wbudowane w WordPressa op\u00f3\u017anione \u0142adowanie obraz\u00f3w (lazy load)<\/h2>\r\n\r\n\r\n\r\n

Do niedawna w celu zaimplementowania funkcji lazy load konieczne by\u0142o zainstalowanie wtyczki do WordPressa. Teraz jednak w przypadku wielu stron nie b\u0119dzie takiej potrzeby. Wynika to z tego, \u017ce WordPress w wersjach 5.5 i nowszych ma wbudowan\u0105 funkcj\u0119 lazy load<\/strong>. <\/p>\r\n\r\n\r\n\r\n

Jak w\u0142\u0105czy\u0107 wbudowany lazy load w WordPressie?<\/h3>\r\n\r\n\r\n\r\n

Nie musisz niczego r\u0119cznie aktywowa\u0107. Je\u015bli otrzymujesz z PageSpeed Insights komunikat o brakuj\u0105cej funkcji lazy load, to zaktualizuj WordPressa do najnowszej wersji, wyczy\u015b\u0107 cache i spr\u00f3buj wykona\u0107 diagnostyk\u0119 ponownie. To wszystko, co musisz zrobi\u0107, aby w\u0142\u0105czy\u0107 wbudowan\u0105 implementacj\u0119 tej funkcji. Po prostu je\u015bli jeszcze tego nie zrobi\u0142e\u015b, zaktualizuj WordPressa do wersji 5.5 lub nowszej.<\/strong><\/p>\r\n\r\n\r\n\r\n

Warto jednak pami\u0119ta\u0107, \u017ce lazy load wbudowany w WordPressa dzia\u0142a nieco inaczej ni\u017c ten z wtyczek<\/strong>. <\/p>\r\n\r\n\r\n\r\n

Jak dzia\u0142a wbudowany lazy load w WordPressie?<\/h3>\r\n\r\n\r\n\r\n

Wtyczki wykorzystuj\u0105 dodatkowy kod JavaScript, kt\u00f3ry op\u00f3\u017ania \u0142adowanie obraz\u00f3w, czyli za\u0142atwiaj\u0105 ca\u0142\u0105 spraw\u0119 poniek\u0105d „przejmuj\u0105c kontrol\u0119” nad \u0142adowaniem obraz\u00f3w. WordPress nie jest tak „inwazyjny” i zamiast tego wykorzystuje nowy atrybut „loading” w HTML, doklejaj\u0105c go do obraz\u00f3w, bez u\u017cycia JavaScript.<\/p>\r\n\r\n\r\n\r\n

Czym jest atrybut „loading”? HTML zosta\u0142 jaki\u015b czas temu wyposa\u017cony we wspomniany atrybut loading<\/strong> i po doklejeniu go do obrazka lub elementu iframe mo\u017cemy okre\u015bli\u0107 za pomoc\u0105 odpowiedniej warto\u015bci, w jaki spos\u00f3b dany element ma si\u0119 \u0142adowa\u0107:<\/p>\r\n\r\n\r\n\r\n