Deploying your Sitecore application on Vercel might come as a surprise if you’re accustomed to hosting on platforms like Azure or on-prem servers. While Vercel offers an impressive infrastructure, it works quite differently from traditional hosting solutions. Therefore, it’s essential to understand how Vercel charges for its services and how to optimize your application to avoid unnecessary costs.

In this blog post, I’ll guide you through some methods for optimizing Sitecore applications on Vercel, covering key areas such as bandwidth management, image hosting, firewall configuration, and more.

Vercel Billing: What You Should Know

Vercel will usually charge you based on two main parameters:

1. Usage (Bandwidth or Fast Data Transfer): This refers to the amount of data transferred through Vercel’s infrastructure.
2. Serverless Executions: This is the time it takes for serverless functions to execute.

Therefore, when monitoring your Sitecore application on Vercel, you need to pay close attention to both of these metrics. Vercel charges for every byte of data transferred and for the time spent executing serverless functions.

Image Hosting Optimization

One of the most significant contributors to your bandwidth usage will be images, especially if you’re using Vercel’s built-in image optimization feature. While Vercel’s image optimization works well, every image served counts towards your bandwidth. For high-traffic pages like your homepage, this can quickly add up.

Strategy:

• CDN for Image Hosting: Consider using a Content Delivery Network (CDN) to host your most frequently used images. This way, you can offload some of the bandwidth demands from Vercel.
• Hybrid Approach: For less accessed images, you can still rely on Vercel’s image optimization.
• Use a Digital Asset Management (DAM) System: If you are using Sitecore’s headless implementation, a DAM like Sitecore Content Hub or similar platforms can help you manage and optimize images more efficiently.

Vercel provides a usage dashboard where you can monitor which images are consuming the most bandwidth which can help you make more data-driven decisions about which images to host on a CDN if you want to use Hybrid approach.

Firewall Management: Block Unwanted Traffic

Vercel charges for every request served by its infrastructure, but requests blocked by your firewall do not count toward usage. This means that blocking unnecessary URLs or requests can help reduce your overall usage.

Strategy:

• Block Unnecessary URLs: If you’ve recently migrated to Vercel, you may have old URLs that are no longer in use. Block them at the firewall level to prevent them from adding unnecessary traffic to your usage.
• Web Application Firewall (WAF): Consider placing an advanced WAF in front of Vercel for additional protection. While Vercel’s native firewall is improving, it may not yet be as advanced for enterprise applications.

Keep Error Pages Lightweight

When migrating an old website, you may have URLs that no longer exist, causing frequent 404 errors. Each time someone visits a non-existent page, Vercel will serve your custom 404 page, which will results in both function execution time and bandwidth usage.

Strategy:

• Lightweight Error Pages: Make sure your 404 and other error pages are as lightweight as possible. This will help reduce the cost of serving them when users land on broken links.
• Block Unnecessary URLs: As mentioned earlier, blocking URLs that no longer exist will prevent these unnecessary requests from contributing to your usage.
• Add Redirects to working URLs: You can add custom redirects or use Vercel’s firewall to add redirects for such broken links.

Cache High-Traffic Pages

Your homepage is often the most accessed page on a website. To avoid repeated requests going to Vercel for the same page, caching it can save both time and money.

Strategy:

• Cache Frequently Accessed Pages: If you have a Web Application Firewall (WAF) in front of Vercel, use its caching features to serve static content like the homepage directly from the cache. If you use such caching you will need to think of a mechanism to clear cache so that content changes are visible. This can be done either manually or you can hook into Web Application Firewall’s APIs to clear cache on Publish from Sitecore.

Preview Deployments: Protecting Your Resources

Vercel offers preview deployments, which is a fantastic feature for testing and reviewing changes before they go live. However, you need to be mindful of these deployments, as they can attract unwanted traffic, including bots, which will contribute to your usage.

Strategy:

• Password Protect Preview Deployments: To prevent bots from accessing your preview environments and consuming bandwidth, ensure that these deployments are password protected.
• Password Protect Non-Prod Deployments: Similarly you may want to password protect all your Non-PROD environments to ensure only allowed traffic can reach them

Optimize Serverless Functions Memory Usage

Vercel allocates memory to serverless functions, and it’s important to understand how this works to optimize both performance and cost. Vercel charges based on the amount of memory allocated to a function, not just the amount of memory it uses when the function executes.

Strategy:

• Optimize Function Memory: In Vercel’s project settings, you can control the maximum function duration and CPU allocation. For most applications, you can start with the basic memory allocation (1GB) and increase it only if needed.
• Individual Function Memory Control: You can fine-tune the memory allocation for each specific function by configuring Vercel’s vercel.json file. For instance, if a function doesn’t require much memory, you can reduce its allocation to minimize costs. Here is an article that have more details about this topic.

On-Demand Static Site Generation

If you’re using Next.js for static site generation (SSG) and the Sitecore’s Next.js starter template, the default regeneration interval for pages is usually set to two minutes. This means that Vercel will regenerate the page every two minutes or each time it receives a request whichever happens first, which can result in unnecessary resource usage.

Strategy:

• On-Demand Regeneration: Change the regeneration interval to “on-demand” instead of a fixed time interval. This way, pages are only regenerated when needed, such as when content is published or updated in Sitecore. Here is an article with more details.
• Trigger Regeneration via API: You can hook into Sitecore’s publishing pipeline to trigger a custom API function that regenerates specific pages on Vercel only when necessary.

Conclusion: Be Proactive to Keep Costs in Check

Vercel is an excellent platform for serving your content globally with speed and efficiency. However, just like any platform, it requires careful planning and optimization to ensure that you’re making the most of its capabilities without running up unnecessary costs.

By following the tips above i.e. optimizing image hosting, managing firewall traffic, caching frequently accessed pages, optimizing serverless functions, and controlling static site regeneration, you can ensure that your Sitecore application on Vercel remains cost-effective while delivering a fast and seamless experience for your users.

Pro Tip: Regularly monitor your usage via Vercel’s dashboard to catch any spikes or inefficiencies early. With proper configuration and vigilant monitoring, you can keep your costs within limits while fully benefiting from Vercel’s powerful platform.

Comma-Separated Keywords:

Sitecore on Vercel, optimize Sitecore application, Vercel performance tips, manage Vercel costs, Sitecore bandwidth optimization, Vercel deployment guide, Vercel serverless functions, image hosting optimization, Sitecore CDN integration, Caching strategies, reduce Vercel usage, Sitecore usage tuning, Vercel for Sitecore developers

Hashtags:

#Sitecore, #Vercel, #WebUsageOptimization, #VercelUsageTuning, #VercelDeployment, #CostOptimization, #SitecoreHeadless, #WebDevelopment, #CDN, #Serverless, #Caching, #WebHosting