TechPrufer
Get started
Vercel
Vercel logoVercel · Feature trail

Customer Site Performance Optimization

22 posts · Jun 2021 – Dec 2024

What this trail covers

Vercel's platform enables customers to achieve significant site performance improvements through the adoption of modern frameworks like Next.js and content management systems like Sitecore. This includes achieving faster load times, improved Interaction to Next Paint (INP) scores, and outperforming a large percentage of global websites. The platform's architecture supports scalable deployments, efficient content management, and localization, empowering marketing teams to independently manage a greater degree of control over their web presence. This includes leveraging Edge Middleware for localized experiences and optimizing server rendering for SEO and performance.

All Vercel trails
  1. Technical audits: Optimizing cost, performance, and productivityThis post details strategies for technical audits to optimize cost, performance, and productivity. It covers three types of audits: Code Review Audits (optimizing rendering and caching, e.g., migrating to App Router), Web Performance Audits (addressing revenue impact from third-party scripts, image optimization, and API waterfalls), and Usage Audits (optimizing serverless costs, ISR, and data caching). It emphasizes a diagnostic-first approach analyzing user experience, resource efficiency, and development velocity. Common patterns like balancing dynamic features with static optimization and resource optimization (images, serverless functions, CDNs, middleware) are discussed with recommended solutions and typical outcomes.
  2. How to choose the best rendering strategy for your appThis post explores the trade-offs and ideal use cases for Static Site Generation (SSG), Incremental Static Regeneration (ISR), Server-Side Rendering (SSR), Client-Side Rendering (CSR), and experimental Partial Prerendering (PPR). It provides implementation considerations and best practices for each, with a focus on how these strategies can be combined to optimize performance, SEO, and user experience. The post also highlights the role of Next.js in implementing these strategies and previews future content delivery advancements.
  3. Demystifying INP: New tools and actionable insightsThis post provides a deep dive into optimizing Interaction to Next Paint (INP), a Core Web Vital metric. It clarifies common misunderstandings of INP, breaks down its anatomy (user interaction, other code, event handler, browser render), and offers actionable strategies for optimization. Key contributions include explaining how to minimize blocking code in event handlers and browser renders, detailing React performance optimizations (memoization, immutable context/props), and introducing the `await-interaction-response` module to separate user interaction acknowledgment from expensive operations. It also discusses advanced techniques for optimizing the browser render phase, such as CSS containment and list virtualization, and highlights real-world lessons learned from optimizing nextjs.org.
  4. How Ruggable optimized their frontend architecture | Customers | VercelThis post details how Ruggable optimized their frontend architecture by decoupling from Shopify and adopting a headless approach using Next.js on Vercel and Contentful for content management. Key technical aspects include the use of Next.js for full control over rendering, performance, and optimization, Vercel's preview deployments for streamlined collaboration, and Contentful for unified content modeling enabling marketing teams to manage content without developer intervention. The resulting improvements in site speed, SEO rankings, and developer productivity are highlighted.
  5. Demant achieves global scalability and 30x faster response times with Vercel | Customers | VercelThis post details how Demant, a global healthcare group, migrated their existing, complex, and underperforming web infrastructure (traditional CMS on Azure) to a headless setup using Next.js and Vercel. Key technical achievements include a 10x reduction in hosting costs and a 30x improvement in response times. The migration involved building a new platform from scratch, leveraging Vercel's Edge Middleware, Image Optimization, and Edge Cache. The post highlights the benefits of Vercel's platform for developer agility, reduced infrastructure provisioning time, and seamless collaboration through Preview Deployments, leading to widespread adoption across Demant's business units.
  7. Leonardo generates 4.5M images daily with Next.js and Vercel | Customers | VercelThis post details how Leonardo.Ai leveraged Vercel's platform to significantly improve their developer experience and site performance. Key contributions include a 95% reduction in page load times due to Vercel's caching and CDN, and a reduction in build times from over 10 minutes to 2 minutes. The post also mentions the use of Vercel Monitoring for identifying and resolving issues in serverless functions and highlights the improvement in iteration speed, enabling Leonardo.Ai to launch new products in 1-4 weeks. It also notes the use of AWS Bedrock's managed foundation models to enhance AI-powered development tools.
  8. WordPress monolith to Vercel: How Personio elevated performance and DX | Customers | VercelThis post details Personio's migration from a monolithic WordPress site to a composable stack using Vercel, Next.js, and Contentful. It highlights significant improvements in Core Web Vitals (over 90% increase), particularly in Cumulative Layout Shift (CLS) and Largest Contentful Paint (LCP) (29% improvement on mobile). The migration also addressed technical debt, improved developer experience with features like Preview Deployments, and enhanced security through Vercel's hosting environment and Next.js capabilities.
  9. How Core Web Vitals & Lighthouse scores affect SEO RankingsThis post clarifies the distinction between Google's Core Web Vitals (field data) and Lighthouse scores (lab data) for SEO ranking. It emphasizes that only field data (LCP, INP, CLS) impacts search rankings, while Lighthouse provides diagnostic suggestions. It details the methodology for collecting field data via the Chrome User Experience Report (CrUX), including user eligibility and geographic considerations, and highlights the 28-day sliding window for score updates. It also explains the components of the Lighthouse performance score and its limitations in reflecting real user experience, particularly concerning modern frameworks and user interactions.
  10. First Input Delay (FID) vs. Interaction to Next Paint (INP)This post explains the transition from First Input Delay (FID) to Interaction to Next Paint (INP) as a Core Web Vital. It details the components of INP (Input Delay, Processing Delay, Presentational Delay) and contrasts it with FID's limitations. Optimization strategies for INP are provided, focusing on reducing processing delay (profiling, debouncing/throttling, code splitting, breaking down long tasks) and presentational delay (using `will-change`, `transform`/`opacity`, `content-visibility`, reducing forced synchronous layouts, using web workers). Event handling optimizations include deferring non-critical events, using passive event listeners, and event delegation. Measurement tools like Vercel Speed Insights, PageSpeed Insights, and Lighthouse are mentioned.
  11. Deploying at the speed of on-demand streaming | Customers | VercelThis post details how Joyn, a German streaming platform, enhanced the speed and efficiency of their Next.js app by migrating to Vercel. Key improvements include a 47% improvement in First Contentful Paint (FCP) and a 17% faster Time to First Byte (TTFB), attributed to Vercel's streamlined deployment process and superior developer experience, enabling faster feature shipping and live environment previews.
  12. Next.js Commerce: A headless Shopify ecommerce template built with the App RouterThis post introduces Next.js Commerce 2.0, highlighting its App Router readiness, dynamic storefront capabilities, and simplified architecture. It details how React Server Components, Streaming, Suspense, and the new data fetching/caching paradigms in the App Router enable dynamic content at static speeds. The post also includes a code example for a Shopify fetch wrapper and demonstrates how to use revalidation tags with Shopify webhooks.
  13. How Neo Financial cut time spent on infrastructure admin by 50% | Customers | VercelThis post details how Neo Financial leveraged Vercel's platform, specifically Next.js, Routing Middleware, Preview Deployments, ISR, and Integrations, to achieve a 50% reduction in infrastructure administrative effort. Key improvements include a 77% increase in page load speed due to out-of-the-box server rendering and Edge Middleware for translations, and faster release cycles enabled by Preview Deployments eliminating staging environments. Security and scalability were addressed through Vercel's industry-standard certifications and global CDN, leading to a 0.30% service uptime improvement.
  14. Making Commerce-UI a trusted partner for global ecommerce brands | Customers | VercelThis post highlights how Commerce-UI leverages Vercel's platform, specifically Next.js and Edge Middleware, to build performant and scalable eCommerce experiences for clients like Lift Foils. It details the use of Edge Middleware for regional personalization and localization, and Incremental Static Regeneration (ISR) for efficient content updates without redeployments, contributing to strong Core Web Vitals and zero Cumulative Layout Shift. The post also touches on improved developer experience through Preview Deployments and webhooks.
  15. Improve your search engine ranking with Next.js on VercelThis post details how Next.js, with its rendering strategies (ISR, SSG, SSR), image optimization (`next/image`), code splitting (dynamic imports), and font optimization (`next/font`), contributes to site performance gains that directly impact SEO. It highlights the use of Vercel's Edge Network for performance statistics and the App Router for enhanced metadata management and site structure. It also touches upon structured data and navigation strategies.
  16. How Plex 6x their impressions deploying Next.js on Vercel | Customers | VercelThis post details how Plex improved their site performance and developer experience by migrating from Kubernetes to Next.js on Vercel. Key technical contributions include the adoption of Next.js's Server-side Rendering (SSR), Incremental Static Regeneration (ISR) with on-demand revalidation, and Edge Middleware for geo-personalized content and A/B testing. The migration resulted in a 40% reduction in codebase, improved SEO rankings, and faster data propagation for catalog updates. Integrations with Checkly for end-to-end testing and Axiom for monitoring crawl requests were also highlighted.
  17. Vercel + Sitecore: Partnering on a composable futureThis post announces a strategic partnership between Vercel and Sitecore to deliver an end-to-end composable solution for building and deploying dynamic web experiences. It highlights how Sitecore is modernizing its frontend by leveraging Vercel's developer-centric stack, Next.js, Turborepo, and global edge network for improved performance and omnichannel capabilities. The integration aims to optimize performance, enable collaborative content editing, lower infrastructure costs, and enhance developer productivity.
  18. Approaches for optimizing your dashboard's frontendThis post details specific techniques used to optimize the Vercel Dashboard's frontend performance, including identifying and optimizing 'hot paths', reducing redundant JavaScript calls (e.g., `isLoggedIn()`), implementing caching for utility functions (e.g., `slugify`), optimizing third-party script loading strategies (tree-shaking, lazy loading, `next/script` strategies), minimizing unnecessary HTML markup, and leveraging Next.js optimizations like `<Image />` and automatic font inlining. It also introduces Vercel's 'Top Paths' feature for identifying heavy asset payloads.
  19. Improving INP with React 18 and SuspenseThis post details how React 18's selective hydration with Suspense can significantly improve INP by making hydration non-blocking, allowing components to become interactive faster. A case study on nextjs.org showed a reduction in TBT from 430ms to 80ms and improved INP to 48ms. Other optimization techniques include using CSS for animations, throttling/debouncing events, reducing DOM size, optimizing SVG rendering, using web workers, and lazy loading assets.
  20. Next.js 11, Next.js Live and more: A recap of Next.js Conf Special EditionIntroduced the `Script` component for improved loading performance and flexibility with third-party scripts. Enhanced the `Image` component with automatic size detection and blur-up placeholder support to reduce Cumulative Layout Shift. Announced 'Conformance for Next.js' as a framework-level mechanism for ensuring optimal application performance and quality. Previewed 'Next.js Live' for real-time, in-browser collaborative development.