Prestaties en kosten
Snelle apps en beheersbare AI- en API-kosten.
Prestaties en kosten is een gratis Vibe-coding-les op CoddyKit. Dit is les 4 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Vibe-coding. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Vibe-coding bevat in totaal 4 lessen.
Snelle apps, redelijke rekeningen
Je app werkt — maar is die snel, en wat kost het om die te laten draaien? Vibe-coded apps hebben vaak verborgen prestatieproblemen en onverwacht hoge AI- en API-rekeningen. In deze les leer je hoe je beide onder controle houdt.
Je hebt geen diepgaande kennis van optimalisatie nodig. Je hebt een paar gewoontes nodig en de juiste vragen om aan AI te stellen.
Meet voordat je optimaliseert
De grootste fout is raden waar de traagheid zit. Meet eerst. Een snelle timer rond verdachte code vertelt je de waarheid — vaak zit de flessenhals niet waar je die verwacht.
Dit codefragment meet hoe lang een stukje werk duurt.
function slowWork() {
let total = 0;
for (let i = 0; i < 1000000; i++) total += i;
return total;
}
const start = performance.now();
slowWork();
const ms = performance.now() - start;
console.log('Took ' + ms.toFixed(2) + ' ms');De meest voorkomende vertraging: werk uitvoeren in een lus
Een klassieke prestatiekiller is een database of API binnen een lus aanroepen — één aanroep per item, honderden keren. De oplossing is meestal om alles in één keer op te halen.
Zie je het verschil?
// SLOW: one database call per user (the N+1 problem)
for (const id of userIds) {
const user = await db.getUser(id);
process(user);
}
// FAST: one call for all of them
const users = await db.getUsers(userIds);
users.forEach(process);Vraag AI om flessenhalzen te vinden
Je kunt je code aan AI geven en vragen om de trage onderdelen op te sporen. Wees specifiek over wat je vermoedt, zodat het antwoord gericht blijft.
Review this code for performance problems. Look especially for:
- database or API calls inside loops
- the same data fetched repeatedly
- work that could be cached
Rank the issues by impact and show the fix for the worst one. Here is the code: <paste>Cache wat niet verandert
Als je steeds opnieuw hetzelfde berekent of ophaalt, sla je het resultaat op en gebruik je het opnieuw. Dit heet cachen. Een eenvoudige cache in het geheugen kan een trage herhaalde aanroep veranderen in een directe zoekactie.
const cache = new Map();
function getExchangeRate(currency) {
if (cache.has(currency)) return cache.get(currency); // instant
const rate = expensiveLookup(currency); // slow, runs once
cache.set(currency, rate);
return rate;
}
function expensiveLookup(c) { return c === 'EUR' ? 1.08 : 1; }
console.log(getExchangeRate('EUR'), getExchangeRate('EUR'));Lever geen gigantische frontend uit
Op het web draait prestatie vaak om hoeveel je naar de browser verstuurt. Enorme afbeeldingen en opgeblazen JavaScript-bundels zorgen ervoor dat pagina's langzaam laden, vooral op telefoons.
Vraag je AI-tool om het geheel kleiner te maken — die kent de moderne technieken.
My web page loads slowly. Help me reduce what's sent to the browser:
- compress and lazy-load images
- split the JavaScript so unused code isn't loaded upfront
- point out any large dependencies I could drop
Tell me the single change with the biggest impact first.AI-aanroepen kosten echt geld
Als je app een AI-model aanroept (zoals de Claude- of OpenAI-API), kost elke aanvraag geld op basis van tokens — grofweg de hoeveelheid tekst die erin gaat en eruit komt. Een populaire app die veel aanroepen doet, kan snel een flinke rekening opleveren.
De neiging om "voor de zekerheid" enorme prompts te versturen, jaagt budgetten erdoorheen. Stuur alleen wat nodig is.
Verlaag AI-kosten zonder kwaliteit in te leveren
Met verschillende knoppen kun je AI-uitgaven drastisch verlagen:
- Gebruik een kleiner/goedkoper model voor eenvoudige taken; bewaar het krachtige model voor moeilijke taken.
- Maak prompts korter — verwijder opvulling en voeg alleen relevante context toe.
- Cache antwoorden op herhaalde vragen in plaats van het model opnieuw te raadplegen.
- Beperk de lengte van de uitvoer wanneer je geen lang antwoord nodig hebt.
My app calls an AI API on every user message and the bill is high. Help me cut cost:
- which requests could use a cheaper, smaller model?
- how do I trim the prompt without losing accuracy?
- can I cache repeated questions?
- how do I cap the response length safely?Stel budgetten en meldingen in
De eenvoudigste manier om een schrikbarende rekening te voorkomen, is een bestedingslimiet en een melding instellen. De meeste API-dashboarden (Anthropic, OpenAI en je hostingprovider) laten je het gebruik begrenzen of een melding instellen wanneer een drempel wordt bereikt.
Schakel dit in voordat je lanceert, niet nadat de rekening is binnengekomen.
Optimaliseer niet te vroeg
Balans is belangrijk. Dagen besteden aan het afschaven van milliseconden bij een app met tien gebruikers is verspilde moeite. De regel: zorg dat het werkt, zorg dat het klopt en maak het daarna snel — maar alleen waar dat echt belangrijk is.
Meet, los het grootste echte probleem op en ga verder. Voortijdige optimalisatie maakt code complex zonder voordeel.
Een checklist voor prestaties en kosten
Loop dit samen met je AI na voordat je iets uitbrengt:
- De trage onderdelen zijn gemeten — niet geraden.
- Er zitten geen database- of API-aanroepen in lussen.
- Herhaald duur werk wordt gecachet.
- De frontend levert gecomprimeerde afbeeldingen en gesplitste JavaScript aan.
- AI-aanroepen gebruiken een model van de juiste grootte en ingekorte prompts.
- Bestedingslimieten en meldingen zijn ingesteld.
Korte controle
Je app voelt traag aan. Wat is de slimste eerste stap voordat je code wijzigt?
Samenvatting: snel en betaalbaar
Je hebt geleerd hoe je apps die met vibe coding zijn gebouwd snel en goedkoop houdt: meet voordat je optimaliseert, vermijd aanroepen binnen lussen, cache herhaald werk, maak de frontend kleiner en houd de AI/API-kosten onder controle met kleinere modellen, ingekorte prompts, caching en waarschuwingen bij hoge uitgaven.
Optimaliseer ook niet te veel: los op wat ertoe doet, op de plek waar het ertoe doet. Daarmee rond je AI-code productieklaar maken af: je apps zijn nu getest, veilig, onderhoudbaar, snel en betaalbaar. Dit is werk voor echte bouwers!
Leer JavaScript met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 25
- Lessen
- 100
Veelgestelde vragen
Is de les “Prestaties en kosten” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad Vibe-coding, waaronder “Prestaties en kosten”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus Vibe-coding bevat in totaal 4 lessen.
Wat leer ik in “Prestaties en kosten”?
Snelle apps en beheersbare AI- en API-kosten. Je oefent met Vibe-coding door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met Vibe-coding te beginnen?
Ervaring vooraf is niet nodig. Vibe-coding op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 4 van 4.
Hoe lang duurt de les “Prestaties en kosten”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over Vibe-coding?
Ja. Elke les over Vibe-coding bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Tests toevoegen met AI
- Beveiligingsbasis voor AI-code
- Code onderhoudbaar houden
- Prestaties en kosten