Building an HTML-first site doubled our users overnight
For years, we’d been building and iterating on our personal finance comparison site, FinWise. We were seeing steady, if unspectacular, growth. We poured time and resources into content marketing, SEO, and social media. But a significant leap – the kind that grabs headlines – remained elusive. Then, almost overnight, our user base doubled. The secret? We rebuilt the core of our site, adopting an “HTML-first” approach.
This isn’t about abandoning frameworks or modern web development practices. It’s about re-prioritizing fundamental performance and user experience. This article details our journey, the problems we faced, the solution we implemented, and the incredible results we achieved. If you’re running a finance website (or any content-heavy site) and struggling with growth, this story is for you.
The Problem: Slow Pages & Declining Metrics
Our original FinWise site was built using a popular JavaScript framework. It looked good, was relatively easy for our developers to maintain, and offered the flexibility we needed… initially. However, as we added more features and content – detailed financial product comparisons, interactive calculators, and extensive blog posts – performance began to degrade.
Specifically, we noticed these alarming trends:
- Increasing Page Load Times: Pages were taking longer and longer to fully load, especially on mobile devices.
- Poor Core Web Vitals: Our Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS) scores were consistently below optimal, negatively impacting our Google rankings. We used tools like Google PageSpeed Insights and WebPageTest to monitor these.
- High Bounce Rate: Users were arriving on our site and leaving quickly, without engaging with our content.
- Decreasing Organic Traffic: Despite strong keyword rankings, organic traffic plateaued and even started to decline. This was a massive red flag.
- Mobile Performance Gap: The disparity between desktop and mobile performance was widening, and mobile traffic was increasingly important to our target audience.
We suspected the JavaScript framework was the primary culprit. While powerful, it added significant overhead. Every page request involved downloading, parsing, and executing a considerable amount of JavaScript before the user could even see meaningful content. This was a particularly acute problem for users on slower connections or older devices. We considered optimizing the framework, but realized it was a band-aid solution. We needed a more fundamental shift. We explored Progressive Web Apps (PWAs) and Accelerated Mobile Pages (AMP), but both presented their own complexities and drawbacks. AMP, in particular, felt restrictive and limited our monetization options.
The Solution: Embracing HTML-First
We decided to try something radically different: an HTML-first approach. The core principle is simple: prioritize delivering fully rendered HTML to the browser as quickly as possible. JavaScript is then used sparingly, only for enhancing the user experience, after the core content is visible.
Here’s what that looked like in practice:
- Server-Side Rendering (SSR): We moved to a server-side rendering (SSR) setup. This means the HTML for each page is generated on the server and sent to the browser, rather than being constructed entirely in the client’s browser using JavaScript. This dramatically improved initial load times.
- Minimal JavaScript: We stripped away all non-essential JavaScript. Interactive elements were carefully evaluated. If functionality could be achieved with HTML and CSS, we did so. JavaScript was reserved for things like form validation, complex filtering, and tracking user interactions.
- Optimized Images: We implemented aggressive image optimization techniques, including compression, proper formatting (WebP where supported), and responsive images served based on device size. We also leveraged lazy loading for images below the fold.
- Critical CSS: We inlined the critical CSS (the CSS required to render the above-the-fold content) directly into the HTML. This eliminates render-blocking CSS and allows the browser to display content immediately.
- Simplified Site Architecture: We streamlined our site architecture, reducing the number of requests required to load a page.
- Content Prioritization: We refocused on delivering the most important content upfront. Less critical elements were loaded asynchronously.
We initially used a Node.js based SSR solution with a templating engine. This allowed us to maintain our existing content management system (CMS) while delivering pre-rendered HTML. This was a crucial factor – we didn’t want to overhaul our entire content workflow.
The Results: A 100% User Increase & Beyond
The results were astounding. Within one week of launching the HTML-first version of FinWise, our daily active users doubled. Here's a breakdown of the key improvements:
| Metric | Before (JavaScript Framework) | After (HTML-First) | Change |
|---|---|---|---|
| Daily Active Users | 5,000 | 10,000 | +100% |
| Average Page Load Time | 6.2 seconds | 1.8 seconds | -71% |
| Largest Contentful Paint | 4.5 seconds | 1.2 seconds | -73% |
| Bounce Rate | 65% | 42% | -35% |
| Organic Traffic | Stagnant | +25% (in 1 month) | Significant |
| Mobile Page Speed | 48/100 | 85/100 | +77 points |
(Note: Scores are based on Google PageSpeed Insights.)
The improvements in Core Web Vitals directly translated to higher rankings in Google search results. We saw a significant increase in organic traffic, particularly for competitive keywords. The lower bounce rate indicated that users were finding our content more engaging and useful. We also observed a noticeable increase in conversions (users completing financial product applications).
Crucially, the shift to HTML-first didn't limit our ability to innovate. We continued to add new features and content, but with a laser focus on performance. JavaScript was used strategically to enhance the experience, not dictate it. We even integrated a helpful financial calculator using a lightweight JavaScript library – https://example.com/ offers a similar tool for offline calculations if users prefer.
Lessons Learned & Future Considerations
This experience taught us several valuable lessons:
- Prioritize Performance: In the world of finance, trust and speed are paramount. A fast, reliable website builds trust with users and improves SEO.
- Don't Over-Engineer: Sometimes, the simplest solution is the best. Avoid adding complexity unless it's absolutely necessary.
- Core Web Vitals Matter: Google is serious about Core Web Vitals. Optimizing for these metrics is no longer optional; it's essential.
- Embrace Server-Side Rendering: SSR is a powerful technique for improving performance, especially for content-heavy websites.
- JavaScript is a Tool, Not a Crutch: Use JavaScript judiciously. Don't rely on it to do things that can be accomplished with HTML and CSS.
Looking ahead, we plan to further optimize our site by:
- Implementing a Content Delivery Network (CDN): To distribute our content closer to users around the world.
- Experimenting with Image CDNs: To automatically optimize and deliver images in the most efficient format.
- Continual Performance Monitoring: To identify and address any performance regressions. We are looking into tools like https://example.com/ for more granular performance analytics.
- Further JavaScript Reduction: Identifying areas where JavaScript can be removed or replaced with more efficient alternatives.
Disclaimer
This article contains affiliate links. If you purchase a product through one of these links, we may receive a commission. This helps support our website and allows us to continue providing valuable content. We only recommend products and services that we believe in and that are relevant to our audience. Our opinions are our own and are not influenced by any affiliate relationships.