{"id":2833,"date":"2016-03-18T20:50:37","date_gmt":"2016-03-18T20:50:37","guid":{"rendered":"http:\/\/musilda.cz\/?p=2833"},"modified":"2016-03-18T20:50:37","modified_gmt":"2016-03-18T20:50:37","slug":"pouziti-asynchronniho-nacitani-javascriptu-ve-wordpressu","status":"publish","type":"post","link":"https:\/\/affinite.io\/cs\/pouziti-asynchronniho-nacitani-javascriptu-ve-wordpressu\/","title":{"rendered":"Pou\u017eit\u00ed asynchronn\u00edho na\u010d\u00edt\u00e1n\u00ed javascriptu ve WordPressu"},"content":{"rendered":"\n

Rychlost na\u010d\u00edt\u00e1n\u00ed webu, krom\u011b jin\u00e9ho, ovliv\u0148uje na\u010d\u00edt\u00e1n\u00ed extern\u00edch javascriptov\u00fdch soubor\u016f. Ty, kter\u00e9 jsou vlo\u017eeny do hlavi\u010dky webu, jsou ozna\u010dov\u00e1ny, jako DOM blockers.<\/p>\n\n\n\n

To znamen\u00e1, \u017ee pokud prohl\u00ed\u017ee\u010d, naraz\u00ed na takov\u00fd soubor (co\u017e se mimo jin\u00e9 t\u00fdk\u00e1 i css soubor\u016f), nejprve jej na\u010dte, \u010d\u00edm\u017e se zastav\u00ed vykreslov\u00e1n\u00ed html k\u00f3du (DOMu). A\u017e po pln\u00e9m na\u010dten\u00ed js k\u00f3du, pokra\u010duje prohl\u00ed\u017ee\u010d v na\u010d\u00edt\u00e1n\u00ed.<\/p>\n\n\n\n

Mo\u017en\u00fdm \u0159e\u0161en\u00edm a tak\u00e9 \u010dasto doporu\u010dovan\u00fdm, je p\u0159esun v\u0161ech js soubor\u016f do pati\u010dky webu.<\/p>\n\n\n\n

Bohu\u017eel, toto m\u016f\u017ee m\u00edt podobn\u00fd v\u00fdsledek:<\/p>\n\n\n

\n
\"Sn\u00edmek<\/a><\/figure><\/div>\n\n\n

D\u016fvodem je, \u017ee jQuery je vol\u00e1no ve chv\u00edli, kdy je\u0161t\u011b nen\u00ed k dispozici.<\/p>\n\n\n\n

Tak\u017ee jQuery nech\u00e1me v hlavi\u010dce. Co\u017e v\u00e1m Google Insight vy\u010dte.<\/p>\n\n\n\n

Na\u0161t\u011bst\u00ed je mo\u017en\u00e9 na\u010d\u00edtat javascript asynchronn\u011b a to pomoc\u00ed atribut\u016f async a defer.<\/p>\n\n\n\n

Jejich nev\u00fdhodou je, \u017ee async nefunguje v IE 9- a oba v Ope\u0159e Mini. Na druhou stranu je jejich vyu\u017eit\u00ed sp\u00ed\u0161e p\u0159\u00ednos.<\/p>\n\n\n\n

Rozd\u00edl mezi async a defer<\/strong><\/p>\n\n\n\n

Pokud atributy pou\u017eijete p\u0159i na\u010d\u00edt\u00e1n\u00ed scriptu:<\/p>\n\n\n\n

<\/pre>\n\n\n\n
Odlo\u017e\u00edte na\u010dten\u00ed souboru scripts, do doby, ne\u017e bude pot\u0159eba. Nap\u0159\u00edklad u jQuery do t\u00e9 doby, ne\u017e bude poprv\u00e9 vol\u00e1no.<\/p>\n\n\n\n
Rozd\u00edl je v tom, co se stane potom.<\/p>\n\n\n\n
U defer se script za\u010dne stahovat a na\u010d\u00edt\u00e1n\u00ed DOMu bude pokra\u010dovat a\u017e do konce. Hned pot\u00e9, p\u0159ed ud\u00e1lost\u00ed DOMContentLoaded se provede sta\u017een\u00fd javascript.<\/p>\n\n\n\n
Naproti tomu se u async, za\u010dne stahovat soubor a v tu chv\u00edli, kdy je cel\u00fd sta\u017een\u00fd, za\u010dne se prov\u00e1d\u011bt a na\u010d\u00edt\u00e1n\u00ed DOMu se zastav\u00ed. Pokra\u010dovat bude a\u017e po vykon\u00e1n\u00ed scriptu.<\/p>\n\n\n\n
Osobn\u011b bych u WordPressu preferoval async.<\/p>\n\n\n\n
Aby jsme mohli asynchronn\u00ed na\u010d\u00edt\u00e1n\u00ed pou\u017e\u00edt, pot\u0159ebujeme do ka\u017ed\u00e9ho scriptu v hlavi\u010dce vlo\u017eit atribut async.
Jak toho ale dos\u00e1hnout, kdy\u017e js soubor\u016f m\u016f\u017ee b\u00fdt pomoc\u00ed \u0161ablon a plugin\u016f vkl\u00e1d\u00e1no neomezen\u00e9 mno\u017estv\u00ed?<\/p>\n\n\n\n
M\u016f\u017eeme si pomoci filtrem clean_url, kde m\u016f\u017eeme ka\u017edou url kon\u010d\u00edc\u00ed js upravit.<\/p>\n\n\n\n
add_filter( 'clean_url', 'wcs_defer_javascripts', 11, 1 );\nfunction wcs_defer_javascripts ( $url ) {\n    if ( false === strpos( $url, '.js' ) ) return $url;\n    if ( strpos( $url, 'jquery.js' ) ) return $url;\n    return \"$url' async='async\";\n}\n<\/pre>\n\n\n\n
A k \u010demu n\u00e1m to bylo?<\/strong><\/p>\n\n\n\n
Kdy\u017e si otev\u0159eme consoli v Chrome, p\u0159ed t\u00edm, ne\u017e pou\u017eijeme funkci, na\u010d\u00edt\u00e1n\u00ed eshopu vypad\u00e1 takto:<\/p>\n\n\n
\n
\"\"<\/figure><\/div>\n\n\n
Po vlo\u017een\u00ed funkce do souboru functions.php, se doba pro DOMContentLoaded sn\u00ed\u017e\u00ed t\u00e9m\u011b\u0159 o 40 procent.<\/p>\n\n\n
\n
\"\"<\/figure><\/div>\n\n\n
Slu\u0161n\u00fd v\u00fdsledek na tak jednoduchou funkci, ne?<\/p>\n\n\n\n
Pokud se chcete o optimalizaci WordPress web\u016f, chcete dozv\u011bd\u011bt v\u00edce, m\u016f\u017eete p\u0159ij\u00edt na n\u011bkter\u00e9 ze \u0161kolen\u00ed<\/p>\n\n\n\n
\"Online<\/a><\/figure>\n","protected":false},"excerpt":{"rendered":"
Rychlost na\u010d\u00edt\u00e1n\u00ed webu, krom\u011b jin\u00e9ho, ovliv\u0148uje na\u010d\u00edt\u00e1n\u00ed extern\u00edch javascriptov\u00fdch soubor\u016f. Ty, kter\u00e9 jsou vlo\u017eeny do hlavi\u010dky webu, jsou ozna\u010dov\u00e1ny, jako DOM blockers. To znamen\u00e1, \u017ee pokud prohl\u00ed\u017ee\u010d, naraz\u00ed na takov\u00fd soubor (co\u017e se mimo jin\u00e9 t\u00fdk\u00e1 i css soubor\u016f), nejprve jej na\u010dte, \u010d\u00edm\u017e se zastav\u00ed vykreslov\u00e1n\u00ed html k\u00f3du (DOMu). A\u017e po pln\u00e9m na\u010dten\u00ed js k\u00f3du,<\/p>\n","protected":false},"author":1,"featured_media":2747,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,30],"tags":[],"class_list":["post-2833","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-navody","category-wordpress"],"_links":{"self":[{"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/posts\/2833"}],"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=2833"}],"version-history":[{"count":0,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/posts\/2833\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/media\/2747"}],"wp:attachment":[{"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/media?parent=2833"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/categories?post=2833"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/tags?post=2833"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}