Shaving seconds off the dashboard login
Before Cloudflare's Speed Week 2023, the engineering team took a hard look at the performance of the Cloudflare dashboard itself. The initial benchmarks, gathered in Q1 2023 using Google's Lighthouse and PageSpeed Insights alongside Cloudflare's own Speed Test tool, were underwhelming. While the first paint came quickly at 200ms, it took more than two seconds for the page to become fully interactive. During that window, the browser was blocked for over 500ms by long JavaScript tasks, and more than half of the JavaScript delivered for the login page wasn't actually needed to render it.
Rolling out improvements to a monolithic single-page application that serves millions of daily users carries real risk of service interruption. The team chose to phase the changes carefully, starting with the login page. The focus was on improvements that would help users everywhere, not just those closest to Cloudflare's core data centers—where some regions were already seeing load times up to ten times longer. Performance was measured by Lighthouse score, but deliberately not used as a hard target.
Shipping less code
The most direct lever was simply reducing the amount of JavaScript users had to download. In a five-year-old monolithic application, that's easier said than done. The team deduplicated large dependencies that had accumulated multiple versions, starting with lodash and the icon library. Bloated data packages, such as the datacenter colo catalogs, were refactored and trimmed. Entire packages of unused code—development-only components, deprecated translations, and old Cloudflare Access UI elements—were deleted.
These changes cut total assets from 10MB (2.7MB gzipped) down to 6.5MB (1.7MB gzipped), moving the Lighthouse performance score to about 70. A solid first step, but there was more to gain.
Splitting the application at the top level
While most account-level and zone-level pages were already code-split, the root application was not. The entrypoint bundle contained the full bootstrap code for both authenticated and unauthenticated users. That meant visitors who weren't even logged in were paying the cost of code for billing, product pages, and profile settings they would never see.
The team split the monolithic application into two sub-applications: one for authenticated users and one for unauthenticated users. On initialization, the app makes an API request to check authentication state and dynamically loads only the relevant bundle. Users who aren't logged in now receive a small bundle containing just the code for the login and signup flows plus a few global components. Everything else—billing, account-level and zone-level products, sidebar navigation, user profile settings—is bundled separately and only loads after login.
This change drove significant improvements, particularly to Largest Contentful Paint, and pushed performance scores to roughly 80. But a Chrome performance profile revealed the longest blocking task still contained code being parsed and evaluated that was never used. Sidebar navigation code, for example, was still loading for unauthenticated users who never saw that component.
Getting tree-shaking right
The culprit was a suboptimal dead-code elimination configuration. Tree-shaking—the automatic removal of unused module imports by the JavaScript transpiler—is standard in modern setups, but retrofitting it onto an application as old as the dashboard is not straightforward. The team had to audit each JavaScript import individually to identify modules without side effects, so the transpiler could safely strip them. The majority of modules were optimized, though the team notes it will be an ongoing effort as further improvements are made.
The combined work produced notable gains for US users hitting the login page for the first time:
Desktop
Mobile
What's next
These results are framed as a first step rather than a finish line. The team's roadmap includes decoupling the signup pages from the main application, redesigning the SSO login experience, and exploring microfrontends and edge-side rendering. Users interested in benchmarking their own sites can run a report via Cloudflare Speed Test.
