How We Boosted Login Performance Of High-Traffic B2C Website by 57%

Introduction

The login experience is often the first functional touchpoint between a user and a digital platform, particularly in high-traffic B2C environments where milliseconds can define user perception, retention, and conversion. One of our B2C clients encountered a pressing challenge: the /login route of a key platform was underperforming, with bloated bundle sizes, unacceptable FCP and LCP scores, and runtime inefficiencies that put both user experience and SEO at risk.

What made this even more critical was the context. The login page is a high-impact zone. It’s not just a form; it’s the gateway to user journeys, retention loops, and ultimately, revenue. If users face more than two seconds of load delay, they’re likely to drop off, and for mobile users on constrained networks, that threshold is even lower. Our performance audit showed metrics that far exceeded these limits, with FCP and LCP stretching beyond 14 seconds.

Rather than patching symptoms, we chose to re-architect the experience through a research-driven, performance-first lens. What followed was an in-depth Proof of Concept (POC), where we tested modern UI libraries and architectural patterns to systematically solve performance bottlenecks. This blog details our end-to-end journey, from the initial diagnosis to identifying a winning solution with Panda-CSS and Formik. The result? A lean, performant, and future-ready login experience with a 57% reduction in bundle size, zero long tasks, and a Lighthouse score of 99.

Establishing The Baseline 

Our baseline implementation used Ant Design (AntD) and styled-components. Despite minimal visual complexity, the bundle size stood at 270kB. 

Performance metrics revealed troubling figures:

• The Lighthouse score stood at 83, indicating room for improvement. The First Contentful Paint (FCP) took 14.2 seconds to render, and the Largest Contentful Paint (LCP) lagged behind at 14.55 seconds. Such prolonged rendering times directly impact user experience and search engine rankings.

• Additionally, Performance Insight flagged five long tasks as critical culprits, most of which stemmed from runtime CSS-in-JS rendering used by AntD and styled-components. These findings highlighted the urgency for a performance-first architectural overhaul. Importantly, response times above 2 seconds are often enough to drive users away. Optimizing the login route, one of the most critical user touchpoints, became a clear necessity to meet modern UX expectations and user engagement benchmarks.

The Optimization Journey 

We experimented with various combinations of UI frameworks and libraries to reduce load time, enable React Server Components (RSC), and streamline the frontend architecture. Here’s how the different implementations compared:

The Breakthrough With Panda-CSS 

Panda-CSS provided the most significant leap in performance. Unlike runtime CSS-in-JS libraries, Panda-CSS compiles styles at build time, eliminating execution delays and reducing runtime JavaScript overhead. By pairing Panda-CSS with Formik, which replaced AntD’s bulky form components, we achieved a streamlined, performant login experience.

The result was a substantial 57% reduction in bundle size, from 270kB to 115kB. Additionally, both FCP and LCP dropped below the 5-second mark, aligning well with modern Core Web Vitals thresholds. 

The Lighthouse performance score reached an impressive 99, and more importantly, the Performance Insight tool showed zero long tasks, indicating a smooth, responsive rendering process. This improvement positions the application within the ideal web response range of under 1 second, a critical benchmark for mobile-first markets and bandwidth-constrained users.

Strategic Phased Implementation 

Real-world implementation in a cloud platform requires balancing innovation with delivery constraints. Given the complexity of migrating away from AntD, we proposed a six-phase migration strategy that breaks the transition into manageable stages.

• In the first phase, we introduce Panda-CSS into the application, replacing AntD’s Form component with Formik. Basic form components such as checkboxes, radio buttons, and input fields are rebuilt using Panda-CSS to minimize bundle weight and improve runtime performance.
• The second phase focuses on layout primitives, Typography, Button, Flex, and Grid components are replaced with custom alternatives built using Panda-CSS, ensuring consistency and reusability across the application.
• In the third phase, we tackle list-based UI elements like Badge, Menu, and Spin, gradually phasing out remaining AntD dependencies and replacing them with lightweight, accessible equivalents.
• Phases four and five are centered around more complex UI components like Drawer, Modal, and Notification. These will be either custom-built or sourced from Panda-compatible libraries that align with our performance goals.
• The sixth phase involves a broader code refactor. This includes simplifying state management, optimizing logic, and integrating React Server Components where applicable to further minimize client-side execution.

Broader Implications For Engineering Strategy 

This engagement underscores Axelerant’s philosophy that performance is a proactive priority, not a reactive fix. The migration process illustrates our commitment to thoughtful architecture and measurable outcomes.

From a developer experience standpoint, transitioning to a simpler, build-time compiled stack like Panda-CSS improves maintainability. Developers are freed from the burden of runtime CSS complexities, and component reuse becomes easier to manage.

From a business perspective, our changes align with modern performance standards such as Google’s Core Web Vitals, directly impacting SEO, bounce rates, and conversion efficiency. According to our internal benchmarks and user experience expectations, users tend to abandon experiences that exceed 2 seconds in load time. Reducing that window to under 1 second provides a tangible edge in terms of retention and satisfaction, especially in performance-sensitive industries.

Looking ahead, Panda-CSS and Formik provide a future-ready foundation. With support for React Server Components, our architecture is poised to handle growing traffic and user demands without compromising performance.

Reimagining Performance As A Strategic Lever

Digital performance isn’t just about faster loads; it’s about first impressions that convert, experiences that retain, and systems that scale under pressure. When every second costs attention and every interaction shapes loyalty, performance becomes your product’s most measurable promise.

This isn’t just another framework swap. It’s a strategic blueprint for how engineering and product teams can collaborate to turn architectural intent into business impact. It’s about treating every route, especially something as fundamental as /login, as a lever for competitive advantage.

Ready To Transform Your Frontend Performance?

If you're facing similar performance bottlenecks or planning a frontend modernization, we’re ready to help you lead the way. Get in touch with Axelerant to explore how we can elevate your digital experience.