{"id":7442,"date":"2024-01-18T04:02:31","date_gmt":"2024-01-18T04:02:31","guid":{"rendered":"https:\/\/musilda.cz\/?p=7442"},"modified":"2024-01-18T04:02:31","modified_gmt":"2024-01-18T04:02:31","slug":"lazy-loading-ve-wordpressu","status":"publish","type":"post","link":"https:\/\/affinite.io\/cs\/lazy-loading-ve-wordpressu\/","title":{"rendered":"Lazy loading ve WordPressu"},"content":{"rendered":"\n
Pokud je n\u00e1\u0161 web p\u0159epln\u011bn r\u016fzn\u00fdmi vizu\u00e1ln\u00edmi prvky, zpomalujeme jeho celkovou rychlost a sni\u017eujeme tak n\u00e1v\u0161t\u011bvnost v\u010detn\u011b SEO. <\/p>\n\n\n\n
\u0158e\u0161en\u00edm by samoz\u0159ejm\u011b mohlo b\u00fdt odstran\u011bn\u00ed vizu\u00e1ln\u00edch prvk\u016f, ale v tomto \u010dl\u00e1nku si uk\u00e1\u017eeme lep\u0161\u00ed a efektivn\u011bj\u0161\u00ed zp\u016fsob. Jak ji\u017e z n\u00e1zvu vypl\u00fdv\u00e1, \u0159e\u0161en\u00edm bude lazy loading.<\/p>\n\n\n\n
V doslovn\u00e9m p\u0159ekladu „l\u00edne na\u010d\u00edt\u00e1n\u00ed“ zjednodu\u0161en\u011b \u0159e\u010deno umo\u017en\u00ed na\u010d\u00edtat vizu\u00e1ly rychleji. <\/p>\n\n\n\n
Bez lazy loadingu by se u\u017eivateli p\u0159i na\u010d\u00edt\u00e1n\u00ed na\u0161\u00ed str\u00e1nky na\u010detli v\u0161echny obr\u00e1zky najednou, ale s pou\u017eit\u00edm lazy loadingu se obr\u00e1zky na\u010d\u00edtaj\u00ed postupn\u011b v z\u00e1vislosti na tom, ve kter\u00e9 \u010d\u00e1sti webu se n\u00e1v\u0161t\u011bvn\u00edk moment\u00e1ln\u011b nach\u00e1z\u00ed. <\/p>\n\n\n\n
St\u00e1hnou se tedy v\u017edy pouze obr\u00e1zky viditeln\u00e9 na obrazovce. Zbytek obr\u00e1zk\u016f je p\u0159ed na\u010dten\u00edm nahrazeno placeholdery.<\/p>\n\n\n\n Lazy loading s sebou sice p\u0159in\u00e1\u0161\u00ed plno benefit\u016f. ale je vhodn\u00e9 m\u00edt na pam\u011bti, \u017ee ne v\u017edy mus\u00ed b\u00fdt jeho implementace vhodn\u00e1. <\/p>\n\n\n\n Existuje n\u011bkolik zp\u016fsob\u016f, pomoc\u00ed kter\u00fdch lze funkci nastavit. Uvedeme si zde ty nejroz\u0161\u00ed\u0159en\u011bj\u0161\u00ed a nejpopul\u00e1rn\u011bj\u0161\u00ed metody.<\/p>\n\n\n\n Od verze WordPressu 5.4 byl lazy loading p\u0159id\u00e1n a m\u011bl by b\u00fdt automaticky povolen. Pro implementaci lazy loadingu by tento zp\u016fsob mohl b\u00fdt nejjednodu\u0161\u0161\u00ed, ale rozhodn\u011b ne ten nejlep\u0161\u00ed. <\/p>\n\n\n\n Velikou nev\u00fdhodou je chyb\u011bj\u00edc\u00ed nastaven\u00ed, kdy nem\u016f\u017eeme zvolit, kter\u00e9 obr\u00e1zky na\u010d\u00edtat pomoc\u00ed lazy loading a kter\u00e9 nikoliv. WordPress by tedy mohl t\u00e9to funkce nadm\u011brn\u011b vyu\u017e\u00edvat a ve fin\u00e1le zpomalit celkovou rychlost webu.<\/p>\n\n\n\n V\u011bt\u0161ina zn\u00e1m\u00fdch prohl\u00ed\u017ee\u010d\u016f, mezi kter\u00e9 spad\u00e1 nap\u0159. Chrome, Firefox a Opera podporuj\u00ed tzv. nativn\u00ed na\u010d\u00edt\u00e1n\u00ed obr\u00e1zk\u016f. Jedn\u00e1 se o vestav\u011bnou funkcionalitu prohl\u00ed\u017ee\u010de, kterou m\u016f\u017eeme nastavit velmi jednodu\u0161e.<\/p>\n\n\n\n Pokud chceme n\u011bkter\u00e9mu obr\u00e1zku nastavit nativn\u00ed lazy loading, mus\u00edme k n\u011bmu p\u0159idat atribut loading=“lazy“. <\/p>\n\n\n\n Ve WordPressu m\u016f\u017eeme atributu „loading“ nastavit a\u017e t\u0159i r\u016fzn\u00e9 hodnoty:<\/p>\n\n\n\n Kompletn\u00ed z\u00e1pis by vypadal n\u011bjak takto:<\/p>\n\n\n\n Tento zp\u016fsob lazy loadingu je ide\u00e1ln\u00ed v p\u0159\u00edpad\u011b, \u017ee chceme m\u00edt v\u0161e pod kontrolou, a p\u0159esn\u011b m\u016f\u017eeme ur\u010dit, jak kter\u00e9 obr\u00e1zky na\u010d\u00edtat. <\/p>\n\n\n\n Pro n\u011bkter\u00e9 star\u0161\u00ed prohl\u00ed\u017ee\u010de nemus\u00ed p\u0159ede\u0161l\u00e1 metoda fungovat. Proto m\u016f\u017eeme s\u00e1hnout po jednom z hned n\u011bkolika dostupn\u00fdch plugin\u016f pro lazy loading. <\/p>\n\n\n\n Ne\u017e za\u010dneme cokoliv instalovat, mus\u00edme se nejprve ujistit, \u017ee nem\u00e1me funkci lazy loadingu ji\u017e povolenou v n\u011bkter\u00e9m z aktivovan\u00fdch plugin\u016f na webu. Pokud nap\u0159\u00edklad pou\u017e\u00edv\u00e1me n\u011bjak\u00fd plugin pro cahov\u00e1n\u00ed(WP Rocket, placen\u00e1 verze WP Fastest Cache…), v\u011bt\u0161inou je funkce lazy loadingu ji\u017e zahrnut\u00e1 v tomto pluginu a nemus\u00edme tak nic stahovat.<\/p>\n\n\n\n Pro v\u0161echny ostatn\u00ed p\u0159\u00edpady si zde uvedeme ty nejlep\u0161\u00ed pluginy pro lazy loading obr\u00e1zk\u016f ve WordPressu(v\u0161echny d\u00e1le zmi\u0148ovan\u00e9 pluginy obsahuj\u00ed z\u00e1kladn\u00ed verzi zdarma). <\/p>\n\n\n\n Plugin lze snadno nastavit a umo\u017e\u0148uje rozs\u00e1hl\u00e9 nastaven\u00ed lazy loadingu. M\u00e1me mo\u017enost lazy loading zahrnout, nebo vylou\u010dit u jednotliv\u00fdch polo\u017eek. B\u011bhem na\u010d\u00edt\u00e1n\u00ed obr\u00e1zk\u016f pak m\u016f\u017eeme nastavit p\u0159echodov\u00e9 efekty v podob\u011b na\u010d\u00edtaj\u00edc\u00ed se ikonky, nebo postupn\u00e9ho vykreslov\u00e1n\u00ed.<\/p>\n\n\n\n Plugin a3 Lazy Load m\u016f\u017eeme pou\u017e\u00edt i na v\u011bt\u0161\u00edch webech(testov\u00e1no i na webu s 1000 obr\u00e1zky)<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\n
V\u00fdhody a nev\u00fdhody Lazy loadingu<\/h2>\n\n\n\n
V\u00fdhody<\/h3>\n\n\n\n
\n
Nev\u00fdhody<\/h3>\n\n\n\n
\n
Jak aplikovat lazy loading ve WordPressu?<\/h2>\n\n\n\n
Pou\u017e\u00edv\u00e1n\u00ed vy\u0161\u0161\u00ed verze WordPressu, ne\u017e je 5.4<\/h3>\n\n\n\n
Nativn\u00ed lazy loading obr\u00e1zk\u016f<\/h3>\n\n\n\n
\n
<img src=\u201dmuj-obrazek.png\u201d loading=\u201dlazy\u201d alt=\u201dnazev\u201d width=\u201d200\u2033 height=\u201d200\u2033><\/code><\/pre>\n\n\n\n
Lazy loading pomoc\u00ed pluginu<\/h3>\n\n\n\n
a3 Lazy Load<\/h4>\n\n\n\n
<\/a><\/figure>\n\n\n\n