{"id":20736,"date":"2020-10-13T11:27:00","date_gmt":"2020-10-13T09:27:00","guid":{"rendered":"https:\/\/www.websupport.sk\/blog\/?p=20736"},"modified":"2025-03-11T21:07:49","modified_gmt":"2025-03-11T20:07:49","slug":"na-rychlosti-zalezi","status":"publish","type":"post","link":"https:\/\/www.websupport.sk\/blog\/2020\/10\/na-rychlosti-zalezi\/","title":{"rendered":"Na r\u00fdchlosti z\u00e1le\u017e\u00ed. Optimalizujte CSS a boostnite v\u00e1\u0161 predaj!"},"content":{"rendered":"<span class=\"span-reading-time rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\"><b>Doba \u010d\u00edtania:<\/b><\/span> <span class=\"rt-time\"> 5<\/span> <span class=\"rt-label rt-postfix\">min.<\/span><\/span>\n<p>Na optimaliz\u00e1cii webu sa d\u00e1 pracova\u0165 st\u00e1le. Toto tvrdenie pod\u010diarkuje nie raz, ani dvakr\u00e1t, ale minim\u00e1lne trikr\u00e1t v\u00fdsledok \u0161t\u00fadie <a href=\"https:\/\/www2.deloitte.com\/ie\/en\/pages\/consulting\/articles\/milliseconds-make-millions.html\" target=\"_blank\" rel=\"noreferrer noopener\">Milliseconds make millions<\/a> od spolo\u010dnosti Deloitte zameranej na konverziu n\u00e1v\u0161tev webu na objedn\u00e1vky v&nbsp;z\u00e1vislosti od r\u00fdchlosti na\u010d\u00edtania mobilnej verzie str\u00e1nky.&nbsp;<\/p>\n\n\n\n<p>D\u00f4vod? Odhaduje sa, \u017ee predaj prostredn\u00edctvom mCommerce sa do roku 2023 zdvojn\u00e1sob\u00ed a&nbsp;bude tak tvori\u0165 v&nbsp;glob\u00e1le&nbsp;\u00be v\u0161etk\u00fdch eCommerce obchodov.&nbsp;<\/p>\n\n\n\n<p>V\u00fdsledok? Zlep\u0161en\u00edm r\u00fdchlosti na\u010d\u00edtania mobiln\u00e9ho webu o&nbsp;0,1 s malo pozit\u00edvny dopad na po\u010det n\u00e1v\u0161tevn\u00edkov, mieru konverzie a&nbsp;priemern\u00fa hodnotu objedn\u00e1vky. Napr\u00edklad len v&nbsp;maloobchode vzr\u00e1stla miera konverzie o&nbsp;8,4 % a&nbsp;hodnota jednej objedn\u00e1vky o&nbsp;9,2 %.&nbsp; A&nbsp;to s\u00fa \u010d\u00edsla, nad ktor\u00fdmi sa u\u017e len tak m\u00e1vnu\u0165 rukou ned\u00e1.<\/p>\n\n\n\n<p>Jeden zo sp\u00f4sobov, ako dosiahnu\u0165 vy\u0161\u0161iu r\u00fdchlos\u0165 na\u010d\u00edtania v\u00e1\u0161ho webu, je optimaliz\u00e1cia <a href=\"https:\/\/www.websupport.sk\/blog\/2023\/08\/ako-sa-co-najrychlejsie-naucit-html-a-css\/\" target=\"_blank\" rel=\"noreferrer noopener\">CSS<\/a> s\u00faborov.\u00a0\u00a0<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Ako vpl\u00fdva CSS na r\u00fdchlos\u0165 na\u010d\u00edtania webu?<\/strong><\/h2>\n\n\n\n<p>V\u0161etko za\u010d\u00edna t\u00fdm, \u017ee prehliada\u010d stiahne HTML dokument, zanalyzuje ho a vytvor\u00ed DOM (Document Object Model). V&nbsp;momente, ke\u010f naraz\u00ed na extern\u00fd zdroj d\u00e1t (CSS, JS, obr\u00e1zky), prirad\u00ed mu prioritu a&nbsp;pod\u013ea nej za\u010dne s&nbsp;jeho s\u0165ahovan\u00edm. CSS stylesheets maj\u00fa zvy\u010dajne vysok\u00fa prioritu, lebo s\u00fa d\u00f4le\u017eit\u00e9 pre vytvorenie CSSOM (CSS Object Model). DOM a&nbsp;CSSOM potrebuje prehliada\u010d na vykreslenie webu. A len ak m\u00e1 obe k&nbsp;dispoz\u00edcii, za\u010dne s&nbsp;vykres\u013eovan\u00edm. S\u00fa teda dva aspekty v&nbsp;spojen\u00ed s&nbsp;CSS, ktor\u00e9 ovplyv\u0148uj\u00fa r\u00fdchlos\u0165 na\u010d\u00edtania webstr\u00e1nky &#8211; samotn\u00e1 ve\u013ekos\u0165 CSS s\u00faborov a&nbsp;priraden\u00e1 priorita pri s\u0165ahovan\u00ed. Obidva aspekty sa daj\u00fa optimalizova\u0165.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>1. Zmen\u0161ite ve\u013ekos\u0165 v\u00e1\u0161ho CSS stylesheet<\/strong><\/h3>\n\n\n\n<p>Dnes je \u00faplne be\u017en\u00e9, \u017ee sa na zefekt\u00edvnenie pr\u00e1ce, vytvorenie prefixov a fallbackov pre star\u0161ie prehliada\u010de, alebo kv\u00f4li in\u00fdm vylep\u0161eniam pri vytv\u00e1ran\u00ed CSS, pou\u017e\u00edvaj\u00fa r\u00f4zne pre\/post procesory, pr\u00edpadne in\u00e9 n\u00e1stroje. Jednou z&nbsp;mo\u017enost\u00ed, ako zn\u00ed\u017ei\u0165 loading time v\u00e1\u0161ho CSS s\u00faboru, je zmen\u0161enie jeho ve\u013ekosti. <br>Toto dosiahnete napr\u00edklad odstr\u00e1nen\u00edm zbyto\u010dn\u00fdch \u010dast\u00ed k\u00f3du. K&nbsp;tomu sa dopracujete jednoduchou&nbsp; aktualiz\u00e1ciou browserslistu autoprefixera,&nbsp;aktualiz\u00e1ciou nastaven\u00ed \u010fal\u0161\u00edch n\u00e1strojov, ktor\u00e9 pou\u017e\u00edvate alebo napr\u00edklad pluginom na zl\u00fa\u010denie pou\u017eit\u00fdch m\u00e9dia queries vo va\u0161om CSS stylesheete. Tak\u00fdmto relat\u00edvne jednoduch\u00fdm sp\u00f4sobom viete u\u0161etri\u0165 aj nieko\u013eko kilobajtov.&nbsp;<\/p>\n\n\n\n<p>Viac info, ako na aktualiz\u00e1ciu browserslistu a&nbsp;PostCSS:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/github.com\/browserslist\/browserslist\" target=\"_blank\" rel=\"noreferrer noopener\">GitHub\/browserslist<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/pustelto.com\/blog\/optimizing-css-for-faster-page-loads\/?ref=sidebar\" target=\"_blank\" rel=\"noreferrer noopener\">PostCSS<\/a><a href=\"https:\/\/pustelto.com\/blog\/optimizing-css-for-faster-page-loads\/?ref=sidebar\"> nastavenie v&nbsp;zdrojovom k\u00f3de<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/github.com\/Pustelto\/personal_web\/blob\/master\/package.json#L47\" target=\"_blank\" rel=\"noreferrer noopener\">Definovanie Browserslistu v&nbsp;tomto konkr\u00e9tnom pr\u00edpade<\/a><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">2. <strong>Pou\u017eite Critical CSS<\/strong><\/h3>\n\n\n\n<p>\u010eal\u0161\u00ed sp\u00f4sob, ako v\u00fdrazne zv\u00fd\u0161i\u0165 r\u00fdchlos\u0165 zobrazenia v\u00e1\u0161ho webu, je zn\u00ed\u017eenie po\u010dtu requestov. Ako vieme, prehliada\u010d \u0161tandardne za\u010d\u00edna s&nbsp;vykres\u013eovan\u00edm webu a\u017e po kompletnom na\u010d\u00edtan\u00ed CSS s\u00faborov, \u010do m\u00f4\u017ee sp\u00f4sobi\u0165 najm\u00e4 pri pomal\u0161\u00edch pripojeniach delay v&nbsp;podobe bielej obrazovky. Pri prvej n\u00e1v\u0161teve str\u00e1nky ale n\u00e1v\u0161tevn\u00edk nepotrebuje ma\u0165 ihne\u010f na\u010d\u00edtan\u00fd cel\u00fd web. Re\u00e1lne mu sta\u010d\u00ed len t\u00e1 \u010das\u0165 webu, ktor\u00e1 sa mu vojde do viewportu na jeho zariaden\u00ed. Na to treba obsahovo len ve\u013emi mal\u00fa \u010das\u0165 v\u00e1\u0161ho CSS. T\u00fato kritick\u00fa \u010das\u0165 CSS m\u00f4\u017eete vlo\u017ei\u0165 v&nbsp;inline podobe pomocou &lt;style&gt; priamo do HTML k\u00f3du a CSS na\u010d\u00edta\u0165 asynchr\u00f3nne pomocou JavaScriptu:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script&gt;\n        loadCSS(\u201cstyle.css\u201c);\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p>Takto v\u00fdrazne zlep\u0161\u00edte r\u00fdchlos\u0165 zobrazenia str\u00e1nky s t\u00fdm, \u017ee na r\u00fdchlos\u0165 na\u010d\u00edtania cel\u00e9ho webu to a\u017e tak\u00fd vplyv ma\u0165 nebude. Podstatn\u00e9 je, \u017ee v\u010faka tejto technike sa n\u00e1v\u0161tevn\u00edkovi zobraz\u00ed web r\u00fdchlej\u0161ie. Na\u0161\u0165astie nemus\u00edte to by\u0165 vy, kto rozhodne, \u010do z CSS bude vlo\u017een\u00e9 do HTML. Existuj\u00fa na to n\u00e1stroje.<\/p>\n\n\n\n<p>Meranie r\u00fdchlosti zobrazenia a&nbsp;na\u010d\u00edtania webu:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/developers.google.com\/speed\/pagespeed\/insights\/\" target=\"_blank\" rel=\"noreferrer noopener\">Google PageSpeed Insights<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.webpagetest.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">WebPagetest.org<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/developers.google.com\/web\/tools\/chrome-devtools\/speed\/get-started\" target=\"_blank\" rel=\"noreferrer noopener\">Chrome DevTools<\/a><\/li>\n<\/ul>\n\n\n\n<p>&nbsp;Generovanie Critical CSS:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/github.com\/addyosmani\/critical\" target=\"_blank\" rel=\"noreferrer noopener\">Addy Osmani Critical<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/github.com\/filamentgroup\/grunt-criticalcss\" target=\"_blank\" rel=\"noreferrer noopener\">Grunt-criticalcss<\/a><\/li>\n<\/ul>\n\n\n\n<p>Pri pou\u017eit\u00ed tejto techniky je potrebn\u00e9 si uvedomi\u0165, \u017ee ide o kompromis. Na jednu stranu eliminujete na\u010d\u00edtavanie cel\u00e9ho CSS stylesheet, na t\u00fa druh\u00fa trochu zv\u00e4\u010d\u0161\u00edte v\u0161etky va\u0161e str\u00e1nky a podstr\u00e1nky, kde t\u00fato techniku pou\u017eijete.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Lazy load<\/h4>\n\n\n\n<p>Aby sme dosiahli \u017eelan\u00e9ho efektu, je potrebn\u00e9 \u010fal\u0161ie CSS s\u00fabory na\u010d\u00edtava\u0165 asynchr\u00f3nne a teda nastavi\u0165 ich do tzv. \u201elazy load\u201c m\u00f3du. Odkedy sa \u0161tandardizoval proces na\u010d\u00edtania CSS v prehliada\u010doch, d\u00e1 sa toto dosiahnu\u0165 aj jednoduch\u00fdm HTML z\u00e1pisom a JavaScript u\u017e nie je potrebn\u00fd:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\n&lt;link rel=\"stylesheet\" href=\"\/path\/to\/my.css\" media=\"print\" onload=\"this.media='all'\"&gt;<\/code><\/pre>\n\n\n\n<p>D\u00f4le\u017eit\u00e9 je nastavenie media atrib\u00fatu na <em>print<\/em> a&nbsp;onload na <em>all<\/em>. D\u00f4vody si vysvetl\u00edme v&nbsp;samostatnom blogu.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>3. Rozdelenie k\u00f3du<\/strong><\/h3>\n\n\n\n<p><a href=\"https:\/\/developers.google.com\/web\/tools\/chrome-devtools\" target=\"_blank\" rel=\"noreferrer noopener\">Chrome DevTools<\/a><strong> <\/strong>pon\u00faka u\u017eito\u010dn\u00fd n\u00e1stroj s&nbsp;n\u00e1zvom <a href=\"https:\/\/developers.google.com\/web\/tools\/chrome-devtools\/coverage\" target=\"_blank\" rel=\"noreferrer noopener\">Coverage<\/a>, ktor\u00fd v\u00e1m kr\u00e1sne pom\u00f4\u017ee identifikova\u0165 nepou\u017eit\u00e9 CSS a&nbsp;JavaScript na va\u0161ej str\u00e1nke. V&nbsp;pr\u00edpade JavaScriptu je \u00faplne be\u017en\u00e9, \u017ee je rozdelen\u00fd na men\u0161ie s\u00fabory, ktor\u00e9 sa na\u010d\u00edtavaj\u00fa, ke\u010f ich je treba. Podobn\u00fdm pr\u00edstupom vieme rozdeli\u0165 a&nbsp;teda zmen\u0161i\u0165 aj CSS s\u00fabory. To je mo\u017en\u00e9 spravi\u0165 tromi r\u00f4znymi sp\u00f4sobmi:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Rozdelenie na z\u00e1klade media queries<\/li>\n\n\n\n<li>Rozdelenie pod\u013ea jednotliv\u00fdch str\u00e1nok v\u00e1\u0161ho webu<\/li>\n\n\n\n<li>Rozdelenie na z\u00e1klade komponentov<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Rozdelenie na z\u00e1klade media queries<\/strong><\/h4>\n\n\n\n<p>T\u00fdmto sp\u00f4sobom sa rozdel\u00ed stylesheet na men\u0161ie s\u00fabory, ktor\u00e9 sa n\u00e1sledne refern\u00fa do v\u00e1\u0161ho HTML. V PostCSS na to existuje plugin. Je v\u0161ak potrebn\u00e9 poveda\u0165, \u017ee pri pou\u017eit\u00ed techniky Critical CSS a&nbsp;lazy load na zr\u00fdchlenie zobrazenia va\u0161ej str\u00e1nky tento sp\u00f4sob rozdelenia CSS s\u00faboru ve\u013emi ned\u00e1va zmysel, respekt\u00edve nie je u\u017e potrebn\u00fd. Prehliada\u010d stiahne v\u0161etky CSS s\u00fabory bez oh\u013eadu na to, ak\u00e9 media query sa pou\u017eije.&nbsp; Atrib\u00fat <em>media<\/em> v&nbsp;tomto pr\u00edpade sl\u00fa\u017ei na prioritizovanie s\u0165ahovania CSS s\u00faboru. Prehliada\u010d stiahne CSS s&nbsp;akt\u00edvnym media query a&nbsp;lazy loadne tie zvy\u0161n\u00e9.<\/p>\n\n\n\n<p>Pr\u00edklad z\u00e1pisu:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;link rel=\"stylesheet\" href=\"index.css\" media=\"all\" \/&gt;\n&lt;link rel=\"stylesheet\" href=\"mobile.css\" media=\"(max-width:44.9375rem)\" \/&gt;\n&lt;link rel=\"stylesheet\" href=\"table.css\" media=\"(min-width: 45rem)\" \/&gt;<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Rozdelenie CSS pod\u013ea jednotliv\u00fdch str\u00e1nok v\u00e1\u0161ho webu<\/strong><\/h4>\n\n\n\n<p>V&nbsp;ide\u00e1lnom svete by v\u00e1\u0161 CSS s\u00fabor obsahoval len CSSko nevyhnutne potrebn\u00e9 na zobrazenie va\u0161ej webky bez ak\u00fdchko\u013evek \u010fal\u0161\u00edch nepou\u017eit\u00fdch \u0161t\u00fdlov. Znie to skvelo, no nie je tak\u00e9 jednoduch\u00e9 n\u00e1js\u0165 n\u00e1stroj, ktor\u00fd by v\u00e1m rozdelil CSS na men\u0161ie \u010dasti na z\u00e1klade obsahu jednotliv\u00fdch str\u00e1nok. Z\u00e1rove\u0148 je potrebn\u00e9 poveda\u0165, \u017ee dosiahnu\u0165 stav, kedy v\u00e1\u0161 CSS s\u00fabor neobsahuje \u017eiadne nepou\u017eit\u00e9 \u0161t\u00fdly, je v&nbsp;podstate nemo\u017en\u00e9. U\u017e len kv\u00f4li responz\u00edvnosti webu bude obsahova\u0165 r\u00f4zne media queries, ktor\u00e9 nejak\u00fd ten bajt zjedia. Jednou z&nbsp;mo\u017enost\u00ed, ako toto dosiahnu\u0165, je pou\u017eitie dostupn\u00e9ho <a href=\"https:\/\/github.com\/Pustelto\/css-split\" target=\"_blank\" rel=\"noreferrer noopener\">CSS Split<\/a>-u pre staticky generovan\u00e9 webstr\u00e1nky od Tom\u00e1\u0161a Pusteln\u00edka.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Rozdelenie na z\u00e1klade komponentov<\/h4>\n\n\n\n<p>Tento sp\u00f4sob rozde\u013eovania CSS n\u00e1s zaviedol a\u017e k reakt\u00edvnym JS frameworkom ako s\u00fa React, Vue alebo Angular, ktor\u00e9 sl\u00fa\u017eia na programovanie SPA a&nbsp;webov\u00fdch aplik\u00e1ci\u00ed.&nbsp; Tieto technol\u00f3gie maj\u00fa viacero spolo\u010dn\u00fdch znakov, no v&nbsp;kontexte tohto blogu n\u00e1s zauj\u00edmaj\u00fa najm\u00e4 reakt\u00edvnos\u0165 a&nbsp; programovanie pomocou komponentov, z&nbsp;ktor\u00fdch je web aplik\u00e1cia vyskladan\u00e1.&nbsp; Napr\u00edklad vo Vue ka\u017ed\u00fd jeden komponent obsahuje vlastn\u00e9 HTML, CSS a&nbsp;JavaScript. Tak sa zabezpe\u010d\u00ed, \u017ee samostatn\u00e9 komponenty neobsahuj\u00fa \u201etonu\u201c nevyu\u017eit\u00fdch \u0161t\u00fdlov.&nbsp; Aj jednotliv\u00e9 komponenty sa daj\u00fa na\u010d\u00edta\u0165 asynchr\u00f3nne lazy load met\u00f3dou, aby sa zabezpe\u010dilo e\u0161te r\u00fdchlej\u0161ie zobrazenie va\u0161ej SPA, respekt\u00edve MPA.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Na optimaliz\u00e1cii webu sa d\u00e1 pracova\u0165 st\u00e1le. Toto tvrdenie pod\u010diarkuje nie raz, ani dvakr\u00e1t, ale minim\u00e1lne trikr\u00e1t v\u00fdsledok \u0161t\u00fadie Milliseconds make millions od spolo\u010dnosti Deloitte zameranej na konverziu n\u00e1v\u0161tev webu na objedn\u00e1vky v&nbsp;z\u00e1vislosti od r\u00fdchlosti na\u010d\u00edtania mobilnej verzie str\u00e1nky.&nbsp; D\u00f4vod? Odhaduje sa, \u017ee predaj prostredn\u00edctvom mCommerce sa do roku 2023 zdvojn\u00e1sob\u00ed a&nbsp;bude tak tvori\u0165 v&nbsp;glob\u00e1le&nbsp;\u00be [&hellip;]<\/p>\n","protected":false},"author":151,"featured_media":21045,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1182,7,8,10],"tags":[2382,175,2421,310,352,392,415,2430,1095,2415,2385,2427,2424,2433,2436,2388,2418],"class_list":["post-20736","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-navody","category-technologie","category-tipy-a-triky","category-vzdelavanie-2","tag-angular","tag-css","tag-css-stylesheet","tag-github","tag-html","tag-javascript","tag-kodenie","tag-load","tag-optimalizacia","tag-optimalizacia-webu","tag-react","tag-script","tag-stylesheet","tag-tomas-pustelnik","tag-vlado-zaic","tag-vue","tag-zrychlenie-webu"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Na r\u00fdchlosti z\u00e1le\u017e\u00ed. Optimalizujte CSS a boostnite v\u00e1\u0161 predaj! - Websupport blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.websupport.sk\/blog\/2020\/10\/na-rychlosti-zalezi\/\" \/>\n<meta property=\"og:locale\" content=\"sk_SK\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Na r\u00fdchlosti z\u00e1le\u017e\u00ed. Optimalizujte CSS a boostnite v\u00e1\u0161 predaj! - Websupport blog\" \/>\n<meta property=\"og:description\" content=\"Na optimaliz\u00e1cii webu sa d\u00e1 pracova\u0165 st\u00e1le. Toto tvrdenie pod\u010diarkuje nie raz, ani dvakr\u00e1t, ale minim\u00e1lne trikr\u00e1t v\u00fdsledok \u0161t\u00fadie Milliseconds make millions od spolo\u010dnosti Deloitte zameranej na konverziu n\u00e1v\u0161tev webu na objedn\u00e1vky v&nbsp;z\u00e1vislosti od r\u00fdchlosti na\u010d\u00edtania mobilnej verzie str\u00e1nky.&nbsp; D\u00f4vod? Odhaduje sa, \u017ee predaj prostredn\u00edctvom mCommerce sa do roku 2023 zdvojn\u00e1sob\u00ed a&nbsp;bude tak tvori\u0165 v&nbsp;glob\u00e1le&nbsp;\u00be [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.websupport.sk\/blog\/2020\/10\/na-rychlosti-zalezi\/\" \/>\n<meta property=\"og:site_name\" content=\"Websupport blog\" \/>\n<meta property=\"article:published_time\" content=\"2020-10-13T09:27:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-03-11T20:07:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.websupport.sk\/blog\/app\/uploads\/sites\/2\/2020\/08\/BP-Na-rychlosti-zalezi.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Vlado Zaic\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Autor\" \/>\n\t<meta name=\"twitter:data1\" content=\"Vlado Zaic\" \/>\n\t<meta name=\"twitter:label2\" content=\"Predpokladan\u00fd \u010das \u010d\u00edtania\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 min\u00fat\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.websupport.sk\\\/blog\\\/2020\\\/10\\\/na-rychlosti-zalezi\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.websupport.sk\\\/blog\\\/2020\\\/10\\\/na-rychlosti-zalezi\\\/\"},\"author\":{\"name\":\"Vlado Zaic\",\"@id\":\"https:\\\/\\\/www.websupport.sk\\\/blog\\\/#\\\/schema\\\/person\\\/beb61a1cbe9b898152cd9a916d90a7b8\"},\"headline\":\"Na r\u00fdchlosti z\u00e1le\u017e\u00ed. Optimalizujte CSS a boostnite v\u00e1\u0161 predaj!\",\"datePublished\":\"2020-10-13T09:27:00+00:00\",\"dateModified\":\"2025-03-11T20:07:49+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.websupport.sk\\\/blog\\\/2020\\\/10\\\/na-rychlosti-zalezi\\\/\"},\"wordCount\":1365,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.websupport.sk\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.websupport.sk\\\/blog\\\/2020\\\/10\\\/na-rychlosti-zalezi\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.websupport.sk\\\/blog\\\/app\\\/uploads\\\/sites\\\/2\\\/2020\\\/08\\\/BP-Na-rychlosti-zalezi.jpg\",\"keywords\":[\"angular\",\"css\",\"css stylesheet\",\"github\",\"HTML\",\"javascript\",\"kodenie\",\"load\",\"optimaliz\u00e1cia\",\"optimaliz\u00e1cia webu\",\"react\",\"script\",\"stylesheet\",\"tom\u00e1\u0161 pusteln\u00edk\",\"vlado zaic\",\"vue\",\"zr\u00fdchlenie webu\"],\"articleSection\":[\"N\u00e1vody\",\"Technol\u00f3gie\",\"Tipy a triky\",\"Vzdel\u00e1vanie\"],\"inLanguage\":\"sk-SK\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.websupport.sk\\\/blog\\\/2020\\\/10\\\/na-rychlosti-zalezi\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.websupport.sk\\\/blog\\\/2020\\\/10\\\/na-rychlosti-zalezi\\\/\",\"url\":\"https:\\\/\\\/www.websupport.sk\\\/blog\\\/2020\\\/10\\\/na-rychlosti-zalezi\\\/\",\"name\":\"Na r\u00fdchlosti z\u00e1le\u017e\u00ed. Optimalizujte CSS a boostnite v\u00e1\u0161 predaj! - Websupport blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.websupport.sk\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.websupport.sk\\\/blog\\\/2020\\\/10\\\/na-rychlosti-zalezi\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.websupport.sk\\\/blog\\\/2020\\\/10\\\/na-rychlosti-zalezi\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.websupport.sk\\\/blog\\\/app\\\/uploads\\\/sites\\\/2\\\/2020\\\/08\\\/BP-Na-rychlosti-zalezi.jpg\",\"datePublished\":\"2020-10-13T09:27:00+00:00\",\"dateModified\":\"2025-03-11T20:07:49+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.websupport.sk\\\/blog\\\/2020\\\/10\\\/na-rychlosti-zalezi\\\/#breadcrumb\"},\"inLanguage\":\"sk-SK\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.websupport.sk\\\/blog\\\/2020\\\/10\\\/na-rychlosti-zalezi\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"sk-SK\",\"@id\":\"https:\\\/\\\/www.websupport.sk\\\/blog\\\/2020\\\/10\\\/na-rychlosti-zalezi\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.websupport.sk\\\/blog\\\/app\\\/uploads\\\/sites\\\/2\\\/2020\\\/08\\\/BP-Na-rychlosti-zalezi.jpg\",\"contentUrl\":\"https:\\\/\\\/www.websupport.sk\\\/blog\\\/app\\\/uploads\\\/sites\\\/2\\\/2020\\\/08\\\/BP-Na-rychlosti-zalezi.jpg\",\"width\":1920,\"height\":1080},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.websupport.sk\\\/blog\\\/2020\\\/10\\\/na-rychlosti-zalezi\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.websupport.sk\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Na r\u00fdchlosti z\u00e1le\u017e\u00ed. Optimalizujte CSS a boostnite v\u00e1\u0161 predaj!\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.websupport.sk\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.websupport.sk\\\/blog\\\/\",\"name\":\"Websupport blog\",\"description\":\"Websupport blog\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.websupport.sk\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.websupport.sk\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"sk-SK\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.websupport.sk\\\/blog\\\/#organization\",\"name\":\"Websupport\",\"url\":\"https:\\\/\\\/www.websupport.sk\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"sk-SK\",\"@id\":\"https:\\\/\\\/www.websupport.sk\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.websupport.sk\\\/blog\\\/app\\\/uploads\\\/sites\\\/2\\\/2021\\\/08\\\/websupport-logo.svg\",\"contentUrl\":\"https:\\\/\\\/www.websupport.sk\\\/blog\\\/app\\\/uploads\\\/sites\\\/2\\\/2021\\\/08\\\/websupport-logo.svg\",\"width\":153,\"height\":48,\"caption\":\"Websupport\"},\"image\":{\"@id\":\"https:\\\/\\\/www.websupport.sk\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.websupport.sk\\\/blog\\\/#\\\/schema\\\/person\\\/beb61a1cbe9b898152cd9a916d90a7b8\",\"name\":\"Vlado Zaic\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"sk-SK\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/2c362e6f631f835bf8fe92f9c61ab602f49d22f762f9c45229b1dc73b0316aee?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/2c362e6f631f835bf8fe92f9c61ab602f49d22f762f9c45229b1dc73b0316aee?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/2c362e6f631f835bf8fe92f9c61ab602f49d22f762f9c45229b1dc73b0316aee?s=96&d=mm&r=g\",\"caption\":\"Vlado Zaic\"},\"description\":\"Konten\u0165\u00e1k, ktor\u00fd a\u017e po rokoch zistil, \u017ee m\u00e1 celkom bl\u00edzko k marketingu. P\u00e4\u0165 rokov zodpovedn\u00fd za obsahov\u00fa \u010das\u0165 najv\u00e4\u010d\u0161ieho kari\u00e9rneho podujatia na Slovensku a v \u010cech\u00e1ch. Cit\u00e1t Wayna Gretzkeho \\\"You miss 100% of the shots you don't take\\\" bol pre\u0148ho life-changing...\",\"url\":\"https:\\\/\\\/www.websupport.sk\\\/blog\\\/author\\\/vlado\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Na r\u00fdchlosti z\u00e1le\u017e\u00ed. Optimalizujte CSS a boostnite v\u00e1\u0161 predaj! - Websupport blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.websupport.sk\/blog\/2020\/10\/na-rychlosti-zalezi\/","og_locale":"sk_SK","og_type":"article","og_title":"Na r\u00fdchlosti z\u00e1le\u017e\u00ed. Optimalizujte CSS a boostnite v\u00e1\u0161 predaj! - Websupport blog","og_description":"Na optimaliz\u00e1cii webu sa d\u00e1 pracova\u0165 st\u00e1le. Toto tvrdenie pod\u010diarkuje nie raz, ani dvakr\u00e1t, ale minim\u00e1lne trikr\u00e1t v\u00fdsledok \u0161t\u00fadie Milliseconds make millions od spolo\u010dnosti Deloitte zameranej na konverziu n\u00e1v\u0161tev webu na objedn\u00e1vky v&nbsp;z\u00e1vislosti od r\u00fdchlosti na\u010d\u00edtania mobilnej verzie str\u00e1nky.&nbsp; D\u00f4vod? Odhaduje sa, \u017ee predaj prostredn\u00edctvom mCommerce sa do roku 2023 zdvojn\u00e1sob\u00ed a&nbsp;bude tak tvori\u0165 v&nbsp;glob\u00e1le&nbsp;\u00be [&hellip;]","og_url":"https:\/\/www.websupport.sk\/blog\/2020\/10\/na-rychlosti-zalezi\/","og_site_name":"Websupport blog","article_published_time":"2020-10-13T09:27:00+00:00","article_modified_time":"2025-03-11T20:07:49+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/www.websupport.sk\/blog\/app\/uploads\/sites\/2\/2020\/08\/BP-Na-rychlosti-zalezi.jpg","type":"image\/jpeg"}],"author":"Vlado Zaic","twitter_card":"summary_large_image","twitter_misc":{"Autor":"Vlado Zaic","Predpokladan\u00fd \u010das \u010d\u00edtania":"6 min\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.websupport.sk\/blog\/2020\/10\/na-rychlosti-zalezi\/#article","isPartOf":{"@id":"https:\/\/www.websupport.sk\/blog\/2020\/10\/na-rychlosti-zalezi\/"},"author":{"name":"Vlado Zaic","@id":"https:\/\/www.websupport.sk\/blog\/#\/schema\/person\/beb61a1cbe9b898152cd9a916d90a7b8"},"headline":"Na r\u00fdchlosti z\u00e1le\u017e\u00ed. Optimalizujte CSS a boostnite v\u00e1\u0161 predaj!","datePublished":"2020-10-13T09:27:00+00:00","dateModified":"2025-03-11T20:07:49+00:00","mainEntityOfPage":{"@id":"https:\/\/www.websupport.sk\/blog\/2020\/10\/na-rychlosti-zalezi\/"},"wordCount":1365,"commentCount":0,"publisher":{"@id":"https:\/\/www.websupport.sk\/blog\/#organization"},"image":{"@id":"https:\/\/www.websupport.sk\/blog\/2020\/10\/na-rychlosti-zalezi\/#primaryimage"},"thumbnailUrl":"https:\/\/www.websupport.sk\/blog\/app\/uploads\/sites\/2\/2020\/08\/BP-Na-rychlosti-zalezi.jpg","keywords":["angular","css","css stylesheet","github","HTML","javascript","kodenie","load","optimaliz\u00e1cia","optimaliz\u00e1cia webu","react","script","stylesheet","tom\u00e1\u0161 pusteln\u00edk","vlado zaic","vue","zr\u00fdchlenie webu"],"articleSection":["N\u00e1vody","Technol\u00f3gie","Tipy a triky","Vzdel\u00e1vanie"],"inLanguage":"sk-SK","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.websupport.sk\/blog\/2020\/10\/na-rychlosti-zalezi\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.websupport.sk\/blog\/2020\/10\/na-rychlosti-zalezi\/","url":"https:\/\/www.websupport.sk\/blog\/2020\/10\/na-rychlosti-zalezi\/","name":"Na r\u00fdchlosti z\u00e1le\u017e\u00ed. Optimalizujte CSS a boostnite v\u00e1\u0161 predaj! - Websupport blog","isPartOf":{"@id":"https:\/\/www.websupport.sk\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.websupport.sk\/blog\/2020\/10\/na-rychlosti-zalezi\/#primaryimage"},"image":{"@id":"https:\/\/www.websupport.sk\/blog\/2020\/10\/na-rychlosti-zalezi\/#primaryimage"},"thumbnailUrl":"https:\/\/www.websupport.sk\/blog\/app\/uploads\/sites\/2\/2020\/08\/BP-Na-rychlosti-zalezi.jpg","datePublished":"2020-10-13T09:27:00+00:00","dateModified":"2025-03-11T20:07:49+00:00","breadcrumb":{"@id":"https:\/\/www.websupport.sk\/blog\/2020\/10\/na-rychlosti-zalezi\/#breadcrumb"},"inLanguage":"sk-SK","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.websupport.sk\/blog\/2020\/10\/na-rychlosti-zalezi\/"]}]},{"@type":"ImageObject","inLanguage":"sk-SK","@id":"https:\/\/www.websupport.sk\/blog\/2020\/10\/na-rychlosti-zalezi\/#primaryimage","url":"https:\/\/www.websupport.sk\/blog\/app\/uploads\/sites\/2\/2020\/08\/BP-Na-rychlosti-zalezi.jpg","contentUrl":"https:\/\/www.websupport.sk\/blog\/app\/uploads\/sites\/2\/2020\/08\/BP-Na-rychlosti-zalezi.jpg","width":1920,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/www.websupport.sk\/blog\/2020\/10\/na-rychlosti-zalezi\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.websupport.sk\/blog\/"},{"@type":"ListItem","position":2,"name":"Na r\u00fdchlosti z\u00e1le\u017e\u00ed. Optimalizujte CSS a boostnite v\u00e1\u0161 predaj!"}]},{"@type":"WebSite","@id":"https:\/\/www.websupport.sk\/blog\/#website","url":"https:\/\/www.websupport.sk\/blog\/","name":"Websupport blog","description":"Websupport blog","publisher":{"@id":"https:\/\/www.websupport.sk\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.websupport.sk\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"sk-SK"},{"@type":"Organization","@id":"https:\/\/www.websupport.sk\/blog\/#organization","name":"Websupport","url":"https:\/\/www.websupport.sk\/blog\/","logo":{"@type":"ImageObject","inLanguage":"sk-SK","@id":"https:\/\/www.websupport.sk\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.websupport.sk\/blog\/app\/uploads\/sites\/2\/2021\/08\/websupport-logo.svg","contentUrl":"https:\/\/www.websupport.sk\/blog\/app\/uploads\/sites\/2\/2021\/08\/websupport-logo.svg","width":153,"height":48,"caption":"Websupport"},"image":{"@id":"https:\/\/www.websupport.sk\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.websupport.sk\/blog\/#\/schema\/person\/beb61a1cbe9b898152cd9a916d90a7b8","name":"Vlado Zaic","image":{"@type":"ImageObject","inLanguage":"sk-SK","@id":"https:\/\/secure.gravatar.com\/avatar\/2c362e6f631f835bf8fe92f9c61ab602f49d22f762f9c45229b1dc73b0316aee?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/2c362e6f631f835bf8fe92f9c61ab602f49d22f762f9c45229b1dc73b0316aee?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2c362e6f631f835bf8fe92f9c61ab602f49d22f762f9c45229b1dc73b0316aee?s=96&d=mm&r=g","caption":"Vlado Zaic"},"description":"Konten\u0165\u00e1k, ktor\u00fd a\u017e po rokoch zistil, \u017ee m\u00e1 celkom bl\u00edzko k marketingu. P\u00e4\u0165 rokov zodpovedn\u00fd za obsahov\u00fa \u010das\u0165 najv\u00e4\u010d\u0161ieho kari\u00e9rneho podujatia na Slovensku a v \u010cech\u00e1ch. Cit\u00e1t Wayna Gretzkeho \"You miss 100% of the shots you don't take\" bol pre\u0148ho life-changing...","url":"https:\/\/www.websupport.sk\/blog\/author\/vlado\/"}]}},"_links":{"self":[{"href":"https:\/\/www.websupport.sk\/blog\/wp-json\/wp\/v2\/posts\/20736","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.websupport.sk\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.websupport.sk\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.websupport.sk\/blog\/wp-json\/wp\/v2\/users\/151"}],"replies":[{"embeddable":true,"href":"https:\/\/www.websupport.sk\/blog\/wp-json\/wp\/v2\/comments?post=20736"}],"version-history":[{"count":5,"href":"https:\/\/www.websupport.sk\/blog\/wp-json\/wp\/v2\/posts\/20736\/revisions"}],"predecessor-version":[{"id":30656,"href":"https:\/\/www.websupport.sk\/blog\/wp-json\/wp\/v2\/posts\/20736\/revisions\/30656"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.websupport.sk\/blog\/wp-json\/wp\/v2\/media\/21045"}],"wp:attachment":[{"href":"https:\/\/www.websupport.sk\/blog\/wp-json\/wp\/v2\/media?parent=20736"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.websupport.sk\/blog\/wp-json\/wp\/v2\/categories?post=20736"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.websupport.sk\/blog\/wp-json\/wp\/v2\/tags?post=20736"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}