Customer Site Performance Optimization

10/10/2024

This post details how Emburse, a customer, achieved a 4x increase in site performance and an INP below 200ms by migrating their legacy stack to Vercel, Next.js, and Sanity. It highlights the benefits of this modern stack for performance, scalability, and content management, enabling the marketing team to independently launch campaigns and update content across multiple languages.

7/24/2024

This post details how Elkjøp, a large retail company, migrated their e-commerce platform from an Angular, self-hosted Kubernetes setup to Next.js and Vercel. The migration resulted in significant improvements in release cycle time (from 7 weeks to 1 day), Cumulative Layout Shift (93%), Interaction to Next Paint (60%), and Largest Contentful Paint (50%). The post highlights the challenges of their previous platform, including slow page loads, SEO struggles, and inefficient developer experience, and how Next.js and Vercel addressed these issues through automated deployments, preview environments, and feature flags. The technical details include the impact on developer ownership and the ability to iterate faster.

7/23/2024

This 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.

6/12/2024

This post introduces the `await-interaction-response` module, a new library designed to help developers split user interaction acknowledgment from expensive DOM updates. It provides a practical solution for scenarios where immediate rendering is not feasible, thereby improving perceived performance and INP scores. The post also elaborates on the intricacies of the INP metric, offering deeper insights into its phases and common pitfalls, and provides actionable advice on optimizing event handlers and browser rendering, including techniques like CSS containment and DOM invalidation minimization.

6/11/2024

This post details how Frame.io implemented 'Fluid UI' principles (instant, smooth, coordinated) using Next.js App Router, React features (`useState`, `useOptimistic`, `useMemo`, `useCallback`), and Vercel's platform for performance monitoring and optimization. It highlights Vercel's role in reducing preview build times, optimizing load performance via the Edge Network and caching, and enabling continuous improvement through feature flags and deployment practices like Skew Protection.

5/9/2024

This post details how Desenio leveraged Vercel's platform, specifically Preview Deployments, Incremental Static Regeneration (ISR), and Next.js Redirects, to modernize their application architecture after a merger. It highlights the impact on build times, bounce rate, session duration, and site conversions, showcasing Vercel's role in enabling faster iteration and innovation for e-commerce platforms.

4/18/2024

This post details how Global Retail Brands (GRB) migrated their fragmented e-commerce infrastructure to Vercel, leveraging Next.js and Vercel's managed infrastructure. The migration resulted in a nearly 100% site uptime, a 75% decrease in development time (from months to a week), and deployment times reduced from 1 hour to under 10 minutes. Key Vercel features utilized include Domain Hosting, Developer Experience Platform, Speed Insights, and Preview Deployments. The migration of three key websites was completed within six months.

4/8/2024

This 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.

3/29/2024

This post details how Demant migrated their global healthcare platform from a traditional CMS setup in Azure to Next.js and Vercel. The migration involved building a new platform from the ground up, resulting in a 10x reduction in hosting costs and a 30x improvement in response times. Key Vercel features leveraged include Edge Middleware, Image Optimization, and Edge Cache. The post also highlights improved developer experience with build times reduced from hours to minutes and increased developer independence in provisioning infrastructure.

3/18/2024

This 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.

1/19/2024

This post clarifies the distinction between Core Web Vitals (field data) and Lighthouse scores (lab data) in the context of Google's SEO ranking. It emphasizes that only field data (LCP, INP, CLS) influences search rankings, while Lighthouse scores serve as diagnostic tools. The post details the methodology behind Chrome User Experience Report (CrUX) data collection, including user eligibility and the 28-day sliding window for scoring. It also addresses the geographical distribution of users and the impact of device performance on field data. Finally, it reiterates Vercel's capability to improve these metrics through its platform and Next.js.

9/26/2023

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.

8/23/2023

This post details how Vercel's platform helped Joyn, a streaming service, improve their Next.js app's performance. Key improvements include a 47% increase in First Contentful Paint (FCP) and a 17% faster Time to First Byte (TTFB). The migration to Vercel also resulted in significantly faster deployments and enabled developers to view feature branches in a live environment instantaneously upon commit, leading to faster feedback loops and quicker iteration cycles.

8/7/2023

This 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.

4/14/2023

This 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.

2/23/2023

This 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.

1/26/2023

This 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.

1/13/2023

This post highlights how Swell leverages Vercel and Next.js to build fast e-commerce experiences for their merchants. It specifically mentions the use of on-demand Incremental Static Regeneration (ISR) and hybrid rendering to achieve high performance for unlimited SKUs. The post also notes the ease of development using the Next.js Commerce starter kit, enabling rapid storefront creation.

1/12/2023

This 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.

8/9/2022

This 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.

8/9/2022

This 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.

6/22/2021

Introduced 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.