AutoRemind.net
SaaS Performance — Interactive Forms Without the JavaScript Tax
Vehicle reminder service with architecture-first optimization. Minimal hydration strategy with Astro islands only where interaction is mandatory.
Performance Snapshot
The Challenge
AutoRemind.net is a vehicle service reminder platform with complex interactive elements — date pickers, vehicle registration lookups, and real-time form validation — all of which traditionally require heavy JavaScript frameworks.
Issues Identified
- React-based SPA with 380KB JavaScript bundle hydrating on every page load
- Date picker library alone contributed 65KB of JavaScript
- Vehicle lookup form required real-time API calls with loading states
- Full page hydration meant even static marketing content paid the JS cost
- Time to Interactive exceeded 5 seconds on mid-range mobile devices
The Strategy
Implemented a minimal hydration strategy using Astro islands architecture — interactive components load JavaScript only when needed, while the rest of the page ships as pure HTML.
T10: Islands Architecture
Converted from full-page React hydration to Astro islands. Only the form and date picker components ship JavaScript. Marketing content is pure static HTML.
T11: Deferred Hydration
Interactive components use client:visible directive — JavaScript loads only when the component scrolls into view, not on page load.
T4: Inlined Critical CSS
All critical styles inlined into the HTML document. The above-fold content renders with zero external requests.
T12: Code Splitting
Each island bundles only its own dependencies. The date picker JS loads separately from the form validation JS.
T14: Font Optimization
Self-hosted Inter variable font with preload hint. Font swap happens invisibly with metric-matched fallbacks.
T19: Minimal Inline JS
Navigation and scroll interactions rebuilt with sub-1KB inline scripts. No external JS file for basic UI behaviors.
The Execution
Migrated from a Create React App SPA to an Astro site with selective React islands. The marketing pages ship zero JavaScript while interactive features remain fully functional.
Component Inventory
Audited every React component. Classified as "static" (render once, no interaction) or "interactive" (requires client JS). Only 3 of 24 components needed hydration.
Astro Migration
Rebuilt all static components as Astro components. Converted interactive components to use client:visible for deferred loading.
Form Optimization
Replaced the heavyweight form library with native HTML5 validation plus a 4KB custom validation script. Date picker swapped for a lightweight alternative.
API Layer Refactor
Moved vehicle lookup to a server-side API route. Results are returned as HTML fragments, eliminating the need for client-side state management.
Progressive Enhancement
Forms work without JavaScript via standard form submission. JS enhances with real-time validation and smoother UX when available.
The Results
AutoRemind.net now scores 95 on mobile and 99 on desktop, proving that SaaS platforms with complex interactivity can still achieve exceptional performance.
Key Achievements
- Mobile score improved to 95 with interactive form components
- JavaScript payload reduced from 380KB to 42KB (89% reduction)
- Time to Interactive dropped from 5.2s to 1.8s
- Only 3 components hydrate — the rest is zero-JS static HTML
- TBT reduced to 20ms from 680ms
- Forms remain fully functional with progressive enhancement
Verify It Yourself
Don't take our word for it. Click the buttons below to run a live PageSpeed Insights test on AutoRemind.net — right now, in your browser.
Opens Google PageSpeed Insights in a new tab. Results are live and unmanipulated.
Want Results Like This?
Every project starts with a free performance audit. Let's see what we can do for your site.