Jeden prompt, po kterém tvoje appka od AI přestane být pomalá.
Appky, které napsala AI, často fungují, ale načítají se dlouho. Tady je prompt pro Claude Code s 15 nejdůležitějšími radami, celá sada 31 rad po skupinách a postup, jak si změnu změřit, ať víš, že opravdu pomohla.
- ✓Kostry načítání
- ✓Obrázky jako WebP
- ✓Opravené dotazy N+1
- ✓Komprese
- ✓Indexy v databázi
Co ti to přinese
Každá vteřina čekání odežene část lidí. Rychlá appka působí profesionálně, i když je hotová za víkend.
Rychlejší první zobrazeníUživatel hned něco vidí, ne bílou stránku.
Bez rozbitíClaude jde po jednom kroku a po každém ověří, že vše funguje.
Levnější provozMíň dotazů a dat znamená nižší účet za server.
Celá sadaVšechny rady česky a srozumitelně.
Prompt pro Claude Code
Oproti videu má navíc dvě pojistky: Claude nejdřív napíše plán a čeká na tvoje schválení, a pak mění jednu věc po druhé.
✳Vlož do Claude Code ve složce projektu
„Nechci, aby moje appka působila pomalu. Projdi kód a nejdřív mi napiš plán: které z těchto bodů tu dávají smysl a které přinesou nejvíc. Nic neměň, dokud plán neschválím. Pak je zaváděj po jednom a po každém ověř, že vše funguje: kostry načítání, obrázky jako WebP, žádná opakovaná volání API, u vyhledávání počkej, až uživatel dopíše, stránkuj výsledky, pomalé úlohy přesuň na pozadí, oprav dotazy N+1, zapni kompresi, cachuj často používaná data, nastav časové limity, odpovědi AI posílej slovo po slovu, nezávislé požadavky spouštěj souběžně, přidej indexy do databáze, obrázky pod obrazovkou načítej až při posunu a otestuj to na pomalém telefonu.“
Požadavek jde z prohlížeče přes síť na server a do databáze a zase zpátky. Brzda může být v kterékoli zastávce, proto rady míří na všechny čtyři.
Všech 31 rad
Zelené číslo = rada je i v promptu nahoře. Ostatní přidej, až budeš chtít jít dál, třeba „Udělej i body 9, 11 a 12“.
Co uživatel vidí
Appka působí rychle, i když data ještě jdou.
- 1Přidej kostry načítání, ať je hned vidět, co se načítá
- 2Odpovědi AI posílej slovo po slovu
- 3Uprav rozhraní dřív, než odpoví server
- 4Dlouhé seznamy vykresluj jen po viditelných částech
- 5Zabraň zbytečnému překreslování
- 6U vyhledávání a našeptávání počkej, až uživatel dopíše
Soubory a síť
Míň dat přes síť znamená rychlejší první zobrazení.
- 7Obrázky dávej ve formátu WebP nebo AVIF
- 8Obrázky pod okrajem obrazovky načítej až při posunu
- 9Statické soubory dávej přes CDN
- 10Zapni kompresi Brotli nebo Gzip
- 11Odstraň nepoužívané knihovny
- 12JavaScript rozděl podle stránek
- 13Skripty třetích stran načítej až po stránce
- 14Fonty hostuj sám a omez počet řezů
- 15Zapni cachování statických souborů v prohlížeči
- 16Stránky vykresluj na serveru nebo při sestavení
Server a API
Server nesmí čekat na věci, které čekat nemusí.
- 17Zabraň opakovaným voláním API
- 18Výsledky z API stránkuj
- 19Pomalé úlohy přesuň do fronty na pozadí
- 20Nezávislé požadavky spouštěj souběžně
- 21Nastav časové limity pro volání externích API
- 22Často používaná data cachuj, třeba v Redisu
- 23Servery dej blízko databáze
- 24Rozkládej provoz mezi víc instancí appky
Databáze
Nejčastější skrytá brzda appek, které psala AI.
- 25Oprav dotazy N+1 (jeden dotaz místo stovky malých)
- 26Přidej do databáze indexy pro časté dotazy
- 27Z databáze vybírej jen sloupce, které potřebuješ
- 28Používej sdílení databázových připojení
Měření
Bez měření nevíš, jestli změna pomohla.
- 29Pomalé požadavky na serveru sleduj přes OpenTelemetry
- 30Rychlost u skutečných uživatelů sleduj nástrojem na měření výkonu
- 31Testuj na pomalých telefonech a sítích
Diktuj pro Mac
Píšeš Claudovi a ChatGPT? Mluv česky, Diktuj to napíše.
Podržíš klávesu, mluvíš česky a po puštění je text tam, kde máš kurzor: v Claude, ChatGPT, e-mailu i v kódu. A v notchi máš navíc hudbu, časovač a stav Claude Code a ChatGPT, žádosti o povolení schválíš jedním klikem.
8 000 slov zdarma, pak na Macu s čipem Apple a macOS 15 diktuješ dál zdarma bez limitu · macOS 14 a novější
✓✳Claude Code62 %
ChatGPT40 %
Komu: jana@firma.cz
Nechci, aby moje appka působila pomalu. Nejdřív mi napiš plán a pak to zaváděj po jednom kroku.
Jak to rozjet za 15 minut
- 1
Změř, jak na tom jsi 3 min
Zadej adresu appky do PageSpeed Insights, nebo v Chromu otevři Nástroje pro vývojáře › Lighthouse. Zapiš si LCP a CLS; v laboratorním testu také TBT. INP najdeš v PageSpeed Insights jen tehdy, když jsou dostupná data skutečných návštěvníků.
https://pagespeed.web.dev/ - 2
Ulož si zálohu 1 min
Commitni aktuální stav, ať se můžeš kdykoli vrátit. Claude Code to za tebe udělá, když mu napíšeš „commitni aktuální stav“.
git add -A && git commit -m "Před zrychlením" - 3
Vlož prompt a schval plán 5 min
Spusť
claudeve složce projektu a vlož prompt odsud. Projdi si plán a škrtni body, které nedávají smysl. - 4
Nech ho pracovat a změř znovu podle appky
Po každém kroku si appku zkontroluj. Na konci zopakuj měření z kroku 1 a porovnej čísla.
LCPhlavní obsah na obrazovce
4,8 s1,9 s
INPodezva na klik
450 ms140 ms
CLSposkakování stránky
0,280,04
✓Hotovo poznáš tak, že se zlepší opakované měření v Lighthouse, appka se na telefonu načte bez bílé stránky a dostupné hodnoty od skutečných návštěvníků v PageSpeed Insights jsou zelené.
Ať to pomůže a nic nerozbije
Dělej
- ✓Měř před a poBez čísel nevíš, jestli změna pomohla, nebo jen přidala kód.
- ✓Jeden krok, jeden commitKdyž se něco rozbije, vrátíš jen ten jeden krok.
- ✓Testuj na pomalé sítiTvůj Mac na Wi-Fi není telefon tvého zákazníka ve vlaku.
Nedělej
- ✕Nezaváděj všech 31 narázMalá appka nepotřebuje Redis, CDN ani víc instancí.
- ✕Necachuj citlivá dataData jednoho uživatele nesmí v cache vidět jiný.
- ✕Neodklikávej plán naslepoPřečti si, co Claude chce změnit, hlavně v databázi.
V kostce: Jsou to obecné osvědčené postupy pro rychlost webových aplikací. Fungují s Claude Code i jinými nástroji. Co pomůže nejvíc, záleží na tvé appce, proto vždycky začni měřením.
3 tipy, které fungují
Každý má i větu, kterou můžeš rovnou napsat do Claude Code.
Ať měří sám
Claude Code umí spustit Lighthouse v terminálu a po každé změně ti ukázat rozdíl.
Napiš do Claude CodeSpusť Lighthouse na mojí appce (npx lighthouse <adresa> --only-categories=performance), vypiš LCP, CLS a TBT a tři největší brzdy. Po každé změně měření zopakuj a ukaž mi rozdíl. INP hledej v datech skutečných návštěvníků v PageSpeed Insights, pokud jsou dostupná; běžný Lighthouse report INP neměří.
Najdi největší knihovny
Často stačí vyhodit jednu velkou knihovnu, kterou appka skoro nepoužívá.
Napiš do Claude CodeNajdi pět největších knihoven v JavaScriptu, který posílám do prohlížeče, a u každé navrhni, jestli ji odstranit, nahradit menší, nebo načítat až když je potřeba.
Zpomal si Chrome
V Nástrojích pro vývojáře přepni síť na Slow 4G a v záložce Výkon zpomal procesor. Uvidíš appku očima člověka s levným telefonem.
Napiš do Claude Code„Co se v mojí appce na pomalé síti načítá nejdéle a jak to zkrátit?“