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

Описание и применение

Создан статический вики с 100/100 Lighthouse, используя ленивый видео‑фасад, локальное кэширование миниатюр, устранение build‑time даты, мгновенную индексацию и проверку ссылок.

Задача

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

Источник