Egress: de rekening die je niet zag aankomen

Fase 0Vaststellen

Kijk waar het weglekt voordat je iets aanpast. Anders optimaliseer je het verkeerde.

1. Open het gebruiksoverzicht van je dienst. Bij Supabase staat dat onder Reports en dan Egress; bij Vercel onder Usage.
2. Kijk niet naar het totaal maar naar de verdeling: komt het uit storage, uit de database, of uit je functies? Dat bepaalt welke van de vier knoppen hieronder je nodig hebt.
3. Open daarna je eigen site met F12 en het tabblad Network, en kijk onderaan hoeveel kilobytes één paginabezoek kost. Boven de 2 MB heb je een probleem dat je met het blote oog kunt vinden.
4. Sorteer die lijst op grootte. Het bovenste item is bijna altijd een foto.

Fase 1De vier knoppen

Op volgorde van opbrengst. De eerste alleen is meestal al een factor 25.

1. Verklein je afbeeldingen vóór het uploaden, in de browser. Een canvas van 1600 pixels breed en kwaliteit 0,8 brengt een foto van 5 MB terug naar ongeveer 200 kB.
2. Zet een CDN voor je opslag. Cloudflare ervoor hangen is gratis en haalt de herhaalde verzoeken bij je opslag weg. Statische bestanden krijgen een lange cache-header, want een logo verandert niet.
3. Vraag alleen de kolommen en rijen die je toont. select('id, naam, datum') in plaats van select('*'), met een limit en paginering. Dit is meestal de grootste winst in een dashboard.
4. Vervang polling door een abonnement, of verleng de interval. Realtime als je het echt nodig hebt, en anders elke dertig seconden in plaats van elke seconde.

Waar het bij AI-gebouwde apps standaard misgaat

• Foto's worden opgeslagen zoals ze binnenkwamen, en twintig keer te groot uitgeleverd.
• Er zit geen CDN voor, dus elke bezoeker gaat rechtstreeks naar je opslag, ook voor een logo dat nooit verandert.
• Hele tabellen worden opgehaald en in de browser gefilterd: 5.000 rijen egress om er drie te tonen.
• Een useEffect zonder goede afhankelijkheden haalt bij elke render opnieuw op.
• Een polling-lus die elke seconde vraagt of er iets nieuws is.

Fase 2De rem erop

Los van optimaliseren: zorg dat een fout je niet failliet laat gaan.

Zet bij elke dienst een uitgavenlimiet en een waarschuwing op ongeveer de helft daarvan. Bij Supabase heet dat een spend cap, bij Vercel een spend limit, bij OpenAI en Anthropic een usage limit. Doe dit voordat je live gaat, niet erna.

Fase 3Controleren

Bewijs voordat je zegt dat het klaar is. Meet hetzelfde als in fase 0 en vergelijk.

• Eén paginabezoek kost minder dan 1 MBMeet opnieuw met F12 en Network, met een lege cache. Vergelijk met wat je in fase 0 opschreef.
• Geen enkele afbeelding is groter dan 300 kBSorteer de netwerklijst op grootte. Staat er nog een foto van megabytes, dan slaat je verkleining bij het uploaden over.
• Een tweede paginabezoek haalt de statische bestanden uit de cacheHerlaad zonder cache te legen. Logo, lettertypen en scripts moeten uit de cache komen en niet opnieuw over de lijn.
• Er staat geen interval korter dan tien seconden in je codeZoek op setInterval en op refetchInterval. Elke treffer onder de tien seconden verdient een reden.
• De uitgavenlimiet en de waarschuwing staan aanBij elke dienst apart. Laat het overzicht zien in plaats van het je te herinneren.