SpeedBoost Website Performance Case Study
A demo agency website built with Next.js 16 for a measured Lighthouse study. Four performance problems were added on purpose, then removed, taking the mobile home page score from 56 to 91.
Overview
SpeedBoost is a six-page website for a fictional performance agency, built as a self-initiated portfolio project. It is not client work, and the agency does not exist.
To demonstrate a complete optimization workflow, four common problems were added to the site on purpose and recorded with Lighthouse. Each one was then removed and re-tested under the same conditions.
On the home page's mobile test, using the median of five runs on a local production build, Performance went from 56 to 91, LCP from 4.0 s to 926 ms, Total Blocking Time from 2.5 s to 367 ms, CLS from 0.09 to 0, and page transfer from 4.5 MB to 234 KB.
Because the slow version was created deliberately, these results show the diagnostic process. They do not predict the improvement on another website.
The challenge
A carefully built Next.js site can score well from the start, which leaves little to demonstrate. The challenge was to show real diagnosis and repair while keeping the comparison fair and stating openly that the problems were added on purpose.
The approach
Build the site with Server Components and little client JavaScript, add four documented problems in separate Git commits, and measure the baseline. Then revert one problem at a time, re-test after each fix, and publish the results with their run-to-run variation and limits.
Key features
- Before-and-after performance report with labelled test conditions
- Fix-by-fix results for four seeded problems
- Oversized image, blocking fonts, heavy libraries and hydration work diagnosed and removed
- Server-rendered charts with no chart library
- Technical SEO: metadata, canonical URLs, sitemap and structured data
- Accessible contact form demo with validation and clear form states
Highlights
Measured fix by fix
Each problem was removed in its own commit and re-tested, so the effect of each change is visible.
A misleading 100 caught
One intermediate score of 100 was most likely a measurement artefact caused by slow fonts delaying first paint, and the report explains why.
An idea tested and rejected
Turning off link prefetching saved about 15 KB without a meaningful gain, so it was dropped to keep navigation fast.
Open about the limits
INP is marked as not measured, and Total Blocking Time of 367 ms is still above the 200 ms good threshold.
More projects
Personal ProjectAutomationAI Client Communication Agent
A private tool I built for my own freelance work. It assesses job posts and drafts proposals and replies from facts I've approved, and I review and send every message myself.
- Next.js
- TypeScript
- Tailwind CSS
Personal ProjectAutomationFlowPixel ClientPilot
A private CRM I built for my own outreach. It helps me find businesses that may need a website, research them with recorded sources, and draft emails that I approve and confirm before anything is sent.
- Next.js
- TypeScript
- Tailwind CSS