Engineering a 100/100 Lighthouse Score with Next.js

Performance is a Feature

When you are recording video, the last thing you want is a laggy browser tab heating up your device. Here is how I hit the perfect 100 score:

1. Fixing the "Main Landmark"

Standard React layouts often wrap everything in generic divs. I ensured every page uses the <main> tag, which instantly fixed my accessibility warnings.

2. Smooth Scrolling vs. CPU Usage

Instead of using JavaScript to animate the scroll position (which is heavy), I used CSS transitions with will-change: transform to ensure the GPU handles the movement. This keeps the fan quiet while you record.