Skip to content

perf(dashboard): defer secondary auth, analytics, and font payloads #4339

Description

@koala73

Summary

Auth, analytics, telemetry, and fonts are not the biggest dashboard performance problem, but they still add startup contention and should be cleaned up after the media and first-party JS bottlenecks are addressed.

This is a lower-ranked performance workstream: useful, but not where we should spend time before issue #4334 and the initial JS/map staging work. The goal is to remove secondary startup noise without compromising auth correctness, observability, or language support.

Related audit artifact: tmp/perf-audit/worldmonitor-dashboard-adversarial-ranking-2026-06-18.md

Evidence

Fresh DevTools investigation found secondary third-party/startup payloads from:

  • Clerk/auth
  • Sentry
  • Cloudflare insights/challenges
  • Vercel analytics/live
  • Abacus/Umami
  • Google Fonts
  • YouTube API, which should largely disappear from startup once live media is gated by user intent

Measured context:

  • DevTools third-party insight showed Cloudflare around 2 ms main-thread cost in the runtime window.
  • This is much smaller than live media, first-party JS chunks, layout instability, and DOM/style invalidation.
  • Google Fonts currently loads many weights for two families.

Current Code Pointers

  • src/main.ts:3 imports Sentry defer helpers.
  • src/main.ts:4 imports inject from @vercel/analytics.
  • src/main.ts:14 installs the pre-init Sentry error queue.
  • src/main.ts:15 schedules Sentry init, already deferred from a previous performance fix.
  • index.html:274 preconnects to https://api.worldmonitor.app.
  • index.html:275 preconnects to Sentry ingest.
  • index.html:276 dns-prefetches Clerk.
  • index.html:282 through index.html:285 loads Google Fonts:
    • Nunito weights 300, 400, 600, 700, italic 400
    • Tajawal weights 200, 300, 400, 500, 700, 800, 900
  • index.html:176 documents Umami/Abacus loading behavior and why async is used instead of defer.
  • index.html:6 CSP allows a broad set of script/frame/connect destinations needed by these integrations.

Root Cause Hypothesis

The dashboard has accumulated defensible third-party and font work, but not all of it needs to be present in the first render:

  • Auth SDK/UI work can often wait until the auth slot is interacted with, account state is required, or premium panels need a token.
  • Analytics and telemetry can initialize after the app shell and first data paint, with lightweight event buffering where needed.
  • Font weights exceed what the dashboard likely needs for initial UI.
  • Sentry is already deferred, but preconnect and scheduling should be checked against current production behavior.
  • YouTube API should not be part of startup after live media becomes click-to-load.

Proposed Implementation

  1. Audit auth startup path.

    Identify which Clerk/auth code is truly required before first paint. Keep the minimal session/auth-state placeholder needed for correctness, then defer heavier SDK/UI work until interaction or premium panel fetch.

  2. Keep observability but stage SDK initialization.

    Sentry has an existing deferred loader. Validate that it still buffers early errors and initializes after first shell paint. Do the same pattern for analytics where event ordering matters.

  3. Reduce font payload.

    Audit actual font usage by variant and language:

    • Load Nunito only for variants that need it.
    • Load Tajawal only for Arabic or locales that need it.
    • Remove unused weights.
    • Consider system font fallback for the dashboard shell.
    • Consider self-hosting/subsetting if Google Fonts remains costly.
  4. Remove YouTube API from startup.

    Once perf(dashboard): gate live news and webcams on user intent #4334 is implemented, verify that YouTube iframe/API scripts are loaded only after explicit user intent to play live news/webcam content.

  5. Revisit preconnect/dns-prefetch list.

    Keep preconnects that improve critical requests. Downgrade or remove preconnects that compete with app shell startup but are not used until after interaction.

Acceptance Criteria

  • No Clerk/auth regression for signed-in, signed-out, Pro, API-key, and desktop users.
  • Analytics and Sentry still capture required events/errors after deferred startup.
  • Initial dashboard font requests are reduced by family, weight, locale, or timing.
  • YouTube API is absent from default dashboard startup after live media gating.
  • DevTools network waterfall shows fewer secondary third-party/font requests before first content/data paint.

Suggested Validation

  • Test signed-out dashboard, signed-in free, signed-in Pro, API-key access, and premium gated panels.
  • Confirm Sentry captures an intentionally thrown test error after deferred init in a safe test environment.
  • Confirm analytics still records page view or equivalent after deferred init.
  • Re-run DevTools network capture and compare third-party/font request timing against the June 18 audit.
  • Re-run Lighthouse to ensure font changes do not introduce layout shifts.

Metadata

Metadata

Assignees

No one assigned

    Labels

    P3Standard priority, backlog or low urgency workarea:frontendFrontend components, layout, visual encodingjavascriptPull requests that update javascript codeperformancePerformance optimizationpolishSmall UX, copy, or visual cleanup

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions