Rebuild · Speed (Self-initiated project)
sohailrana.com: React to Astro Rebuild, 78% Less JavaScript
- Client
- My own portfolio site
- Site
- sohailrana.com ↗
- From → To
- React + Vite single-page app → Astro
- Stack
- Astro, TypeScript, Tailwind CSS, Netlify
- Key result
- 78% less JavaScript, mobile PageSpeed 91, desktop 96
01 / The problem
My site was a React + Vite single-page app. It looked right in a browser, but the HTML the server sent was nearly empty: one div, with all the content built by JavaScript after the page loaded.
That had two costs. Visitors downloaded a full JavaScript app just to read static text. And search engines and AI tools that don't run JavaScript saw an empty page, which matters more now that clients search with ChatGPT and Perplexity as well as Google.
02 / The approach
- Rebuilt the site in Astro, which renders every page to HTML at build time
- Kept JavaScript only for the parts that need interaction, loaded as small islands
- Cut the JavaScript sent to the browser by 78%
- Kept the same design, with the codebase in TypeScript
03 / The scores
Mobile: Performance 91, Accessibility 96, Best Practices 100, SEO 100.
Desktop: Performance 96, Accessibility 96, Best Practices 100, SEO 100.
Both pass all 3 of Lighthouse's Agentic Browsing checks, which test whether AI agents can read and use the site.
You're reading this page on the rebuilt site, so you can check it yourself: run it through PageSpeed Insights, or view the page source and see the full text in the HTML.
04 / The result
- Every page readable as plain HTML by Google and AI search tools
- 78% less JavaScript
- Mobile PageSpeed 91, desktop 96
- SEO and Best Practices 100 on both
This is the same rebuild I offer clients whose sites are slow or locked into a builder.
What I'd do for you
Is your site a React app or a page builder that loads slowly? Send me the link and I'll tell you what a move to Astro would take.
Send me your site