Building a 100/100 Lighthouse Static Wiki with Next.js

Description and use

Built a static wiki with 100/100 Lighthouse using a lazy video facade, local thumbnail caching, removed build‑time dates, instant indexing, and link validation.

Problem

Static wikis built with Next.js SSG suffer from heavy third‑party embeds, SEO churn from build‑time dates, slow search engine discovery, and broken internal links.

Outcome

Achieved a 100/100 Lighthouse score, reduced TBT by ~800 ms per video, eliminated SEO churn, accelerated search engine indexing, and ensured all internal links are valid.

Workflow

• 1. Replace YouTube iframes with a lazy facade component that shows a WebP thumbnail and loads the iframe only on click.
• 2. Cache thumbnails locally and serve them via a prebuild scraper to avoid external requests.
• 3. Remove build‑time new Date() calls; use server‑side timestamps or static metadata.
• 4. Generate a comprehensive sitemap and use prerendering to expose all entity sub‑pages to search engines immediately.
• 5. Run a link graph validator during CI to catch orphan pages before export.

Evidence

Embedding YouTube videos into gaming guide pages is essential for user engagement. But dropping standard <iframe> tags into the DOM is devastating to Core Web Vitals

Source

The Fix: Lazy Facade Component with Local WebP Caching

Source