Skip to content

performance-smoothness-optimization.md

Latest commit

 

History

History
161 lines (128 loc) · 5.3 KB

performance-smoothness-optimization.md

File metadata and controls

161 lines (128 loc) · 5.3 KB
Raw

Performance Smoothness Optimization

Task 9B-1 focuses on perceived speed, smoother browsing, and Core Web Vitals readiness without changing FrameSignal product scope or visual identity.

What Was Inspected

  • Public routes, layouts, and shared public components.
  • Protected admin shell, tables, and form wrappers.
  • Global CSS, transitions, sticky headers, shadows, and placeholder gradients.
  • Supabase public data helpers.
  • Metadata and JSON-LD helpers.
  • Build output and route rendering mode.
  • Client component boundaries.

Initial Diagnosis

The codebase does not use unnecessary Client Components. A use client scan did not find client component files, so the site is not acting like a heavy browser-side React app.

The most likely smoothness issues were:

  • Repeated public detail reads between generateMetadata() and page rendering.
  • An extra homepage article preview query that was not needed for visible content.
  • Sticky glass headers using a very strong blur effect.
  • A large Signal Card shadow.
  • Repeated card hover scale effects.
  • Broad transition-all usage in shared UI primitives.

The production build still shows public routes as dynamic because they read Supabase data and keep mock fallback behavior. Broad route caching, ISR, and cookie-free public read clients were intentionally deferred.

Safe Changes Made

  • Added React server cache() around public article detail, movie detail, and CMS page detail helpers so repeated reads in the same server render can be deduplicated.
  • Removed an unnecessary homepage getPublicArticlePreviews() call from getPublicHomeData().
  • Reduced sticky header blur from a heavier glass effect to a lighter one while preserving the dark editorial header treatment.
  • Reduced the large Signal Card shadow while keeping the premium cinematic card depth.
  • Added motion-safe: guards to repeated card hover scale effects.
  • Slightly reduced repeated card hover scale intensity.
  • Replaced broad transition-all in shared Button and Badge primitives with narrower transition utilities.

Why This Should Help

React cache() reduces duplicate server work when metadata and page render paths ask for the same public detail record during the same render. This should help article, movie, and CMS detail navigation feel less wasteful without changing data visibility, RLS behavior, or fallback behavior.

Removing the extra homepage query reduces server work on the homepage without changing displayed content.

Lighter blur, gentler shadows, motion-safe transforms, and narrower transitions reduce paint and compositing cost, especially on mobile devices, while keeping the Warm Dark Editorial and Cinematic Decision-First design direction.

Design Direction Preserved

  • Warm dark editorial surfaces remain.
  • Gold and violet accents remain.
  • Signal Card remains a premium decision card.
  • Spoiler-safe labels and legal guidance remain unchanged.
  • Public and admin layouts keep their existing responsive structure.

Risky Changes Deferred

These were intentionally not changed in this pass:

  • No new cookie-free public Supabase client.
  • No ISR or broad route revalidation changes.
  • No removal of force-dynamic from public detail/CMS routes.
  • No Supabase schema, RLS, migration, auth, or form changes.
  • No new packages.
  • No GSAP, Lenis, storage, uploads, delete workflows, analytics scripts, or service-role usage.

Lighthouse Testing Steps

  1. Open Chrome DevTools.
  2. Go to Lighthouse.
  3. Test in Incognito or with extensions disabled if possible.
  4. Run both Mobile and Desktop audits.
  5. Test at least:
    • /
    • /reviews
    • /movies/inception
    • /contact
    • /admin/login
  6. Record:
    • Performance
    • Accessibility
    • Best Practices
    • SEO
    • LCP
    • CLS
    • INP or TBT where shown

Do not chase a perfect score by damaging the cinematic design. Prioritize real user-perceived smoothness and layout stability.

Manual Test Checklist

Public routes:

  • /
  • /reviews
  • /reviews/should-you-watch-inception-tonight
  • /movies
  • /movies/inception
  • /endings
  • /theories
  • /mood-signal
  • /watch-signal-generator
  • /about
  • /contact
  • /privacy-policy
  • /sitemap.xml
  • /robots.txt

Admin routes:

  • /admin/login
  • /admin
  • /admin/articles
  • /admin/articles/new
  • /admin/movies
  • /admin/movies/new
  • /admin/pages
  • /admin/settings

Device widths:

  • 390px mobile
  • 768px tablet
  • 1366px desktop

Checks:

  • Page loading feels smoother.
  • Scrolling feels smoother.
  • Mobile scrolling is not janky.
  • Hover and focus states still look premium.
  • No visible layout jumps.
  • No body-level horizontal overflow.
  • Public pages still look cinematic and premium.
  • Admin pages remain responsive.
  • Contact and newsletter forms still work.
  • No raw Supabase errors appear publicly.
  • Sitemap and robots still work.

Remaining Future Performance Work

  • Consider a public read client that does not depend on request cookies, after a focused security and RLS review.
  • Consider ISR or targeted route revalidation after CMS freshness requirements are defined.
  • Review whether force-dynamic is still needed on public detail/CMS routes.
  • Run Lighthouse and Core Web Vitals checks against production data.
  • Measure mobile scroll performance on real devices.
  • Audit generated chunks with a bundle analyzer only if a later task approves adding or using one.