01 / Overview
A booking site that was losing renters before the page finished loading.
Miami Motorcycle Rentals runs on Next.js, but the existing implementation wasn't taking advantage of the framework's performance tooling. Pages shipped unoptimized images, unused dependencies, and layout instability that pushed Lighthouse performance scores down to around 20, on both desktop and mobile.
I was brought on as the developer to diagnose the bottlenecks and fix them within the existing stack, without a full rewrite. The site stayed on the Pages Router and kept styled-components throughout; the work was about using what was already there correctly, not swapping it out.
02 / The Challenge
Three compounding problems, not one.
A Lighthouse score of 20 is rarely caused by a single issue. Here it was three overlapping problems: images served at full resolution regardless of viewport, several npm packages imported but barely used, and layout shifts from content (mainly images and web fonts) loading in without reserved space.
Each of these has a different fix, and fixing only one wouldn't have moved the score much. Image weight, JS payload, and layout stability all needed to be addressed together for the numbers to actually change.
03 / The Solution
Fixing the framework's job, not fighting it.
Images were migrated to the Next.js Image component so they'd be served in modern formats, sized per breakpoint, and lazy-loaded outside the initial viewport, which was the single biggest lever for both bundle weight and Largest Contentful Paint.
I audited the dependency list and removed libraries that were imported but doing little actual work, then used bundle analysis to find and split out anything still adding unnecessary weight to the initial load.
Layout shift was reduced by reserving space for images and controlling font loading behavior, so content stopped jumping around as the page rendered.
On the SEO side, I set up per-page dynamic metadata (unique titles and descriptions generated from each listing's data), Open Graph tags for link previews, and canonical URLs, replacing what had been static, duplicated metadata across pages.
The result: a Lighthouse performance score of 97, up from roughly 20 before the work started. Accessibility, best practices, and SEO scores each landed in the high 80s to low 90s as a byproduct of the same cleanup, since removing dead weight and fixing structural issues tends to improve all four categories together.