{"id":227757,"date":"2022-10-05T15:22:00","date_gmt":"2022-10-05T12:22:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=227757"},"modified":"2022-11-08T19:55:39","modified_gmt":"2022-11-08T16:55:39","slug":"lazy-load-wordpress-wybor-najlepszej-wtyczki-do-pracy","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pl\/lazy-load-wordpress-wybor-najlepszej-wtyczki-do-pracy\/","title":{"rendered":"Lazy load WordPress: Wyb\u00f3r najlepszej wtyczki do pracy"},"content":{"rendered":"\n

Nie ma nic bardziej frustruj\u0105cego dla u\u017cytkownik\u00f3w ni\u017c czekanie na przes\u0142anie witryny. Coraz wi\u0119cej witryn jest wype\u0142nionych filmami i obrazami, a ka\u017cdy obraz wymaga nowego \u017c\u0105dania HTTP. WordPress leniwe \u0142adowanie to \u0142atwe w instalacji rozwi\u0105zanie, kt\u00f3re przyspiesza ka\u017cd\u0105 tak\u0105 witryn\u0119 z obrazami<\/a>.<\/p>\n

Projektuj\u0105c nasz\u0105 stron\u0119 wpDataTables<\/a><\/strong> brali\u015bmy r\u00f3wnie\u017c pod uwag\u0119 mo\u017cliwo\u015b\u0107 tej komplikacji, poniewa\u017c u\u017cywamy wielu zdj\u0119\u0107 i film\u00f3w.<\/p>\n

Co to jest leniwy \u0142adunek? Lazyload oznacza, \u017ce \u200b\u200bwideo, obrazy lub ramki iframe \u0142aduj\u0105 si\u0119 dopiero po wej\u015bciu do widocznego obszaru, a pozosta\u0142e obrazy b\u0119d\u0105 \u0142adowane, gdy widzowie przewijaj\u0105 stron\u0119 witryny. To znacznie skr\u00f3ci czas \u0142adowania Twojej witryny i uniemo\u017cliwi u\u017cytkownikom jej opuszczenie.<\/p>\n

Korzy\u015bci z leniwego obci\u0105\u017cenia<\/strong><\/h3>\n

Oczywist\u0105 zalet\u0105 WordPress Lazy Load s\u0105 szybsze czasy \u0142adowania. Poniewa\u017c \u0142adujesz tylko cz\u0119\u015b\u0107 swojej strony, jej zawarto\u015b\u0107 pojawi si\u0119 szybciej w przegl\u0105darce. W rezultacie odwiedzaj\u0105cy zu\u017cywaj\u0105 mniej przepustowo\u015bci, co jest wielk\u0105 korzy\u015bci\u0105 dla os\u00f3b korzystaj\u0105cych z mobilnego po\u0142\u0105czenia danych.<\/p>\n

Dzi\u0119ki temu odwiedzaj\u0105cy nie tylko b\u0119d\u0105 mogli szybko uzyska\u0107 dost\u0119p do Twojej witryny, ale tak\u017ce zaoszcz\u0119dz\u0105 na swoim abonamencie na mobiln\u0105 transmisj\u0119 danych: po co wykorzystywa\u0107 ruch danych na \u0142adowanie obraz\u00f3w, kt\u00f3rych nie potrzebuj\u0105 lub chc\u0105 ogl\u0105da\u0107? Wtyczka z leniwym \u0142adowaniem to podw\u00f3jnie korzystna technika, kt\u00f3rej potrzebuj\u0105 wszystkie witryny z du\u017cymi obrazami.<\/p>\n

Wady leniwego obci\u0105\u017cenia<\/strong><\/h3>\n

Lazyloading nie jest technik\u0105 przyjazn\u0105 dla wyszukiwarek przez ca\u0142y czas, poniewa\u017c nie tylko op\u00f3\u017aniasz \u0142adowanie tre\u015bci dla u\u017cytkownik\u00f3w, ale tak\u017ce op\u00f3\u017aniasz \u0142adowanie tre\u015bci dla robot\u00f3w wyszukiwarek, tj. wyszukiwarki nie indeksuj\u0105 cz\u0119\u015bci lub ca\u0142o\u015bci tej tre\u015bci. Nie jest dobre dla SEO!<\/p>\n

Kiedy leniwe \u0142adowanie WordPressa jest u\u017cywane do op\u00f3\u017aniania \u0142adowania post\u00f3w, a nie tylko obraz\u00f3w, jest du\u017cym problemem.<\/p>\n

Inn\u0105 wad\u0105 leniwych obraz\u00f3w jest obni\u017cenie jako\u015bci do\u015bwiadcze\u0144 u\u017cytkownik\u00f3w. Wszyscy do\u015bwiadczyli wt\u00f3rnego efektu leniwego \u0142adowania podczas bardzo szybkiego przewijania strony. W tym procesie rzeczywiste wizualizacje zast\u0119puj\u0105 obrazy zast\u0119pcze, a zawarto\u015b\u0107 strony cz\u0119sto przeskakuje.<\/p>\n

Tak d\u0142ugo, jak sprytnie korzystasz z leniwego \u0142adowania WordPressa i masz oko na SEO i wra\u017cenia u\u017cytkownika, b\u0119dziesz czerpa\u0107 tylko korzy\u015bci z leniwego \u0142adowania. Przeczytaj wi\u0119cej o tym, jak leniwe \u0142adowanie obraz\u00f3w, najlepsza wtyczka WordPress do leniwego \u0142adowania dla Twojej witryny i leniwe obrazy WordPress.<\/p>\n

\u201eJestem przeciwny leniwemu \u0142adowaniu. Dla mnie skutkuje to z\u0142ym UX", m\u00f3wi Jerry Low z Web Hosting Secrets Revealed<\/a>, \u201eMoim rozwi\u0105zaniem zawsze by\u0142o stosowanie prostej sztuczki JavaScript, aby op\u00f3\u017ani\u0107 \u0142adowanie obrazu.<\/p>\n

Jest to szczeg\u00f3lnie wa\u017cne, je\u015bli masz stron\u0119 z du\u017cymi obrazami. Ostatni\u0105 rzecz\u0105, jakiej chcesz, jest to, aby u\u017cytkownicy, kt\u00f3rzy szybko przewijaj\u0105 w d\u00f3\u0142, znale\u017ali si\u0119 wpatrzeni w pusty ekran”.<\/p>\n

W\u0142\u0105czanie LazyLoad na WordPress<\/strong><\/h3>\n

Technik\u0119 lazyload mo\u017cna \u0142atwo w\u0142\u0105czy\u0107 na dowolnej witrynie WordPress za pomoc\u0105 wtyczki WordPress Lazy Load. Istnieje wiele leniwych wtyczek WordPress, z kt\u00f3rych mo\u017cesz wybiera\u0107, a oto niekt\u00f3re z najpopularniejszych:<\/p>\n

    \n
  1. \n

    Przyspieszenie \u2013 leniwe \u0142adowanie<\/a><\/h3>\n<\/li>\n<\/ol>\n

    \"Lazy<\/a><\/p>\n

    Ta wtyczka, wdra\u017caj\u0105ca technik\u0119 \u201eLazy Load”, pozwala unikn\u0105\u0107 pobierania obraz\u00f3w i element\u00f3w iframe, kt\u00f3re nie s\u0105 wy\u015bwietlane na ekranie (na przyk\u0142ad obraz\u00f3w na dole strony), dop\u00f3ki u\u017cytkownik ich nie wy\u015bwietli. Poprawia to szybko\u015b\u0107 \u0142adowania strony i oszcz\u0119dza przepustowo\u015b\u0107.<\/p>\n

      \n
    1. \n

      BJ leniwy \u0142adunek<\/a><\/h3>\n<\/li>\n<\/ol>\n

      \"Lazy<\/a><\/p>\n

      BJLazy Load lub BJLoad to najlepsza wtyczka Lazy Load, je\u015bli chcesz leniwie \u0142adowa\u0107 obrazy i zast\u0119powa\u0107 je symbolami zast\u0119pczymi. Wybrane obrazy mog\u0105 by\u0107 obrazami Gravatar, obrazami post\u00f3w, miniaturami lub ramkami iFrame. Mo\u017cesz tak\u017ce dostosowa\u0107 niekt\u00f3re ustawienia, w tym wyb\u00f3r symboli zast\u0119pczych.<\/p>\n

      BJLazy to wtyczka WordPress Lazy Load, kt\u00f3ra obs\u0142uguje obrazy zoptymalizowane pod wzgl\u0119dem rozmiaru<\/a>, tzn. automatycznie dostarcza obrazy o zmniejszonej wielko\u015bci w responsywnych projektach i zapewnia obrazy hiDPI dla wy\u015bwietlacza siatk\u00f3wki Apple i innych ekran\u00f3w hiDPI.<\/p>\n

        \n
      1. \n

        Zedna WP Image Lazy Load<\/a><\/h3>\n<\/li>\n<\/ol>\n

        \"Lazy<\/a><\/p>\n

        Skr\u00f3cenie czasu \u0142adowania strony poprzez progresywne \u0142adowanie obraz\u00f3w i innych element\u00f3w. Za\u0142aduj\u0105 si\u0119, gdy dotr\u0105 do widocznej cz\u0119\u015bci ekranu.<\/p>\n

        Wtyczka wp\u0142ywa na te elementy:<\/p>\n

          \n
        1. <img><\/code>\u00a0element<\/li>\n
        2. W\u0142a\u015bciwo\u015b\u0107 CSS\u00a0background-image<\/code><\/li>\n
        3. responsywne obrazy z srcset<\/code>\u00a0atrybutem<\/li>\n
        4. <iframe><\/code>\u00a0element<\/li>\n
        5. <video><\/code>\u00a0element<\/li>\n<\/ol>\n

          Cechy:<\/p>\n