We have been working on optimizing browser performance for @o1_exchange and the results are very satisfying.
Here’s how we did it:
Approach
- Async component loading (React.lazy + Suspense)
- Internal module improvementImage compression (scripts/optimize-static.mjs, imageThumbUrl instead of imageLargeUrl)
- Minify html (plugins/minify-html.ts) Stylesheet (plugins/critical-css.ts, plugins/async-stylesheets.ts, src/critical.css, src/load-styles.ts) Vercel caching (vercel.json) Async loading service worker (src/main.tsx)
- Third party modules improvement
- Remove unneeded/redundant npm package (icons, axios, data, crypto, jwt)
- Import only used module instead of entire library (e.g. import { ethers } from "ethers" to import type { Provider } from "ethers”)
- External dependency optimization (e.g. Turnkey currently working making their react-wallet-kit smaller)
- Trading view loading order CDN on external npm package
Notes
- Suspense and lazy loading work together to enable code splitting that optimizes render performance. Lazy loading make component load asynchronously and create a promise Suspense catches that promise
- Optimize static asset script during build process (scripts/optimize-static.mjs)
- Change all Codex image from to imageThumbUrl
- Import only necessary module (e.g. import { ethers } from "ethers" to import type { Provider } from "ethers”)
- Trading view loading migration to detail page instead of index.ts
- If we change trading view or content security header, our chart in production might run into bugs because of cache mismatch
- Difference between tsconfig.(app/node/<empty>).jsontsconfig.json: root config as coordinator tsconfig.node.json: config for build/bundle time tsconfig.app.json: config for React app vercel.json: config for vercel deployment vite-env.d.ts: typescript declaration file
Let's compare data:
And finally...
Comparison isn't always the killer of joy. Especially if you are in love with competing.
Ofc we're still pushing for the better.