TouAI

Homepage Loading Optimization Implementation Plan

For agentic workers: REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (- [ ]) syntax for tracking.

Goal: Reduce homepage cold-load pressure by deferring heavy product illustrations, avoiding duplicate light/dark asset requests, and lowering partner marquee startup cost.

Architecture: Keep the homepage structure intact while moving heavy illustration work behind viewport-based mounting. Add a small themed-asset helper so product illustrations render only the active theme asset, then trim marquee work by delaying animation startup and removing the heaviest inline SVG from the JS bundle.

Tech Stack: Next.js App Router, React 19, next/image, next-themes, Tailwind CSS

Task 1: Add shared homepage performance helpers

Files:

  • Create: components/layout-products/deferred-illustration.tsx

  • Create: components/layout-products/illustrations/themed-asset.tsx

  • Step 1: Add a viewport-gated illustration wrapper

  • Step 2: Add themed image/img helpers that render only the active theme asset

  • Step 3: Keep placeholder sizing stable so card layout does not shift

Task 2: Defer heavy product illustration mounting

Files:

  • Modify: components/layout-products/index.tsx

  • Step 1: Replace eager illustration imports with dynamic client-only imports

  • Step 2: Render illustrations through the deferred wrapper

  • Step 3: Keep card text and structure visible before illustrations mount

Task 3: Remove duplicate light/dark asset requests in product illustrations

Files:

  • Modify: components/layout-products/illustrations/data-connector-illustration.tsx

  • Modify: components/layout-products/illustrations/deep-research-illustration.tsx

  • Modify: components/layout-products/illustrations/data-search-illustration.tsx

  • Modify: components/layout-products/illustrations/oss-storage-illustration.tsx

  • Modify: components/layout-products/illustrations/unstructured-data-illustration.tsx

  • Step 1: Replace paired light/dark background assets with one themed render

  • Step 2: Replace paired node/result/icon assets with one themed render

  • Step 3: Preserve hover and motion behavior while reducing network requests

Task 4: Lighten marquee startup work

Files:

  • Modify: components/partner-marquee-logo-manifest.ts

  • Modify: components/partner-marquee.tsx

  • Step 1: Reduce repeated marquee copies to the minimum needed for smooth looping

  • Step 2: Stop bundling the oversized antigravity.svg as inline SVG

  • Step 3: Delay marquee animation start until shortly after mount

Task 5: Verify the optimization

Files:

  • Test: npm run build

  • Test: ReadLints on touched files

  • Step 1: Run lints/diagnostics on modified files

  • Step 2: Run a production build to catch regressions

  • Step 3: Summarize expected impact and remaining follow-up opportunities

Homepage Loading Optimization Implementation Plan | Documentation