# Making the Supabase Dashboard Supa-fast

[Supabase](https://yomu.fyi/company/supabase) · Inian Parameshwaran · Dec 13, 2020

**Type:** Problem & solution

## Summary

Adding features to the Supabase single-page application dashboard risked performance regressions due to increasing JavaScript bundle sizes. To establish a baseline, the engineering team introduced next-bundle-analyzer and tracked Real User Monitoring alongside Core Web Vitals using Sentry. Optimization efforts focused on pruning dependencies, which included swapping Moment.js for day-js, replacing Joi with ajv, reverting crypto-js to version 3.3.0, and moving the 388 KB zxcvbn password module to a backend API. The team also implemented Next.js dynamic imports for heavy components like spreadsheet parsing, removed legacy server-side props to unlock Automatic Static Optimization, and configured long cache headers on assets. These architectural adjustments brought Core Web Vitals within recommended thresholds and lowered client-side page transition payloads below 200 KB of JavaScript.

## Context

Adding new features like a Monaco-backed SQL editor and database views to the Supabase single-page dashboard led to bundle growth and potential performance regressions across the application.

## Approach / What changed

The team established bundle and Core Web Vitals baselines, replaced bloated npm dependencies with lightweight or native alternatives, offloaded password-checking logic to the server, lazy-loaded large components with dynamic imports, enabled Next.js Automatic Static Optimization, and corrected browser cache headers.

## Takeaways

- Replacing heavy frontend libraries with lightweight or native alternatives, such as switching from Moment.js to day-js or using native fetch instead of axios, substantially reduces bundle footprint.
- Moving computation-heavy modules like zxcvbn to backend APIs and lazy-loading large dependencies like xlsx prevents massive scripts from loading on initial visits.
- Enabling Next.js Automatic Static Optimization by removing getServerSideProps and getInitialProps allows pages to be pre-rendered to HTML and cached on CDNs.

**Tags:** [Caching](https://yomu.fyi/topic/caching), [Monitoring](https://yomu.fyi/topic/monitoring), [Performance](https://yomu.fyi/topic/performance), [Refactoring](https://yomu.fyi/topic/refactoring)

[Read original post](https://supabase.com/blog/supabase-dashboard-performance)
