Reducing Vercel Costs by 40 Times with Just One Line of Code
Origin
Received a warning from Vercel 2 days ago
Received a warning from Vercel 1 day ago
Today, another warning from Vercel
Analysis
First, let's take a look at the data for Vercel's Edge Middleware invocations
, Function Invocation
, and Edge Requests
usage.
You may notice that starting from October 13, various metrics experienced a nearly 10 to 50 times surge every day. However, the UV and PV data I obtained from umami only shows anomalies for October 14, indicating that the recent 4 days of edge requests and function requests do not align with the actual traffic data.
After clicking on the link in Vercel's email about how to optimize Edge Requests, Vercel provided three optimization points:
- Identify frequent remounts
- Over-polling or data fetching
- Reduce prefetching: While prefetching can improve perceived page navigation performance, it also increases the number of requests to your website. Consider reducing the amount of prefetching, for instance, using prefetch="false" on the Link component in frameworks like Next.js.
Upon seeing the third point, combined with my recent code changes and recent strategies for reducing costs in NextJS, I immediately realized that the likely problem was the prefetching by the next/link component.
In recent days, I added a showcase and feature section to the MemFree AI UI Generator page, with the showcase containing 9 Links and the feature section also containing 9 Links.
So, I promptly submitted a code change to disable prefetch for all next link components. Here’s the code commit: Disable next link prefetchs Beta, while also disabling the previous manual prefetch for the Pricing Page, which is documented in this code commit: Remove pricing page prefetch.
Optimization Results: Request Count Reduced by 40 Times
After going live, the results were quite remarkable:
The time period shown in the image is from 3 PM to after 8 PM Beijing time.
At the same time, the real UV and PV data is as follows:
From the chart, it is evident that the PV data at 3 PM is a quarter of that at 8 PM, while the Function Invocation count is 10 times that at 8 PM, meaning that simply disabling prefetching for a next link resulted in a 40-fold reduction in Function Invocation counts.
Some may ask if disabling Link's prefetch affects performance significantly. From the actual online performance of MemFree, the impact on performance is virtually negligible.
Thus, if you encounter exceeding the free limits on Vercel's Function Invocation and Edge Requests, consider optimizing with next link's prefetch="false".
Today, regarding cost optimization on Vercel, I would like to share two other optimization points that I have deeply felt recently:
cloudflareLoader + Cloudflare CDN Optimization for Next Image Bandwidth Costs
In MemFree AI UI Generator, I stored 9 videos introducing the features on Cloudflare R2. Later, when implementing the showcase's images, I also conveniently stored them on Cloudflare R2, which has CDN acceleration enabled by default for images and videos, allowing for fast access.
To optimize the Largest Contentful Paint on mobile devices, I needed to optimize the loading of the first image in the showcase using Next's Image component. The core code is as follows:
However, I found that Next's Image component would cache images from the CDN again, which is actually unnecessary, and Cloudflare does not charge for traffic, while Vercel does. To solve this problem, we will utilize Cloudflare's transform-images service and define a cloudflareLoader in NextJs.
You may refer to:
Cloudflare transform-images Integrate with frameworks.
I previously thought that the next/image component had no effect on network images, which is why I did not use next image in the network images of MemFree's AI Search. Had I used it, my costs would have increased significantly.
Balancing Cost and Performance with Server Actions and Server Components
React's Server Actions and Server Components offer many advantages, and many templates and examples from Vercel heavily rely on Server Actions and Server Components. While Server Actions + Server Components + Vercel’s caching can indeed achieve excellent performance, we must not overlook the cost factor.
There are two points to note:
- Everyone should make use of the browser's Local Storage as much as possible to reduce requests to the server. This remains true regardless of how technology evolves, as Local Storage offers the best performance for free. Server requests on Vercel’s serverless platform incur costs. For example, regarding historical messages in AI Search or AI Chat, many examples from Vercel entirely rely on server-side operations, which can significantly drive up database costs. In such typical cases, we can opt to cache data in the browser's Local Storage. The caching code for historical messages in MemFree can be found at MemFree Search local-history.
- Everyone should leverage the computing power of computers and mobile devices as much as possible, as this computing power continues to grow stronger and remains free. Although server-side computation and rendering come with various advantages, we have to pay extra for them. For example, in implementing the AI UI Generator feature for MemFree recently, one of the most time-consuming problems I encountered was how to achieve efficient rendering of React + TailWind + Shadcn UI components. I researched and considered 7 or 8 different solutions, with two main ideas being server-side rendering and client-side rendering. However, due to the cost issues associated with server-side rendering, I eliminated that option. In client-side rendering, many open-source projects used codesandbox, but its performance is poor and rendering is slow. Ultimately, I decided to build an efficient React + TailWind + Shadcn UI component rendering solution from scratch using MemFree. I will share the specific ideas and plans later, with the core code being found here MemFree React Preview Code.
I hope this sharing is helpful to everyone. MemFree will continue to use Vercel and will share more experiences in reducing Vercel costs in the future. Feel free to follow MemFree's Twitter.