{"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<p>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<p>\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<h2 class=\"wp-block-heading\">Co je lazy loading? <\/h2>\n\n\n\n<p>V doslovn\u00e9m p\u0159ekladu &#8222;l\u00edne na\u010d\u00edt\u00e1n\u00ed&#8220; zjednodu\u0161en\u011b \u0159e\u010deno umo\u017en\u00ed na\u010d\u00edtat vizu\u00e1ly rychleji. <\/p>\n\n\n\n<p>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<p>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<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2023\/12\/wordpress-lazyloading.png\"><img loading=\"lazy\" decoding=\"async\" width=\"774\" height=\"922\" src=\"https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2023\/12\/wordpress-lazyloading.png\" alt=\"\" class=\"wp-image-7444\" srcset=\"https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2023\/12\/wordpress-lazyloading.png 774w, https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2023\/12\/wordpress-lazyloading-252x300.png 252w, https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2023\/12\/wordpress-lazyloading-768x915.png 768w\" sizes=\"(max-width: 774px) 100vw, 774px\" \/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">V\u00fdhody a nev\u00fdhody Lazy loadingu<\/h2>\n\n\n\n<p>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<h3 class=\"wp-block-heading\">V\u00fdhody<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Zrychl\u00ed na\u010d\u00edt\u00e1n\u00ed p\u0159edev\u0161\u00edm na mobiln\u00edch za\u0159\u00edzen\u00edch<\/li>\n\n\n\n<li>Zv\u00fd\u0161\u00ed celkovou rychlost webu<\/li>\n\n\n\n<li>Optimalizuje nejv\u011bt\u0161\u00ed vykreslen\u00ed obsahu, neboli LCP(&#8222;<a href=\"https:\/\/musilda.cz\/kompletni-manual-k-nastroji-google-pagespeed-insights#lcp\" target=\"_blank\" rel=\"noopener\">Largest Contentful Paint<\/a>&#8222;)<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Nev\u00fdhody<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>P\u0159i rychlej\u0161\u00edm scrollov\u00e1n\u00ed na webu se obr\u00e1zky nemus\u00ed stihnout na\u010d\u00edtat rychle a mohou zp\u016fsobit \u0161patn\u00fd dojem z pohledu u\u017eivatele.<\/li>\n\n\n\n<li>Mus\u00edme si d\u00e1vat pozor, aby lazy loading nebyl aplikov\u00e1n na LCP prvek. Lazy loading pou\u017e\u00edv\u00e1me v p\u0159\u00edpad\u011b, kdy chceme na\u010d\u00edt\u00e1n\u00ed obr\u00e1zk\u016f odlo\u017eit a sna\u017e\u00edme se o co nejrychlej\u0161\u00ed prvotn\u00ed na\u010dten\u00ed webu. Pokud bychom v\u0161ak LCP prvku nastavili lazy loading, tak by se tento prvek na\u010detl o n\u011bco d\u00e9le a naopak zpomalil rychlost cel\u00e9ho webu!<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Jak aplikovat lazy loading ve WordPressu?<\/h2>\n\n\n\n<p>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<h3 class=\"wp-block-heading\">Pou\u017e\u00edv\u00e1n\u00ed vy\u0161\u0161\u00ed verze WordPressu, ne\u017e je 5.4<\/h3>\n\n\n\n<p>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<p>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<h3 class=\"wp-block-heading\">Nativn\u00ed lazy loading obr\u00e1zk\u016f<\/h3>\n\n\n\n<p>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<p>Pokud chceme n\u011bkter\u00e9mu obr\u00e1zku nastavit nativn\u00ed lazy loading, mus\u00edme k n\u011bmu p\u0159idat atribut loading=&#8220;lazy&#8220;.  <\/p>\n\n\n\n<p>Ve WordPressu m\u016f\u017eeme atributu &#8222;loading&#8220; nastavit a\u017e t\u0159i r\u016fzn\u00e9 hodnoty:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Auto &#8211; nech\u00e1me volbu na prohl\u00ed\u017ee\u010di. Chov\u00e1 se podobn\u011b jako eager<\/li>\n\n\n\n<li>Lazy &#8211; odlo\u017e\u00ed se na\u010dten\u00ed prvku, dokud k n\u011bmu u\u017eivatel neposune str\u00e1nku<\/li>\n\n\n\n<li>Eager &#8211; na\u010dte v\u0161echny prvky ihned po na\u010dten\u00ed str\u00e1nky bez ohledu na jejich um\u00edst\u011bn\u00ed<\/li>\n<\/ul>\n\n\n\n<p>Kompletn\u00ed z\u00e1pis by vypadal n\u011bjak takto:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;img src=\u201dmuj-obrazek.png\u201d loading=\u201dlazy\u201d alt=\u201dnazev\u201d width=\u201d200\u2033 height=\u201d200\u2033&gt;<\/code><\/pre>\n\n\n\n<p>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<h3 class=\"wp-block-heading\">Lazy loading pomoc\u00ed pluginu<\/h3>\n\n\n\n<p>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<p>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&#8230;), 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<p>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<h4 class=\"wp-block-heading\">a3 Lazy Load<\/h4>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2023\/12\/wordpress-a3-lazy-load-plugin.png\"><img loading=\"lazy\" decoding=\"async\" width=\"932\" height=\"297\" src=\"https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2023\/12\/wordpress-a3-lazy-load-plugin.png\" alt=\"\" class=\"wp-image-7450\" srcset=\"https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2023\/12\/wordpress-a3-lazy-load-plugin.png 932w, https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2023\/12\/wordpress-a3-lazy-load-plugin-300x96.png 300w, https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2023\/12\/wordpress-a3-lazy-load-plugin-768x245.png 768w\" sizes=\"(max-width: 932px) 100vw, 932px\" \/><\/a><\/figure>\n\n\n\n<p>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<p>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<figure class=\"wp-block-embed is-type-wp-embed is-provider-plugin-directory wp-block-embed-plugin-directory\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"wp-embedded-content\" data-secret=\"ix1vGlIE5S\"><a href=\"https:\/\/cs.wordpress.org\/plugins\/a3-lazy-load\/\" target=\"_blank\" rel=\"noopener\">a3 Lazy Load<\/a><\/blockquote><iframe loading=\"lazy\" class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; visibility: hidden;\" title=\"&#8222;a3 Lazy Load&#8220; &#8212; Plugin Directory\" src=\"https:\/\/cs.wordpress.org\/plugins\/a3-lazy-load\/embed\/#?secret=c9McndaNWA#?secret=ix1vGlIE5S\" data-secret=\"ix1vGlIE5S\" width=\"600\" height=\"338\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Smush<\/h4>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2023\/12\/wordpress-smush-plugin.png\"><img loading=\"lazy\" decoding=\"async\" width=\"910\" height=\"278\" src=\"https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2023\/12\/wordpress-smush-plugin.png\" alt=\"\" class=\"wp-image-7451\" srcset=\"https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2023\/12\/wordpress-smush-plugin.png 910w, https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2023\/12\/wordpress-smush-plugin-300x92.png 300w, https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2023\/12\/wordpress-smush-plugin-768x235.png 768w\" sizes=\"(max-width: 910px) 100vw, 910px\" \/><\/a><\/figure>\n\n\n\n<p>Popul\u00e1rn\u00ed WordPress plugin, kter\u00fd se zab\u00fdv\u00e1 komplexn\u00ed problematikou obr\u00e1zk\u016f. Pokud si tedy krom\u011b lazy loadingu chceme je\u0161t\u011b v\u00edce usnadnit pr\u00e1ci s obr\u00e1zky, jedn\u00e1 se o ide\u00e1ln\u00ed volbu, proto\u017ee Smush nab\u00edz\u00ed i funkce jako je optimalizace, komprese a zm\u011bna velikosti obr\u00e1zk\u016f. Placen\u00e1 verze d\u00e1le nab\u00edz\u00ed p\u0159evod obr\u00e1zk\u016f do .webP form\u00e1tu a mnoho dal\u0161\u00edho.<\/p>\n\n\n\n<p>P\u0159i optimalizaci v\u0161ak Smush p\u0159eskakuje obr\u00e1zky s velikost\u00ed nad 5MB, co\u017e by nap\u0159\u00edklad v p\u0159\u00edpad\u011b portfolia fotografa mohlo zp\u016fsobovat probl\u00e9my. Dal\u0161\u00ed alternativou pluginu Smush m\u016f\u017ee b\u00fdt <a href=\"https:\/\/musilda.cz\/shortpixel-skvely-plugin-pro-optimalizaci-obrazku-zvysi-vykon-vaseho-webu\/\" target=\"_blank\" rel=\"noopener\">ShortPixel <\/a>a <a href=\"https:\/\/musilda.cz\/optimalizace-wordpress-obrazku-pomoci-pluginu-imagify\/\" target=\"_blank\" rel=\"noopener\">Imagify<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-wp-embed is-provider-plugin-directory wp-block-embed-plugin-directory\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"wp-embedded-content\" data-secret=\"vqoxhhvxY1\"><a href=\"https:\/\/cs.wordpress.org\/plugins\/wp-smushit\/\" target=\"_blank\" rel=\"noopener\">Smush Image Optimization \u2013 Optimize Images | Compress &amp; Lazy Load Images | Convert WebP | Image CDN<\/a><\/blockquote><iframe loading=\"lazy\" class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; visibility: hidden;\" title=\"&#8222;Smush Image Optimization \u2013 Optimize Images | Compress &amp; Lazy Load Images | Convert WebP | Image CDN&#8220; &#8212; Plugin Directory\" src=\"https:\/\/cs.wordpress.org\/plugins\/wp-smushit\/embed\/#?secret=gFKYQ8q609#?secret=vqoxhhvxY1\" data-secret=\"vqoxhhvxY1\" width=\"600\" height=\"338\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Lazy Loader<\/h4>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2023\/12\/wordpress-lazy-loader-plugin.png\"><img loading=\"lazy\" decoding=\"async\" width=\"936\" height=\"268\" src=\"https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2023\/12\/wordpress-lazy-loader-plugin.png\" alt=\"\" class=\"wp-image-7452\" srcset=\"https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2023\/12\/wordpress-lazy-loader-plugin.png 936w, https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2023\/12\/wordpress-lazy-loader-plugin-300x86.png 300w, https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2023\/12\/wordpress-lazy-loader-plugin-768x220.png 768w\" sizes=\"(max-width: 936px) 100vw, 936px\" \/><\/a><\/figure>\n\n\n\n<p>Na z\u00e1v\u011br tu m\u00e1me Lazy Loader, kter\u00fd krom\u011b lazy loadingu ned\u011bl\u00e1 nic jin\u00e9ho. Svou pr\u00e1ci v\u0161ak prov\u00e1d\u00ed na jedni\u010dku. <\/p>\n\n\n\n<p>Plugin se velmi jednodu\u0161e konfiguruje. Lazy loading m\u016f\u017eeme u ka\u017ed\u00e9ho prvku nastavit zvl\u00e1\u0161\u0165, a b\u011bhem vykreslov\u00e1n\u00ed m\u016f\u017eeme nastavit animaci. Lazy loading lze nastavit mimo obr\u00e1zk\u016f i na v\u011bt\u0161inu dal\u0161\u00edch druh\u016f obsahu jako jsou videa, iframy, audio prvky, pozad\u00ed, skripty a n\u011bkter\u00e9 styly str\u00e1nky. <\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-wp-embed is-provider-plugin-directory wp-block-embed-plugin-directory\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"wp-embedded-content\" data-secret=\"dqYHJMIRuE\"><a href=\"https:\/\/cs.wordpress.org\/plugins\/lazy-loading-responsive-images\/\" target=\"_blank\" rel=\"noopener\">Lazy Loader<\/a><\/blockquote><iframe loading=\"lazy\" class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; visibility: hidden;\" title=\"&#8222;Lazy Loader&#8220; &#8212; Plugin Directory\" src=\"https:\/\/cs.wordpress.org\/plugins\/lazy-loading-responsive-images\/embed\/#?secret=xLCo0hyUH1#?secret=dqYHJMIRuE\" data-secret=\"dqYHJMIRuE\" width=\"600\" height=\"338\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Lazy loading ve WordPressu &#8211; tipy <\/h2>\n\n\n\n<p>Nastaven\u00ed lazy loadingu sice nen\u00ed raketov\u00e1 v\u011bda, ale i tak se m\u016f\u017eeme dopustit z\u00e1kladn\u00edch chyb. Z toho d\u016fvodu si uk\u00e1\u017eeme, jak se t\u011bmto chyb\u00e1m vyvarovat.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Nepou\u017e\u00edvejte lazy loading na obr\u00e1zky viditeln\u00e9 p\u0159i prvotn\u00edm na\u010d\u00edt\u00e1n\u00ed webu &#8211; na\u0161\u00edm c\u00edlem je naopak urychlit na\u010d\u00edt\u00e1n\u00ed vrchn\u00edho obsahu, a teprve zbytek webu na\u010d\u00edtat pomoc\u00ed lazy loadingu<\/li>\n\n\n\n<li>Zvolte vhodn\u00fd placeholder(obr\u00e1zek, kter\u00fd se zobraz\u00ed b\u011bhem na\u010d\u00edt\u00e1n\u00ed dan\u00e9ho prvku)<\/li>\n\n\n\n<li>Definujte velikosti obr\u00e1zkov\u00fdch kontejner\u016f &#8211; d\u00edky pevn\u011b stanoven\u00fdm rozm\u011br\u016fm se vyhneme takzvan\u00e9mu <a href=\"https:\/\/musilda.cz\/kompletni-manual-k-nastroji-google-pagespeed-insights\/#cls\" target=\"_blank\" rel=\"noopener\">CLS(posun obsahu webu b\u011bhem jeho na\u010d\u00edt\u00e1n\u00ed)<\/a><\/li>\n\n\n\n<li>Pou\u017e\u00edvejte lazy loading pouze na obsahov\u011b del\u0161\u00ed str\u00e1nky &#8211; aby m\u011blo pou\u017eit\u00ed lazy loadingu smysl, str\u00e1nka by m\u011bla b\u00fdt alespo\u0148 trochu obs\u00e1hl\u00e1(minim\u00e1ln\u011b 5 obr\u00e1zk\u016f um\u00edst\u011bn\u00fdch n\u00ed\u017ee, ne\u017e je viditeln\u00e1 \u010d\u00e1st str\u00e1nky bez scrollov\u00e1n\u00ed)<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Z\u00e1v\u011br<\/h2>\n\n\n\n<p>Pou\u017e\u00edv\u00e1n\u00ed lazy loadingu ve WordPressu se spr\u00e1vn\u00fdm nastaven\u00edm m\u016f\u017ee p\u0159in\u00e9st plno benefit\u016f. V \u010dl\u00e1nku jsme si uvedli n\u011bkolik zp\u016fsob\u016f, pomoc\u00ed kter\u00fdch jsme schopni vyu\u017e\u00edt potenci\u00e1l lazy loadingu na plno. <\/p>\n\n\n\n<p>Pokud m\u00e1me v\u0161e spr\u00e1vn\u011b nastaveno, m\u011bli bychom poc\u00edtit v\u00fdrazn\u00e9 zv\u00fd\u0161en\u00ed rychlosti. Rychlost webu m\u016f\u017eeme zm\u011b\u0159it nap\u0159\u00edklad pomoc\u00ed bezplatn\u00e9ho n\u00e1stroje <a href=\"https:\/\/musilda.cz\/kompletni-manual-k-nastroji-google-pagespeed-insights\" target=\"_blank\" rel=\"noopener\">Google PageSpeed Insight<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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. \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. Co je lazy loading? V doslovn\u00e9m p\u0159ekladu &#8222;l\u00edne na\u010d\u00edt\u00e1n\u00ed&#8220; zjednodu\u0161en\u011b<\/p>\n","protected":false},"author":1,"featured_media":7454,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[54,30],"tags":[],"class_list":["post-7442","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-rychlost","category-wordpress"],"_links":{"self":[{"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/posts\/7442"}],"collection":[{"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/comments?post=7442"}],"version-history":[{"count":0,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/posts\/7442\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/media\/7454"}],"wp:attachment":[{"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/media?parent=7442"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/categories?post=7442"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/tags?post=7442"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}