Most vibe-coded apps overpay for hosting by 30 to 50 percent. Not because the platforms are scamming you, but because default configurations are designed for maximum compatibility, not minimum cost. If you want to reduce hosting costs without breaking anything, these seven techniques will get you there.
The numbers are real. 92% of US developers now use AI tools daily, and the apps they ship inherit whatever defaults Claude or Cursor chose during generation. Those defaults are safe and correct. They are also expensive. A typical app running $150 per month can drop to $75 to $100 with changes that take an afternoon to implement.
1. Optimize Your Images for WebP and Lazy Loading
Estimated savings: $5 to $20 per month
Images are the largest assets your app serves. A single unoptimized PNG hero image can be 2 MB. Convert it to WebP and it drops to 200 KB. That is a 90% reduction in bandwidth for one file.
Most AI-generated Next.js code already uses the <Image> component, which handles format conversion automatically on Vercel. But there is a catch. Vercel charges for image optimization requests. On the Hobby plan, you get 1,000 source images per month. On Pro, 5,000. After that, it is $5 per 1,000 additional images.
The fix is to optimize images before they reach Vercel. Use a build script that converts to WebP and resizes to the exact dimensions you need. Serve them as static files to eliminate optimization charges entirely. For lazy loading, make sure images below the fold use loading="lazy" and your hero uses priority instead.
2. Set CDN Caching Headers Properly
Estimated savings: $10 to $30 per month
Every request that hits your origin server costs money. Every request served from a CDN cache costs almost nothing. The difference between a well-cached app and a poorly-cached one can be $30 per month in serverless function invocations alone.
Most AI-generated apps set no explicit cache headers, which means CDNs use conservative defaults. Add Cache-Control headers to responses that do not change frequently. Set stale-while-revalidate so users get fast cached responses while the CDN refreshes in the background.
For Vercel, change your ISR revalidate interval from 60 seconds (a common AI-generated default) to 3,600 seconds or higher. One developer cut their serverless invocations by 60% with this single change. For Cloudflare, use Cache-Control: public, max-age=86400, s-maxage=86400 on pages that change daily at most.
The biggest single savings for most apps comes from caching. Changing one ISR revalidation interval from 60 seconds to 3,600 seconds can eliminate thousands of unnecessary serverless function invocations per day, saving $10 to $30 per month with zero impact on user experience.
3. Use Database Connection Pooling
Estimated savings: $5 to $25 per month
Serverless functions create a new database connection on every invocation. If your app handles 10,000 requests per day, that is 10,000 connection handshakes. Each one takes time and uses database resources, which pushes you toward higher database tiers faster than necessary.
Connection pooling solves this by maintaining a pool of reusable connections. Instead of opening and closing connections constantly, your functions borrow from and return connections to the pool.
On Supabase, enable the built-in PgBouncer connection pooler by changing your connection string from the direct URL to the pooler URL. This is a one-line change that reduces connection overhead by 80% or more. On Railway, use the pooler-enabled connection string that Railway provides automatically.
The real savings here are indirect. Connection pooling keeps your database responsive under load, which means you can stay on a smaller database tier for longer. The difference between Supabase's free tier and Pro tier is $25 per month. If pooling lets you stay on the free tier for an extra six months, that is $150 saved.
4. Optimize Serverless Function Bundle Size and Cold Starts
Estimated savings: $10 to $40 per month
Every millisecond your serverless function runs costs money. Cold starts, where the platform initializes a new function instance, add 200 to 2,000 milliseconds per invocation. Reducing cold starts and execution time directly reduces your bill.
Start with bundle size. AI-generated code often imports entire libraries when only one function is needed. Importing all of lodash adds 70 KB to your bundle. Importing lodash/get adds 1 KB. Smaller bundles mean faster cold starts.
Next, check your function regions. If your users are in the US but your functions run in a European region (a common default), every database query adds 100 to 150 milliseconds of latency. Move your functions to the same region as your database. On Vercel, set regions in your vercel.json. On Cloudflare Workers, use Smart Placement.
Finally, avoid importing heavy dependencies in API routes. Sharp, Puppeteer, and large ML libraries have no business in a serverless function that returns JSON. If your AI tool added a require('sharp') to an API route, move that processing to a build script or a dedicated worker.
5. Use Static Generation Wherever Possible
Estimated savings: $15 to $50 per month
Static pages cost almost nothing to serve. Dynamic pages cost money on every request. The simplest way to reduce hosting costs is to convert dynamic pages to static ones wherever the content does not change per-user.
Your marketing pages, blog posts, documentation, pricing page, and about page should all be statically generated at build time. In Next.js, this means using generateStaticParams and avoiding cookies() or headers() calls in those pages. A statically generated page is served from the CDN for free. The same page rendered dynamically triggers a serverless function invocation that you pay for.
A dashboard that shows weekly analytics does not need fresh data on every request. Generate it statically with hourly revalidation and you eliminate 95% of those function calls. At 100,000 monthly page views, the difference between dynamic and static rendering is roughly $40 per month in serverless costs alone.
6. Right-Size Your Compute
Estimated savings: $10 to $50 per month
Over-provisioning is the silent budget killer. Developers choose a database plan or compute tier based on what they think they might need, not what they actually use. The result is paying for capacity that sits idle.
Check your actual usage before choosing a tier. Supabase's free tier handles 500 MB of data and 50,000 monthly active auth users. If you have 200 MB of data and 500 users, you do not need Pro. Railway charges by the second for compute. If your background worker runs for 2 hours per day, you are paying for 2 hours, not 24.
The same principle applies to Vercel. If your bandwidth never exceeds 50 GB, you might not need Pro at $20 per month. Audit your usage dashboard monthly. Most platforms show exactly what you consume. For databases, check row counts and storage. Cleaning up unused tables and adding proper indexes can keep you on a smaller tier.
Most developers upgrade their database tier at the first sign of slow queries. But slow queries are usually caused by missing indexes, not insufficient compute. Adding a single index to a frequently queried column can improve performance by 100x and costs nothing. Check your query performance before spending $25 per month on a bigger database.
7. Consolidate Your Services
Estimated savings: $10 to $30 per month
The modern stack has a service for everything. Auth, email, analytics, error tracking, feature flags, A/B testing. Each one has a free tier, but free tiers have limits. Once three or four services cross their free tier limits simultaneously, you are suddenly paying $10 to $20 per month for each, and the total adds up fast.
Consolidation means choosing platforms that cover multiple needs. Supabase handles your database, auth, file storage, and edge functions in one service. That is four separate services collapsed into one billing relationship. Cloudflare offers Pages, Workers, R2 storage, D1 database, and email routing under a single account with generous free tiers across all of them.
Fewer services also means fewer API keys to manage, fewer dashboards to monitor, and fewer places where things can break.
Here is a practical example. If you are using Vercel for hosting ($20), Clerk for auth ($25), Resend for email ($20), and PlanetScale for your database ($39), that is $104 per month. Switch to Cloudflare Pages (free), Supabase for auth and database ($25), and Resend for email ($20), and you are at $45. Same capabilities, less than half the cost.
Understand what each service costs before you commit to a stack.
See all guidesAdding It All Up
Here is what these seven techniques look like applied to a real app spending $200 per month on hosting.
| Technique | Monthly Savings |
|---|---|
| Image optimization (WebP, lazy loading) | $5 to $20 |
| CDN caching headers | $10 to $30 |
| Database connection pooling | $5 to $25 |
| Serverless function optimization | $10 to $40 |
| Static generation | $15 to $50 |
| Right-sizing compute | $10 to $50 |
| Service consolidation | $10 to $30 |
| Total Potential Savings | $65 to $245 |
You will not get the maximum savings from every category. But even conservative implementations of all seven techniques typically save 30 to 50 percent. On a $200 monthly bill, that is $60 to $100 back in your pocket every month, or $720 to $1,200 per year.
The order matters too. Start with caching and static generation because they have the highest impact and lowest effort. Then move to image optimization and function tuning. Save service consolidation for last because it requires the most migration work.
Learn the full cost breakdown for every service in your stack.
Explore all articlesWhat This Means For You
Every dollar you save on hosting is a dollar you can spend on the product itself. Better AI features, more marketing, faster iteration. The techniques in this article are not theoretical. They are changes you can make this afternoon that will show up on next month's bill.
Start with a usage audit. Open every dashboard for every service you pay for. Write down what you actually consume versus what you are paying for. That single exercise usually reveals $20 to $50 in immediate savings before you touch a single line of code. Then work through the seven techniques, starting with caching and static generation. The savings compound as your app grows.