- \n
- Jak rychlost na\u010d\u00edt\u00e1n\u00ed webu ovliv\u0148uje jeho n\u00e1v\u0161t\u011bvnost?<\/a><\/li>\n\n\n\n
- \u00davod do Google PageSpeed Insight<\/a>\n
- \n
- Objevte, co za\u017e\u00edvaj\u00ed skute\u010dn\u00ed u\u017eivatel\u00e9<\/a>\n
- \n
- Core Web Vitals<\/a>\n
- \n
- FID<\/a> – First Input Delay – zpo\u017ed\u011bn\u00ed prvn\u00edho vstupu<\/li>\n\n\n\n
- INP<\/a> – Interaction to Next Paint – metrika v b\u0159eznu 2024 nahrad\u00ed FID<\/li>\n\n\n\n
- TTFB<\/a> – Time to First Byte – \u010das do na\u010dten\u00ed prvn\u00edho bajtu<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n\n\n\n
- Metriky<\/a> – Zobraz\u00ed se n\u00e1m v\u00fdkon, p\u0159\u00edstupnost, doporu\u010den\u00e9 postupy a SEO webu a d\u00e1le:\n
- \n
- FCP<\/a> – First Contentful Paint – prvn\u00ed vykreslen\u00ed obsahu<\/li>\n\n\n\n
- LCP<\/a> – Largest Contentful Paint – nejv\u011bt\u0161\u00ed vykreslen\u00ed obsahu<\/li>\n\n\n\n
- TBT<\/a> – Total Blocking Time – celkov\u00fd \u010das blokace<\/li>\n\n\n\n
- CLS<\/a> – Cumulative Layout Shift – kumulativn\u00ed posun rozlo\u017een\u00ed<\/li>\n\n\n\n
- SI<\/a> – Speed Index – index rychlosti<\/li>\n<\/ul>\n<\/li>\n\n\n\n
- P\u0159\u00edle\u017eitosti<\/a> – v bodech se n\u00e1m uk\u00e1\u017e\u00ed mo\u017en\u00e9 p\u0159\u00edle\u017eitosti pro zlep\u0161en\u00ed webu<\/li>\n\n\n\n
- Diagnostika<\/a> – seznam nej\u010dast\u011bj\u0161\u00edch chyb na webu<\/li>\n\n\n\n
- \u00dasp\u011b\u0161n\u00e9 audity<\/a> – v\u0161echny prvky, kter\u00e9 pro\u0161ly. Ze v\u0161ech tab\u016f n\u00e1s tento bude zaj\u00edmat nejm\u00e9n\u011b.<\/li>\n<\/ul>\n<\/li>\n\n\n\n
- Jak\u00e9 je dobr\u00e9 sk\u00f3re v Google PageSpeed Insight?<\/a><\/li>\n\n\n\n
- Jak dos\u00e1hnout lep\u0161\u00edch v\u00fdsledk\u016f v Google PageSpeed Insight?<\/a>\n
- \n
- Po\u0159\u00e1dek ve WordPressu<\/a><\/li>\n\n\n\n
- Cachov\u00e1n\u00ed<\/a><\/li>\n\n\n\n
- Optimalizace obr\u00e1zk\u016f<\/a><\/li>\n\n\n\n
- Omezen\u00ed slu\u017eeb t\u0159et\u00ed strany<\/a><\/li>\n\n\n\n
- Optimalizace WordPress datab\u00e1ze<\/a><\/li>\n\n\n\n
- Minifikace CSS, JS a HTML<\/a><\/li>\n\n\n\n
- Odstran\u011bn\u00ed nebezpe\u010dn\u00e9ho malwaru<\/a><\/li>\n<\/ul>\n<\/li>\n\n\n\n
- Uk\u00e1zka komplexn\u00edch WordPress plugin\u016f pro optimalizaci webu<\/a><\/li>\n<\/ul>\n\n\n\n
Jak rychlost na\u010d\u00edt\u00e1n\u00ed webu ovliv\u0148uje jeho n\u00e1v\u0161t\u011bvnost?<\/h2>\n\n\n\n
![\"\"](\"https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2023\/12\/wordpress-dlouhe-nacitani-webu-1024x423.jpg\")
<\/a><\/figure>\n\n\n\nRychlost na\u010d\u00edt\u00e1n\u00ed webu m\u00e1 z\u00e1sadn\u00ed vliv na jeho n\u00e1v\u0161t\u011bvnost. Lid\u00e9 maj\u00ed tendenci opustit str\u00e1nku, kter\u00e1 se dlouho na\u010d\u00edt\u00e1 nebo reaguje pomalu. N\u00edzk\u00e1 rychlost na\u010d\u00edt\u00e1n\u00ed m\u016f\u017ee d\u00e1le v\u00e9st k hor\u0161\u00edmu hodnocen\u00ed ve vyhled\u00e1va\u010d\u00edch, co\u017e m\u016f\u017ee sn\u00ed\u017eit organickou n\u00e1v\u0161t\u011bvnost webu.<\/p>\n\n\n\n
Rychl\u00e9 weby maj\u00ed vy\u0161\u0161\u00ed pravd\u011bpodobnost na udr\u017een\u00ed st\u00e1vaj\u00edc\u00edch u\u017eivatel\u016f a dok\u00e1\u017e\u00ed zv\u00fd\u0161it po\u010det zobrazen\u00fdch str\u00e1nek. Web tedy svou rychlost\u00ed m\u016f\u017ee ovlivnit nap\u0159. SEO, organick\u00fd provoz, zapojen\u00ed u\u017eivatel\u016f\u2026<\/p>\n\n\n\n
Webov\u00e9 str\u00e1nky by se nem\u011bly na\u010d\u00edtat d\u00e9le ne\u017e 1,3 s na desktopu a 3,4 na mobiln\u00edch za\u0159\u00edzen\u00edch. Pokud jste zjistili, \u017ee je v\u00e1\u0161 web pomal\u00fd, tento \u010dl\u00e1nek by V\u00e1m mohl p\u0159ij\u00edt vhod. <\/p>\n\n\n\n
\u00davod do Google PageSpeed Insight<\/h2>\n\n\n\n
Pokud jste na tento n\u00e1stroj ji\u017e n\u011bkdy narazili, ur\u010dit\u011b jste zjistili, \u017ee valn\u00e1 v\u011bt\u0161ina webov\u00fdch str\u00e1nek na internetu je dost pomal\u00e1 a \u0161patn\u011b optimalizovan\u00e1. N\u011bkte\u0159\u00ed „webmaste\u0159i“ si s rychlost\u00ed ned\u011blaj\u00ed obt\u00ed\u017ee hlavn\u011b proto, \u017ee nen\u00ed tolik vid\u011bt z pohledu klienta. Majitel\u00e9 webu jsou pak ne\u0161\u0165astn\u00fd z men\u0161\u00ed n\u00e1v\u0161t\u011bvnosti, nebo pouze m\u00edrn\u00fdch prodej\u016f co se e-shop\u016f t\u00fd\u010de. <\/p>\n\n\n\n
Rychlost je ta \u010d\u00e1st na webu, kter\u00e1 by se rozhodn\u011b nem\u011bla jen tak p\u0159ech\u00e1zet a m\u011bli bychom ji n\u011bjak\u00fd ten sv\u016fj \u010das v\u011bnovat. T\u00edm, \u017ee je v\u011bt\u0161ina webu pomal\u00e1 z\u00edsk\u00e1v\u00e1me v\u00fdhodu nad konkurenc\u00ed hned v samotn\u00e9m po\u010d\u00e1tku. V tomto \u010dl\u00e1nku si komplexn\u00ed problematiku rychlosti webu vysv\u011btl\u00edme.<\/p>\n\n\n\n
Pro za\u010d\u00e1tek se s n\u00e1strojem trochu sezn\u00e1m\u00edme. Google PageSpeed Insight najdete zde<\/a>, a m\u016f\u017eete si tak sami otestovat sv\u016fj web. V n\u00e1stroji netestujete cel\u00fd web, ale pouze jednotliv\u00e9 str\u00e1nky. Z toho d\u016fvodu je vhodn\u00e9 zkontrolovat alespo\u0148 ty nejnav\u0161t\u011bvovan\u011bj\u0161\u00ed. Popul\u00e1rn\u00ed str\u00e1nky webu lze snadno nal\u00e9zt nap\u0159\u00edklad pomoc\u00ed bezplatn\u00e9ho n\u00e1stroje Google Search Console<\/a>.<\/p>\n\n\n\n
Diasgnostika zm\u011b\u0159\u00ed rychlost webu na mobiln\u00edch a desktopov\u00fdch platform\u00e1ch. Pokud m\u00e1 n\u00e1\u0161 web vy\u0161\u0161\u00ed n\u00e1v\u0161t\u011bvnost, uvid\u00edme i pr\u016fm\u011brnou rychlost, kterou za\u017e\u00edvaj\u00ed skute\u010dn\u00ed u\u017eivatel\u00e9<\/a>.<\/p>\n\n\n\n
Google PageSpeed Insight – objevte, co za\u017e\u00edvaj\u00ed skute\u010dn\u00ed u\u017eivatel\u00e9<\/h3>\n\n\n\n
![\"\"](\"https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2023\/12\/google-pagespeed-insight-objevte-co-zazivaji-skutecni-uzivatele.png\")
<\/a><\/figure>\n\n\n\nN\u00e1stroj nab\u00edz\u00ed i p\u0159ehled o tom, co za\u017e\u00edvaj\u00ed skute\u010dn\u00ed u\u017eivatel\u00e9. Tato mo\u017enost je v\u0161ak dostupn\u00e1 pouze pro weby s vy\u0161\u0161\u00ed n\u00e1v\u0161t\u011bvnost\u00ed. <\/p>\n\n\n\n
- \n
- Core Web Vitals<\/a>\n
- \n
- FID<\/a> – First Input Delay – zpo\u017ed\u011bn\u00ed prvn\u00edho vstupu<\/li>\n\n\n\n
- INP<\/a> – Interaction to Next Paint – metrika, kter\u00e1 v b\u0159eznu 2024 nahrad\u00ed FID<\/li>\n\n\n\n
- TTFB<\/a> – Time to First Byte – \u010das do na\u010dten\u00ed prvn\u00edho bajtu<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n
Core Web Vitals<\/h3>\n\n\n\n
FID – First Input Delay – zpo\u017ed\u011bn\u00ed prvn\u00edho vstupu<\/h4>\n\n\n\n
![\"\"](\"https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2023\/12\/wordpress-google-pagespeed-insight-metrika-fid-first-input-delay-1024x252.png\")
<\/a><\/figure>\n\n\n\nMetrika FID ud\u00e1v\u00e1 \u010das od n\u00e1v\u0161t\u011bvn\u00edkovi prvn\u00ed interakce s webem a\u017e do doby, kdy prohl\u00ed\u017ee\u010d za\u010dne po\u017eadavek zpracov\u00e1vat.<\/p>\n\n\n\n
Metrika FID bude v b\u0159eznu 2024 nahrazena nov\u011bj\u0161\u00ed metrikou INP(Interaction to Next Paint). INP je oproti FID daleko p\u0159\u00edsn\u011bj\u0161\u00ed. Na pozoru by m\u011bli b\u00fdt p\u0159edev\u0161\u00edm v\u00fdvoj\u00e1\u0159i pracuj\u00edc\u00ed s Reactem a Next.js.<\/p>\n\n\n\n
INP – Interaction to Next Paint – metrika, kter\u00e1 v b\u0159eznu 2024 nahrad\u00ed FID<\/h4>\n\n\n\n
![\"\"](\"https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2023\/12\/wordpress-google-pagespeed-insight-metrika-inp-interaction-to-next-paint-1024x252.png\")
<\/a><\/figure>\n\n\n\nInformuje o vznikl\u00fdch prodlev\u00e1ch v pr\u016fb\u011bhu na\u010d\u00edt\u00e1n\u00ed str\u00e1nky. Prodlevy b\u00fdvaj\u00ed ve v\u011bt\u0161in\u011b p\u0159\u00edpad\u016f zp\u016fsoben\u00e9 JavaScriptem a dlouhotrvaj\u00edc\u00edmi \u00falohy, kter\u00e9 b\u011b\u017e\u00ed na pozad\u00ed a blokuj\u00ed prohl\u00ed\u017ee\u010d. <\/p>\n\n\n\n
V praxi to vypad\u00e1 tak, \u017ee po na\u010dten\u00ed str\u00e1nky nem\u016f\u017ee n\u00e1v\u0161t\u011bvn\u00edk prov\u00e1d\u011bt jak\u00e9koliv interakce.<\/p>\n\n\n\n
TTFB – Time to First Byte – \u010cas do na\u010dten\u00ed prvn\u00edho bajtu<\/h4>\n\n\n\n
TTFB m\u011b\u0159\u00ed \u010das mezi vznikl\u00fdm po\u017eadavkem a dobou, kdy doraz\u00ed odpov\u011b\u010f v podob\u011b prvn\u00edho bajtu. B\u011bhem tohoto procesu vid\u00edme na webu pouze b\u00edlou obrazovku. <\/p>\n\n\n\n
Rychlost m\u016f\u017ee b\u00fdt ovlivn\u011bna pomal\u00fdm p\u0159ipojen\u00edm prohl\u00ed\u017ee\u010de se serverem, nebo pomal\u00fdm serverem.<\/p>\n\n\n\n
![\"\"](\"https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2023\/12\/wordpress-google-pagespeed-insight-metrika-ttfb-time-to-first-byte-1024x252.png\")
<\/a><\/figure>\n\n\n\nGoogle PageSpeed Insight metriky<\/h3>\n\n\n\n
Pro za\u010d\u00e1tek si uvedeme p\u0159\u00edklad \u0161patn\u011b optimalizovan\u00e9ho webu:<\/p>\n\n\n\n
![\"\"](\"https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2023\/12\/wordpress-pagespeed-insight-spatne-metriky-pomaly-web.png\")
<\/a><\/figure>\n\n\n\nV\u00fdkon je celkov\u00e9 zhodnocen\u00ed webu, kter\u00e9 se vypo\u010d\u00edt\u00e1v\u00e1 z n\u00ed\u017ee uveden\u00fdch metrik. Hodnocen\u00ed je od 0-100, kdy 0 znamen\u00e1 nejhor\u0161\u00ed a 100 nejlep\u0161\u00ed. Ide\u00e1ln\u00ed je se dr\u017eet v zelen\u00fdch \u010d\u00edslech, tedy od 90-100, co\u017e m\u016f\u017ee b\u00fdt n\u011bkdy docela probl\u00e9m, obzvl\u00e1\u0161\u0165 pokud pou\u017e\u00edv\u00e1me velk\u00e9 mno\u017estv\u00ed plugin\u016f, web b\u011b\u017e\u00ed na zastaral\u00e9m PHP<\/a>…<\/p>\n\n\n\n
Pokud pochop\u00edme n\u00e1sleduj\u00edc\u00ed metriky, budeme tak moci efektivn\u011bji pracovat na celkov\u00e9m zrychlen\u00ed webu.<\/p>\n\n\n\n
FCP – First Contentful Paint – prvn\u00ed vykreslen\u00ed obsahu<\/h4>\n\n\n\n
![\"\"](\"https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2023\/12\/wordpress-google-pagespeed-insight-metrika-fcp-first-contentful-paintt-1024x252.png\")
<\/a><\/figure>\n\n\n\nJedn\u00e1 se o metriku, kter\u00e1 m\u011b\u0159\u00ed \u010das od chv\u00edle, kdy u\u017eivatel rozklikne str\u00e1nku do doby, ne\u017e se vygeneruje jak\u00fdkoliv viditeln\u00fd obsah na obrazovce. M\u016f\u017ee se jednat o jak\u00fdkoliv prvek(text, obr\u00e1zek…). Text dok\u00e1\u017ee vykreslit je\u0161t\u011b p\u0159ed na\u010dten\u00edm webfont\u016f. Jedn\u00e1 se tedy o prvotn\u00ed sezn\u00e1men\u00ed n\u00e1v\u0161t\u011bvn\u00edka a webu.<\/p>\n\n\n\n
Str\u00e1nky by m\u011bly usilovat o prvn\u00ed vykreslen\u00ed obsahu do 1,8 vte\u0159iny nebo m\u00e9n\u011b.<\/p>\n\n\n\n
LCP – Largest Contentful Paint – nejv\u011bt\u0161\u00ed vykreslen\u00ed obsahu<\/h4>\n\n\n\n
![\"\"](\"https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2023\/12\/wordpress-google-pagespeed-insight-metrika-lcp-largest-contentful-paint-1024x252.png\")
<\/a><\/figure>\n\n\n\nD\u00edky LCP zm\u011b\u0159\u00edme dobu, b\u011bhem kter\u00e9 se vykresluje hlavn\u00ed obsah webu. S touto metrikou bychom mohli podrobn\u011bji zjistit, co nejv\u00edce zpomaluje n\u00e1\u0161 web. <\/p>\n\n\n\n
Mezi nej\u010dast\u011bj\u0161\u00ed elementy, kter\u00e9 se daj\u00ed pova\u017eovat jako LCP, spadaj\u00ed p\u0159edev\u0161\u00edm blokov\u00e9 prvky, sekce s obr\u00e1zkov\u00fdm pozad\u00edm, nebo videa.<\/p>\n\n\n\n
Vykreslen\u00ed LCP by m\u011blo trvat m\u00e9n\u011b ne\u017e 2,5 vte\u0159iny.<\/p>\n\n\n\n
TBT – Total Blocking Time – celkov\u00fd \u010das blokace<\/h4>\n\n\n\n
![\"\"](\"https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2023\/12\/wordpress-google-pagespeed-insight-metrika-tbt-total-blocking-time-1024x252.png\")
<\/a><\/figure>\n\n\n\nJedn\u00e1 se o metriku, kter\u00e1 ud\u00e1v\u00e1 celkov\u00fd \u010das blokace, kdy vykreslen\u00e1 str\u00e1nka nen\u00ed schopn\u00e1 reagovat. Prohl\u00ed\u017ee\u010d b\u011bhem t\u00e9to doby zpracov\u00e1v\u00e1 ur\u010ditou \u00falohu, b\u011bhem kter\u00e9 nejsme schopni s webem pracovat.<\/p>\n\n\n\n
Maxim\u00e1ln\u00ed doba, po kterou prob\u00edh\u00e1 blokace je doporu\u010dov\u00e1n maxim\u00e1ln\u011b do 200 ms.<\/p>\n\n\n\n
CLS – Cumulative Layout Shift – Kumulativn\u00ed posun rozlo\u017een\u00ed<\/h4>\n\n\n\n
![\"\"](\"https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2023\/12\/wordpress-google-pagespeed-insight-metrika-cls-cumulative-layout-shiftt-1024x252.png\")
<\/a><\/figure>\n\n\n\nVelmi \u010dast\u00fd probl\u00e9m web\u016f, kter\u00fd dok\u00e1\u017ee zp\u016fsobit neplechu. Jedn\u00e1 se o stabilitu webov\u00fdch str\u00e1nek. <\/p>\n\n\n\n
V praxi to vypad\u00e1 tak, \u017ee nav\u0161t\u00edv\u00edme web, nap\u0159. E-shop, kter\u00fd se zd\u00e1 b\u00fdt zcela vykreslen\u00fd. Prohl\u00ed\u017e\u00edme si produkty a v moment\u011b, kdy dan\u00fd produkt chceme p\u0159idat do ko\u0161\u00edku, tak se cel\u00e1 str\u00e1nka n\u00e1hle posune. Probl\u00e9m dok\u00e1\u017ee vyto\u010dit nejen z\u00e1kazn\u00edky, ale i b\u011b\u017en\u00e9 \u010dten\u00e1\u0159e a n\u00e1v\u0161t\u011bvn\u00edky. Jist\u011b se ka\u017ed\u00fd z n\u00e1s s t\u00edmto ji\u017e setkal.<\/p>\n\n\n\n
\u0160patn\u00fd CLS je ve v\u011bt\u0161in\u011b p\u0159\u00edpad\u016f zp\u016fsoben\u00fd chyb\u011bj\u00edc\u00edmi atributy „width“ a „height“ u obr\u00e1zk\u016f a extern\u00edm na\u010d\u00edt\u00e1n\u00edm font\u016f. <\/p>\n\n\n\n
Metrika CLS by m\u011bla b\u00fdt ide\u00e1ln\u011b men\u0161\u00ed ne\u017e 0,1 a nem\u011bla by p\u0159esahovat hodnotu 0,25.<\/p>\n\n\n\n
SI – Speed Index – index rychlosti<\/h4>\n\n\n\n
![\"\"](\"https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2023\/12\/wordpress-google-pagespeed-insight-metrika-si-speed-index-1024x252.png\")
<\/a><\/figure>\n\n\n\nIndex rychlosti je jedn\u00edm z nejd\u016fle\u017eit\u011bj\u0161\u00edch metrik. Ur\u010d\u00ed n\u00e1m \u010das, b\u011bhem kter\u00e9ho prob\u00edh\u00e1 kompletn\u00ed vykreslov\u00e1n\u00ed webu. Zjist\u00edme tedy, kolik vte\u0159in trv\u00e1, ne\u017e se web stoprocentn\u011b na\u010dte.<\/p>\n\n\n\n
Pokud jste zdiagnostikovali web a zjistili, \u017ee je doba jeho na\u010d\u00edt\u00e1n\u00ed extr\u00e9mn\u011b pomal\u00e1, bylo by vhodn\u00e9 zkontrolovat, jestli na testovan\u00e9 str\u00e1nce nejsou animace, kter\u00e9 by kompletn\u00ed vykreslen\u00ed webu zpomalovali.<\/p>\n\n\n\n
Web by m\u011bl b\u00fdt na mobiln\u00edch za\u0159\u00edzen\u00edch rychlej\u0161\u00ed ne\u017e 3,4 vte\u0159iny a v p\u0159\u00edpad\u011b desktopu by m\u011blo na\u010dten\u00ed prob\u011bhnout maxim\u00e1ln\u011b do 1,3 vte\u0159in. <\/p>\n\n\n\n
Google PageSpeed Insight p\u0159\u00edle\u017eitosti<\/h3>\n\n\n\n
![\"\"](\"https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2023\/12\/wordpress-google-pagespeed-insight-prilezitosti.png\")
<\/a><\/figure>\n\n\n\nN\u00e1stroj n\u00e1m tak\u00e9 odhal\u00ed nejv\u011bt\u0161\u00ed p\u0159\u00edle\u017eitosti, kter\u00e9 na webu na\u0161el a mo\u017en\u00e9 zp\u016fsoby jejich n\u00e1pravy. Jednotliv\u00e9 chybov\u00e9 hl\u00e1\u0161ky se daj\u00ed pro bli\u017e\u0161\u00ed informace rozkliknout, a my tak jednodu\u0161e dok\u00e1\u017eeme zjistit, co na webu zp\u016fsobuje ten nejv\u011bt\u0161\u00ed probl\u00e9m. \u0158e\u0161en\u00ed t\u011bch nej\u010dast\u011bj\u0161\u00edch chybov\u00fdch hl\u00e1\u0161ek najdete v tomto \u010dl\u00e1nku<\/a>. <\/p>\n\n\n\n
Google PageSpeed Insight diagnostika<\/h3>\n\n\n\n
![\"\"](\"https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2023\/12\/wordpress-google-pagespeed-insight-diagnostika-webu.png\")
<\/a><\/figure>\n\n\n\nU v\u0161ech chyb m\u00e1me ozna\u010den\u00ed z\u00e1va\u017enosti. Na webu by tak ide\u00e1ln\u011b nem\u011bli b\u00fdt \u017e\u00e1dn\u00e9 \u010derven\u00e9 chyby. Oran\u017eov\u00e9 tolik z\u00e1va\u017en\u00e9 nejsou a \u0161ediv\u00e9 \u0159e\u0161it v\u016fbec nemus\u00edme.<\/p>\n\n\n\n
V tomto konkr\u00e9tn\u00edm p\u0159\u00edpad\u011b pomal\u00fd web zp\u016fsoboval extern\u011b na\u010d\u00edtan\u00fd Google font a vyu\u017eit\u00ed velk\u00e9ho mno\u017estv\u00ed animac\u00ed. <\/p>\n\n\n\n
Google PageSpeed Insight \u00fasp\u011b\u0161n\u00e9 audity<\/h3>\n\n\n\n
![\"\"](\"https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2023\/12\/wordpress-google-pagespeed-insight-uspesne-audity.png\")
<\/a><\/figure>\n\n\n\nTato sekce n\u00e1s bude zaj\u00edmat nejm\u00e9n\u011b. Nalezneme v n\u00ed v\u0161echny audity, kter\u00e9 jsou spr\u00e1vn\u011b nastaven\u00e9, a v t\u00e9to f\u00e1zi se o n\u011b nemus\u00edme starat.<\/p>\n\n\n\n
Jak\u00e9 je dobr\u00e9 sk\u00f3re v Google PageSpeed Insight?<\/h2>\n\n\n\n
![\"\"](\"https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2023\/12\/wordpress-google-page-speed-insight-idealni-skore-webu-1024x317.png\")
<\/a><\/figure>\n\n\n\nPokud je sk\u00f3re Va\u0161eho webu vy\u0161\u0161\u00ed ne\u017e 90, pak V\u00e1m mus\u00edm pogratulovat, \u0159ad\u00edte se rychlost\u00ed mezi ty lep\u0161\u00ed weby. <\/p>\n\n\n\n
Pokud m\u00e1te sk\u00f3re mezi 50-89, po\u0159\u00e1d nejste nejhor\u0161\u00ed, ale na webu je rozhodn\u011b na \u010dem pracovat. <\/p>\n\n\n\n
Jestli\u017ee je hodnocen\u00ed webu men\u0161\u00ed ne\u017e 50, spad\u00e1te mezi ty pomalej\u0161\u00ed weby a p\u0159i optimalizaci V\u00e1s nejsp\u00ed\u0161e bude \u010dekat hodn\u011b pr\u00e1ce.<\/p>\n\n\n\n
Jak dos\u00e1hnout lep\u0161\u00edch v\u00fdsledk\u016f v Google PageSpeed Insight?<\/h2>\n\n\n\n
Zde si uvedeme ty nejlep\u0161\u00ed mo\u017en\u00e1 \u0159e\u0161en\u00ed, pomoc\u00ed nich\u017e dos\u00e1hneme rychlej\u0161\u00edho WordPress webu.<\/p>\n\n\n\n
Ud\u011blejte si po\u0159\u00e1dek v prost\u0159ed\u00ed WordPressu<\/h3>\n\n\n\n
Pro za\u010d\u00e1tek je vhodn\u00e9 ud\u011blat po\u0159\u00e1dek v samotn\u00e9m WordPressu. M\u016f\u017eeme tak pomoci nejen rychlosti, ale i bezpe\u010dnosti cel\u00e9ho webu. Za\u010dneme t\u00edm, \u017ee aktualizujeme WordPress(N\u00e1st\u011bnka > Aktualizace<\/strong>) a pluginy(Pluginy<\/strong> > P\u0159ehled plugin\u016f<\/strong>) na nejnov\u011bj\u0161\u00ed verzi.<\/p>\n\n\n\n
Sma\u017ete neaktivn\u00ed pluginy<\/h4>\n\n\n\n
Jsou lid\u00e9, kte\u0159\u00ed \u0159e\u0161\u00ed ka\u017edou mali\u010dkost n\u011bkter\u00fdm pluginem. Po\u010det plugin\u016f se jim pak na webu za\u010dne zvy\u0161ovat, a na \u00fakor plugin\u016f razantn\u011b kles\u00e1 rychlost cel\u00e9ho webu. Ujist\u011bte se, \u017ee nespad\u00e1te do t\u00e9to skupinky lid\u00ed a na webu udr\u017eujte co nejm\u00e9n\u011b plugin\u016f to jenom jde(Pluginy <\/strong>> P\u0159ehled plugin\u016f<\/strong>). <\/p>\n\n\n\n
Z\u00e1rove\u0148 je d\u016fle\u017eit\u00e9 nepou\u017e\u00edvat pro jednu konkr\u00e9tn\u00ed v\u011bc v\u00edce plugin\u016f. Pokud na webu pou\u017e\u00edv\u00e1me nap\u0159. caching, m\u011bl by b\u00fdt aktivovan\u00fd pouze jeden plugin, kter\u00fd se o to bude starat. To sam\u00e9 plat\u00ed i u SEO, optimalizaci obr\u00e1zk\u016f… <\/p>\n\n\n\n
Sma\u017ete Nepou\u017e\u00edvan\u00e9 \u0161ablony<\/h4>\n\n\n\n
\u0160ablona m\u016f\u017ee b\u00fdt tak\u00e9 d\u016fvodem, pro\u010d je web tolik zpomalen\u00fd. Proto bychom m\u011bli \u0161ablonu vyb\u00edrat d\u016fkladn\u011b a ide\u00e1ln\u011b si ji nechat postavit na m\u00edru, ale to do hry p\u0159in\u00e1\u0161\u00ed nutnost v\u011bt\u0161\u00edho rozpo\u010dtu. <\/p>\n\n\n\n
V sekci Vzhled<\/strong> > \u0160ablony<\/strong> bychom nem\u011bli udr\u017eovat mnoho \u0161ablon a ty nepou\u017e\u00edvan\u00e9 jednodu\u0161e odstranit. <\/p>\n\n\n\n
Zkontrolujte zdrav\u00ed webu ve WordPress<\/h4>\n\n\n\n
P\u0159\u00edmo v administraci WP m\u016f\u017eeme zjistit n\u011bkter\u00e9 vznikl\u00e9 probl\u00e9my. Poslou\u017e\u00ed k tomu n\u00e1stroj „Zdrav\u00ed webu“, kter\u00fd je k dispozici v sekci N\u00e1stroje <\/strong>> Zdrav\u00ed webu<\/strong>. <\/p>\n\n\n\n
Zastaral\u00e1 verze PHP a datab\u00e1ze <\/h5>\n\n\n\n
![\"\"](\"https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2023\/12\/wordpress-vas-web-bezi-na-zastaralem-php.png\")
<\/a><\/figure>\n\n\n\nV n\u00e1stroji „Zdrav\u00ed webu“ m\u016f\u017eeme nal\u00e9zt hl\u00e1\u0161ku o zastaral\u00e9m PHP, nebo o zastaral\u00e9m SQL serveru. Tento probl\u00e9m by mohl b\u00fdt hlavn\u00ed p\u0159\u00ed\u010dinou pomal\u00e9ho webu. \u0158e\u0161en\u00ed je individu\u00e1ln\u00ed a li\u0161\u00ed se p\u0159\u00edpad od p\u0159\u00edpadu. Obvykle se d\u00e1 v\u0161e pom\u011brn\u011b rychle nastavit u webhostingu.<\/p>\n\n\n\n
P\u0159\u00edklad u webov\u00e9ho hostingu Wedos:<\/p>\n\n\n\n
![\"\"](\"https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2023\/12\/wordpress-konfigurace-php-wedos.png\")
<\/a><\/figure>\n\n\n\nNe\u017e se v\u0161ak rozhodneme pro tuto zm\u011bnu, rozhodn\u011b by bylo vhodn\u00e9 ud\u011blat kopii webu<\/a>, na kter\u00e9 si p\u0159evod na vy\u0161\u0161\u00ed verzi PHP vyzkou\u0161\u00edme a zkontrolujeme funk\u010dnost v\u0161ech plugin\u016f, \u0161ablony…<\/p>\n\n\n\n
V p\u0159\u00edpad\u011b men\u0161\u00edho webu sta\u010d\u00ed ud\u011blat z\u00e1lohu nap\u0159. pomoc\u00ed bezplatn\u00e9ho pluginu UpdraftPlus.<\/p>\n\n\n\n
Nahra\u010fte st\u00e1vaj\u00edc\u00ed pluginy vlastn\u00edm k\u00f3dem<\/h4>\n\n\n\n
Pro pokro\u010dilej\u0161\u00ed u\u017eivatele se nab\u00edz\u00ed varianta nahradit n\u011bkter\u00e9 jednoduch\u00e9 pluginy pomoc\u00ed k\u00f3du. V\u0161e sice zabere v\u00edce \u00fasil\u00ed, ale sn\u00ed\u017een\u00ed po\u010dtu plugin\u016f by mohlo pomoci rychlosti WordPress webu.<\/p>\n\n\n\n
Takov\u00fdm p\u0159\u00edkladem m\u016f\u017ee b\u00fdt integrace Google reCAPTCHA s WP<\/a>. M\u016f\u017eeme pou\u017e\u00edt bu\u010f jeden z dostupn\u00fdch plugin\u016f, nebo v\u0161e vy\u0159e\u0161it elegantn\u011bji pomoc\u00ed jednoduch\u00e9ho k\u00f3du.<\/p>\n\n\n\n
Zrychlete WordPress pomoc\u00ed cachov\u00e1n\u00ed<\/h3>\n\n\n\n
O pojmu cache z\u0159ejm\u011b plno z V\u00e1s sly\u0161elo, ale m\u00e1lokdo v\u00ed, o co se vlastn\u011b jedn\u00e1. Cachov\u00e1n\u00ed je takov\u00fd mechanismus, kter\u00fd ukl\u00e1d\u00e1 kopie dat nebo cel\u00fdch str\u00e1nek do mezipam\u011bti (cache) pro rychlej\u0161\u00ed opakovan\u00fd p\u0159\u00edstup.<\/p>\n\n\n\n
![\"\"](\"https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2023\/12\/wordpress-cachovani-optimalizace-google-page-speed-insight.png\")
<\/a><\/figure>\n\n\n\nJin\u00fdmi slovy se nam\u00edsto opakovan\u00e9ho generov\u00e1n\u00ed str\u00e1nky pro ka\u017ed\u00e9ho u\u017eivatele v\u00fdsledek ulo\u017e\u00ed a n\u00e1sledn\u011b poskytuje jako statick\u00e1 str\u00e1nka pro dal\u0161\u00ed n\u00e1v\u0161t\u011bvn\u00edky. T\u00edmto se v\u00fdrazn\u011b urychl\u00ed na\u010d\u00edt\u00e1n\u00ed str\u00e1nky. Cache se obvykle automaticky sma\u017ee po vznikl\u00fdch zm\u011bn\u00e1ch na webu, aby p\u0159in\u00e1\u0161el st\u00e1le aktu\u00e1ln\u00ed data.<\/p>\n\n\n\n
Zva\u017ete pou\u017eit\u00ed WordPress pluginu pro cachov\u00e1n\u00ed <\/h4>\n\n\n\n
Pro WordPress existuje n\u011bkolik cachovac\u00edch plugin\u016f ze kter\u00fdch m\u016f\u017eeme vyb\u00edrat. Jako ten nejlep\u0161\u00ed se jev\u00ed WP Rocket<\/a>, kter\u00fd krom\u011b cachov\u00e1n\u00ed \u0159e\u0161\u00ed i kompletn\u00ed optimalizaci webu. Bohu\u017eel je v\u0161ak placen\u00fd.<\/p>\n\n\n\n
Mezi skv\u011bl\u00e9 cachovac\u00ed pluginy, kter\u00e9 nab\u00edzej\u00ed mnoho sv\u00fdch funkc\u00ed zdarma spad\u00e1 nap\u0159. WP Fastest Cache<\/a>, W3 Total Cache<\/a> a WP Super Cache<\/a>.<\/p>\n\n\n\n
Optimalizujte obr\u00e1zky<\/h3>\n\n\n\n
Obr\u00e1zky na webu n\u011bkdy mohou b\u00fdt v nevhodn\u00e9m form\u00e1tu, nebo ve \u0161patn\u00e9m rozli\u0161en\u00ed a mohou tak enormn\u011b zpomalit web p\u0159edev\u0161\u00edm na mobiln\u00edch za\u0159\u00edzen\u00edch. Z toho d\u016fvodu bychom m\u011bli obr\u00e1zky \u0159\u00e1dn\u011b optimalizovat.<\/p>\n\n\n\n
Komprese obr\u00e1zk\u016f<\/h4>\n\n\n\n
Kompres\u00ed dok\u00e1\u017eeme sn\u00ed\u017eit velikost souboru obr\u00e1zku t\u00edm, \u017ee zredukujeme mno\u017estv\u00ed dat pot\u0159ebn\u00fdch k uchov\u00e1n\u00ed obrazu. Existuj\u00ed dva hlavn\u00ed zp\u016fsoby komprese:<\/p>\n\n\n\n
- \n
- Bezztr\u00e1tov\u00e1 komprese\n
- \n
- U tohoto typu komprese nedoch\u00e1z\u00ed ke ztr\u00e1t\u011b informac\u00ed v obr\u00e1zku a obr\u00e1zek si tak zachov\u00e1 svou kvalitu. <\/li>\n\n\n\n
- Bezztr\u00e1tovou kompresi je vhodn\u00e9 pou\u017e\u00edt i v p\u0159\u00edpad\u011b, \u017ee se na obr\u00e1zku vyskytuje nap\u0159. text a je d\u016fle\u017eit\u00e9 zachovat jeho kvalitu a \u010ditelnost.<\/li>\n<\/ul>\n<\/li>\n\n\n\n
- Ztr\u00e1tov\u00e1 komprese\n
- \n
- Tento typ komprese sice dok\u00e1\u017ee zhor\u0161it detaily fotografie, ale za to um\u00ed radik\u00e1ln\u011b zmen\u0161it velikost souboru. <\/li>\n\n\n\n
- Ztr\u00e1tov\u00e1 komprese by se tak rozhodn\u011b nem\u011bla pou\u017e\u00edvat v p\u0159\u00edpad\u011b, kdy chceme zachovat p\u016fvodn\u00ed kvalitu obr\u00e1zku.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n
Jak komprimovat obr\u00e1zky?<\/h4>\n\n\n\n
Pro kompresi obr\u00e1zk\u016f m\u00e1me k dispozici nespo\u010det aplikac\u00ed a online n\u00e1stroj\u016f. Mezi placen\u00e9 aplikace pat\u0159\u00ed Adobe Photoshop<\/a>, a do skupinky aplikac\u00ed, kter\u00e9 jsou zdarma spad\u00e1 nap\u0159. GIMP<\/a>. <\/p>\n\n\n\n
Nejrychlej\u0161\u00edm \u0159e\u0161en\u00edm je komprimace obr\u00e1zk\u016f pomoc\u00ed online n\u00e1stroj\u016f, kter\u00e9 jsou zdarma a nen\u00ed nutn\u00e9 je stahovat. Pro p\u0159\u00edklad si zde uvedeme popul\u00e1rn\u00ed a jednoduchou online aplikaci Tiny PNG<\/a>.<\/p>\n\n\n\n
![\"\"](\"https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2023\/12\/tiny-jpg-komprese-obrazku-zdarma-online.png\")
<\/a><\/figure>\n\n\n\n![\"\"](\"https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2023\/12\/komprimace-obrazku-pomoci-tinypng-zdarma-online-1024x489.png\")
<\/a><\/figure>\n\n\n\nJak komprimovat obr\u00e1zky ve WordPressu?<\/h4>\n\n\n\n
Pokud ji\u017e provozujeme WordPress web, nebo se k tomu teprve chyst\u00e1me, za\u010dala by n\u00e1s ru\u010dn\u00ed komprimace obr\u00e1zk\u016f doh\u00e1n\u011bt k \u0161\u00edlenstv\u00ed. Proto existuje mnoho plugin\u016f, kter\u00e9 dok\u00e1\u017e\u00ed automaticky komprimovat obr\u00e1zky ji\u017e p\u0159i nahr\u00e1n\u00ed do WP. Mezi dal\u0161\u00ed funkce t\u011bchto plugin\u016f m\u016f\u017ee spadat i hromadn\u00e1 optimalizace ji\u017e nahran\u00fdch obr\u00e1zk\u016f a p\u0159evod vizu\u00e1l\u016f do vhodn\u011bj\u0161\u00edch form\u00e1t\u016f(.webP…).<\/p>\n\n\n\n
Mezi takov\u00e9 pluginy pat\u0159\u00ed nap\u0159.:<\/p>\n\n\n\n
- \n
- Ima<\/a>gify<\/a><\/li>\n\n\n\n
- ShortPixel<\/a><\/li>\n<\/ul>\n\n\n\n
Form\u00e1ty a velikosti obr\u00e1zk\u016f<\/h4>\n\n\n\n
![\"\"](\"https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2023\/12\/wordpress-zobrazujte-obrazky-ve-formatech-nove-generace-google-page-speed-insight.png\")
<\/a><\/figure>\n\n\n\nNa webu bychom m\u011bli pou\u017e\u00edvat ide\u00e1ln\u011b form\u00e1t .webP(jedn\u00e1 o komprimovan\u00fd form\u00e1t, kter\u00fd oproti JPEG nab\u00edz\u00ed lep\u0161\u00ed kvalitu p\u0159i zachov\u00e1n\u00ed men\u0161\u00ed velikosti souboru.), svg(pro logo webu). Obr\u00e1zek by se m\u011bl maxim\u00e1ln\u011b velikostn\u011b pohybovat kolem 200kb. <\/p>\n\n\n\n
Lazy Loading ve WordPressu<\/h4>\n\n\n\n
Rozhodn\u011b by nebylo od v\u011bci na webu nastavit lazyloading. Jedn\u00e1 se o techniku, kter\u00e1 se pou\u017e\u00edv\u00e1 k efektivn\u00edmu na\u010d\u00edt\u00e1n\u00ed obr\u00e1zk\u016f. <\/p>\n\n\n\n
V praxi to znamen\u00e1 tak, \u017ee m\u00edsto toho, aby se na\u010detli v\u0161echny obr\u00e1zky najednou, zobraz\u00ed se a\u017e ve chv\u00edli, kdy je pot\u0159eba. U\u017eivateli se tedy obr\u00e1zky odkr\u00fdvaj\u00ed postupn\u011b podle toho, v jak\u00e9 \u010d\u00e1sti webu se nach\u00e1z\u00ed. <\/p>\n\n\n\n
![\"\"](\"https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2023\/12\/wordpress-odlozte-nacitani-obrazku-mimo-obrazovku-google-page-speed-insight.png\")
<\/a><\/figure>\n\n\n\nN\u00e1vod na spr\u00e1vn\u00e9 zprovozn\u011bn\u00ed Lazy Loadingu bez pou\u017eit\u00ed zbyte\u010dn\u00fdch plugin\u016f najdete v \u010dl\u00e1nku „Jak na Lazy Load obr\u00e1zk\u016f ve WordPressu<\/a>„.<\/p>\n\n\n\n
Lazy loading a LCP<\/h4>\n\n\n\n
Je d\u016fle\u017eit\u00e9 m\u00edt na pam\u011bti, \u017ee LCP prvek by za \u017e\u00e1dnou cenu nem\u011bl m\u00edt nastaven\u00fd lazyloading! Je to z toho d\u016fvodu, \u017ee pomoc\u00ed lazyloadingu bychom nastavili opo\u017ed\u011bn\u00e9 vykreslen\u00ed LCP a naopak zhor\u0161ili celkov\u00e9 sk\u00f3re rychlosti. <\/p>\n\n\n\n
Rozli\u0161en\u00ed obr\u00e1zk\u016f<\/h4>\n\n\n\n
![\"\"](\"https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2023\/12\/wordpress-pouzivejte-spravnou-velikost-obrazku-google-page-speed-insight.png\")
<\/a><\/figure>\n\n\n\nUjist\u011bte se, \u017ee obr\u00e1zky maj\u00ed rozli\u0161en\u00ed odpov\u00eddaj\u00edc\u00edmu jejich \u00fa\u010delu na str\u00e1nce.<\/p>\n\n\n\n
Omezte slu\u017eby t\u0159et\u00ed strany<\/h3>\n\n\n\n
![\"\"](\"https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2023\/12\/omezte-sluzby-tretich-stran-wordpress-google-pagespeed-insight-1024x243.png\")
<\/a><\/figure>\n\n\n\nI slu\u017eby t\u0159et\u00ed strany mohou zp\u016fsobit pomalej\u0161\u00ed chod webu. M\u016f\u017ee mezi n\u011b pat\u0159it nap\u0159. Google Analytika, extern\u011b na\u010d\u00edtan\u00e9 fonty, Youtube, Facebook a mnoh\u00e9 dal\u0161\u00ed…<\/p>\n\n\n\n
Z toho d\u016fvodu bychom m\u011bli slu\u017eby t\u0159et\u00edch stran velmi pe\u010dliv\u011b zv\u00e1\u017eit, a vybrat pouze ty nezbytn\u00e9.<\/p>\n\n\n\n
V p\u0159\u00edpad\u011b, \u017ee je pou\u017e\u00edv\u00e1n\u00ed n\u011bkter\u00fdch slu\u017eeb t\u0159et\u00ed strany nezbytn\u00e9, m\u016f\u017eeme se pokusit o odlo\u017een\u00ed jejich na\u010dten\u00ed. V tomto p\u0159\u00edpad\u011b by prvotn\u00ed na\u010dten\u00ed webu prob\u011bhlo rychleji a ostatn\u00ed pot\u0159ebn\u00e9 skripty by se na\u010detli opo\u017ed\u011bn\u011b(odlo\u017een\u00ed na\u010dten\u00ed skript\u016f lze aplikovat i u n\u011bkter\u00fdch plugin\u016f).<\/p>\n\n\n\n
Jak odlo\u017eit na\u010d\u00edt\u00e1n\u00ed slu\u017eeb t\u0159et\u00ed strany?<\/h4>\n\n\n\n
Ne\u017e nastav\u00edme odlo\u017een\u00ed na\u010d\u00edt\u00e1n\u00ed skript\u016f, mus\u00edme nejd\u0159\u00edve zjistit, jestli je n\u00e1m to umo\u017en\u011bno. Zde je seznam t\u011bch nejpou\u017e\u00edvan\u011bj\u0161\u00edch JS skript\u016f, u kter\u00fdch lze odlo\u017eit na\u010d\u00edt\u00e1n\u00ed:<\/p>\n\n\n\n
![\"\"](\"https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2023\/12\/wordpress-seznam-skriptu-u-kterych-lze-odlozit-nacitani-1024x188.png\")
<\/a><\/figure>\n\n\n\nExistuj\u00ed pluginy, u kter\u00fdch lze odlo\u017een\u00ed na\u010d\u00edt\u00e1n\u00ed skript\u016f nastavit. Mezi takov\u00e9 pluginy pat\u0159\u00ed:<\/p>\n\n\n\n
WP Rocket<\/a> – pr\u00e9miov\u00fd plugin, kter\u00fd zvl\u00e1d\u00e1 i cachov\u00e1n\u00ed, minifikaci a mnoho dal\u0161\u00edch funkc\u00ed<\/p>\n\n\n\n
![\"\"](\"https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2023\/12\/wordpress-wp-rocket-odlozeni-nacitani-skriptu.png\")
<\/a><\/figure>\n\n\n\nFlying Scripts<\/a> – slou\u017e\u00ed pouze k odlo\u017een\u00ed na\u010d\u00edt\u00e1n\u00ed skript\u016f <\/p>\n\n\n\n
![\"\"](\"https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2023\/12\/wordpress-plugin-flying-scripts.png\")
<\/a><\/figure>\n\n\n\nWebov\u00e9 fonty na\u010d\u00edtejte lok\u00e1ln\u011b<\/h4>\n\n\n\n
![\"\"](\"https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2023\/12\/wordpress-google-fonty.png\")
<\/a><\/figure>\n\n\n\nV\u011bt\u0161ina web\u016f sv\u00e9 fonty na\u010d\u00edt\u00e1 extern\u011b, nap\u0159. pomoc\u00ed Google Fonts. To v\u0161ak m\u016f\u017ee znamenat op\u011bt pomalej\u0161\u00ed na\u010d\u00edt\u00e1n\u00ed webu a zv\u00fd\u0161en\u00ed po\u010dtu DNS po\u017eadavk\u016f. I v tomto konkr\u00e9tn\u00edm p\u0159\u00edpad\u011b se tedy jedn\u00e1 o vyu\u017e\u00edv\u00e1n\u00ed slu\u017eby t\u0159et\u00ed strany. <\/p>\n\n\n\n
Tento probl\u00e9m se d\u00e1 relativn\u011b jednodu\u0161e vy\u0159e\u0161it a na\u010d\u00edtat fonty lok\u00e1ln\u011b na na\u0161em serveru. <\/p>\n\n\n\n
Optimalizace WordPress datab\u00e1ze<\/h3>\n\n\n\n
Aby mohl WordPress spr\u00e1vn\u011b fungovat, vyu\u017e\u00edv\u00e1 ke sv\u00e9 pr\u00e1ci datab\u00e1zov\u00e9 z\u00e1znamy a tabulky. Ty se v\u0161ak \u010dasem mohou zaplnit a obsahovat poz\u016fstatky nap\u0159. star\u00fdch a ji\u017e nepou\u017e\u00edvan\u00fdch plugin\u016f. V\u00edce informac\u00ed o tom, jak WordPress datab\u00e1ze funguje najdete v \u010dl\u00e1nku „Struktura WordPress datab\u00e1ze<\/a>„<\/p>\n\n\n\n
Bez spr\u00e1vn\u00e9 \u00fadr\u017eby by se datab\u00e1ze zaplnila na tolik, \u017ee by WordPressu n\u011bjakou dobu trvalo, v n\u00ed n\u011bco naj\u00edt. Postupn\u011b bychom tedy zpomalovali web a p\u0159ipravovali se o v\u00fdkon na\u0161eho WordPressu.<\/p>\n\n\n\n
P\u0159i optimalizaci V\u00e1m pom\u016f\u017ee \u010dl\u00e1nek o „\u010di\u0161t\u011bn\u00ed WordPress datab\u00e1ze<\/a>„.<\/p>\n\n\n\n
Vyu\u017eit\u00ed CDN slu\u017eeb ve WordPressu<\/h3>\n\n\n\n
![\"\"](\"https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2023\/12\/wordpress-cdn-google-pagespeed-insight-1024x433.png\")
<\/a><\/figure>\n\n\n\nCDN(content delivery network) laicky \u0159e\u010deno uchov\u00e1v\u00e1 kopii na\u0161ich webov\u00fdch str\u00e1nek na n\u011bkolika r\u016fzn\u00fdch m\u00edstech po cel\u00e9m sv\u011bt\u011b pro rychlej\u0161\u00ed na\u010d\u00edt\u00e1n\u00ed. <\/p>\n\n\n\n
Pokud by se tedy n\u011bkdo sna\u017eil nav\u0161t\u00edvit n\u00e1\u0161 web, CDN by mu otev\u0159ela str\u00e1nku, kter\u00e1 by byla nejbl\u00ed\u017ee k jeho poloze.<\/p>\n\n\n\n
Na v\u00fdb\u011br je hned n\u011bkolik poskytovatel\u016f CDN. Mezi ty nezn\u00e1m\u011bj\u0161\u00ed se \u0159ad\u00ed nap\u0159\u00edklad Cloudflare<\/a> a Bunny CDN<\/a>. V n\u011bkter\u00fdch p\u0159\u00edpadech m\u016f\u017ee CDN pro n\u00e1\u0161 web poskytovat webhosting(nap\u0159. Wedos nab\u00edz\u00ed vlastn\u00ed slu\u017ebu WEDOS Global)<\/p>\n\n\n\n
Minifikace soubor\u016f<\/h3>\n\n\n\n
Minifikace soubor\u016f odstra\u0148uje a nebo zkracuje data, kter\u00e1 jsou pro spr\u00e1vn\u00fd chod k\u00f3du nadbyte\u010dn\u00e1, nebo ned\u016fle\u017eit\u00e1. Minifikac\u00ed dok\u00e1\u017eeme efektivn\u011b sn\u00ed\u017eit velikost soubor\u016f, a zaru\u010dit si tak rychlej\u0161\u00ed na\u010d\u00edt\u00e1n\u00ed webu.<\/p>\n\n\n\n
Minifikace soubor\u016f ve WordPressu<\/h4>\n\n\n\n
V prost\u0159ed\u00ed WordPressu sice existuj\u00ed pluginy ur\u010den\u00e9 p\u0159\u00edmo k minifikaci soubor\u016f, ale v\u011bt\u0161inou je mo\u017enost minifikace ji\u017e v z\u00e1kladu u n\u011bkter\u00fdch \u0161ablon a cachovac\u00edch plugin\u016f(WP R<\/a>ocket<\/a>, WP Fastest Cache<\/a>).<\/p>\n\n\n\n
Plugin WP Rocket je bohu\u017eel placen\u00fd, ale WP Fastest Cache krom\u011b cachingu nab\u00edz\u00ed i z\u00e1kladn\u00ed minifikaci soubor\u016f zdarma.<\/p>\n\n\n\n
![\"\"](\"https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2023\/12\/wp-fastest-cache-plugin.png\")
<\/a><\/figure>\n\n\n\nMinifikace CSS<\/h4>\n\n\n\n
![\"\"](\"https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2023\/12\/wordpress-minifikace-css-1024x414.png\")
<\/a><\/figure>\n\n\n\nMinifikace CSS soubor\u016f prob\u00edh\u00e1 velmi jednodu\u0161e. Kompil\u00e1tor pouze odstran\u00ed p\u0159ebyte\u010dn\u00e9 mezery, koment\u00e1\u0159e a dok\u00e1\u017ee zkr\u00e1tit n\u011bkter\u00e9 z\u00e1pisy.<\/p>\n\n\n\n
Minifikace JS<\/h4>\n\n\n\n
![\"\"](\"https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2023\/12\/wordpress-minifikace-js-souboru-google-pagespeed-insight-1024x414.png\")
<\/a><\/figure>\n\n\n\nU JS je minifikace k\u00f3du o n\u011bco m\u00e1lo slo\u017eit\u011bj\u0161\u00ed. Kompil\u00e1tor provede parsov\u00e1n\u00ed k\u00f3du do v\u00edce srozumiteln\u00e9 datov\u00e9 struktury, se kterou program nad\u00e1le pracuje, a uprav\u00ed ji tak, aby m\u011bl v\u00fdsledek co nejoptim\u00e1ln\u011bj\u0161\u00ed podobu(nahrazen\u00ed funkc\u00ed pomoc\u00ed arrow funkce, odstran\u011bn\u00ed zbyte\u010dn\u00fdch \u0159\u00e1dk\u016f, zkr\u00e1cen\u00ed n\u00e1zv\u016f identifik\u00e1tor\u016f…). V\u00fdsledkem kompil\u00e1toru bude ji\u017e vygenerovan\u00fd minifikovan\u00fd JS k\u00f3d.<\/p>\n\n\n\n
Minifikace HTML<\/h4>\n\n\n\n
![\"\"](\"https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2023\/12\/wordpress-minifikace-html-souboru-google-pagespeed-insight-1024x414.png\")
<\/a><\/figure>\n\n\n\nPrincip je t\u00e9m\u011b\u0159 stejn\u00fd jako u ostatn\u00edch typ\u016f soubor\u016f. C\u00edlem minifikace je odstranit co nejv\u011bt\u0161\u00ed \u010d\u00e1st nepot\u0159ebn\u00e9ho k\u00f3du v\u010detn\u011b nadbyte\u010dn\u00fdch \u0159\u00e1dk\u016f, koment\u00e1\u0159\u016f….<\/p>\n\n\n\n
Odstran\u011bn\u00ed nebezpe\u010dn\u00e9ho malwaru<\/h3>\n\n\n\n
N\u011bkdy m\u016f\u017ee b\u00fdt p\u0159\u00ed\u010dinou pomal\u00e9ho webu virus, kter\u00fd nemus\u00ed b\u00fdt na prvn\u00ed pohled viditeln\u00fd. Vir m\u016f\u017ee nap\u0159\u00edklad odkazovat u\u017eivatele na nebezpe\u010dn\u00e9 str\u00e1nky bez na\u0161eho v\u011bdom\u00ed, sta\u010d\u00ed, kdy\u017e \u00fato\u010dn\u00edk nastav\u00ed, aby se na\u0161emu za\u0159\u00edzen\u00ed zobrazoval web spr\u00e1vn\u011b. <\/p>\n\n\n\n
N\u011bkdy m\u016f\u017ee virus dokonce vytv\u00e1\u0159et fale\u0161n\u00e9 str\u00e1nky. Pokud tak m\u00e1me nap\u0159\u00edklad web s 8 str\u00e1nkami, a v Google konzoli<\/a> najdeme daleko v\u011bt\u0161\u00ed mno\u017estv\u00ed str\u00e1nek s n\u011bkdy a\u017e nesmysln\u00fdmi URL, pak byl n\u00e1\u0161 web s velkou pravd\u011bpodobnost\u00ed napaden.<\/p>\n\n\n\n
![\"\"](\"https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2023\/12\/indexovane-stranky.png\")
<\/a><\/figure>\n\n\n\nI pokud bychom web m\u011bli d\u016fkladn\u011b zabezpe\u010den\u00fd, rozhodn\u011b by nebylo na \u0161kodu jej jednou za \u010das zkontrolovat a otestovat. Pokud nev\u00edte, jak V\u00e1\u0161 WordPress web zabezpe\u010dit, m\u016f\u017eete se pod\u00edvat na \u010dl\u00e1nek o kompletn\u00edm zabezpe\u010den\u00ed WordPressu<\/a>.<\/p>\n\n\n\n
Uk\u00e1zka komplexn\u00edch WordPress plugin\u016f pro optimalizaci webu<\/h2>\n\n\n\n
- \n
- WP Rocket<\/a><\/li>\n\n\n\n
- WP Fastest Cache<\/a><\/li>\n\n\n\n
- WP Super Cache<\/a><\/li>\n\n\n\n
- W3 Total Cache<\/a><\/li>\n<\/ul>\n\n\n\n
Tabulka rychlosti testovan\u00fdch plugin\u016f:<\/p>\n\n\n\n
Plugin<\/strong><\/td> LCP<\/a><\/strong><\/td> TTFB<\/a><\/strong><\/td> Kompletn\u00ed na\u010dten\u00ed webu<\/strong><\/td><\/tr> \u017e\u00e1dn\u00fd<\/td> 0.674<\/td> 0.288<\/td> 0.721<\/td><\/tr> WP Rocket<\/td> 0.141<\/td> 0.040<\/td> 0.307<\/td><\/tr> WP Fastest Cache<\/td> 0.443<\/td> 0.052<\/td> 0.352<\/td><\/tr> WP Super Cache<\/td> 0.377<\/td> 0.041<\/td> 0.471<\/td><\/tr> W3 Total Cache<\/td> 0.290<\/td> 0.040<\/td> 0.421<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n - WP Fastest Cache<\/a><\/li>\n\n\n\n
- ShortPixel<\/a><\/li>\n<\/ul>\n\n\n\n
- Ima<\/a>gify<\/a><\/li>\n\n\n\n
- INP<\/a> – Interaction to Next Paint – metrika, kter\u00e1 v b\u0159eznu 2024 nahrad\u00ed FID<\/li>\n\n\n\n
- FID<\/a> – First Input Delay – zpo\u017ed\u011bn\u00ed prvn\u00edho vstupu<\/li>\n\n\n\n
- Cachov\u00e1n\u00ed<\/a><\/li>\n\n\n\n
- LCP<\/a> – Largest Contentful Paint – nejv\u011bt\u0161\u00ed vykreslen\u00ed obsahu<\/li>\n\n\n\n
- INP<\/a> – Interaction to Next Paint – metrika v b\u0159eznu 2024 nahrad\u00ed FID<\/li>\n\n\n\n
- FID<\/a> – First Input Delay – zpo\u017ed\u011bn\u00ed prvn\u00edho vstupu<\/li>\n\n\n\n
- Core Web Vitals<\/a>\n
- \u00davod do Google PageSpeed Insight<\/a>\n