Nau\u010dte se, jak nejl\u00e9pe p\u0159ipravit a doru\u010dit CSS soubory na web. Vyzrajte na zbyte\u010dn\u00e9 JavaScripty, kter\u00e9 va\u0161e str\u00e1nky akor\u00e1t zpomaluj\u00ed.<\/p>\n
<\/p>\n
V\u00edtejte u posledn\u00edho d\u00edlu seri\u00e1lu o zrychlov\u00e1n\u00ed webu na frontendu. U\u017e jsme si probrali:<\/p>\n
- \n
- obecn\u00e9 m\u011b\u0159en\u00ed rychlosti<\/a><\/li>\n
- pr\u00e1ci s obr\u00e1zky a jejich na\u010d\u00edt\u00e1n\u00ed<\/a><\/li>\n
- pr\u00e1ci s fonty<\/a><\/li>\n<\/ul>\n
Te\u010f n\u00e1s \u010dek\u00e1 asynchronn\u00ed a kritick\u00e9 (critical) CSS, cookies a lehce se pod\u00edv\u00e1me i na JavaScripty. V igloonetu jsme ned\u00e1vno optimalizovali e-shop Doktor Kladivo<\/a>, na kter\u00fd se budu ob\u010das odvol\u00e1vat s konkr\u00e9tn\u00edmi p\u0159\u00edklady a v\u00fdsledky. Pus\u0165te se do \u010dten\u00ed.<\/p>\n
CSS Styly<\/h2>\n
Styly (CSS soubory<\/strong>) pat\u0159\u00ed mezi prvn\u00ed soubory, kter\u00e9 na webu stahujeme. Nen\u00ed divu, bez nich bysme vid\u011bli jen shluky text\u016f na b\u00edl\u00e9m pozad\u00ed. Proto chceme, aby se stahovaly co nejrychleji<\/strong> a m\u011bly co nejmen\u0161\u00ed velikost.<\/p>\n
Datovou velikost CSS jednodu\u0161e <\/strong>zmen\u0161\u00edte pomoc\u00ed procesu tzv. minifikace<\/strong>, b\u011bhem kter\u00e9 se odstran\u00ed v\u0161echny nepot\u0159ebn\u00e9 mezery, zalomen\u00ed a form\u00e1tov\u00e1n\u00ed. Z fin\u00e1ln\u00edho CSS vznikne jeden dlouh\u00fd \u0159\u00e1dek, kter\u00fd je sice pro \u010dlov\u011bka ne\u010diteln\u00fd, ale prohl\u00ed\u017ee\u010di to nevad\u00ed.<\/p>\n
Minifikace v praxi<\/p><\/div>\n
Na e-shopu Doktor Kladivo m\u00e1me jednotliv\u00e9 komponenty napsan\u00e9 zvl\u00e1\u0161\u0165 v SCSS <\/a>(preprocesor pro CSS) souborech, kter\u00e9 spojujeme GULP skriptem. Ten provede nezbytnou magii pro dosa\u017een\u00ed nejlep\u0161\u00ed kompatibility mezi prohl\u00ed\u017ee\u010di a v\u0161e spoj\u00ed do jednoho fin\u00e1ln\u00edho minifikovan\u00e9ho CSS.<\/p>\n
CSS m\u00e1 jeden probl\u00e9m \u2013 prohl\u00ed\u017ee\u010d \u010dek\u00e1, a\u017e se kompletn\u011b st\u00e1hne<\/strong>, a teprve pak ho za\u010dne zpracov\u00e1vat. Do t\u00e9 doby vid\u00edme jen b\u00edlou obrazovku (to se t\u00fdk\u00e1 hlavn\u011b pomalej\u0161\u00edch p\u0159ipojen\u00ed) nebo postupn\u00e9 na\u010d\u00edt\u00e1n\u00ed webu. Vy\u0159e\u0161\u00edme to pomoc\u00ed critical CSS a asynchronn\u00edho nastaven\u00edm CSS styl\u016f.<\/p>\n
Critical CSS<\/strong><\/h3>\n
P\u0159i prvn\u00edm na\u010dten\u00ed str\u00e1nky u\u017eivatel pot\u0159ebuje asi 1 % va\u0161ich styl\u016f<\/strong> \u2013 sta\u010d\u00ed mu zobrazen\u00ed hlavi\u010dky, menu a dal\u0161\u00edch prvk\u016f, kter\u00e9 m\u00e1 hned vid\u011bt. Tuhle d\u016fle\u017eitou (kritickou) \u010d\u00e1st proto vy\u010dle\u0148te a natvrdo vlo\u017ete do hlavi\u010dky HTML<\/strong>. Zbytek a\u0165 se na\u010d\u00edt\u00e1 u\u017e z pln\u00e9ho CSS. \u00davodn\u00ed str\u00e1nka se t\u00edm zobraz\u00ed mnohem rychleji, proto\u017ee nemus\u00ed \u010dekat na sta\u017een\u00ed v\u0161ech styl\u016f.<\/p>\n
Vlevo vid\u00edte str\u00e1nku je\u0161t\u011b bez stylu a s critical CSS, vpravo je pln\u011b na\u010dten\u00e1. \u010cerven\u00e1 \u010d\u00e1ra ozna\u010duje konec okna prohl\u00ed\u017ee\u010de.<\/p><\/div>\n
Jak critical CSS z\u00edskat? V\u00edm o dvou mo\u017enostech. Pro Gulp je to Critical<\/a> a pro Grunt a je to Grunt-criticalcss<\/a>. Je jedno, kter\u00fd zp\u016fsob pou\u017eijete. Pot\u0159ebujete dostat inline CSS, kter\u00fd pot\u00e9 vlo\u017e\u00edte do hlavi\u010dky va\u0161eho HTML.<\/p>\n
<style>\n\/* kritick\u00e9 inline css styly *\/\n<\/style>\n\n<script>\n\/* va\u0161e asynchronn\u00ed styly.css, pov\u00edme si d\u00e1le *\/\n<\/script>\n<\/pre>\n
Critical CSS v\u00e1m pom\u016f\u017ee p\u0159i prvn\u00ed n\u00e1v\u0161t\u011bv\u011b webu, ale pak str\u00e1nky jen zpomaluje<\/strong>, proto\u017ee bude zobrazovat n\u011bco, co u\u017e m\u00e1te sta\u017een\u00e9. Kolegov\u00e9 na backendu mi proto nachystali funkci
$loadCritical<\/code>, kter\u00e1 u\u017eivateli vytvo\u0159\u00ed cookies s hodnotou n\u00e1zvu sta\u017een\u00e9ho CSS souboru i s hashem<\/strong>. Pokud na webu neprob\u011bhne \u017e\u00e1dn\u00e1 zm\u011bna ve stylech, a u\u017eivatel ho nav\u0161t\u00edv\u00ed podruh\u00e9, n\u00e1zev souboru na serveru i v cookies bude m\u00edt stejn\u00fd. Critical CSS se d\u00edky tomu nezobraz\u00ed a ani se nest\u00e1hne nov\u00e9 CSS (viz d\u00e1le). Pokud jsme n\u011bjakou zm\u011bnu v CSS ud\u011blali, critical CSS se znovu zobraz\u00ed, a tak\u00e9 se st\u00e1hnou nov\u00e9 zm\u011bn\u011bn\u00e9 CSS soubory.<\/p>\nNev\u00fdhoda critical CSS je v tom, \u017ee pokud ho nem\u00e1te pln\u011b automatizovan\u00e9, anebo d\u011bl\u00e1te \u010dasto zm\u011bny v kritick\u00e9 oblasti, je hodn\u011b pracn\u00e9 a slo\u017eit\u00e9 na \u00fadr\u017ebu. Pak z\u00e1le\u017e\u00ed, jestli se to vyplat\u00ed.<\/p>\n
<style type=\"text\/css\" n:syntax=off n:if=$loadCritical>\nhtml{-webkit-font-smoothing:antialiased;background-color:#fff;color:#343943;height:100%;line-height:1.15} ... pokra\u010dov\u00e1n\u00ed stylu\n<\/style>\n<\/pre>\n$loadCritical n\u00e1m zajist\u00ed, \u017ee se critical CSS zobraz\u00ed jen p\u0159i prvn\u00ed n\u00e1v\u0161t\u011bv\u011b webu.<\/i><\/p>\n
Asynchronn\u00ed na\u010d\u00edt\u00e1n\u00ed CSS<\/strong><\/h3>\n
Pro\u010d \u0159e\u0161it asynchronn\u00ed na\u010d\u00edt\u00e1n\u00ed? Ne\u017e se CSS st\u00e1hne, u\u017eivatel vid\u00ed pouze b\u00edlou obrazovku. To samoz\u0159ejm\u011b nechceme.<\/strong><\/p>\n
Na asynchronn\u00ed CSS pou\u017e\u00edv\u00e1me JS knihovnu od filamentgroup s n\u00e1zvem loadCSS<\/a>. Na webu m\u00e1me dva CSS soubory \u2013 jeden pouze na ikonky (moc \u010dasto je nem\u011bn\u00edme, proto soubor zvl\u00e1\u0161\u0165), druh\u00fd na v\u0161e ostatn\u00ed. Kv\u016fli paraleln\u00edmu stahov\u00e1n\u00ed pomoc\u00ed HTTP\/2 by bylo lep\u0161\u00ed v\u0161e rozd\u011blit na je\u0161t\u011b v\u00edce soubor\u016f podle webov\u00fdch komponent. Doporu\u010duju postupovat podle n\u00e1vodu<\/a>, n\u00e1\u0161 k\u00f3d m\u00e1 ale m\u00edrn\u00e9 zlep\u0161ov\u00e1ky o cookies (viz n\u00ed\u017ee).<\/p>\n
Stejn\u011b jako u critical CSS plat\u00ed, \u017ee pokud p\u0159ijdete na web a CSS soubory u\u017e m\u00e1te sta\u017een\u00e9, nemus\u00edte v\u016fbec spou\u0161t\u011bt posledn\u00ed JavaScript (podm\u00ednka
$loadCritical<\/code> ho vy\u0159ad\u00ed) a vykon\u00e1vat cel\u00fd proces uvnit\u0159. Pokud CSS je\u0161t\u011b nem\u00e1te, posledn\u00ed JavaScript se spust\u00ed, a pom\u016f\u017ee prohl\u00ed\u017ee\u010d\u016fm, kter\u00e9 neum\u00ed funkci preload<\/strong> (preload p\u0159edp\u0159iprav\u00ed data, ani\u017e by blokoval vykreslen\u00ed zbytku webu, podrobn\u011bji jsem o n\u011bm psal v minul\u00e9m d\u00edlu<\/a>).<\/p>\nPoj\u010fme si rozebrat, co d\u011bl\u00e1 upraven\u00fd link oproti klasick\u00e9mu z\u00e1pisu:<\/p>\n
- \n
rel<\/code> \u2013 podle toho, zda u\u017e m\u00e1te sta\u017een\u00e9 CSS, se d\u00e1 preload nebo stylesheet;<\/li>\nhref<\/code> \u2013 odkaz na CSS soubor i s hashem;<\/li>\nas<\/code> \u2013 nastavte, co se bude stahovat (jinak se v\u0161ude p\u0159i\u0159ad\u00ed minim\u00e1ln\u00ed priorita, a to nechcete);<\/li>\nonload<\/code> \u2013 po sta\u017een\u00ed nahrad\u00ed preload vrel<\/code> za stylesheet, a t\u00edm zobraz\u00ed CSS. M\u00e1me zde je\u0161t\u011b ochrannou pom\u016fckuthis.onload=null<\/code>, <\/i>proto\u017ee n\u011bkter\u00e9 prohl\u00ed\u017ee\u010de by po dokon\u010den\u00ed na\u010d\u00edt\u00e1n\u00ed mohly za\u010d\u00edt znovu na\u010d\u00edtat.<\/li>\n<\/ul>\n<style type=\"text\/css\" n:syntax=off n:if=$loadCritical>\nCritical CSS\n<\/style>\n\n\/* asynchronn\u00ed css styly *\/\n<link rel=\"{$loadCritical ? preload : stylesheet}\" href=\"{versionedFile '\/css\/styles.css'}\" as=\"style\" onload=\"this.onload=null;this.rel='stylesheet'\">\n<noscript><link rel=\"stylesheet\" href=\"{versionedFile '\/css\/styles.css'}\"><\/noscript>\n\n<link rel=\"{$loadCritical ? preload : stylesheet}\" href=\"{versionedFile '\/css\/icons.css'}\" as=\"style\" onload=\"this.onload=null;this.rel='stylesheet'\">\n<noscript><link rel=\"stylesheet\" href=\"{versionedFile '\/css\/icons.css'}\"><\/noscript>\n\n\/* javascript na asynchronn\u00ed styly *\/\n<script n:syntax=\"double\" n:if=$loadCritical>\n!function(t) pokracovani scriptu d\u00e1le\n<\/script>\n<\/pre>\nSe spr\u00e1vn\u00fdm k\u00f3dem:<\/p>\n
- \n
- eliminujete b\u00edlou obrazovku p\u0159i na\u010d\u00edt\u00e1n\u00ed CSS soubor\u016f;<\/li>\n
- eliminujete blokov\u00e1n\u00ed ostatn\u00edch prvk\u016f d\u00e1le na str\u00e1nce t\u00edm, \u017ee se CSS soubory stahuj\u00ed na pozad\u00ed;<\/li>\n
- pomoci cookies eliminujete op\u011btovn\u00e9 na\u010d\u00edt\u00e1n\u00ed critical CSS a JavaScriptu na asynchronn\u00ed CSS, t\u00edm trochu urychl\u00edte na\u010d\u00edt\u00e1n\u00ed.<\/li>\n<\/ul>\n
M\u016f\u017ee se st\u00e1t, \u017ee v\u00e1m bude Google v PageSpeed Insights<\/a> ps\u00e1t, \u017ee CSS soubory blokuj\u00ed na\u010d\u00edt\u00e1ni zbytku webu. Nen\u00ed to pravda, u\u017eivatel m\u00e1 soubory u\u017e v cache. M\u00e1m dojem, \u017ee tuhle chybu u\u017e opravili, ale rad\u011bji to berte v potaz.<\/p>\n
JavaScripty<\/h2>\n
JavaScripty jsou nejv\u011bt\u0161\u00ed brzdou webu<\/strong>, zvl\u00e1\u0161\u0165 ty od t\u0159et\u00edch stran. \u010c\u00edm m\u00e9n\u011b se jich p\u0159i startu spust\u00ed, t\u00edm l\u00e9pe.<\/p>\n
Aktu\u00e1ln\u011b m\u00e1me na webu Doktor Kladivo v pl\u00e1nu p\u0159epsat JavaScript soubory do modern\u011bj\u0161\u00edho a rychlej\u0161\u00edho z\u00e1pisu, nicm\u00e9n\u011b jsme se z aktu\u00e1ln\u011b pou\u017eit\u00fdch sna\u017eili vy\u017ed\u00edmat maximum. Jak jsme zhruba postupovali? Pro\u0161li jsme si ka\u017ed\u00fd JS soubor a posoudili, jestli ho je\u0161t\u011b pou\u017e\u00edv\u00e1me<\/strong>. Bylo tam t\u0159eba p\u00e1r zastaral\u00fdch knihoven na sjednocen\u00ed fungov\u00e1n\u00ed n\u011bkter\u00fdch vlastnost\u00ed prohl\u00ed\u017ee\u010d\u016f nebo na \u0159e\u0161en\u00ed nov\u00fdch vlastnost\u00ed CSS, kter\u00e9 tehdy prohl\u00ed\u017ee\u010de neum\u011bly \u2013 vyhodili jsme je. D\u00e1le jsme v\u0161echny knihovny aktualizovali na nov\u00e9 verze, n\u011bkter\u00e9 jsou l\u00e9pe napsan\u00e9, men\u0161\u00ed, a jsou v nich opraven\u00e9 chyby. Z 640 kB <\/strong>jsme se nap\u0159\u00edklad dostali na 504 kB, <\/strong>co\u017e je \u00faspora 22 %<\/strong>.<\/p>\n
Tak\u00e9 jsme nastavili, aby se n\u011bkter\u00e9 JS generovaly jen na ur\u010dit\u00fdch str\u00e1nk\u00e1ch<\/strong>. JS pro galerii produkt\u016f je nap\u0159\u00edklad zbyte\u010dn\u00e9 vkl\u00e1dat do str\u00e1nky glob\u00e1ln\u011b, nov\u011b ho p\u0159id\u00e1v\u00e1me jen do detailu produktu p\u0159es PHP presenter<\/cite>. Z PHP kompil\u00e1toru jsme je\u0161t\u011b vy\u0159adili v\u0161echny JS, kter\u00e9 se pou\u017e\u00edvaj\u00ed na cel\u00e9m webu. Do str\u00e1nky je nov\u011b vkl\u00e1d\u00e1me jednotliv\u011b, abychom vyu\u017eili paraleln\u00ed stahov\u00e1n\u00ed a zpracov\u00e1n\u00ed v HTTP\/2.<\/p>\n
Z
<head><\/code> tagu jsme tak\u00e9 odstranili v\u0161echny JS nepot\u0159ebn\u00e9 pro start webu. Z\u016fstalo tam jen to nejnutn\u011bj\u0161\u00ed: asynchronn\u00ed na\u010d\u00edt\u00e1n\u00ed CSS a Google Tag Manager. Ostatn\u00ed \u0161lo na konec<body><\/code> tagu.<\/p>\nCo m\u00e1me na konci
<body><\/code> tagu<\/strong>? Postupn\u011b v tomhle po\u0159ad\u00ed:<\/p>\n- \n
- Lazyload JavaScript na postupn\u00e9 na\u010d\u00edt\u00e1n\u00ed obr\u00e1zk\u016f (podrobn\u011bji jsem o n\u011bm psal v d\u00edlu o obr\u00e1zc\u00edch<\/a>)<\/li>\n
- Jednotliv\u00e9 JavaScripty, kter\u00e9 se pou\u017e\u00edvaj\u00ed glob\u00e1ln\u011b<\/li>\n
- Vygenerovan\u00e9 a spojen\u00e9 JavaScripty pro konkr\u00e9tn\u00ed str\u00e1nky (z jednotliv\u00fdch presenter\u016f<\/cite> v PHP backendu). Nap\u0159\u00edklad JS pro galerii produkt\u016f.<\/li>\n
- Dal\u0161\u00ed lazyload JavaScript pro specifick\u00e9 bloky na webu (slidery v\u00fdrobc\u016f, prvky doporu\u010den\u00fdch produkt\u016f), kter\u00e9 jsou n\u00ed\u017ee na webu, a nepot\u0159ebuj\u00ed okam\u017eit\u00e9 na\u010dten\u00ed.<\/li>\n
- Facebook skript pro marketing.<\/li>\n
- Webov\u00e9 notifikace, kter\u00e9 spou\u0161t\u00edme s parametrem
defer<\/code>. Ten se spust\u00ed a\u017e po v\u0161ech skriptech, ale zachov\u00e1v\u00e1 po\u0159ad\u00ed spou\u0161t\u011bn\u00ed.<\/li>\n- Cookie li\u0161ta.<\/li>\n
- Defer skript na chatovac\u00ed okno, kter\u00e9 nen\u00ed pot\u0159eba v prvn\u00edch sekund\u00e1ch.<\/li>\n<\/ol>\n
M\u00edsto jednoho velk\u00e9ho souboru, kter\u00fd by blokoval str\u00e1nku, rad\u011bji postupn\u011b zpracov\u00e1v\u00e1me v\u00edce men\u0161\u00edch. Do budoucna pl\u00e1nujeme p\u0159ev\u00e9st JavaScripty na n\u011bjak\u00fd JavaScript kompil\u00e1tor se spr\u00e1vou bal\u00ed\u010dku.<\/p>\n
Postupem \u010dasu chceme vy\u0159adit kompletn\u011b cel\u00e9 jQuery a p\u0159epsat JS soubory do modern\u011bj\u0161\u00edho z\u00e1pisu, aby se l\u00e9pe spravovaly. To aktu\u00e1ln\u011b nebylo mo\u017en\u00e9, proto\u017ee je nap\u0159\u00edklad soubor X z\u00e1visl\u00fd na jin\u00e9m souboru, a ve v\u00fdsledku by to znamenalo p\u0159eps\u00e1n\u00ed velk\u00e9 \u010d\u00e1sti JS. Nen\u00ed to z\u00e1le\u017eitost na 5 minut, chce to hodn\u011b testovat, zkou\u0161et atp. Jedna chyba v\u00e1m m\u016f\u017ee shodit cel\u00fd JS, a t\u00edm i n\u00e1vazn\u00e9 v\u011bci (filtry, vkl\u00e1d\u00e1n\u00ed do ko\u0161\u00edku atd).<\/p>\n
A to je prozat\u00edm konec. Cel\u00e9 odv\u011btv\u00ed kolem rychlosti webu se teprve formuje a na n\u011bjak\u00e9 standardy se teprve \u010dek\u00e1. Uvid\u00edme, jak to bude za p\u00e1r let - mo\u017en\u00e1 se t\u011bmhle rad\u00e1m budeme sm\u00e1t a v\u0161e bude jinak :). D\u011bkuji za p\u0159e\u010dten\u00ed cel\u00e9ho \u010dty\u0159d\u00edln\u00e9ho seri\u00e1lu, pokud m\u00e1te jak\u00e9koliv dotazy nebo zaj\u00edmav\u00e9 poznatky, pod\u011blte se o n\u011b v koment\u00e1\u0159\u00edch. T\u0159eba v\u011bci \u0159e\u0161\u00edte \u00fapln\u011b jin\u00fdm zp\u016fsobem, moc r\u00e1d se o n\u011bm dozv\u00edm. Koho by zaj\u00edmaly p\u0159esn\u00e9 \u010dasy zrychlen\u00ed e-shopu Doktor Kladivo, naleznete je v prvn\u00edm d\u00edle<\/a>.<\/p>\n\n\t\t
- Lazyload JavaScript na postupn\u00e9 na\u010d\u00edt\u00e1n\u00ed obr\u00e1zk\u016f (podrobn\u011bji jsem o n\u011bm psal v d\u00edlu o obr\u00e1zc\u00edch<\/a>)<\/li>\n
- pr\u00e1ci s obr\u00e1zky a jejich na\u010d\u00edt\u00e1n\u00ed<\/a><\/li>\n
![](\"https:\/\/igloonet.cz\/blog\/wp-content\/uploads\/2020\/02\/minifikace-150x150.png)
![](\"https:\/\/igloonet.cz\/blog\/wp-content\/uploads\/2020\/02\/critical-css-150x150.jpg)