{"id":3086,"date":"2016-07-05T17:04:20","date_gmt":"2016-07-05T17:04:20","guid":{"rendered":"http:\/\/musilda.cz\/?p=3086"},"modified":"2016-07-05T17:04:20","modified_gmt":"2016-07-05T17:04:20","slug":"zrychleni-woocommerce-eshopu-pripadova-studie","status":"publish","type":"post","link":"https:\/\/affinite.io\/cs\/zrychleni-woocommerce-eshopu-pripadova-studie\/","title":{"rendered":"Zrychlen\u00ed Woocommerce eshopu &#8211; p\u0159\u00edpadov\u00e1 studie"},"content":{"rendered":"<p>P\u0159ed n\u011bjakou dobou se na Facebooku op\u011bt strhla diskuze o tom, zda je <a href=\"https:\/\/www.youtube.com\/watch?v=VYQl8Jo2JLE&amp;index=5&amp;list=PLc3f3Cd0lK8QzLGiQxPeaA9gHkg-DfUhT\" target=\"_blank\" rel=\"noopener\">Woocommerce vhodn\u00e1 pro eshop<\/a>. Jak je zvykem, argumenty byly takov\u00e9 &#8222;nekonkr\u00e9tn\u00ed&#8220; &#8211; eshop bude pomal\u00fd, hod\u00ed se jen pro p\u00e1r produkt\u016f, nikdy bych na tom nestav\u011bl a podobn\u011b. Majitel eshopu, kter\u00fd vl\u00e1kno zalo\u017eil, krom\u011b zm\u011bny hostingu, \u010di syst\u00e9mu e-shopu, nedostal \u017e\u00e1dnou radu, kter\u00e1 by p\u0159inesla n\u011bjak\u00fd v\u00fdsledek.<\/p>\n<p>Zm\u011bna hostingu &#8211; to je takov\u00e1 rada nerada. Vezmete si pr\u00e1\u0161ek na bolest zubu, ale z\u00e1n\u011bt to nevyl\u00e9\u010d\u00ed. Stejn\u011b tak i lep\u0161\u00ed hosting, zrychl\u00ed citeln\u011b web, ale jinak z\u016fstane v\u0161e p\u0159i star\u00e9m.<\/p>\n<p>Tato p\u0159\u00edpadov\u00e1 studie se tedy t\u00fdk\u00e1 eshopu <a href=\"http:\/\/www.dizajnovynabytok.sk\/\" target=\"_blank\" rel=\"noopener\">Dizajnovynabytok.cz<\/a>\u00a0a zrychlen\u00ed na\u010d\u00edt\u00e1n\u00ed str\u00e1nek.<\/p>\n<h2>Prvotn\u00ed anal\u00fdza e-shopu<\/h2>\n<p>Nejprve se pod\u00edv\u00e1me na verzi WordPressu, nainstalovan\u00e9 pluginy a pou\u017eitou \u0161ablonu:<\/p>\n<p>WordPress 4.4.2 &#8211; zaktualizujeme<\/p>\n<p><strong>Pluginy:<\/strong><\/p>\n<ul>\n<li>a3 Lazy Load &#8211; neaktivn\u00ed<\/li>\n<li>AJAX Thumbnail Rebuild &#8211; neaktivn\u00ed<\/li>\n<li>Akismet &#8211; neaktivn\u00ed &#8211; dostupn\u00e1 aktualizace<\/li>\n<li>Better WordPress Minify<\/li>\n<li>CND Enabler &#8211; neaktivn\u00ed &#8211; dostupn\u00e1 aktualizace<\/li>\n<li>CloudFlare &#8211; neaktivn\u00ed<\/li>\n<li>CloudFlare Flexible SSL &#8211; neaktivn\u00ed<\/li>\n<li>Contact Form 7 &#8211; dostupn\u00e1 aktualizace<\/li>\n<li>Custom Permalinks &#8211; neaktivn\u00ed &#8211; dostupn\u00e1 aktualizace<\/li>\n<li>CYSTEME Finder, a file explorer &#8211; neaktivn\u00ed<\/li>\n<li>Debug<\/li>\n<li>Debug Bar<\/li>\n<li>Disable Responsive Images<\/li>\n<li>Dynamic Featured image &#8211; neaktivn\u00ed<\/li>\n<li>Force Regenered Thumbnails<\/li>\n<li>Loco Translate<\/li>\n<li>Master slider Pro &#8211; neaktivn\u00ed<\/li>\n<li>My Simple Space &#8211; neaktivn\u00ed<\/li>\n<li>P3<\/li>\n<li>Porto Content Types<\/li>\n<li>Porto Shortcodes<\/li>\n<li>Porto Widgets<\/li>\n<li>Query Monitor &#8211; neaktivn\u00ed &#8211; dostupn\u00e1 aktualizace<\/li>\n<li>Really Simple Captcha &#8211; dostupn\u00e1 aktualizace<\/li>\n<li>Simple Woocommerce CSV Loader<\/li>\n<li>Swift Security<\/li>\n<li>Term Management Tools<\/li>\n<li>Ultimate Addons for Visual Composer &#8211; dostupn\u00e1 aktualizace<\/li>\n<li>WC Fields Factory &#8211; neaktivn\u00ed &#8211; dostupn\u00e1 aktualizace<\/li>\n<li>Woo Checkout Field Editor Pro<\/li>\n<li>WooCommerce &#8211; dostupn\u00e1 aktualizace<\/li>\n<li>WooCommerce Advanced Bulk Edit<\/li>\n<li>WooCommerce Advanced Shipping<\/li>\n<li>WooCommerce Auto Category Thumbnails<\/li>\n<li>WooCommerce CSV Import<\/li>\n<li>Woocommerce Show Attributes &#8211; neaktivn\u00ed &#8211; dostupn\u00e1 aktualizace<\/li>\n<li>Woocommerce Tab Manager &#8211; neaktivn\u00ed<\/li>\n<li>WordFence Security &#8211; dostupn\u00e1 aktualizace<\/li>\n<li>WordPress Post Type Archive Links<\/li>\n<li>WP All Export &#8211; neaktivn\u00ed &#8211; dostupn\u00e1 aktualizace<\/li>\n<li>WP All Import WooCommerce Addon &#8211; dostupn\u00e1 aktualizace<\/li>\n<li>WP All Import Pro &#8211; dostupn\u00e1 aktualizace<\/li>\n<li>WP Optimize by xTrafic<\/li>\n<li>WP Optimize Spedd by xTrafic<\/li>\n<li>WP Smush &#8211; neaktivn\u00ed &#8211; dostupn\u00e1 aktualizace<\/li>\n<li>WP Flybox &#8211; dostupn\u00e1 aktualizace<\/li>\n<li>Visual Composer &#8211; dostupn\u00e1 aktualizace<\/li>\n<li>YITH WooCommerce Ajax Product Filter\u00a0&#8211; dostupn\u00e1 aktualizace<\/li>\n<li>YITH WooCommerce Ajax Search &#8211; neaktivn\u00ed &#8211; dostupn\u00e1 aktualizace<\/li>\n<li>YITH WooCommerce Wishlist &#8211; neaktivn\u00ed &#8211; dostupn\u00e1 aktualizace<\/li>\n<li>YOAST SEO &#8211; dostupn\u00e1 aktualizace<\/li>\n<li>Zopim Widget &#8211; dostupn\u00e1 aktualizace<\/li>\n<li>\u010cesk\u00e9 Slu\u017eby 0.5 &#8211; neaktivn\u00ed<\/li>\n<li>\u010cesk\u00e9 Slu\u017eby 0.4 &#8211; neaktivn\u00ed<\/li>\n<\/ul>\n<p><strong>\u0160ablony<\/strong><\/p>\n<ul>\n<li><a href=\"http:\/\/themeforest.net\/item\/porto-ultimate-responsive-magento-theme\/9725864\" target=\"_blank\" rel=\"noopener\">Porto<\/a> &#8211; aktivn\u00ed \u0161ablona<\/li>\n<li>Twenty Foutheen &#8211; dostupn\u00e1 aktualizace<\/li>\n<li>Twenty Fitheen &#8211; dostupn\u00e1 aktualizace<\/li>\n<li>Twenty Sixtheen &#8211; dostupn\u00e1 aktualizace<\/li>\n<\/ul>\n<p><strong>N\u00e1vrh \u0159e\u0161en\u00ed<\/strong><\/p>\n<p>Projdeme v\u0161ech 53 plugin\u016f a odstran\u00edme neaktivn\u00ed, ty, kter\u00e9 jsou pot\u0159eba aktualizujeme. N\u00e1sledn\u011b ur\u010d\u00edme, kter\u00e9 jsou opravu pot\u0159eba a sn\u00ed\u017e\u00edme po\u010det pou\u017e\u00edvan\u00fdch plugin\u016f.<\/p>\n<h2>Aktu\u00e1ln\u00ed rychlost na\u010d\u00edt\u00e1n\u00ed<\/h2>\n<p>Ne\u017e za\u010dneme s \u00fapravami, pod\u00edv\u00e1me se nejprve na to, jak rychle se str\u00e1nka na\u010d\u00edt\u00e1. V mnoha \u010dl\u00e1nc\u00edch o tom, jak zrychlit wordPress str\u00e1nku, najdete n\u011bkolik st\u00e1le stejn\u00fdch online n\u00e1stroj\u016f, kter\u00e9 pou\u017eijeme tak\u00e9.<\/p>\n<p>Konkr\u00e9tn\u011b to budou:<\/p>\n<ul>\n<li>WebPageTest<\/li>\n<li>Pingdom.com<\/li>\n<li>PageSpeed Insight<\/li>\n<\/ul>\n<p>Ostatn\u00ed n\u00e1stroje jsou pro n\u00e1s bu\u010f nepou\u017eiteln\u00e9, nebo d\u00e1vaj\u00ed stejn\u00e1 data.<\/p>\n<p><a href=\"https:\/\/developers.google.com\/speed\/pagespeed\/insights\/?hl=cs\" target=\"_blank\" rel=\"noopener\">PageSpeed Insight<\/a> &#8211; n\u00e1stroj od Google, kter\u00fd d\u00e1v\u00e1 sp\u00ed\u0161e doporu\u010den\u00ed, pro anal\u00fdzu jej pou\u017eijeme jen jako dopln\u011bk.<\/p>\n<p><a href=\"https:\/\/tools.pingdom.com\" target=\"_blank\" rel=\"noopener\">Pingdom.com<\/a> &#8211; jeden z nejpou\u017e\u00edvan\u011bj\u0161\u00edch n\u00e1stroj\u016f, pro anal\u00fdzu na\u010d\u00edt\u00e1n\u00ed webov\u00e9 str\u00e1nky. D\u00e1v\u00e1 pom\u011brn\u011b podrobn\u00e9 v\u00fdsledky a na rozd\u00edl od jin\u00fdch n\u00e1stroj\u016f, m\u00e1 m\u00edsto na\u010d\u00edt\u00e1n\u00ed v Evrop\u011b.<\/p>\n<p><a href=\"http:\/\/www.webpagetest.org\/\" target=\"_blank\" rel=\"noopener\">WebPageTest<\/a> &#8211; asi nejp\u0159esn\u011bj\u0161\u00ed n\u00e1stroj, kter\u00fd budeme pou\u017e\u00edvat jako bernou minci, nejen kv\u016fli tomu, \u017ee m\u00e1 zdroj na\u010d\u00edt\u00e1n\u00ed v \u010cR.<\/p>\n<h2>PageSpeed Insight<\/h2>\n<p>Do pol\u00ed\u010dka formul\u00e1\u0159e zad\u00e1me url webu a n\u00e1stroj n\u00e1m uk\u00e1\u017ee v\u00fdsledek, rozd\u011blen\u00fd do mobiln\u00ed a desktopov\u00e9 \u010d\u00e1sti. Zat\u00edm se budeme zaob\u00edrat jen tou desktopovou.<\/p>\n<p><a href=\"http:\/\/musilda.cz\/wp-content\/uploads\/2016\/07\/dizajn-insight.jpeg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3089\" src=\"http:\/\/musilda.cz\/wp-content\/uploads\/2016\/07\/dizajn-insight.jpeg\" alt=\"dizajn-insight\" width=\"784\" height=\"513\" srcset=\"https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2016\/07\/dizajn-insight.jpeg 784w, https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2016\/07\/dizajn-insight-300x196.jpeg 300w, https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2016\/07\/dizajn-insight-768x503.jpeg 768w\" sizes=\"(max-width: 784px) 100vw, 784px\" \/><\/a><\/p>\n<p>V\u00fdsledek je rozd\u011blen na \u010d\u00e1st, kde jsou n\u00e1vrhy opravy (\u010derven\u00fd vyk\u0159i\u010dn\u00edk) a na \u010d\u00e1st, kde jsou spln\u011bn\u00e9 \u00fakoly (zelen\u00e1 fajfka).<\/p>\n<p>My jsme v tomto p\u0159\u00edpad\u011b dostali doporu\u010den\u00ed na optimalizaci obr\u00e1zk\u016f, zkr\u00e1tit dobu odezvy serveru a eliminovat js a css, kter\u00e9 blokuj\u00ed na\u010d\u00edt\u00e1n\u00ed str\u00e1nky.<\/p>\n<p>Jak jsem ji\u017e psal, tyto n\u00e1vrhy nem\u016f\u017eeme br\u00e1t jako dogma, proto\u017ee se mohou vyskytnout p\u0159\u00edpady, kdy je nem\u016f\u017eeme ovlivnit. Nap\u0159\u00edklad, p\u0159i na\u010d\u00edt\u00e1n\u00ed gravatar\u016f, v\u00e1m bude n\u00e1stroj hl\u00e1sit nutnou kompresi obr\u00e1zk\u016f, ale vy nem\u00e1te p\u0159\u00edstup k jejich zdroji.<\/p>\n<p>Budeme se v\u0161ak sna\u017eit, splnit toho co nejv\u00edce.<\/p>\n<h2>Pingdom.com<\/h2>\n<p>Tento n\u00e1stroj provede kompletn\u00ed scan na\u010d\u00edt\u00e1n\u00ed str\u00e1nky a vygeneruje velmi p\u0159ehledn\u00e1 data. Jeho nev\u00fdhodou je lokalita na\u010d\u00edt\u00e1n\u00ed ze Stockholmu a p\u0159edev\u0161\u00edm d\u00e1v\u00e1 o n\u011bco lep\u0161\u00ed v\u00fdsledky, ne\u017e WebPageTest. Je v\u0161ak p\u0159ehledn\u011bj\u0161\u00ed.<\/p>\n<p><a href=\"http:\/\/musilda.cz\/wp-content\/uploads\/2016\/07\/dizajn-pingdom-1.jpeg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3090\" src=\"http:\/\/musilda.cz\/wp-content\/uploads\/2016\/07\/dizajn-pingdom-1.jpeg\" alt=\"dizajn-pingdom-1\" width=\"965\" height=\"287\" srcset=\"https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2016\/07\/dizajn-pingdom-1.jpeg 965w, https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2016\/07\/dizajn-pingdom-1-300x89.jpeg 300w, https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2016\/07\/dizajn-pingdom-1-768x228.jpeg 768w\" sizes=\"(max-width: 965px) 100vw, 965px\" \/><\/a><\/p>\n<p>Vid\u00edme, \u017ee str\u00e1nka se na\u010detla za osm vte\u0159in, velikost str\u00e1nky je 2,8 MB a request\u016f je 50. Jedin\u00fd dobr\u00fd v\u00fdsledek je 50 request\u016f, v\u0161e ostatn\u00ed je velmi \u0161patn\u00e9. Velikost str\u00e1nky m\u00e1 vliv na d\u00e9lku na\u010d\u00edt\u00e1n\u00ed a osm vte\u0159in je opravdu hodn\u011b.<\/p>\n<p><a href=\"http:\/\/musilda.cz\/wp-content\/uploads\/2016\/07\/dizajn-pingdom-2.jpeg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3091\" src=\"http:\/\/musilda.cz\/wp-content\/uploads\/2016\/07\/dizajn-pingdom-2.jpeg\" alt=\"dizajn-pingdom-2\" width=\"974\" height=\"314\" srcset=\"https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2016\/07\/dizajn-pingdom-2.jpeg 974w, https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2016\/07\/dizajn-pingdom-2-300x97.jpeg 300w, https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2016\/07\/dizajn-pingdom-2-768x248.jpeg 768w\" sizes=\"(max-width: 974px) 100vw, 974px\" \/><\/a><\/p>\n<p>Dal\u0161\u00ed \u00fadaje, jen\u017e n\u00e1s budou v tuto chv\u00edli zaj\u00edmat, je v\u00fdpis velikosti obsahu str\u00e1nky, dle typu a po\u010det request\u016f dle typu. Kdy\u017e se pod\u00edv\u00e1me do prvn\u00ed tabulky, vid\u00edme, \u017ee nejv\u00edce je obr\u00e1zk\u016f a to v\u00edce ne\u017e polovina. Ji\u017e to n\u00e1m napov\u00ed, \u017ee se zam\u011b\u0159\u00edme p\u0159edev\u0161\u00edm na obr\u00e1zky. Stejn\u011b tak je 22 request\u016f z pades\u00e1ti jen na obr\u00e1zky. Pod polo\u017ekou other se v\u011bt\u0161inou skr\u00fdvaj\u00ed fonty a podobn\u00e9 soubory.<\/p>\n<p>Posledn\u00ed \u010d\u00e1st\u00ed, na kterou se aktu\u00e1ln\u011b pod\u00edv\u00e1me, je <strong>vodop\u00e1d<\/strong>. To je grafick\u00e9 zn\u00e1zorn\u011bn\u00ed posloupnosti a d\u00e9lky na\u010d\u00edt\u00e1n\u00ed jednotliv\u00fdch soubor\u016f.<\/p>\n<p><a href=\"http:\/\/musilda.cz\/wp-content\/uploads\/2016\/07\/dizajn-pingdom-3.jpeg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3092\" src=\"http:\/\/musilda.cz\/wp-content\/uploads\/2016\/07\/dizajn-pingdom-3.jpeg\" alt=\"dizajn-pingdom-3\" width=\"977\" height=\"529\" srcset=\"https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2016\/07\/dizajn-pingdom-3.jpeg 977w, https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2016\/07\/dizajn-pingdom-3-300x162.jpeg 300w, https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2016\/07\/dizajn-pingdom-3-768x416.jpeg 768w\" sizes=\"(max-width: 977px) 100vw, 977px\" \/><\/a><\/p>\n<p>Toto je \u010d\u00e1st &#8222;vodop\u00e1du&#8220;, kde je vid\u011bt postup na\u010d\u00edt\u00e1n\u00ed. Zde je nap\u0159\u00edklad vid\u011bt, \u017ee Open Sans je na\u010d\u00edt\u00e1n dvakr\u00e1t za sebou. Pr\u00e1v\u011b d\u00edky tomuto p\u0159ehledu dok\u00e1\u017eeme odhalit duplicity a zbyte\u010dn\u011b velik\u00e9 obr\u00e1zky.<\/p>\n<p><strong>WebPageTest<\/strong><\/p>\n<p>Tento n\u00e1stroj d\u00e1v\u00e1 dle m\u00e9ho n\u00e1zoru nejp\u0159esn\u011bj\u0161\u00ed v\u00fdsledky a pro budeme vych\u00e1zet p\u0159edev\u0161\u00edm z n\u011bj a p\u0159edchoz\u00ed dva vyu\u017eijeme jako pomocn\u00edky.<\/p>\n<p><a href=\"http:\/\/musilda.cz\/wp-content\/uploads\/2016\/07\/dizajn-webspeedtest-.jpeg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3093\" src=\"http:\/\/musilda.cz\/wp-content\/uploads\/2016\/07\/dizajn-webspeedtest-.jpeg\" alt=\"dizajn-webspeedtest-\" width=\"977\" height=\"365\" srcset=\"https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2016\/07\/dizajn-webspeedtest-.jpeg 977w, https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2016\/07\/dizajn-webspeedtest--300x112.jpeg 300w, https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2016\/07\/dizajn-webspeedtest--768x287.jpeg 768w\" sizes=\"(max-width: 977px) 100vw, 977px\" \/><\/a><\/p>\n<p>Podle testu, trvalo na\u010d\u00edt\u00e1n\u00ed str\u00e1nky t\u00e9m\u011b\u0159 osm vte\u0159in, request\u016f je 42 a velikost str\u00e1nky je 2,5MB. Tak\u017ee podobn\u00e9, jako u PingDomu. Av\u0161ak test tak\u00e9 uk\u00e1zal, jak dlouho trv\u00e1 Time To First Byte. Co\u017e je prodleva od prvn\u00edho dotazu prohl\u00ed\u017ee\u010de, do p\u0159ijmut\u00ed prvn\u00edch dat \u00a0od serveru. Pro n\u00e1s d\u016fle\u017eit\u00e1 hodnota, proto\u017ee jej\u00edm sn\u00ed\u017een\u00edm, m\u016f\u017eeme z\u00edskat i t\u0159i vte\u0159iny \u010dasu.<\/p>\n<p><a href=\"http:\/\/musilda.cz\/wp-content\/uploads\/2016\/07\/dizajn-webspeedtest-2.jpeg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3095\" src=\"http:\/\/musilda.cz\/wp-content\/uploads\/2016\/07\/dizajn-webspeedtest-2.jpeg\" alt=\"dizajn-webspeedtest-2\" width=\"974\" height=\"701\" srcset=\"https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2016\/07\/dizajn-webspeedtest-2.jpeg 974w, https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2016\/07\/dizajn-webspeedtest-2-300x216.jpeg 300w, https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2016\/07\/dizajn-webspeedtest-2-768x553.jpeg 768w\" sizes=\"(max-width: 974px) 100vw, 974px\" \/><\/a><\/p>\n<p>Zobrazen\u00ed &#8222;vodop\u00e1du&#8220; n\u00e1m pak uk\u00e1\u017ee barevn\u011b zn\u00e1zorn\u011bn\u00e9 na\u010d\u00edt\u00e1n\u00ed jednotliv\u00fdch soubor\u016f. Pokud je jedna z barevn\u00fdch \u010d\u00e1st\u00ed del\u0161\u00ed, ne\u017e ostatn\u00ed, je pot\u0159eba se na na\u010d\u00edt\u00e1n\u00ed soubor\u016f zam\u011b\u0159it. Zde, m\u016f\u017eeme vid\u011bt u obr\u00e1zk\u016f del\u0161\u00ed modrou \u010d\u00e1st, co\u017e indikuje nadm\u011brnou velikost souboru.<\/p>\n<h2>Co jsme se zat\u00edm dozv\u011bd\u011bli?<\/h2>\n<ol>\n<li>V e-shopu je pom\u011brn\u011b velk\u00fd po\u010det neaktivn\u00edch plugin\u016f a plugin\u016f, kter\u00e9 pot\u0159ebuj\u00ed aktualizace. V prvn\u00edm kroku, odstran\u00edme neaktivn\u00ed pluginy a ty kter\u00e9 pot\u0159ebuji aktualizaci, zaktualizujeme. Ty pluginy, kter\u00e9 nebudeme vyu\u017e\u00edvat, ty odstran\u00edme. Ud\u011bl\u00e1me to ze dvou d\u016fvod\u016f &#8211; zaprv\u00e9, neaktivn\u00ed a neaktualizovan\u00e9 pluginy mohou b\u00fdt bezpe\u010dnostn\u00ed hrozbou a zadruh\u00e9, vysok\u00fd po\u010det plugin\u016f, m\u016f\u017ee m\u00edt vliv na hodnotu TTFB (Time To First Byte), kdy mus\u00ed WordPress zpracovat po\u017eadavky plugin\u016f.<\/li>\n<li>Str\u00e1nka a p\u0159edev\u0161\u00edm obr\u00e1zky jsou p\u0159\u00edli\u0161 velik\u00e9. Mus\u00edme velikost str\u00e1nky dostat pod 1MB, o to se budeme sna\u017eit optimalizac\u00ed obr\u00e1zk\u016f, minifikac\u00ed a odstran\u011bn\u00edm duplicit (Open Sans). Pokud to p\u016fjde, pou\u017eijeme Lazy Loading obr\u00e1zk\u016f.<\/li>\n<li>\u00a0Na str\u00e1nce nejsou pou\u017eit\u00e9 dal\u0161\u00ed postupy, jako je minifikace HTML a chyb\u00ed cache plugin, nebo vyu\u017eit\u00ed CDN.<\/li>\n<\/ol>\n<h2>Tak se do toho pust\u00edme!<\/h2>\n<p><strong>Nejprve aktualizace WordPressu a plugin\u016f.<\/strong><\/p>\n<p>V\u0161echny pluginy jsme zaktualizovali, krom\u011b WooCommerce a WooCommerce Advanced Shipping, proto\u017ee mi nen\u00ed zn\u00e1ma kompatibilita tohoto pluginu s novou WooCommerc\u00ed a na\u0161\u00edm \u00fakolem nyn\u00ed nen\u00ed \u0159e\u0161it dopravu v e-shopu.<\/p>\n<p>Krom\u011b neaktivn\u00edch plugin\u016f, byly smaz\u00e1ny pluginy:<\/p>\n<p><strong>P3<\/strong> &#8211; plugin zp\u016fsoboval p\u00e1d administrace po vytvo\u0159en\u00ed scanu.<\/p>\n<p><strong>WP FlyBox<\/strong> &#8211; plugin pro zobrazen\u00ed obsahu ve fixovan\u00e9m boxu na stran\u011b str\u00e1nky. Pou\u017eit byl pro zobrazen\u00ed widgetu Heur\u00e9ky. Ten nebyl implementoval spr\u00e1vn\u011b, v budoucnu jej nahrad\u00edme <a href=\"http:\/\/toret.cz\/obchod\/produkty\/woocommerce-heureka-overeno-zakazniky-sk-verze\/\" target=\"_blank\" rel=\"noopener\">specializovan\u00fdm pluginem<\/a>.<\/p>\n<p>D\u00e1le &#8211; Debug, Debug Bar a dal\u0161\u00ed, jen\u017e nebudeme pot\u0159ebovat. Celkem jsme po\u010det plugin\u016f sn\u00ed\u017eili na 27. P\u0159esto\u017ee na rychlost na\u010d\u00edt\u00e1n\u00ed webu to nebude m\u00edt v\u00fdrazn\u00fd dopad, p\u0159ipravili jsme si pozici, pro dal\u0161\u00ed kroky.<\/p>\n<p>Tak\u00e9 jsem aktivoval plugin <strong>WP Smush<\/strong>, kter\u00fd vyu\u017eijeme k optimalizaci obr\u00e1zk\u016f, jak si uk\u00e1\u017eeme vz\u00e1p\u011bt\u00ed.<\/p>\n<p>Zat\u00edm jsme dos\u00e1hli sn\u00ed\u017een\u00ed hodnoty TTFB o 1,2 vte\u0159iny, p\u0159i\u010dem\u017e rychlost na\u010dten\u00ed str\u00e1nky je 6,69.<\/p>\n<p>A nyn\u00ed ji\u017e kone\u010dn\u011b jdeme sni\u017eovat velikost str\u00e1nky.<\/p>\n<h2>Optimalizace obr\u00e1zk\u016f<\/h2>\n<p>Optimalizace obr\u00e1zk\u016f se d\u00e1 rozd\u011blit do dvou \u010d\u00e1st\u00ed:<\/p>\n<p><strong>Sn\u00ed\u017een\u00ed velikosti obr\u00e1zku. <\/strong><\/p>\n<p>Ka\u017ed\u00fd obr\u00e1zek, m\u00e1 svou velikost. P\u0159i nahr\u00e1v\u00e1n\u00ed je tedy d\u016fle\u017eit\u00e9, aby byla co nejni\u017e\u0161\u00ed. P\u0159esto\u017ee WordPress generuje n\u00e1hledov\u00e9 obr\u00e1zky r\u016fzn\u00fdch velikost\u00ed, v\u017edy je prostor pro vyu\u017eit\u00ed komprese obr\u00e1zk\u016f, co\u017e n\u00e1m sn\u00ed\u017e\u00ed velikost str\u00e1nky. V e-shopu byl neaktivn\u00ed plugin WP Smush, kter\u00fd takovou kompresi d\u011bl\u00e1.<\/p>\n<p>Po aktivaci, najdete v m\u00e9di\u00edch polo\u017eku WP Smush, kde m\u016f\u017eete zkomprimovat st\u00e1vaj\u00edc\u00ed obr\u00e1zky.<\/p>\n<p><a href=\"http:\/\/musilda.cz\/wp-content\/uploads\/2016\/07\/dizajn-smushit-1.jpeg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3098\" src=\"http:\/\/musilda.cz\/wp-content\/uploads\/2016\/07\/dizajn-smushit-1.jpeg\" alt=\"dizajn-smushit-1\" width=\"660\" height=\"136\" srcset=\"https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2016\/07\/dizajn-smushit-1.jpeg 660w, https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2016\/07\/dizajn-smushit-1-300x62.jpeg 300w\" sizes=\"(max-width: 660px) 100vw, 660px\" \/><\/a><\/p>\n<p><a href=\"http:\/\/musilda.cz\/wp-content\/uploads\/2016\/07\/dizajn-smushit-2.jpeg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3099\" src=\"http:\/\/musilda.cz\/wp-content\/uploads\/2016\/07\/dizajn-smushit-2.jpeg\" alt=\"dizajn-smushit-2\" width=\"440\" height=\"310\" srcset=\"https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2016\/07\/dizajn-smushit-2.jpeg 440w, https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2016\/07\/dizajn-smushit-2-300x211.jpeg 300w\" sizes=\"(max-width: 440px) 100vw, 440px\" \/><\/a><\/p>\n<p>Obr\u00e1zky, kter\u00e9 jsou ji\u017e nahran\u00e9, mus\u00edte optimalizovat ru\u010dn\u011b, plugin jich uprav\u00ed na jedno kliknut\u00ed asi 50. Pokud ale plugin nech\u00e1te zapnut\u00fd, p\u0159i ka\u017ed\u00e9m nahr\u00e1n\u00ed obr\u00e1zku, jej rovnou zoptimalizuje.<\/p>\n<p>Existuj\u00ed tak\u00e9 alternativy k WP Smush, ale jejich omezen\u00ed je v\u011bt\u0161inou na po\u010det obr\u00e1zk\u016f, tak\u017ee jej velmi rychle vy\u010derp\u00e1te. WP Smush zvolil jinou cestu, komprimace, kterou poskytuje zdarma, nen\u00ed stoprocentn\u00ed, ale ve v\u011bt\u0161inou dostate\u010dn\u00e1.<\/p>\n<p><strong>Spojov\u00e1n\u00ed obr\u00e1zk\u016f do jednoho<\/strong><\/p>\n<p>Tento postup se net\u00fdk\u00e1 obsahu e-shop a WordPressu p\u0159\u00edmo, jedn\u00e1 se o spojen\u00ed obr\u00e1zk\u016f, kter\u00e9 vyu\u017e\u00edv\u00e1 \u0161ablona &#8211; \u0161ipky, ikonky a dal\u0161\u00ed prvky, do jednoho &#8222;spritu&#8220;. D\u00edky tomu prohl\u00ed\u017ee\u010d st\u00e1hne jen jeden obr\u00e1zek a str\u00e1nka se na\u010d\u00edt\u00e1 rychleji, ne\u017e, kdy\u017e mus\u00ed stahovat des\u00edtky mal\u00fdch obr\u00e1zk\u016f.<\/p>\n<h2>Jak budeme postupovat my?<\/h2>\n<p>Nejprve spust\u00edme WP Smush a pak se pod\u00edv\u00e1m, kter\u00e9 obr\u00e1zky by bylo vhodn\u00e9 upravit.<\/p>\n<p>V tuto chv\u00edli si mus\u00edme popsat strukturu \u0161ablony &#8211; je tu hlavn\u00ed strana, na kter\u00e9 v\u011bt\u0161inou b\u00fdvaj\u00ed slidery, banery, carousely a dal\u0161\u00ed grafick\u00e9 prvky. D\u00e1le zde m\u00e1me v\u00fdpis kategorie produktu, kde je \u0159ada mal\u00fdch obr\u00e1zk\u016f produkt\u016f a nakonec detail produktu. Na detailu produktu m\u016f\u017eeme m\u00edt jeden velk\u00fd obr\u00e1zek produktu a p\u0159\u00edpadn\u011b n\u011bkolik mal\u00fdch v galerii produktu. Nav\u00edc, je \u010dasto na detailu v\u00fdpis souvisej\u00edc\u00edch produkt\u016f. Ostatn\u00ed str\u00e1nky &#8211; pokladna, ko\u0161\u00edk, m\u016fj \u00fa\u010det, nejsou z pohledu optimalizace obr\u00e1zk\u016f tak d\u016fle\u017eit\u00e9.<\/p>\n<p><strong>Pod\u00edv\u00e1me se na hlavn\u00ed stranu<\/strong><\/p>\n<p>Na hlavn\u00ed stran\u011b je slider se t\u0159emi obr\u00e1zky, n\u00e1sleduj\u00ed t\u0159i obr\u00e1zkov\u00e9 banery a carousel s produkty. Carousely jsou velmi problematick\u00e9 m\u00edsto, p\u0159i \u0159e\u0161en\u00ed rychlosti na\u010d\u00edt\u00e1n\u00ed, proto\u017ee \u010dasto na\u010d\u00edtaj\u00ed i zbyte\u010dn\u011b mnoho obr\u00e1zk\u016f, \u010dasto i 20, p\u0159i\u010dem\u017e viditeln\u00e9 jsou t\u0159eba 4. Na\u0161t\u011bst\u00ed je tento naps\u00e1n dob\u0159e a obsahuje jen 7 obr\u00e1zk\u016f, p\u0159i na\u010d\u00edt\u00e1n\u00ed str\u00e1nky.<\/p>\n<p>Proto se zam\u011b\u0159\u00edme na slider a bannery. Pro uk\u00e1zku jsem vybral obr\u00e1zek s n\u00e1zvem zlava-baner-2 a ve vodop\u00e1du jej najdeme na pozici 14.<\/p>\n<p><a href=\"http:\/\/musilda.cz\/wp-content\/uploads\/2016\/07\/dizajn-image-1.jpeg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3100\" src=\"http:\/\/musilda.cz\/wp-content\/uploads\/2016\/07\/dizajn-image-1.jpeg\" alt=\"dizajn-image-1\" width=\"863\" height=\"281\" srcset=\"https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2016\/07\/dizajn-image-1.jpeg 863w, https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2016\/07\/dizajn-image-1-300x98.jpeg 300w, https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2016\/07\/dizajn-image-1-768x250.jpeg 768w\" sizes=\"(max-width: 863px) 100vw, 863px\" \/><\/a><\/p>\n<p>Proto\u017ee tento obr\u00e1zek chceme manu\u00e1ln\u011b zmen\u0161it, pou\u017eijeme online slu\u017ebu Tinypng.com, co\u017e je v\u00fdborn\u00e1 technologie, ale v podob\u011b WordPress plugin je placen\u00e1. Obr\u00e1zek si z webu st\u00e1hneme a nahrajeme jej do n\u00e1stroje.<\/p>\n<p><a href=\"http:\/\/musilda.cz\/wp-content\/uploads\/2016\/07\/dizajn-image-2.jpeg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3101\" src=\"http:\/\/musilda.cz\/wp-content\/uploads\/2016\/07\/dizajn-image-2.jpeg\" alt=\"dizajn-image-2\" width=\"859\" height=\"311\" srcset=\"https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2016\/07\/dizajn-image-2.jpeg 859w, https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2016\/07\/dizajn-image-2-300x109.jpeg 300w, https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2016\/07\/dizajn-image-2-768x278.jpeg 768w\" sizes=\"(max-width: 859px) 100vw, 859px\" \/><\/a><\/p>\n<p>Jak m\u016f\u017eete vid\u011bt, velikost jsme dok\u00e1zali sn\u00ed\u017eit o 77%, co\u017e je v\u00fdborn\u00e9. Nyn\u00ed najdeme m\u00edsto vlo\u017een\u00ed origin\u00e1ln\u00edho obr\u00e1zku a nahrad\u00edme jej. Pro editaci hlavn\u00ed strany, je pou\u017eit ji\u017e klasick\u00fd Visual composer:<\/p>\n<p><a href=\"http:\/\/musilda.cz\/wp-content\/uploads\/2016\/07\/dizajn-image-3.jpeg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3102\" src=\"http:\/\/musilda.cz\/wp-content\/uploads\/2016\/07\/dizajn-image-3.jpeg\" alt=\"dizajn-image-3\" width=\"824\" height=\"249\" srcset=\"https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2016\/07\/dizajn-image-3.jpeg 824w, https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2016\/07\/dizajn-image-3-300x91.jpeg 300w, https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2016\/07\/dizajn-image-3-768x232.jpeg 768w\" sizes=\"(max-width: 824px) 100vw, 824px\" \/><\/a><\/p>\n<p>My tedy vym\u011bn\u00edme prost\u0159edn\u00ed obr\u00e1zek a pod\u00edv\u00e1me se, zda se n\u011bco zm\u011bnilo.<\/p>\n<p><a href=\"http:\/\/musilda.cz\/wp-content\/uploads\/2016\/07\/dizajn-image-4.jpeg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3104\" src=\"http:\/\/musilda.cz\/wp-content\/uploads\/2016\/07\/dizajn-image-4.jpeg\" alt=\"dizajn-image-4\" width=\"810\" height=\"180\" srcset=\"https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2016\/07\/dizajn-image-4.jpeg 810w, https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2016\/07\/dizajn-image-4-300x67.jpeg 300w, https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2016\/07\/dizajn-image-4-768x171.jpeg 768w\" sizes=\"(max-width: 810px) 100vw, 810px\" \/><\/a><\/p>\n<p><strong>Rozd\u00edl je vid\u011bt na prvn\u00ed pohled!<\/strong><\/p>\n<p>A nyn\u00ed ud\u011bl\u00e1me stejn\u00fd proces se zb\u00fdvaj\u00edc\u00edmi p\u011bti obr\u00e1zky.<\/p>\n<p><strong>Dal\u0161\u00edm krokem, bude pou\u017eit\u00ed Lazy Loading<\/strong><\/p>\n<p>Co vlastn\u011b znamen\u00e1 lazy loading? Zjednodu\u0161en\u011b se d\u00e1 \u0159\u00edci, \u017ee jde o odlo\u017een\u00e9 na\u010d\u00edt\u00e1n\u00ed. Net\u00fdk\u00e1 se jen obr\u00e1zk\u016f, ale mohou to b\u00fdt i videa. V podstat\u011b jde o to, \u017ee to co nevid\u00edte, nemus\u00ed prohl\u00ed\u017ee\u010d p\u0159i zobrazen\u00ed str\u00e1nky na\u010d\u00edst. Proto jsou obr\u00e1zky, jen\u017e jsou p\u0159i na\u010d\u00edt\u00e1n\u00ed str\u00e1nky mimo monitor (dole na str\u00e1nce), nahrazov\u00e1ny jedn\u00edm obr\u00e1zkem o velikosti 1px. T\u00edm se sn\u00ed\u017e\u00ed velikost str\u00e1nky, p\u0159i na\u010d\u00edt\u00e1n\u00ed a ta se zobraz\u00ed rychleji.<\/p>\n<p>Na hlavn\u00ed stran\u011b se to v tuto chv\u00edli t\u00fdk\u00e1 jen obr\u00e1zk\u016f v carouselu, ale skrze cel\u00fd e-shop, najde tato technika vyu\u017eit\u00ed, p\u0159edev\u0161\u00edm na v\u00fdpisech produkt\u016f.<\/p>\n<p>Pro implementaci jsem pou\u017eil plugin BJ Lazy Loading.<\/p>\n<h2>Jak\u00fdch v\u00fdsledk\u016f jsme zat\u00edm dos\u00e1hli?<\/h2>\n<p><a href=\"http:\/\/musilda.cz\/wp-content\/uploads\/2016\/07\/dizajn-webspeedtest-4.jpeg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3105\" src=\"http:\/\/musilda.cz\/wp-content\/uploads\/2016\/07\/dizajn-webspeedtest-4.jpeg\" alt=\"dizajn-webspeedtest-4\" width=\"949\" height=\"128\" srcset=\"https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2016\/07\/dizajn-webspeedtest-4.jpeg 949w, https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2016\/07\/dizajn-webspeedtest-4-300x40.jpeg 300w, https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2016\/07\/dizajn-webspeedtest-4-768x104.jpeg 768w\" sizes=\"(max-width: 949px) 100vw, 949px\" \/><\/a><\/p>\n<p>Ze screenu m\u016f\u017eete vid\u011bt, \u017ee velikost str\u00e1nky je ji\u017e na 1,4MB, TTFB je 2 vte\u0159iny a str\u00e1nka se na\u010detla za 4,4 vte\u0159iny.<\/p>\n<p>Jak\u00fd bude dal\u0161\u00ed krok? Pod\u00edv\u00e1me se podrobn\u011bji na vodop\u00e1d, minifikaci a spojov\u00e1n\u00ed soubor\u016f.<\/p>\n<h2>Minifikace a spojov\u00e1n\u00ed js a css soubor\u016f<\/h2>\n<p>S pojmem minifikace jste se ji\u017e ur\u010dit\u011b setkali. co ale p\u0159esn\u011b znamen\u00e1 a jak m\u016f\u017eeme ob\u011b techniky pou\u017e\u00edt ke zrychlen\u00ed na\u010d\u00edt\u00e1n\u00ed webu?<\/p>\n<p>Ka\u017ed\u00e1 WordPress \u0161ablona, obsahuje \u0159adu css a js soubor\u016f, kter\u00e9 vyu\u017e\u00edv\u00e1 k prezentaci vzhledu a k tvorb\u011b prvk\u016f str\u00e1nky. Zde z\u00e1le\u017e\u00ed na konkr\u00e9tn\u00ed \u0161ablon\u011b, jak\u00e9 mno\u017estv\u00ed jich je. Dost &#8222;nena\u017eran\u00e9&#8220; jsou v tomto pr\u00e1v\u011b \u0161ablony z ThemeForest, kde se zdroji moc ne\u0161et\u0159\u00ed, sp\u00ed\u0161e naopak.<\/p>\n<p>K tomu je pot\u0159eba p\u0159ipo\u010d\u00edst \u0159adu plugin\u016f, jen\u017e si v\u011bt\u0161inou tak\u00e9 p\u0159idaj\u00ed sv\u016fj css, nebo js soubor. Hrav\u011b se pak dostanete i na 40 soubor\u016f, jen\u017e mus\u00ed prohl\u00ed\u017ee\u010d st\u00e1hnout.<\/p>\n<p>Ka\u017ed\u00e9 sta\u017een\u00ed zab\u00edr\u00e1 \u010das, dle velikosti souboru a z\u00e1rove\u0148 \u010das, pot\u0159ebn\u00fd ke sta\u017een\u00ed, obsahuje i nutnost to spojen\u00ed nav\u00e1zat. \u010cty\u0159icetkr\u00e1t.<\/p>\n<p><strong>Mal\u00e1 odbo\u010dka<\/strong> &#8211; s <a href=\"http:\/\/www.root.cz\/clanky\/jak-funguje-novy-protokol-http-2\/\" target=\"_blank\" rel=\"noopener\">HTTP2<\/a>, nebude m\u00edt po\u010det soubor\u016f, takov\u00fd vliv na na\u010d\u00edt\u00e1n\u00ed, proto\u017ee v\u0161echny soubory se budou stahovat najednou. Dokud jej nebudou podporovat i nejroz\u0161\u00ed\u0159en\u011bj\u0161\u00ed hostingy, je to jen okrajov\u00e1 z\u00e1le\u017eitost.<\/p>\n<p>Krom\u011b po\u010dtu soubor\u016f, je zde d\u016fle\u017eit\u00e1 jeho velikost. A\u0165 se jedn\u00e1 o css, nebo js, jsou to textov\u00e9 soubory, jen\u017e jsou n\u011bjak naps\u00e1ny. A to i s netisknuteln\u00fdmi znaky, jako jsou mezery a konce \u0159\u00e1dk\u016f. I tyto znaky, ovliv\u0148uj\u00ed velikost v\u00fdsledn\u00e9ho souboru.<\/p>\n<p><strong>Minifikace<\/strong> z takov\u00e9ho souboru odstran\u00ed v\u0161echny mezery a v\u00fdsledek m\u016f\u0159e vypadat takto<\/p>\n<p><a href=\"http:\/\/musilda.cz\/wp-content\/uploads\/2016\/07\/dizajn-minify.jpeg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3107\" src=\"http:\/\/musilda.cz\/wp-content\/uploads\/2016\/07\/dizajn-minify.jpeg\" alt=\"dizajn-minify\" width=\"742\" height=\"289\" srcset=\"https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2016\/07\/dizajn-minify.jpeg 742w, https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2016\/07\/dizajn-minify-300x117.jpeg 300w\" sizes=\"(max-width: 742px) 100vw, 742px\" \/><\/a><\/p>\n<p>Pro oby\u010dejn\u00e9ho smrteln\u00edka ne\u010diteln\u00e9, stroji to v\u0161ak v\u016fbec nevad\u00ed.<\/p>\n<p>Mezi minifikac\u00ed css a js je rozd\u00edl v tom, \u017ee minifikace js souboru nav\u00edc nahrazuje n\u00e1zvy prom\u011bnn\u00fdch na p\u00edsmena, \u010d\u00edm\u017e \u0161et\u0159\u00ed je\u0161t\u011b v\u00edce prostoru.<\/p>\n<p><strong>Spojov\u00e1n\u00ed soubor\u016f<\/strong> p\u0159ich\u00e1z\u00ed na \u0159adu pro minifikaci, tak, aby jsme prohl\u00ed\u017ee\u010di u\u0161et\u0159ili pr\u00e1ci s op\u011btovn\u00fdm stahov\u00e1n\u00ed dal\u0161\u00edch soubor\u016f. Proto minifikovan\u00e9 soubory spoj\u00edme do jednoho.<\/p>\n<p>V na\u0161em p\u0159\u00edpad\u011b ji\u017e na e-shopu m\u00e1me perfektn\u00ed plugin <a href=\"https:\/\/wordpress.org\/plugins\/bwp-minify\/\" target=\"_blank\" rel=\"noopener\">BWP Minify<\/a>, kter\u00fd um\u00ed jak minifikaci, tak spojov\u00e1n\u00ed. Nav\u00edc dok\u00e1\u017ee ur\u010dit, zda se m\u00e1 soubor na\u010d\u00edst v pati\u010dce, nebo v hlavi\u010dce, co\u017e je d\u016fle\u017eit\u00e9 p\u0159edev\u0161\u00edm u js soubor\u016f. Tak\u00e9 zde m\u016f\u017eete ur\u010dit, kter\u00e9 soubory se minifikovat nebudou.<\/p>\n<p>Probl\u00e9my s minifikac\u00ed a spojov\u00e1n\u00edm soubor\u016f mohou b\u00fdt v nespr\u00e1vn\u00e9m po\u0159ad\u00ed spojov\u00e1n\u00ed. Nap\u0159\u00edklad p\u0159esunete do pati\u010dky soubor, jeho\u017e funkce vyu\u017e\u00edv\u00e1 soubor, kter\u00fd se na\u010d\u00edt\u00e1 v hlavi\u010dce. Typickou chybou je p\u0159esunut\u00ed na\u010dten\u00ed jQuery knihovny do pati\u010dky.<\/p>\n<p>\u0160ablony a pluginy r\u00e1di vkl\u00e1daj\u00ed js z\u00e1pis p\u0159\u00edmo do hlavi\u010dky \u0161ablony a pak v\u00e1m web p\u0159estane fungovat. My m\u00e1me \u0161t\u011bst\u00ed, \u017ee plugin je ji\u017e nainstalovan\u00fd a spr\u00e1vn\u011b nastaven\u00fd, tak\u017ee se p\u0159esuneme k dal\u0161\u00edmu kroku.<\/p>\n<h2>Kontrola vodop\u00e1du<\/h2>\n<p>P\u0159esto\u017ee nadpis je kontrola vodop\u00e1du, budeme muset nahl\u00e9dnout i do zdrojov\u00e9ho k\u00f3du.<\/p>\n<p>Obr\u00e1zky, css a js soubory jsme ji\u017e \u0159e\u0161ili, nyn\u00ed p\u016fjdeme po krku font\u016fm.<\/p>\n<p>Z prohl\u00e9dnut\u00ed zdrojov\u00e9ho k\u00f3du je vid\u011bt, \u017ee font Open Sans se na\u010d\u00edt\u00e1 dvakr\u00e1t. Konkr\u00e9tn\u011b jej na\u010d\u00edt\u00e1 \u0161ablona Porto a potom tak\u00e9 Ultimate dopln\u011bk pro Visual Composer. \u0160ablona jej na\u010d\u00edt\u00e1 dostate\u010dn\u011b, proto odstran\u00edme ten druh\u00fd.<\/p>\n<p>Ve zdrojov\u00e9m k\u00f3du m\u016f\u017eeme vid\u011bt<\/p>\n<pre>&lt;link <span class=\"html-attribute-name\">rel<\/span>='<span class=\"html-attribute-value\">stylesheet<\/span>' <span class=\"html-attribute-name\">id<\/span>='<span class=\"html-attribute-value\">ultimate-google-fonts-css<\/span>' <span class=\"html-attribute-name\">href<\/span>='<a class=\"html-attribute-value html-resource-link\" href=\"https:\/\/fonts.googleapis.com\/css?family=Open+Sans:regular,600\" target=\"_blank\" rel=\"noopener\">https:\/\/fonts.googleapis.com\/css?family=Open+Sans:regular,600<\/a>' <span class=\"html-attribute-name\">type<\/span>='<span class=\"html-attribute-value\">text\/css<\/span>' <span class=\"html-attribute-name\">media<\/span>='<span class=\"html-attribute-value\">all<\/span>'\/&gt;<\/pre>\n<p>Pro n\u00e1s je d\u016fle\u017eit\u00e9 id &#8211;\u00a0ultimate-google-fonts-css. Css soubory se vkl\u00e1daj\u00ed pomoc\u00ed enqueue a d\u00edky dequeue m\u016f\u017eeme toto vlo\u017een\u00ed zru\u0161it.<\/p>\n<p>Nyn\u00ed p\u0159ich\u00e1z\u00ed na \u0159adu vytvo\u0159en\u00ed vlastn\u00edho pluginu. Proto\u017ee e-shop nepou\u017e\u00edv\u00e1 child theme, nem\u016f\u017eeme d\u00e1t \u00fapravu do functions.php a mus\u00edme si <a href=\"http:\/\/musilda.cz\/jak-vytvorit-jednoduchy-plugin-pro-wordpress\/\" target=\"_blank\" rel=\"noopener\">vytvo\u0159it vlastn\u00ed mal\u00fd plugin.<\/a><\/p>\n<p>Do n\u011bj vlo\u017e\u00edme n\u00e1sleduj\u00edc\u00ed k\u00f3d:<\/p>\n<pre>add_action( 'wp_enqueue_scripts', 'porto_woocommerce_script_cleaner', 999 );\n\nfunction porto_woocommerce_script_cleaner() {\n\n\u00a0 \u00a0 \u00a0wp_dequeue_style( 'ultimate-google-fonts' );\n\n}<\/pre>\n<p>Vid\u00edte, \u017ee ve funkci wp_dequeue_style jsme pou\u017eili id css souboru, bez -css na konci. T\u00edm jsme odregistrovali font, kter\u00fd se na\u010d\u00edtal duplicitn\u011b.\u00a0Z\u00e1rove\u0148 jsme sn\u00ed\u017eili po\u010det request\u016f.<\/p>\n<p><strong>Nyn\u00ed se pod\u00edv\u00e1me na soubory, kter\u00e9 se nena\u010dtou &#8211; 404<\/strong><\/p>\n<p>Typick\u00fdm p\u0159\u00edkladem je favikona, stejn\u011b, jako v tomto p\u0159\u00edpad\u011b<\/p>\n<p><a href=\"http:\/\/musilda.cz\/wp-content\/uploads\/2016\/07\/dizajn-favikon.jpeg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3108\" src=\"http:\/\/musilda.cz\/wp-content\/uploads\/2016\/07\/dizajn-favikon.jpeg\" alt=\"dizajn-favikon\" width=\"951\" height=\"344\" srcset=\"https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2016\/07\/dizajn-favikon.jpeg 951w, https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2016\/07\/dizajn-favikon-300x109.jpeg 300w, https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2016\/07\/dizajn-favikon-768x278.jpeg 768w\" sizes=\"(max-width: 951px) 100vw, 951px\" \/><\/a><\/p>\n<p>P\u0159esto\u017ee soubor neexistuje, prohl\u00ed\u017ee\u010d se ho sna\u017e\u00ed st\u00e1hnout. to jej zam\u011bstn\u00e1 na pom\u011brn\u011b dlouhou dobu. Projd\u011bte pozorn\u011b vodop\u00e1d a v\u0161echny 404 opravte.<\/p>\n<h2>Asynchron\u00ed na\u010d\u00edt\u00e1n\u00ed javascriptu<\/h2>\n<p>Jedn\u00edm z pravidel, na kter\u00e9 upozor\u0148oval n\u00e1stroj PageSpeed Insight, bylo odstran\u011bn\u00ed v\u0161ech script\u016f, blokuj\u00edc\u00edch vykreslen\u00ed str\u00e1nky. Typicky to jsou js soubory a vy\u0159e\u0161it toto pravilo m\u016f\u017eeme pomoc\u00ed n\u00e1sleduj\u00edc\u00edho scriptu. Jeho fungov\u00e1n\u00ed jsem <a href=\"http:\/\/musilda.cz\/pouziti-asynchronniho-nacitani-javascriptu-ve-wordpressu\/\" target=\"_blank\" rel=\"noopener\">popsal v d\u0159\u00edv\u011bj\u0161\u00edm \u010dl\u00e1nku<\/a>.<\/p>\n<pre>add_filter( 'clean_url', 'wcs_defer_javascripts', 11, 1 );\n\nfunction wcs_defer_javascripts ( $url ) {\n\u00a0 \u00a0 if ( false === strpos( $url, '.js' ) ) return $url;\u00a0\n\u00a0 \u00a0 if ( strpos( $url, 'jquery.js' ) ) return $url;\n\u00a0 \u00a0 return \"$url' async='async\";\n}<\/pre>\n<p>Funkci um\u00edst\u00edme do na\u0161eho mal\u00e9ho pluginu. Problematika asynchronn\u00edho na\u010d\u00edt\u00e1n\u00ed jde mimo rozsah tohoto \u010dl\u00e1nku, doporu\u010duji nap\u0159\u00edklad \u010dten\u00ed na <a href=\"https:\/\/phpfashion.com\/rychlejsi-stranky-s-google-universal-analytics\" target=\"_blank\" rel=\"noopener\">phpfashion.com<\/a>.<\/p>\n<h2>Nastaven\u00ed expirace soubor\u016f a povolen\u00ed gzip kompresse<\/h2>\n<p>Dal\u0161\u00ed prvek, kter\u00fd v\u00e1m pom\u016f\u017ee zrychlit str\u00e1nku, je nastaven\u00ed expirace soubor\u016f. \u0158\u00edk\u00e1te t\u00edm prohl\u00ed\u017ee\u010di, jak dlouho je m\u00e1 dr\u017eet v pam\u011bti a za jak dlouho je pot\u0159eba jej na\u010d\u00edst znovu. Opakovan\u00e9 na\u010d\u00edt\u00e1n\u00ed str\u00e1nek se t\u00edm zna\u010dn\u011b zrychl\u00ed.<\/p>\n<p>D\u00e1le povol\u00edme gzip kompresi, co\u017e je zjednodu\u0161en\u011b \u0159e\u010deno &#8222;zabalen\u00ed&#8220; va\u0161\u00ed str\u00e1nky a p\u0159enos do prohl\u00ed\u017ee\u010de, kter\u00fd si ji zase rozbal\u00ed. T\u00edm tak\u00e9 u\u0161et\u0159\u00edme n\u011bjakou velikost.<\/p>\n<p>K\u00f3d, kter\u00fd pou\u017e\u00edv\u00e1m v htaccess je pom\u011brn\u011b dlouh\u00fd a p\u0159esto\u017ee jej dok\u00e1\u017e\u00ed pluginy vygenerovat za v\u00e1s, j\u00e1 rad\u011bji pou\u017e\u00edv\u00e1m ru\u010dn\u00ed vlo\u017een\u00ed, ne\u017e dal\u0161\u00ed plugin.<\/p>\n<p>Upozorn\u011bn\u00ed: pro pou\u017eit\u00ed mus\u00edte m\u00edt aktivn\u00ed mod_expire.<\/p>\n<p><a href=\"https:\/\/bitbucket.org\/snippets\/toret\/arykd\/htaccess-vlo-en-expirace-soubor-a-povolen\" target=\"_blank\" rel=\"noopener\">K\u00f3d pro vlo\u017een\u00ed do htaccess najdete zde.<\/a><\/p>\n<h2>Plugin organizer<\/h2>\n<p>P\u0159ed n\u011bjakou dobou jsem narazil na v\u00fdborn\u00fd plugin, kter\u00fd se jmenuje <a href=\"https:\/\/wordpress.org\/plugins\/plugin-organizer\/\" target=\"_blank\" rel=\"noopener\">Plugin Organizer<\/a> a umo\u017e\u0148uje selektivn\u011b nastavovat pou\u017e\u00edv\u00e1n\u00ed plugin\u016f a to nejen pro jednotliv\u00e9 str\u00e1nky, taxonomie, ale i pro mobiln\u00ed za\u0159\u00edzen\u00ed. Mus\u00edte toti\u017e myslet i na to, \u017ee nejen hlavn\u00ed\u00a0str\u00e1nka je pot\u0159eba optimalizovat.<\/p>\n<p>D\u00edky pluginu, dok\u00e1\u017eete nap\u0159\u00edklad na str\u00e1nce kontaktu vypnout komplet WooCommerce.<\/p>\n<p><a href=\"http:\/\/musilda.cz\/wp-content\/uploads\/2016\/07\/dizajn-organizer.jpeg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3110\" src=\"http:\/\/musilda.cz\/wp-content\/uploads\/2016\/07\/dizajn-organizer.jpeg\" alt=\"dizajn-organizer\" width=\"835\" height=\"459\" srcset=\"https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2016\/07\/dizajn-organizer.jpeg 835w, https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2016\/07\/dizajn-organizer-300x165.jpeg 300w, https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2016\/07\/dizajn-organizer-768x422.jpeg 768w\" sizes=\"(max-width: 835px) 100vw, 835px\" \/><\/a><\/p>\n<p><a href=\"http:\/\/musilda.cz\/wp-content\/uploads\/2016\/07\/plugin-organizer-2.jpeg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3111\" src=\"http:\/\/musilda.cz\/wp-content\/uploads\/2016\/07\/plugin-organizer-2.jpeg\" alt=\"plugin-organizer-2\" width=\"834\" height=\"317\" srcset=\"https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2016\/07\/plugin-organizer-2.jpeg 834w, https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2016\/07\/plugin-organizer-2-300x114.jpeg 300w, https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2016\/07\/plugin-organizer-2-768x292.jpeg 768w\" sizes=\"(max-width: 834px) 100vw, 834px\" \/><\/a><\/p>\n<p>Doporu\u010duji, v\u011bnovat se i nastaven\u00ed plugin\u016f v administraci, m\u016f\u017ee potom fungovat daleko svi\u017en\u011bji.<\/p>\n<h2>Posledn\u00ed krok &#8211; cache<\/h2>\n<p>Pokud jste dosp\u011bli a\u017e sem, je p\u0159ed n\u00e1mi, pouze posledn\u00ed krok a to aktivace cache. Plugin\u016f existuje cel\u00e1 \u0159ada, nam\u00e1tkou t\u0159eba WP Super Cache, W3 Total Cache a \u0159adu dal\u0161\u00edch. J\u00e1 \u010dasto pou\u017e\u00edv\u00e1m Fastes Cache, ale plugin nen\u00ed kompatibiln\u00ed s WPB Minify.<\/p>\n<p>Cache v podstat\u011b funguje tak, \u017ee vezme vygenerovanou str\u00e1nku a ulo\u017e\u00ed si jej\u00ed html kopii, kterou pak pos\u00edl\u00e1 prohl\u00ed\u017ee\u010di.<\/p>\n<p>Cel\u00e9 zrychlen\u00ed jsme dnes d\u011blali s minim\u00e1ln\u00edmi z\u00e1sahy do \u0161ablon a plugin\u016f, pokud by jsme cht\u011bli dos\u00e1hnout lep\u0161\u00edho v\u00fdsledku, u\u017e by jsme museli d\u011blat z\u00e1sahy v\u011bt\u0161\u00edho charakteru, co\u017e by vy\u017eadovalo nap\u0159\u00edklad child theme, nebo odstran\u011bn\u00ed Visual Composeru. A to je ji\u017e mimo rozsah dne\u0161n\u00edho textu.<\/p>\n<p><strong>V\u00fdsledek uk\u00e1\u017eeme klientovi:<\/strong><\/p>\n<p><a href=\"http:\/\/musilda.cz\/wp-content\/uploads\/2016\/07\/dizajn-pingdom-4.jpeg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3113\" src=\"http:\/\/musilda.cz\/wp-content\/uploads\/2016\/07\/dizajn-pingdom-4.jpeg\" alt=\"dizajn-pingdom-4\" width=\"971\" height=\"253\" srcset=\"https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2016\/07\/dizajn-pingdom-4.jpeg 971w, https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2016\/07\/dizajn-pingdom-4-300x78.jpeg 300w, https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2016\/07\/dizajn-pingdom-4-768x200.jpeg 768w\" sizes=\"(max-width: 971px) 100vw, 971px\" \/><\/a><\/p>\n<p>Detailn\u011bj\u0161\u00ed rozbor pomoc\u00ed WebspeedTest n\u00e1m uk\u00e1\u017ee jin\u00e9 hodnot a hlavn\u011b je\u0161t\u011b rezervy, kter\u00e9 m\u00e1me:<\/p>\n<p><a href=\"http:\/\/musilda.cz\/wp-content\/uploads\/2016\/07\/dizajn-webspeedtest-5.jpg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3114\" src=\"http:\/\/musilda.cz\/wp-content\/uploads\/2016\/07\/dizajn-webspeedtest-5.jpg\" alt=\"dizajn-webspeedtest-5\" width=\"925\" height=\"119\" srcset=\"https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2016\/07\/dizajn-webspeedtest-5.jpg 925w, https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2016\/07\/dizajn-webspeedtest-5-300x39.jpg 300w, https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2016\/07\/dizajn-webspeedtest-5-768x99.jpg 768w\" sizes=\"(max-width: 925px) 100vw, 925px\" \/><\/a><\/p>\n<h2>Z\u00e1v\u011brem<\/h2>\n<p>E-shop, kter\u00fd jsem optimalizoval, je postaven\u00fd na Woocommerce, obsahuje 14 tis\u00edc produkt\u016f s variantami a p\u0159edev\u0161\u00edm je t\u011bch variant velk\u00e9 mno\u017estv\u00ed.<\/p>\n<p>S pluginy v instalaci WordPressu nen\u00ed nijak \u0161et\u0159eno a \u0161ablona je z prokl\u00ednan\u00e9ho ThemeForest.<\/p>\n<p>Pokud by jste m\u011bli z\u00e1jem o optimalizace eshopu, v r\u00e1mci slu\u017eeb, kter\u00e9 nab\u00edz\u00edm na <a href=\"http:\/\/toret.cz\/\" target=\"_blank\" rel=\"noopener\">Toret.cz<\/a> mne m\u016f\u017eete poptat.<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>P\u0159ed n\u011bjakou dobou se na Facebooku op\u011bt strhla diskuze o tom, zda je Woocommerce vhodn\u00e1 pro eshop. Jak je zvykem, argumenty byly takov\u00e9 &#8222;nekonkr\u00e9tn\u00ed&#8220; &#8211; eshop bude pomal\u00fd, hod\u00ed se jen pro p\u00e1r produkt\u016f, nikdy bych na tom nestav\u011bl a podobn\u011b. Majitel eshopu, kter\u00fd vl\u00e1kno zalo\u017eil, krom\u011b zm\u011bny hostingu, \u010di syst\u00e9mu e-shopu, nedostal \u017e\u00e1dnou radu,<\/p>\n","protected":false},"author":1,"featured_media":3115,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,25,30],"tags":[565,567],"class_list":["post-3086","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-navody","category-woocommerce","category-wordpress","tag-zrychleni-woocommerce","tag-zrychleni-wordpressu"],"_links":{"self":[{"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/posts\/3086"}],"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=3086"}],"version-history":[{"count":0,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/posts\/3086\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/media\/3115"}],"wp:attachment":[{"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/media?parent=3086"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/categories?post=3086"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/tags?post=3086"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}