From 0 to 100: A Masterclass in Next.js Optimization

By killing our database dependency and moving our blog to a local MDX architecture, we achieved a TTFB of exactly 0ms. When a user navigates to a post, Next.js isn't querying a database; it's simply serving a pre-rendered HTML document from the nearest Vercel edge node.

2. Accessibility: Taming the DOM

Getting to 99 in Accessibility is easy—just add alt tags to your images and run a color contrast checker. Getting the final 1 point requires obsessing over DOM semantics and WCAG specifications.

We hit three massive roadblocks that affect almost every complex React application.

Rule 1: Strict Heading Hierarchies

Screen readers rely on heading tags (<h1> to <h6>) to generate a table of contents for visually impaired users. Lighthouse violently fails you if you skip heading levels. You cannot place an <h4> directly after an <h2> just because you prefer the CSS sizing of the <h4>.

❌ Bad Practice:

✅ Good Practice:

Rule 2: ARIA Tree Roles & HTML Parents

If you build custom dropdowns, accordions, or folder trees (like the one above), using role='tree' tells the screen reader to expect a very specific DOM structure. Every nested item MUST perfectly implement role='treeitem' and track aria-expanded states.

Furthermore, WCAG standards strictly forbid putting <div> or <span> tags directly inside a <ul>.

3. Best Practices: The Hydration Trap

Next.js developers constantly lose Best Practice points due to the dreaded "Browser errors logged to console" warning.

This almost always happens because of a Hydration Mismatch. When a user visits your site, their Chrome Extensions (like Grammarly, 1Password, or AdBlockers) secretly inject <script>, <style>, and <div> tags directly into your HTML. React compares the server-rendered HTML against the client DOM, sees these foreign tags, panics, and throws massive red errors in the console.

4. Image Optimization: Respecting the Network

Images are the easiest way to destroy a perfect performance score. If your Largest Contentful Paint (LCP) is an unoptimized PNG, your score will never break 90.

Next.js provides the <Image /> component, but developers consistently misuse it.

❌ Bad Practice: Forcing the browser to figure out the layout.

✅ Good Practice: Using next/image with explicit sizing and priority.

5. Heavy Features, Zero Cost

You don't have to strip features to stay fast. You just have to be clever about when and where they load.

We wanted to add AI Text-to-Speech to the site. The standard bad practice is loading a massive 800KB external widget on page load and paying an API (like ElevenLabs) to stream audio. This ruins the Speed Index and costs money.

Instead, we hijacked the browser's native OS-level SpeechSynthesis engine.

By leveraging native APIs asynchronously, the JavaScript payload size is effectively zero, the feature runs instantly, and the cost is $0.00.

If you must use a heavy third-party library, never import it synchronously at the top of your file. Use Dynamic Imports to ensure the page remains lightweight until the user actually needs the component.

The Takeaway

By relying on static edge-caching, strict semantic HTML, native browser APIs, and intelligent asset loading, we built a system that respects the reader's time, battery, and bandwidth.

Getting to 100/100/100/100 isn't magic. It doesn't require a minimalist text-only website. It simply requires rigorous engineering and an obsessive attention to detail.