1. Obsah
  2. Proč se vůbec trápit rychlostí?
  3. Začínáme: co měřit a proč
    1. Důležitá Core web vitals metrika: INP (Interaction to Next Paint)
    2. Proč už ne FID?
    3. Pagespeed insights
    4. Lighthouse od Googlu
    5. Pingdom Tools
    6. WebPageTest
    7. GTmetrix
  4. Nástroje pro Monitoring & Analýzu
    1. Munin
    2. Zabbix
    3. Percona
    4. Configuration Wizard
    5. Query Advisor
    6. Monitoring and Management
    7. Blackfire.io
    8. Terminál
    9. Příkaz htop
  5. Část druhá – Jak zrychlit server
    1. Na co se v této části podíváme?
    2. Odezva serveru neboli TTFB
    3. Edge computing: výkon blíž uživateli
    4. CDN
    5. Jak nasadit CDN?
    6. Zrychlete načítání s Gzip + Brotli
    7. Výhody Gzipu
    8. Výhody Brotli
    9. Doporučené nasazení
    10. Příklad aktivace Brotli v Nginxu:
    11. HTTP Keep-Alive? Jen pokud jste na starším HTTP/1.1
  6. Cache – základ rychlého webu
    1. Varnish HTTP Cache
    2. Memcached
    3. APC User Cache
    4. OPCache
    5. Nastavení cache v .htaccessu
    6. HTTP/2/3 + QUIC
    7. Co přináší HTTP/3 a QUIC?
    8. Optimalizace PHP
    9. RAM a RAMdisk
    10. RAMDISK – turbo složka pro dočasná data
  7. Část třetí – Jak zrychlit web
    1. Frontendové optimalizace: Minifikace (HTML, CSS a JS)
    2. Optimalizace obrázků
    3. Doporučené nástroje
    4. Pozor na častá přesměrování
    5. Odložení načítání Javascriptu
    6. Preload / Prefetch / Prerender / Preconnect
    7. Prefetch
    8. 3. Prerendering
    9. Lazy Loading obrázků
    10. Kdy a kde funkci tedy použít?
  8. Část čtvrtá – Jak zrychlit databáze
    1. Co databáze potřebuje
    2. Nedělejte z MySQL sklad dat v čekárně
    3. Nesoustřeďte se tolik na konfiguraci
    4. Online nástroje, které pomohou
    5. Pozor na pagination queries
    6. Věnujte pozornost indexování
    7. Slow query log
    8. Elasticsearch
    9. Redis
  9. Část pátá – Jak zrychlit WordPress
  10. Doporučené pluginy pro WordPress
    1. Optimalizace obrázků
    2. Minifikace JS a CSS
    3. Cache
    4. Monitoring
← Zpět na všechny články blogu

MEGA článek: Jak zrychlit web, server a databáze?

Iveta Zlatníčková
Iveta Zlatníčková Aktualizováno 25. 6. 2025 – 46 min. čtení
Blog
  1. Obsah
  2. Proč se vůbec trápit rychlostí?
  3. Začínáme: co měřit a proč
    1. Důležitá Core web vitals metrika: INP (Interaction to Next Paint)
    2. Proč už ne FID?
    3. Pagespeed insights
    4. Lighthouse od Googlu
    5. Pingdom Tools
    6. WebPageTest
    7. GTmetrix
  4. Nástroje pro Monitoring & Analýzu
    1. Munin
    2. Zabbix
    3. Percona
    4. Configuration Wizard
    5. Query Advisor
    6. Monitoring and Management
    7. Blackfire.io
    8. Terminál
    9. Příkaz htop
  5. Část druhá – Jak zrychlit server
    1. Na co se v této části podíváme?
    2. Odezva serveru neboli TTFB
    3. Edge computing: výkon blíž uživateli
    4. CDN
    5. Jak nasadit CDN?
    6. Zrychlete načítání s Gzip + Brotli
    7. Výhody Gzipu
    8. Výhody Brotli
    9. Doporučené nasazení
    10. Příklad aktivace Brotli v Nginxu:
    11. HTTP Keep-Alive? Jen pokud jste na starším HTTP/1.1
  6. Cache – základ rychlého webu
    1. Varnish HTTP Cache
    2. Memcached
    3. APC User Cache
    4. OPCache
    5. Nastavení cache v .htaccessu
    6. HTTP/2/3 + QUIC
    7. Co přináší HTTP/3 a QUIC?
    8. Optimalizace PHP
    9. RAM a RAMdisk
    10. RAMDISK – turbo složka pro dočasná data
  7. Část třetí – Jak zrychlit web
    1. Frontendové optimalizace: Minifikace (HTML, CSS a JS)
    2. Optimalizace obrázků
    3. Doporučené nástroje
    4. Pozor na častá přesměrování
    5. Odložení načítání Javascriptu
    6. Preload / Prefetch / Prerender / Preconnect
    7. Prefetch
    8. 3. Prerendering
    9. Lazy Loading obrázků
    10. Kdy a kde funkci tedy použít?
  8. Část čtvrtá – Jak zrychlit databáze
    1. Co databáze potřebuje
    2. Nedělejte z MySQL sklad dat v čekárně
    3. Nesoustřeďte se tolik na konfiguraci
    4. Online nástroje, které pomohou
    5. Pozor na pagination queries
    6. Věnujte pozornost indexování
    7. Slow query log
    8. Elasticsearch
    9. Redis
  9. Část pátá – Jak zrychlit WordPress
  10. Doporučené pluginy pro WordPress
    1. Optimalizace obrázků
    2. Minifikace JS a CSS
    3. Cache
    4. Monitoring

(aneb „nejdřív změř, pak mačkej plyn“)

V tomto článku se podíváme na všechno, co vás přiblíží k dokonale rychlému webu. Postupně si projdeme vše důležité na serveru, v databázi a také to, co můžete ovlivnit na samotném webu. Pokud budete mít nějaké tipy či zajímavé příklady, tak nám je určitě napište! Článek chceme udržovat aktuální.

Proč se vůbec trápit rychlostí?

  • Google dnes měří nervy svých uživatelů stopkami – a pomalé weby nechává vzadu.
  • Každá sekunda navíc může na e-shopu sebrat klidně 10 % konverzí.
  • Váš obsah může být sebelepší, ale kdo čeká déle než dvě vteřiny, mává se slovy „čau-bambíno“.
NástrojCo umí za pár vteřinProč ho milujeme
PageSpeed InsightsBody za rychlost + konkrétní úkolyGoogle diktuje tempo, tak posloucháme
LighthouseAudit výkonu, přístupnosti, SEOBěží i lokálně v Chrome DevTools
Pingdom ToolsVodopád načítání + historieFajn k benchmarku před/po úpravách
GTmetrixNyní postavený na Lighthouse + Google Core Web Vitals (dříve používal YSlow)Skvělý přehled v jednom grafu
WebPageTestTest z různých kontinentůUkáže, co brzdí lidi na druhém konci světa

Začínáme: co měřit a proč

Než sáhnete do kódu, potřebujete tvrdá data. A taky hlídače, který spustí poplach dřív, než vám zákazníci utečou. Malému firemnímu webu vystačí jednoduchý „budík“ – u velkého portálu nebo e-shopu musíte počítat s kompletní armádou senzorů.

TIP: První test si uložte jako „nultý bod“. Za měsíc uvidíte, kolik jste ubrali sekund – a bude co slavit.

Důležitá Core web vitals metrika: INP (Interaction to Next Paint)

INP je součástí Core web vitals neboli základních životních funkcí webu. Jde o sadu metrik, které jsou klíčové pro Google a které používá k hodnocení uživatelského zážitku na webu. Měří rychlost načítáníinteraktivitu vizuální stabilitu webu a mají přímý vliv na pohodlí uživatelů během procházení stránek.

O všech těchto metrikách se podrobněji rozepisujeme v jiném článku.

Donedávna byla jednou z důležitých metrik také FID (First Input Delay), jenže tu pro své nedostatky (od března 2024) Google oficiálně nahradil metrikou INP.

Proč už ne FID?

FID sice měřil zpoždění prvního vstupu, ale nezachytil plnou realitu – většina problémů se totiž objevuje po prvním kliknutí. INP tak poskytuje přesnější obrázek o tom, jak web reaguje během celé návštěvy.

INP měří celkovou odezvu na uživatelskou interakci – tedy od chvíle, kdy uživatel klikne nebo interaguje s prvkem na stránce, až po moment, kdy se prohlížeč na tuto akci vizuálně zareaguje (třeba přepnutím stavu nebo změnou obsahu).

Metrika INP zároveň výrazně ovlivňuje hodnocení výkonu webu v nástroji PageSpeed Insights i v Google Search Console.

Metrika INP je výzvou zejména pro projekty postavené na JavaScriptu, JS frameworcích, AJAXu nebo analytických službách. Čím více těchto technologií web využívá, tím složitější je dosáhnout dobrých výsledků. Některé metody, například odložení načítání JavaScriptu (JS delay), mohou mít na INP dokonce negativní dopad.

Wratislav Tobola z Kompletního průvodce zrychlením webů

Jak INP vylepšit?

  • Ujistěte se, že interaktivní prvky nezpomalují celý hlavní vlákno (main thread)
  • Odložte načítání zbytečných JavaScriptů (async nebo defer)
  • Optimalizujte event-handlery, které běží při kliknutí.
  • Používejte lazy-loading a prerendering.

O INP, a o tom jak jej optimalizovat, jsme se detailněji rozepsali v našem průvodci zrychlením webů.

Pagespeed insights

Jak nástroj funguje? Stačí vložit URL webu, který chcete otestovat a chvilku počkat. Po chvíli uvidíte podrobnou analýzu, jako v našem příkladu:

Uvidíte své celkové skóre, informace o prvním vykreslení obsahu anebo prodlevu prvního vstupu. Google rozdělil rychlost webu do více části. Také se barevně snaží ukázat, jaká je normální hodnota pro danou oblast.

Nástroj nově hodnotí i Interaction to Next Paint (INP) – klíčovou metriku pro posuzování odezvy webu. Uvidíte ji v přehledu Core Web Vitals hned vedle LCP a CLS.

Celkové skóre je rozdělené pro mobilní a desktopové zařízení a barevně označuje jednotlivé oblasti (dobré, průměrné, špatné). V grafech snadno odhalíte, co je potřeba zlepšit.

Pozn. redakce: Nenechte se zbytečně rozhodit, pokud neuvidíte 100 bodů. PSI hodnotí vždy jen jednu konkrétní stránku a ne celý web. Martin Michálek stručně a jasně vysvětluje, jak tyto nástroje fungují a na co si dát bacha:

PageSpeed Insights vám dá základní přehled o tom, co se na vašem webu technicky děje – což je jako start ideální.

🔍 Pokud ale chcete detailnější rozbor všech stránek naráz, doporučujeme český nástroj pagespeed.cz, který web proskenuje celý a ukáže slabá místa v širším kontextu.

Lighthouse od Googlu

Další šikovný nástroj z dílny Googlu – Lighthouse – pomáhá odhalit problémy na úrovni designu, frontendu i výkonu. Hodí se pro kontrolu:

  • rychlosti načítání stránky.
  • přístupnosti pro všechny uživatele.
  • SEO připravenosti.
  • a struktury PWA (Progressive Web Apps).

Lighthouse je dnes základ nejen pro vývojáře, ale i pro všechny, kdo chtějí pochopit, proč jejich web neběží jako blesk.

Jak ho spustit?

Proč ho používat pravidelně?

  • Můžete si nastavit automatické audity po každém nasazení nové verze webu.
  • Uvidíte jasně největší brzdící faktory (např. velké JS bundly, blokující CSS nebo špatnou mobilní použitelnost).
  • U každého problému najdete konkrétní návod na opravu.
  • Výstupy jsou barevně označené a snadno čitelné i pro laiky.

Pingdom Tools

Pingdom Tools je vizuálně přívětivý nástroj pro měření rychlosti webu. Nedává sice tak detailní doporučení jako nástroje od Googlu, ale zato nabídne přehlednou časovou osu načítání stránky, kterou si zamilují i netechnické duše.

Co všechno ukáže?

  • Waterfall loading – tedy přesnou časovou osu všech požadavků (kdy a jak dlouho se načítal který soubor).
  • Přehled velikosti: kolik dat zabírají skripty, obrázky, CSS, HTML atd.
  • Zastoupení elementů podle typu (v %) a jejich vliv na načítání.
  • Počet požadavků na server – jak moc je váš web náročný na server.
  • Externí domény – odkud se obsah stahuje a jak dlouho to trvá.
Časová osa načítání stránky

Skvěle se hodí pro:

  • benchmark před a po úpravách.
  • rychlou vizuální diagnostiku webu.
  • kontrolu CDN a assetů (např. jak dlouho se načítá cokoliv z Facebooku, Google Fonts nebo externí reklamy).

I když nástroj nedává konkrétní rady, pomůže vám najít podezřelé „brzdy“ a zpomalující elementy. O zbytek se pak může postarat například Lighthouse nebo zkušený vývojář.

Podrobný rozpis

WebPageTest

WebPageTest je robustní nástroj, který se hodí hlavně pokročilejším uživatelům (například už zkušenějším web developerům). Funguje podobně jako Pingdom, ale nabízí mnohem více možností a nastavení – ideální pro detailní diagnostiku webu.

Je ideální volba, pokud chcete mít jistotu, že optimalizace fungují i v reálných podmínkách na různých zařízeních a rychlostech.

Co umí navíc oproti Pingdomu?

  • Tři testy v řadě – takže výsledky jsou průměrovány, ne zkreslené jedním výkyvem.
  • Test z různých prohlížečů i zařízení (Chrome, Firefox, mobilní režim).
  • Simulace připojení – změňte síť (např. LTE, Wi-Fi, 3G) a zjistíte, jak se web chová v různých podmínkách.
  • Možnost vypnout JavaScript, uložit HTML/CSS odpovědi nebo nastavit vlastní skripty pro interakci.
Starší, ale o to vychytanější

Výstup obsahuje:

  • Detailní waterfall grafy.
  • Hodnocení Core Web Vitals.
  • Porovnání před/po úpravách pomocí videa.
  • Přesné měření TTFB, INP, LCP a dalších klíčových metrik.

Doporučujeme kombinovat:

  1. PageSpeed Insights (rychlá analýza + konkrétní rady).
  2. WebPageTest (hlubší sonda pod kapotu).
Podrobný rozpis načítání a následné známky

GTmetrix

GTmetrix býval známý hlavně tím, že kombinoval výsledky z PageSpeed + YSlow. Dnes už je to minulost – GTmetrix používá stejné jádro jako Lighthouse a zaměřuje se na Core Web Vitals metriky (LCP, INP, CLS).

Co GTmetrix umí dnes?

  • Vizuálně podobný výstup podobný tomu z PageSpeed, ale ve vizuálně přehlednější formě.
  • Měří výkon pro mobilní i desktopovou verzi.
  • Barevné hodnocení, detailní vodopád, graf závislostí.
  • Možnost volby testovací lokality (i Evropu, USA, Asie).
  • Historii testů – můžete sledovat zlepšení/zhoršení v čase.
  • Porovnání výsledků po optimalizaci (před a po).

GTmetrix navíc umožňuje:

  • Nahrát video z načítání stránky – vidíte, kdy se „něco děje“.
  • Exportovat report jako PDF pro klienta nebo celý tým.

Doporučujeme používat GTmetrix v kombinaci s PageSpeed Insights – každý nástroj ukazuje trochu jinou perspektivu, ale dohromady dají přesný obrázek o stavu webu.

Nástroje pro Monitoring & Analýzu

Klasické online nástroje nám pomohou odhalit jenom malou část problémů a na složitější věci, je potřeba mít nasazený nějaký lepší monitoring. Ten může hlídat klasický provoz na serveru/databázi a také analyzovat různé dotazy nebo procesy, které způsobují zpomalení.

Munin

Munin má připravený už v základu VPS Centra každý majitel serveru. Díky Muninu můžete sledovat různé systémové prostředky.

Na blogu máme detailní článek ohledně monitoringu serveru právě pomocí Muninu. Rozebíráme v něm, jak grafy správně číst, a co vlastně znamenají.

Munin podporuje i tzv. pluginy, které přidávají novou monitorovací funkci, která není v základu. Doporučujeme nainstalovat pluginy pro databáze a RAM. Grafy si můžete zobrazit v různých variantách – denní, týdenní, měsíční i roční.

Grafy v Muninu a defaultní kategorie

V základní instalaci můžete hlídat Apache, zapisovat na disk, sledovat provoz na síti, prohlížet si podrobnější informace o procesech atd.

Munin vám pomůže hlavně při řešení problémů, protože během pár kliknutí dokážete zjistit, jaká část serveru se nechová správně. Díky pluginům si z něj zvládnete udělat všestranný švýcarský nůž přímo na serveru. 🙂

Zabbix

Modernější verze Muninu se jmenuje Zabbix. Je to open source, který má neuvěřitelnou škálu funkcí už v základu, má krásný design, podporuje pluginy, ale jedná se už o robustnější řešení, které si ze serverových prostředků ukrajuje mnohem víc než Munin.

Krásný design a ještě lepší funkce, to je Zabbix.

Zabbix také podporuje pluginy, kterými si můžete nainstalovat a rozšířit jeho funkcionalitu. Od sítě, přes databáze až po integrování monitorování aplikací 3 stran. Doporučujeme prozkoumat všechny možnosti. Budete mile překvapeni.

Co všechno umí Zabbix monitorovat

Nástroj se hodí pro monitoring a díky velkému množství pluginů ho použijete i pro vyladění různých procesů a dotazů do databáze.

Percona

Percona se specializuje hlavně na databáze a dovoluje více možností, kterými dokáže pomoci. Soustředí se na MySQL a k dispozici máte open source software, který můžete využít přímo na serveru.

Configuration Wizard

Na webu mají “konfiguračního pomocníka”, který se v 7 krocích snaží zjistit informace o používání vašeho serveru a databáze. Všechno je jednoduše vysvětleno a na konci dostanete celý konfigurační soubor, který si můžete stáhnout a z kopírovat na server.

Vygenerovaný konfigurační soubor

Jediné, co po vás Percona chce je registrace. Konfigurace se nedoporučuje provádět již na zaběhlých projektech, ale spíše na nových. Pokud budete konfiguraci měnit na zaběhnutém webu, určitě si uložte kopii původní konfigurace a v případě problému ji ihned vraťte.

Query Advisor

Díky zkušenostem si Percona mohla dovolit umístit na web svého šikovného poradce, který poradí při dotazech do databáze. Jednoduše vložíte dotaz a během chvíle dostanete zpětnou vazbu.

Tohle chcete vidět pokaždé. :-)

Pokud je dotaz v pořádku, dostanete pochvalu, ale pokud se mu něco nezdá, dostanete upozornění, na co si dát pozor a jestli nemůžete dotaz upravit trochu jinak.

Monitoring and Management

Můžete si stáhnout monitorovací nástroj, který bude chod databáze na vašem serveru monitorovat. Všechny důležité aspekty databáze budete mít přehledně na jedné stránce.

Uvidíte rychlost zápisu dat na disk, propustnost sítě, vytížení CPU, a hlavně jednotlivé dotazy, jak zatěžují databázi.

Rozpis jednotlivých dotazů do databáze

Díky tomuto nástroji dokážete svojí databázi krásně vyladit. Doporučujeme projít jejich návod k monitoringu.

Blackfire.io

Je tzv. „profiler„, který podrobně ukáže, co se v kódu děje a jak to dlouho trvá jeho načtení. Navíc dokáže hezky z vizualizovat a dokážete si mnohem lépe udělat představu, jak váš kód funguje.

Instalace je trochu složitější, ale určitě stojí za námahu, pokud chcete své PHP aplikace vyladit na maximum.

Mrkněte, co umí:

Blackfire disponuje i Free verzí tzv. “Hack”, kde ale můžete profilovat pouze na lokálu a pro produkční server je potřeba mít nejnižší verzi od 29 EUR měsíčně. Placené tarify mají 15denní trial bez nutnosti zadávat kreditní kartu.

Rozklad kódu

Terminál

Přístup na SSH s právy roota dostane k našim serverům každý a když nemáme po ruce žádný nástroj z výše zmíněných, tak terminál je vždy jistota.

Podíváme se na jeden příkaz, který se bude hodit každému. Tady máte návod, jak se připojit na SSH.

Příkaz htop

Je to barevnější a promakanější verze příkazu “top”, vypíše všechny běžící a spící procesy.

Během chvíle, tak zjistíte momentální využití RAM, SWAPu nebo CPU. Hlavně ale uvidíte veškeré procesy a můžete si je po kliknutí v horní liště např. seřadit podle využití RAM nebo CPU.

Výpis běžících procesů na serveru

Dole máte akční lištu a pomocí kláves F1 až F10 můžete provádět různé akce. Rozebereme si všechny.

F1 – Help

Zde najdete všechny informace k ostatním “F” a jak se v HTOP orientovat. Je to velice podobné Midnight Commanderu, kde můžete využívat šipky a myš.

F2 – Setup

Celý panel si můžete přizpůsobit a upravit podle sebe. Ať už se jedná o přidání či odebrání parametrů do sloupce anebo v jaké barvě se to má zobrazovat.

Celou tabulku si můžete přizpůsobit

F3 – Search

Napíšete jméno procesu, který hledáte a ten se žlutě zvýrazní a pomocí klávesy F3 přeskočíte na další stejnojmenný proces.

F4 – Filter

Má stejnou funkci jako “Search”, ale místo zvýraznění jednotlivého procesu všechny se stejným názvem vyfiltruje, takže vidíte pouze tyto procesy.

F5 – Tree

Velice užitečná funkce se skrývá pod klávesou F5, která všechny procesy rozvětví podle toho, jak jsou na sobě vázaný. Pomocí F5 vrátíte procesy do původního stavu.

F6 – SortBy

Můžete si všechny procesy seřadit podle toho, jak využívají CPU, RAM anebo podle uživatele či priority.

F7 – Nice- F8 – Nice+

Po kliknutí na jednotlivý proces můžete pomocí klávesnice F7 snížit o jeden bod prioritu anebo pomocí F8 naopak navýšit.

F9 – Kill

Pokud proces zlobí anebo bere dost prostředků, tak po vybrání procesu a stisknutí F9 můžete procesu vyslat signál, kterým ho ukončíte. Jedná se o signal 15 – SIGTERM anebo 9 – SIGKILL.

A nakonec pomocí klávesnice F10 htop ukončíte.

Příkazů je mnohem víc, ale tenhle je nejvíce přehledný a během chvíle dokáže i nováček zjistit, co se děje a vyřeší problém sám. Další příkazy už vyžadují širší know-how o Linuxu a jeho fungování.

Část druhá – Jak zrychlit server

Nejdůležitější část ze všech je samozřejmě server. Na něm jsou všechny data uložena, web server vyřizuje požadavky klientů a můžete si na server nainstalovat různé pomocníky, kteří s rychlostí pomůžou. 

Na co se v této části podíváme?

  • TTFB – Time to First byte a Edge computing
  • CDN
  • Gzip + Brotli komprese
  • Cache (varnish, memcache, APC, opcache) + Nastaveni cache v .htaccessu
  • HTTP/2
  • PHP
  • Ramdisk

Odezva serveru neboli TTFB

TTFB – Time to First Byte – měří, jak dlouho trvá, než prohlížeč dostane první bajt odpovědi ze serveru. Pokud uživatel čeká moc dlouho, než se vůbec něco zobrazí, nejspíš web opustí ještě dřív, než se vykreslí logo.

Co může TTFB zpomalovat?

  • Špatně navržená aplikace nebo pomalé PHP skripty.
  • Databázové dotazy (např. bez indexace).
  • Přetížený server (málo RAM, pomalý disk).
  • Poloha serveru daleko od návštěvníka.
  • Zbytečně závislý web na externích službách (API, iframy, externí knihovny)

Co pomůže?

  • Používat CDN – statický obsah bude servírovaný blíž k uživateli.
  • Nastavit pokročilou server-side cache.
  • Redukovat závislost na databázi.
  • A hlavně: využívat edge computing.

Edge computing: výkon blíž uživateli

Zatímco tradiční hosting běží z jednoho místa, edge computing rozmisťuje výkon po světě – často přímo v rámci CDN. Místo toho, aby požadavek cestoval do datacentra v Německu, odpoví server na hraně sítě třeba z Vídně nebo Ostravy.

Což přináší výhody:

  • TTFB je rychlejší = spokojenější uživatel.
  • Lepší škálovatelnost pro nárazový provoz.
  • Vhodné pro dynamické weby, e-shopy, SaaS i WordPress.

CDN

CDN je síť serverů po celém světě, která slouží k rychlejšímu doručování dat uživatelům. Základní princip je jednoduchý – obsah webu se ukládá (cachuje) na servery v různých regionech a pak se načítá z toho, který je uživateli nejblíž.

Díky tomu se:

  • Výrazně zkrátí doba načítání.
  • Sníží přenosové zatížení původního serveru.
  • Optimalizuje zážitek i na mobilních a pomalých sítích.
  • A uživatelé vám neutečou. 🙂

Poskytovatelů CDN je mnoho a na této stránce můžete otestovat všechny najednou.

Jak nasadit CDN?

Nahraďte odkazy na statický obsah (obrázky, CSS, JS) CDN URL adresou:

<!-- Původně -->
<img src="/images/banner.jpg">

<!-- S CDN -->
<img src="https://cdn.vas-hosting.cz/images/banner.jpg">

Můžete využít i CNAME aliasy, např. static.vas-hosting.czcdn.cdn77.com

U některých CDN (např. Cloudflare) stačí jen změnit DNS servery – a vše ostatní jede automaticky přes jejich síť.

Většina poskytovatelů má tuto službu zpoplatněnou, ale nejedná se o žádné velké částky a pokud vaše podnikání stojí na internetu, tak těch pár desítek/stovek dolarů za rok dokážete oželet. Nebudete této investice litovat.

Vyzkoušejte nástroj cdnperf.com – porovná rychlost různých CDN z různých koutů světa.

Cloudflare má ovšem i Free verzi a jediné co stačí je změnit DNS servery u domény a pak v administraci provést nastavení.

Jak funguje CDN

Na blogu máme celý článek o Cloudflare. Jeho největší výhoda, že pomáhá i s optimalizací stránky. U některých projektů pomůže opravdu dost a u jiných zase tolik ne. Je třeba to vyzkoušet a pohrát si s nastavením.

Zrychlete načítání s Gzip + Brotli

Kompresní algoritmy jsou jednoduchý, ale efektivní způsob, jak výrazně zrychlit načítání webu.

Gzip je starší, ale stále hojně používaný – a výhodný hlavně tam, kde chybí podpora modernějšího Brotli.

Brotli je novější formát od Googlu, který dosahuje vyšší komprese než Gzip, a to při nižší zátěži CPU. Moderní prohlížeče ho podporují naplno.

Výhody Gzipu

  • Umí zmenšit velikost přenášených dat až o 70 %.
  • Je podporovaný všemi prohlížeči (fallback jistota).
  • Snadno se nasazuje přes .htaccess nebo serverovou konfiguraci.

Výhody Brotli

  • Lepší kompresní poměr než Gzip (až o 15–20 % menší soubory)
  • Lepší výkon u statických souborů (CSS, JS, HTML)
  • Ideální pro HTTP/2 a HTTP/3

Doporučené nasazení

  • Používejte Brotli jako primární kompresi, pokud to server umožňuje.
  • Gzip nechte jako fallback – pro starší zařízení nebo prohlížeče.
  • V nginx / Apache lze nastavit oba algoritmy a přepínat podle hlavičky Accept-Encoding.

Příklad aktivace Brotli v Nginxu:

brotli on;
brotli_comp_level 6;
brotli_types text/plain text/css application/javascript application/json image/svg+xml;

Kompresi můžete ověřit např. na tools.keycdn.com/brotli-test nebo gtmetrix.com.

Na našich serverech je defaultně aktivovaný, ale pokud máte server jinde, můžete jej aktivovat v .htaccess následovně:

# Compress HTML, CSS, JavaScript, Text, XML and fonts

AddOutputFilterByType DEFLATE application/javascript

AddOutputFilterByType DEFLATE application/rss+xml

AddOutputFilterByType DEFLATE application/vnd.ms-fontobject

AddOutputFilterByType DEFLATE application/x-font

AddOutputFilterByType DEFLATE application/x-font-opentype

AddOutputFilterByType DEFLATE application/x-font-otf

AddOutputFilterByType DEFLATE application/x-font-truetype

AddOutputFilterByType DEFLATE application/x-font-ttf

AddOutputFilterByType DEFLATE application/x-javascript

AddOutputFilterByType DEFLATE application/xhtml+xml

AddOutputFilterByType DEFLATE application/xml

AddOutputFilterByType DEFLATE font/opentype

AddOutputFilterByType DEFLATE font/otf

AddOutputFilterByType DEFLATE font/ttf

AddOutputFilterByType DEFLATE image/svg+xml

AddOutputFilterByType DEFLATE image/x-icon

AddOutputFilterByType DEFLATE text/css

AddOutputFilterByType DEFLATE text/html

AddOutputFilterByType DEFLATE text/javascript

AddOutputFilterByType DEFLATE text/plain

AddOutputFilterByType DEFLATE text/xml

# Remove browser bugs (only needed for really old browsers)

BrowserMatch ^Mozilla/4 gzip-only-text/html

BrowserMatch ^Mozilla/4.0[678] no-gzip

BrowserMatch bMSIE !no-gzip !gzip-only-text/html

Header append Vary User-Agent

HTTP Keep-Alive? Jen pokud jste na starším HTTP/1.1

Dříve se používalo HTTP Keep-Alive, které umožňovalo opakovaně využívat stejné TCP spojení pro více požadavků. Tím se snižovalo zpoždění a urychlovalo načítání.

💡 Ale pozor: Pokud už váš web běží na HTTP/2 nebo HTTP/3 (což by měl), Keep-Alive není potřeba – multiplexing a efektivní správa spojení jsou součástí samotného protokolu.

Máte stále HTTP/1.1?

Pokud používáte starší verzi protokolu, může být vhodné Keep-Alive zapnout:

KeepAlive On
MaxKeepAliveRequests 100
KeepAliveTimeout 5

Ale obecně doporučujeme spíš přejít na HTTP/2 nebo 3 – získáte modernější správu připojení bez ručního ladění.

📌 Zjistit, na jaké verzi HTTP běží váš web, můžete například tady:
tools.keycdn.com/http2-test

Cache – základ rychlého webu

Cache funguje jako šikovný mezisklad: když už něco jednou načtete, příště to dostanete raz dva. Web tak nemusí stále dokola generovat tu samou odpověď, což šetří čas i výkon.

Existuje několik vrstev cache:

  1. Prohlížečová cache – soubory si ukládá uživatel u sebe.
  2. Serverová cache – generuje HTML jednou a pak ho podává všem.
  3. CDN cache / edge cache – odpověď se uloží na hraně sítě, blízko uživateli.
  4. Objektová cache (např. Redis, Memcached) – ukládá výstupy z databáze nebo opakujících se výpočtů.

Co doporučujeme?

  • U statických souborů nastavte Cache-Control a Expires hlavičky (v .htaccess)
  • U WordPressu používejte moderní cache pluginy, které řeší celý proces za vás. Doporučujeme:
    • WP Rocket (sice je placený, ale spolehlivý).
    • FlyingPress (rychlý, šikovný, vhodný pro náročné).
    • LiteSpeed Cache (perfektní, pokud používáte LiteSpeed server).

Na serveru můžete zapojit i:

  • OPCache – ukládá zkompilovaný PHP kód
  • Redis nebo Memcached – cache pro výsledky databázových dotazů
  • Varnish – reverzní proxy cache před web serverem, ideální pro větší provoz

📌 Tip: Nespoléhejte se jen na jednu vrstvu. Kombinace správně nastavené prohlížečové cache, edge cache přes CDN a serverové cache vám může ušetřit celé vteřiny.

<filesMatch ".(css|jpg|jpeg|png|gif|js|ico)$"> Header set Cache-Control "max-age=2628000, public" 

Varnish HTTP Cache

Je webová aplikace neboli reverzní proxy, kterou můžete nainstalovat před jakýkoliv server, který rozumí HTTP a můžete jej nastavit, aby cachoval obsah.

Více informací ve videu

Pro WordPress je dost používané combo Nginx + Varnish + Apache, který dokáže vyřizovat požadavky mnohem rychleji, a ještě pro větší počet uživatelů. Na Linuxexpresu najdete trochu toerie i s návodem na instalaci celé sestavy.

Memcached

Je jednoduchý deamon, který má alokované množství paměti, kam může aplikace uložit dočasná data ke kterým může následně deamon přistupovat a ulevit serveru od zátěže.

Můžete tam uložit důležitá a často používaná data jako jsou dotazy z databáze, dotazy pro API nebo na vykreslování stránky.

Spousta lidí si jej chválí hlavně kvůli své jednoduchosti, ale přitom zůstává výkonný. Pár příkladu, kdo používá memcached: Wikipeda, Flick, WordPress.com, Craiglist.

APC User Cache

Jedná se o následovníka APC (nahradil jej OPCache), který se už neaktualizuje a je považován za mrtvý projekt. Jedná se o PHP extension, kterou si lze doinstalovat a byl vytvořen pro cachování a optimalizaci kódu v mezipaměti.

Pokud tedy potřebujete nějakou funkci z APC a není k dispozici v OPCache, můžete využít právě APCu.

OPCache

Je PHP extension, která pomáhá zvýšit výkon PHP tím, že si ukládá předkompilovaný skripty ve sdílené paměti čímž odstraní potřebu PHP načíst a analyzovat skripty po každé žádosti.

To ušetří spousty prostředků pro server, který se můžou využít mnohem užitečnější než neustále pro ty stejné procesy neustále dokola. Instalace i nastavení je celkem jednoduché a když to využijete s kombinací výše zmíněných pomocníků, tak dosáhnete skvělých výsledků.

Je zabalený v PHP od verze 5.5, ale defaultně je vypnutý. Lze nainstalovat i složitěji na starší verze, ale když čas využijete pro přepsání aplikace do PHP 7+, tak uděláte mnohem líp.

Do php.ini stačí přidat tento řádek:

zend_extension=/full/path/to/opcache.so

Po úspěšné “instalaci” můžete upravit nastavení na tyto doporučené hodnoty, také v php.ini.

opcache.memory_consumption=128

opcache.interned_strings_buffer=8

opcache.max_accelerated_files=4000

opcache.revalidate_freq=60

opcache.fast_shutdown=1

opcache.enable_cli=1

Podrobnější informace o konfiguraci naleznete na oficiálních stránkách.

Nastavení cache v .htaccessu

Další pomůcka, která dokáže nastavit cache na straně klienta je náš pomocník .htaccess. Větší rychlosti webu se dá docílit menšího počtů požadavků při načítání stránky.

V .htaccessu dokážeme ukládat skripty, obrázky anebo styly do vyrovnávací paměti a tím zrychlit načítání stránky a snížit počet požadavků.

Výsledek může vypadat takto:

ExpiresActive On

ExpiresDefault "access plus 1 seconds"

ExpiresByType text/html "access plus 1 seconds"

ExpiresByType image/x-icon "access plus 2592000 seconds"

ExpiresByType image/gif "access plus 2592000 seconds"

ExpiresByType image/jpeg "access plus 2592000 seconds"

ExpiresByType image/png "access plus 2592000 seconds"

ExpiresByType text/css "access plus 604800 seconds"

ExpiresByType text/javascript "access plus 86400 seconds"

ExpiresByType application/x-javascript "access plus 86400 seconds"
  • access plus *** seconds – nastavuje, jak dlouho má být soubor uložený v cache než bude považován za expirovaný a stáhne se znova
  • ExpiresDefault – nastaví u nedefinovaných souborů defaultní hodnotu expirace
  • */* označíte typ cachovaného souboru

Můžete využít i jednoduchý generátor, kde zadáte typ souboru a jak dlouho se má držet v cache.

HTTP/2/3 + QUIC

HTTP/2 je dnes už standardem pro většinu moderních webů. Ale kdo chce být ještě o krok napřed, měl by sledovat i HTTP/3, který sází na nový přenosový protokol QUIC.

Proč HTTP/2?

  • Multiplexing – více požadavků v jednom spojení bez blokování
  • Prioritizace obsahu – např. načítání CSS dřív než obrázků
  • Binární přenos – efektivnější a méně náchylný k chybám
  • Redukuje potřebu minifikace a slučování souborů – menší, oddělené soubory mohou být výhodnější

HTTP/2 aktivujeme u nás automaticky – nemusíte nic nastavovat.

Co přináší HTTP/3 a QUIC?

  • Rychlejší navazování spojení – díky UDP místo TCP.
  • Lepší stabilitU na mobilních sítích – když přepnete z Wi-Fi na LTE, spojení pokračuje bez výpadku.
  • Šifrování (TLS) je povinné a nativní.
  • Omezuje problémy s packet loss, které trápily TCP.

Ověřit verzi HTTP a aktivaci QUIC můžete na: https://http3check.net/

📌 Doporučení: Pokud váš hosting HTTP/3 nepodporuje, zatím se nic neděje – HTTP/2 stačí. Ale do budoucna určitě zkontrolujte, zda ho lze aktivovat (např. Cloudflare jej už zapíná automaticky).

Optimalizace PHP

PHP je srdcem vašeho webu – a čím rychleji tluče, tím svižněji vše běží.
Zastaralé verze (např. 5.x nebo 7.0) by dnes už neměly vůbec běžet, nejen kvůli rychlosti, ale hlavně kvůli bezpečnosti.

Verze PHP dnes?

  • PHP 8.2 a 8.3 jsou aktuální standard.
  • PHP 8.5 už klepe na dveře.
  • Starší verze (7.x a níž) mají ukončenou podporu = zvýšené bezpečnostní riziko.

Co v PHP ladit?

  • Zjednodušte kód – složité funkce rozdělte, nepoužívejte zbytečné knihovny.
  • Využívejte typování a novinky v jazyce – pomůže vám IDE i statická analýza.
  • Měřte reálný výkon – s nástroji jako Blackfire.io, [Xdebug] nebo [New Relic] (viz sekce výše).
New Relic v plné kráse

OPCache – jednoduchý boost zdarma

OPCache je PHP extension, která ukládá zkompilované skripty do paměti. Tím se výrazně sníží zatížení serveru – PHP nemusí vše znovu analyzovat při každém požadavku.

Stačí v php.ini aktivovat:

opcache.enable=1
opcache.memory_consumption=128
opcache.max_accelerated_files=10000

Pluginy jako WP Rocket nebo W3 Total Cache umí s OPCache dobře spolupracovat.

📌 Tip: Zkontrolujte si ve svém hostingu, jestli běžíte na podporované verzi PHP – a aktualizujte i WordPress a jeho pluginy, aby byly s novou verzí kompatibilní.

Podobným nástrojem je Datadog, který je mnohem levnější (15 USD/měs) a dokáže podobné věci jako New Relic, ne tak podrobně nebo vizuálně hezky, ale zjistíte o PHP, co potřebujete.

Levnější verze

RAM a RAMdisk

Operační paměť (RAM) je klíčová pro výkon serveru. Když jí máte dost, běží web svižně. Když dochází, začne server šahat na disk (swap), a tam už se rychlost láme.

Je tedy důležité operační paměť pravidelně sledovat a v případě problému včas zakročit. U nás na serveru máte předinstalované s VPS Centrem dvě aplikace Munin a phpSysinfo, kde uvidíte, jak si RAM vede.

Jak RAM ovlivňuje web?

  • Server si do RAM ukládá mezipaměť (cache) – např. často načítané PHP skripty, databázové dotazy nebo obrázky.
  • Když dojde RAM, všechno se dramaticky zpomalí.
  • Sledujte využití RAM přes htop nebo free -g (přes SSH).

Tip: Pokud se váš web zničehonic zpomalí, RAM bývá jeden z prvních viníků. Sledujte Munin nebo phpSysinfo – oba ukazují paměť přehledně.

RAMDISK – turbo složka pro dočasná data

RAM disk je část paměti, která se tváří jako složka na disku – ale běží přímo v RAM. Je extrémně rychlá, ale po restartu se smaže.

Hodí se např. pro:

  • dočasné cache soubory.
  • session data ve WordPressu.
  • krátkodobá logovací data nebo cron výstupy.

Příklad vytvoření RAMdisku (pro pokročilé):

Vytvoříme složku.

mkdir /mnt/ramdisk

Pomocí příkazu “mount” vytvoříme ramdisk.

mount -t (TYPE) -o size=(SIZE) (FSTYPE) (MOUNTPOINT)

vysvětlení atributu:

  • (TYPE) – je typ, který využijeme pro RAM disk. Buď tmpfs or ramfs
  • (SIZE) – velikost, kterou bude ramdisk mít.
  • (FSTYPE) – file storage kterou bude RAM disk používat. Buď tmpfs, ramfs, ext4 apod.

Konkrétní příklad:

mount -t tmpfs -o size=512m tmpfs /mnt/ramdisk

📌 Na našich serverech už RAMdisk najdete připravený a automaticky udržovaný skriptem php_sessions_clean.sh.

V našem dalším článku, jsme rozebírali detailně, jak funguje RAM na Linuxu a pokud vás toto téma zajímá, tak ho určitě doporučujeme přečíst.

Část třetí – Jak zrychlit web

Co nejčastěji pomůže:

  • minifikace HTML, CSS a JS
  • optimalizace obrázků
  • nepřehánět to s přesměrováním
  • odložení načítání JS
  • noopener
  • prefetch, preload
  • lazyload obrázků
  • prerendering

Nejdůležitější část optimalizace se skrývá v aplikaci, protože ta komunikuje se serverem, databází a klientem. Právě optimalizaci aplikace bychom měli věnovat nejvíce času.

Mrkněte i na náš podrobnější článek Kompletní průvodce zrychlením webu.

Frontendové optimalizace: Minifikace (HTML, CSS a JS)

Jak už název napovídá, tak budeme minimalizovat kód.

Minifikací odstraníte z kódu všechny zbytečnosti – mezery, komentáře, zalomení řádků – a tím snížíte objem přenášených dat.

Doporučujeme:

  • Spojovat podobné CSS do jednoho souboru.
  • Vyhýbat se robustním JS knihovnám, které reálně nevyužijete.
  • Používat online nástroje, např.: cssminifier.com nebo minifier.org.

Pokud používáte HTTP/2 nebo HTTP/3, nemusíte soubory nutně slučovat – paralelní přenosy jsou efektivní samy o sobě.

Online nástroje pro minifikaci kódu

Na výběr máte i více programovacích jazyků, které můžete online nechat zkontrolovat a zkrátit.

Tento krok můžete přeskočit pokud má server nebo webhosting aktivovaný protokol HTTP/2. Díky tomu nevadí serveru posílat více menších souborů a spíš naopak to podpoří rychlost načtení stránky. 

VPS Centrum

Vyzkoušejte zdarma naši aplikaci pro správu serveru a domén. Budete si připadat jako zkušený administrátor.

Optimalizace obrázků

Spousty problémů dělají právě obrázky, které se nahrávají na server neoptimalizované a zbytečně zabírají více místa a tím pádem se zpozdí i načítání stránky.

Pro zlepšení doporučujeme:

  • Obrázky zmenšit ještě před nahráním na web (komprese 50–70 %).
  • Nepoužívat HTML/CSS pro zmenšení – velikost zůstane stejná.
  • Odstranit metadata (EXIF).
  • Zvolit vhodný formát:
    • JPEG pro fotky
    • PNG pro průhlednost
    • GIF/SVG pro grafiku
  • Zvažte použití formátu moderní generace –> WebP nebo AVIF.

Doporučené nástroje

  • tinypng.com – pojme až 20 souborů najednou s limitem 5 MB na jeden. Existuje také jako plugin pro WordPress. Můžete jej použít pro PNG a JPEG.
  • compressor.io – Tady můžete vkládat obrázky pouze po jednom, ale s limitem 10 MB a zvládne formáty JPEG, PNG, GIF a SVG. Zvládne až 90 % datovou úsporu.

Pozor na častá přesměrování

Občas se stane, že původní stránka zmizela a nahradila ji nová a vyhledávači musíme sdělit, kam se přemístila. Používá se pro to tzv. 301 redirect a čím více jich v rámci webu nasekáte, tím to bude horší.

Při každém načtení vaší stránky si webserver načte .htaccess a uplatní zde zadaná pravidla a čím víc jich bude, tím bude načtení pomalejší.

Odložení načítání Javascriptu

Prohlížeč zpracovává kód stránky od shora dolů. Jakmile do cesty přijde

Další příklady od Developerů z Mozzily.

Prohlížeč čte stránku shora dolů. Pokud narazí na JS bez atributu async nebo defer, vše zastaví a čeká.

Jak mu pomoci:

  • Vkládejte JS až těsně před </body>.
  • Používat async (pro samostatné skripty) a defer (pro závislé skripty).

Preload / Prefetch / Prerender / Preconnect

Moderní HTML atributy vám umožní připravit stránku ještě dřív, než ji uživatel potřebuje.

Preload

<link rel="preload" href="/fonts/font.woff2" as="font" type="font/woff2" crossorigin="anonymous">

Načte klíčové soubory (fonty, obrázky, skripty) co nejdříve.

Prefetch

<link rel="prefetch" href="/next-page.html">

Je obdobná pomůcka jako Preload, ale akorát se používá pro načítání méně prioritních zdrojů, které mohou být později využity. Běží tedy na pozadí, až se všechny důležité zdroje načtou. Poté začne stahovat další zdroje a jakmile uživatel na přednastavený odkaz klikne, tak se obsah načte okamžitě.

Prefetch můžeme použít na linky, DNS anebo pro předběžné vykreslování (rendering).

1.Link Prefetching

Předběžné načítání odkazů umožňuje prohlížeči načítat prostředky a rovnou je ukládat do mezipaměti. Prohlížeč hledá “prefetch” v HTML nebo v HTTP hlavičkách.

HTML příklad:

HTTP hlavička – příklad:

Link: </uploads/images/pic.png>; rel=prefetch

Díky této technice máte možnost urychlit interaktivní stránky, ale u některých bohužel neodhadnete, kam může uživatel kliknout. Pro další stránky mohou být data zastaralá, pokud jsou načtena příliš brzy. Je důležité dávat pozor, abyste soubory nenabídli příliš brzy, nebo můžete stránku dokonce zpomalit.

2. DNS prefetching

Tahle metoda umožňuje prohlížeči vyhledávat DNS nastavení, zatímco si uživatel stránku prohlíží – stejný princip jako link prefetching, akorát pro DNS. Přednastavení DNS lze přidat ke konkrétní URL adrese přidáním značky rel=”dns-prefetch” do atributu odkazu. Doporučuje se tahle funkce využívat na věci jako Fonts Google, Google Analytics a pro vaše CDN.

DNS požadavky jsou velmi malé, co se týče náročnosti na data, ale z pohledu latence může způsobovat velké problémy, hlavně v mobilních sítích. Jednoduchým nastavením, ale dokážeme tento problém odstranit a v případě, že uživatel klikne na odkaz, tak ho ihned nasměrovat. V některých případech lze latenci snížit i o 1 vteřinu.

3. Prerendering

Je velice podobný “prefetchingu”, protože shromažďuje zdroje, na které může uživatel přejít. rozdíl je akorát v tom, že prerendering dokáže v pozadí vykreslit celou stránku.

Načte a rovnou vykreslí celou stránku „dopředu“. Funguje hlavně, když víte, kam uživatel zamíří dál.

Příklad:

<link rel="prerender" href="https://vas-hosting.cz">

Tahle funkce se hodí, když máte velice dobrý přehled, kam může uživatel postupovat dále a celou stránku pro něj připravíte. Musíte si však dávat pozor, protože tato funkce může být náročná, co se serverových prostředků nebo přenosu dat týče.

4. Preconnect

Poslední část se týká připojení. Díky Preconnect můžete navázat spojení bez zaslání HTTP požadavku serveru. Dokáže při tom zajistit DNS, TLS a TCP komunikaci, a to v celkovém důsledku uživatelům ušetří čas při načítání.

<link rel="preconnect" href="https://cdn.example.com">

Preconnect stačí opět přidat do atributu v kódu HTML. Může být doručen i přes hlavičku HTTP anebo může být funkce vyvolaná. Příklad pro CDN např.

Pokud dokážete stránku obohatit o tyto atributy, budou mít uživatele vaši stránku mnohem radši. Dokonalá optimalizace nikdy nekončí, ale tohle je skvělý start!

Lazy Loading obrázků

Ve zkratce se jedná o techniku, která načítá obsah stránky, jakmile jí uživatel potřebuje. Doslovně jde o odložené načítání a narazíte na něj určitě na sociálních sítích při nekonečném scrollování dolů. 🙂

Co tím získáte:

  • Méně požadavků na server.
  • Nižší objem přenesených dat.
  • Rychlejší vykreslení stránky.

📌 Pozor na SEO – vyhledávače nemusí odložené obrázky indexovat.
Lazy loading proto doporučujeme jen pro méně důležité obrázky – například v seznamech produktů nebo článků.

Nástroje:

  • V HTML:
<img loading="lazy" src="obrazek.jpg" alt="Popis">
  • Nebo přes IntersectionObserver v JavaScriptu:
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);
    }
  });
});

document.querySelectorAll('img[data-src]').forEach(img => {
  observer.observe(img);
});

Podívejte se i na interaktivní demo s ukázkou kódu.

Kdy a kde funkci tedy použít?

Máte dvě možnosti, kdy lazy loading obrázků spustit.

  1. klasický příklad, kde počkáte, než uživatel naroluje stránku, aby se mu zobrazil obrázek.
  2. Můžete počkat na javascriptovou událost a až po ní načíst všechny obrázky.
  3. Ještě je dobré si obrázky rozdělit na důležité a nedůležité.

Část čtvrtá – Jak zrychlit databáze

Co pomůže:

  • Co databáze potřebuje (CPU, memory, disk(IO), network)
  • Nevytvářejte fronty na MySQL dotazy
  • Nesoustřeďte se tolik na konfiguraci
  • Pozor na pagination queries (dotazování na počet stránek)
  • Věnujte pozornost indexování
  • Phpmyadmin … ten má fajn poradce pro začátečníky
  • Slow query log
  • Elasticsearch
  • Redis

Co databáze potřebuje

Pro rychlý chod databáze potřebujete mít v pořádku 4 hlavní zdroje:

  • CPU – pro výpočty a zpracování dotazů.
  • RAM – pro cache a in-memory operace.
  • Disk / IO – pro čtení a zápis dat.
  • Síťovou konektivitu – obzvlášť při oddělené DB.

Stačí, aby jeden z nich nestíhal – a výkonnostní problémy jsou na světě.

Jako první věc při potížích musíte prověřit právě tyto 4 aspekty, které mají na databázi velký vliv. Na začátku článku jsme psali o nástrojích, jak si můžete tyto věci okamžitě ověřit.

Nedělejte z MySQL sklad dat v čekárně

Častý problém: fronty na MySQL dotazy.

Typický příklad: odesílání e-mailů, které se označí jako „čekající“, ale zpracovávají se postupně a zůstávají ve frontě. Výsledek? Zpomalený výkon, zahlcené tabulky databáze a nemožnost paralelního zpracování.

📌 Lepší přístup: použijte message queue nebo paralelní zpracování v dávkách.

Nesoustřeďte se tolik na konfiguraci

Spousta lidí si myslí nebo má tendenci trávit obrovské množství času laděním konfigurací. Většinou žádného zlepšení nedosáhnete a spíše serveru uškodíte.

Nadměrné ladění my.cnf většinou vede spíš ke zhoršení než zrychlení. Zaměřte se raději na kvalitní indexování, strukturu dotazů a samotnou aplikaci.

Chcete testovat? Zálohujte původní konfiguraci a experimentujte na stagingu, ne na ostrém webu.

Online nástroje, které pomohou

Percona Configuration Wizard 🧙‍♂️

Prvním z nich je Percona Configuration Wizard for MySQL. V 7 krocích si v něm nastavíte parametry svého serveru a získáte návrh optimálního nastavení MySQL/MariaDB.

Percona Query Advisor

Percona Query Advisor for MySQL je jedoduchý nástroj, kam zadáte svůj SQL dotaz → získáte zpětnou vazbu a návrh, jak ho zrychlit.

PhpMyAdmin – Poradce

Ve Stavu > Poradce najdete běžné problémy databáze + návrhy řešení. Zobrazuje i serverové proměnné s odkazy do dokumentace.

V poradci uvidíte nejběžnější problémy s chybovou hláškou, která se zobrazuje a na pravé straně vidíte ihned doporučení, jak daný problém vyřešit. Po kliknutí na konkrétní problém se otevře modal s podrobnostmi.

Takto vypadá modal, který vyskočí

Pozor na pagination queries

Neboli dotazování na počet stránek. Při zobrazování stránky s výsledky a s odkazem na další stránku se aplikace obvykle seskupují a třídí způsoby, které nemohou používat indexy, a používají LIMIT, aby kompenzovali škody, které serveru způsobují, protože provádí spousty práce.

Takto to používá webtrh.cz

Dotazy typu LIMIT 100000, 50 jsou extrémně náročné, protože se musí projít všechny předchozí řádky.

Místo toho:

  • Zobrazujte pouze odkaz na další stránku.
  • Omezte možnost listovat hluboko.
  • Uvažujte o cursor-based stránkování.

Věnujte pozornost indexování

Indexování je pravděpodobně nepochopené téma v databázích, protože existuje příliš mnoho způsobů, jak se nechat zmást, proto se podíváme, jak vlastně fungují a jak je server používá.

Pokud jsou indexy správně navržený, slouží databázovému serveru k 3 hlavním účelům.

  1. Indexy umožní serveru najít skupiny sousedních řádků na místo jednotlivých řádků. Mnoho lidí si myslí, že účelem indexu je najít jednotlivé řádky, ale hledání jednotlivých řádků vede k náhodným operacím disku (zvýší se I/O), což je velice pomalé. Je mnohem efektivnější najít skupiny řádků, které jsou zajímavá než hledat jednotlivé řádky.
  2. Indexy umožňují serveru vyhnout se třídění čtením řádků v požadovaném pořadí. Třídění je nákladné. Čtení řádků v požadovaném pořadí je mnohem rychlejší.
  3. Indexy umožňují serveru uspokojit celé dotazy ze samotného indexu a vyhnout se nutnosti přístupu k tabulce. To je různě známé jako “krycí index” nebo “dotaz pouze pro index”. Pokud si můžete navrhnout své indexy a dotazy, abyste mohli tyto tři příležitosti využít, můžete své dotazy urychlit o několik levelů.

Pomocí příkazu EXPLAIN MySQL ukáže, jak bude jednotlivý dotaz zpracován databází. Můžete jej použít vždy na začátku dotazu. Vyzkoušíte to v konzoli přímo v PhpMyAdmin nebo po připojení na SSH a k databázi.

EXPLAIN SELECT * FROM clanky WHERE skupina

Nepoužívejte indexy, když je přítomen filesort a tmp tables.

Skvělé příklady a ukázky hlavně okolo indexu uvidíte na webu php.vrána.cz

Schovaný poradce

Další pomůcka, o které lidi moc neví je takový menší “monitoring”, který hlídá serverové proměnné a jejich hodnoty a pokud překročí normu, zobrazí se červeně.

Dokonalý pomocník při řešení problémů kolem databáze

Výhoda je, že hned vedle proměnných máte odkaz na dokumentaci, kde se dozvíte, co znamenají a v popisu krátký vysvětlení problému. (řešení zatím bohužel ne. 🙂

Slow query log

Jak už název trochu napovídá, jedná se o speciální log, který v sobě uchovává informace o pomalých dotazech. Odkdy se mají pomalé dotazy logovat si můžete nastavit v konfiguračním souboru k MySQL/MariaDB.

Na našich serverech s VPS centrem najdete config na /etc/mysql/mariadb.conf.d/60-local.cnf , kde musíte odkomentovat tyto řádky a restartovat MySQL.

Řádky pro odkomentování

Poté můžete na příkazové řádce spustit příkaz

mysqldumpslow - Případně můžete přidat [options] [log_file]

Po spuštění příkazu vám vyjedou veškeré dotazy, které přesahují limit, které jste v configu nastavil.

Elasticsearch

Je fulltextový vyhledávač, který disponuje s RESTful rozhraním a nabízí vysokou dostupnost, rychlost a škálovatelnost.

Pokud se vám líbí stránky, kde při vybrání filtru okamžitě uvidíte výsledky, tak je to pravděpodobně díky Elasticsearch. Jedná se o bezschémovou databázi a není nutné definovat strukturu, protože se vytvoří sama na základě vložených dat.

Komunikace probíhá přes HTTP požadavky i odpovědí se posílají ve formátu JSON, takže můžete Elasticsearch využít v kombinaci s jakýmkoliv programovacím jazykem.

Pokud si chodíte do databáze často, určitě stojí za to vyzkoušet o kolik % se vaše stránky zrychlí. Určitě nezpomalí. 🙂

Oficiální návod: Jak začít s Elasticsearch.

Freelo - Nástroj na řízení úkolů a projektů

Přidej se, pozvi svůj tým a klienty, rozděl práci a sleduj, jak se úkoly dají do pohybu.

Redis

Je NoSQL in-memory key-value úložiště. Takže taková inteligentní cache, kterou umístíte před svojí hlavní SQL databázi (i NoSQL) a dotazy by měly směřovat právě přes Redis. Ten se podívá, jestli má hodnotu uloženou u sebe a pokud ano, tak data ihned vrátí. V opačném případě přepošle dotaz do primární databáze a odpověď si uloží pro příště.

Má to pozitivní vliv na chod celé aplikace a pro zátěž serveru, protože ušetříte databázi spousty “zbytečných” dotazů, a navíc ještě uspokojíte uživatele rychlejší odpovědí. 

Redis má samozřejmě i speciální funkce, které se využijí hlavně na větších projektech, ale je dobré o nich vědět. Dokáže spojit více uzlů do jednoho, který se stane hlavním úložištěm tzv. sharding. Podporuje master-slave replikaci, takže při výpadku nodu není třeba všechno z hlavní databáze načítat znova.

Je k dispozici i interaktivní demo, kde názorně uvidíte, jak Redis funguje.

Část pátá – Jak zrychlit WordPress

Pro zrychlení platí všechny body nad námi. Tady najdete pouze tipy pro pluginy na WordPress, které výše zmíněné věci pouze zjednoduší.

Vždy se snažte mít co nejmenší počet pluginů a vybírejte pouze ty kvalitní s dobrým hodnocením. Jeden špatný plugin může zpomalit celou stránku. Díky nástroji blackfire.io můžete špatné pluginy odhalit.

Na ty jednoduché věci se vyplatí vyřešit na serveru sami či přímo ve WordPressu. Vyplatí se i jednorázová pomoc, která by sice vyšla např. na 1000 Kč, ale ušetříte jeden plugin navíc a zbavíte se zbytečných requestů.

Podstatnou část hraje i komplikovanost šablony. Čím bude jednodušší/čistší, tím bude rychlejší a pluginy nebudou mít potom takový vliv na celkové načítání stránky.

Doporučené pluginy pro WordPress

Optimalizace obrázků

EWWW Image Optimizer

Šikovný pomocník, který ušetří spousty času a dat. Umí totiž automaticky optimalizovat nahrané obrázky. Plugin je navíc kompletně zdarma.

ShortPixel Image Optimizer

Další pomocník, který jednoduchou instalaci vytrhne trn z paty a každý nahraný obrázek z optimalizuje. Limit je zde 100 obrázku za měsíc.

Minifikace JS a CSS

Pomocí optimalizace kódu dokážeme snížit počet dotazů na server a zrychlit načítání webu.

Autoptimize

Agreguje a minimalizuje scripty, styly, vkládá CSS do < head> a umí skripty i odkládat.

Better WordPress Minify

Podobně se chová i BWP akorát tento plugin je postaven na PHP knihovně “Minify” a spoléhá se na systém Enquueing WordPressu  namísto výstupního bufferu, který respektuje pořadí CSS a JS souborů a jejich závislostí.

Cache

O cache jsme se už bavili dost, tak tady doporučíme pouze 2 nejlepší pluginy pro WordPress.

WP Super Cache

Přes 2 miliony stáhnutí a vysokém hodnocení je tento plugin často instalován jako první, když začnete řešit Cache. Má více úrovní nastavení a doporučujeme přečíst dokumentaci, abyste vybrali tu nejlepší možnost.

W3 Total Cache

Další oblíbený plugin s více jak 1 milionem stáhnutím je W3 Total Cache. Má v sobě integrované spousty napojení a funkcí, například integrovanou CDN a chlubí se, že zajistí známku A na webpagetest.org.

Monitoring

Query Monitor

Monitorovací plugin Query Monitor pomůže s monitorováním dotazu do DB, PHP erroru, API dotazy. Plugin se hodí hlavně pro developery, když hledají chyby, nebo co způsobuje pády či zpomalení, a tak plugin nemusí být zapnutý neustále.

Zdroje:

Zůstaňte s námi v kontaktu

Jednou za měsíc posíláme souhrn novinek. Nemusíte se bát, spamovat vás nebudeme a odhlásit se můžete kdykoliv...

Karel Dytrych
Tým Váš Hosting
Vyzkoušejte náš trial na týden zdarma

Garance 14denní záruky vrácení peněz

Vyzkoušejte server na týden zdarma

Vyzkoušet server