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

说明与用途

使用懒加载视频封面、本地缩略图缓存、去除构建时日期、即时索引和链接验证，构建了 100/100 Lighthouse 的静态 Wiki。

问题

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.

结果

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.

工作流

• 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.

证据

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

来源

The Fix: Lazy Facade Component with Local WebP Caching

来源