How do you rack up a $46k Vercel bill?

Summary

A website built by the creators of Jmail racked up a shocking $46,000 bill on Versel due to high compute, bandwidth, and request costs. Despite being a mostly static site, the aggressive preloading of data and extensive analytics contributed to the sky-high bill. By breaking down the cost into compute, bandwidth, requests, and add-ons, it’s clear that the massive volume of page views and inefficiencies in caching played a major role. Cloudflare and VPS alternatives could have significantly reduced costs, though they come with their own trade-offs in scalability and developer experience.

Takeaways

• 😀 A $46,000 Versel bill can arise from factors like compute, bandwidth, requests, and add-on services.
• 😀 Static content like JSON can be heavily cached to reduce compute costs, which is a significant part of the bill.
• 😀 Bandwidth costs are high due to large files, aggressive preloading of data, and image hosting on separate domains.
• 😀 Even static text (JSON) requires bandwidth, especially when aggressively preloaded for faster user experience.
• 😀 Requests contribute significantly to the bill, with 500+ requests per page view leading to high costs, especially with 650 million page views.
• 😀 Add-on services, particularly web analytics, accounted for 36% of the total bill, highlighting the high cost of processing data.
• 😀 The cost of analytics can be minimized by sampling, which helps reduce unnecessary data processing and storage.
• 😀 Versel charges for both compute time and the number of requests, with scaling costs adding up quickly with high traffic.
• 😀 Cloudflare offers cheaper alternatives in bandwidth, CPU time, and requests, especially with its free web analytics.
• 😀 Versel provides a better developer experience (DX) but can get expensive at scale, especially when handling millions of requests.
• 😀 A VPS solution may be cheaper, but it requires setting up caching, autoscaling, and a CDN to handle high traffic without incurring high bandwidth costs.

Q & A

What is the core issue that led to the $46,000 bill on Vercel?

The $46,000 bill was primarily due to high costs associated with bandwidth usage, serverless requests, and web analytics. The site experienced massive traffic and heavy data transfer, which led to a steep cost increase.

What are the four main categories where costs were incurred on the Vercel platform?

The four main categories for the bill were compute (serverless execution time), bandwidth, requests (edge invocations), and add-on services like analytics.

How does 'compute' contribute to the overall cost on Vercel?

Compute involves the execution of code, such as database queries or processing tasks. While Vercel charges for CPU time, the site in question had mostly static content, so compute likely wasn't the primary cost driver.

Why was bandwidth usage such a significant contributor to the $46,000 bill?

Bandwidth usage became significant because the website served large amounts of static assets like JavaScript, CSS, and JSON. Despite some content being cached, heavy preloading and large asset sizes contributed to high data transfer costs.

What role did aggressive preloading play in the bandwidth costs?

Aggressive preloading involved loading content in advance (such as JSON data), which enhanced user experience but significantly increased bandwidth consumption, leading to higher costs.

How did requests add up to the total cost on Vercel?

The site triggered hundreds of requests per session for various assets, APIs, and dynamic content. Since Vercel charges for every edge request, these requests multiplied quickly, contributing to the overall bill.

What role did analytics play in the $46,000 bill?

Analytics accounted for 36% of the total cost. The website was collecting large amounts of data on user behavior, and the requests made to log that data added extra costs, especially since the analytics data was also billed as part of the serverless request charges.

How could Cloudflare have helped reduce the costs for this website?

Cloudflare would have been cheaper due to its free or cheaper bandwidth for cached assets, lower request charges, and free analytics. This would have significantly reduced the overall cost compared to Vercel's pricing structure.

Why might a VPS not have been suitable for hosting this website?

A VPS might have been unsuitable due to the high bandwidth costs and traffic spikes. Without a proper CDN like Cloudflare, a VPS would struggle to handle the scale and could lead to crashes or other operational issues.

What are the trade-offs between using Vercel and Cloudflare for hosting this kind of site?

Vercel offers superior developer experience with tools like easy preview deployments, but it's more expensive at scale. Cloudflare offers lower costs and better scalability but comes with more operational complexity and quirks in the tooling.