Removing Next.js Got My Blog to 100 on Every Lighthouse Category

My blog just achieved a perfect 100 score across all Lighthouse categories, and I'm thrilled about the outcome. I've been passionate about blogging and wanted to create a lightweight, fast, clutter-free platform that could support multiple blogs and maintain excellent accessibility. After much effort, I've finally achieved this goal.

The journey was quite challenging, especially since I had to remove Next.js, the framework I had been using all along. It turned out to be far more difficult than I anticipated. To provide some context, when people think of blogging platforms, they often think of Medium, Blogger, or Ghost. However, none of these platforms fully met my expectations or requirements.

Medium and Blogger are cluttered with unnecessary features, and their performance is less than satisfactory. Additionally, blogging directly with markup and raw code, which I enjoy, can be a hassle. With that in mind, I conducted various performance measurements using pagespeed.web.dev. While there are many alternatives like WordPress, Ghost, and Hugo, I found that WordPress had plugin issues, Ghost required self-hosting (with expensive options), and every upgrade of Hugo broke the editor at some point.

Bear Blog stood out as the best option, offering great performance and a philosophy I appreciated. However, its minimalism and lack of image attachment or AdSense support made it less appealing. Ultimately, I set out to build a blog that surpassed Bear Blog in functionality and usability while maintaining fast performance. During the process, I discovered that caching was crucial for optimizing performance, and Next.js made caching incredibly convenient with features like ISR and fetch caching.

However, reaching a global audience introduced network latency, even when relying on caching. To address this, I opted to use a CDN, and in particular, Cloudflare stood out as a reliable service. I realized that I didn't need Next.js's caching capabilities anymore for a static website, as I could rely solely on a CDN. Optimization of images, which often exceed 10MB, also posed a significant challenge.

Serving these large images on the web would negatively impact performance, so I needed a solution. Enter Cloudflare's image transformations, which are free on the free tier. After these optimizations, my blog was performing exceptionally well, but I still needed a score of 100. I delved deeper into the issue and discovered that large amounts of legacy JavaScript were causing problems.

This JavaScript, which came from Next.js, was unnecessary for my static site with no interactive components. As an experiment, I removed all client components, leaving only server components, but the score didn't change much. The root cause was the client runtime that Next.js always ships with, even for static pages. To further optimize performance, I decided to strip out next/link, next/image, and even the App Router's own runtime.

The only workaround was to remove scripts from rendered HTML, which ultimately led to my decision to ditch Next.js entirely for my blog. While this meant sacrificing some features and productivity, I believed that the benefits outweighed the drawbacks. My blog now runs smoothly, with zero JavaScript and a perfect Lighthouse score of 100 across all categories. I'm confident that this minimalist approach will continue to perform well as my blog grows.