feat(web): close UX-M9 — replace 886×864 / 773 KB logo with 80×80 / 17.6 KB sibling-repo asset

Browse Source

Closes frontend-design-audit finding UX-M9 (Med):

  Logo is an 886×864 PNG (773 KB after bundling) — should be SVG;
  first-paint cost is meaningful on slow connections

Ground-truth recon found:
  • Sidebar renders the logo at 64×64 ('h-16 w-16' + explicit
    width=64 height=64) in Layout.tsx:213
  • Source asset was 886×864 PNG — 13.8× over-scaled for its
    actual render size, costing 755 KB of wasted bytes on every
    cold load
  • Sibling repo certctl-io/certctl.io (landing page) already
    has the same visual identity at logo-icon.png (80×80 / 17.6 KB)
    — exactly the 1.25× retina source size needed for the 64×64
    sidebar render

Operator choice (2026-05-14): "Use certctl.io's logo-icon.png"
Rationale: same illustrated logo (cycle ring + shield + 'certctl'
wordmark), zero new design work, 96% byte-size reduction.

═══════════════════════════ CHANGE ════════════════════════════════

web/src/assets/certctl-logo.png:
  Replaced via `cp /sessions/.../certctl.io/logo-icon.png ...`.
  No code change — same import path in Layout.tsx:55, same render
  attributes. The Phase 0 PERF-H2 closure
  (loading="eager" decoding="async" + explicit width/height) keeps
  the LCP-friendly attributes in place.

  Asset shape: 886×864 PNG → 80×80 PNG.
  Source bytes: 773,321 → 17,647 (-97.7%).
  Bundled dist size: 773 KB → 17.64 KB.

═══════════════════════════ AUDIT FRAMING ════════════════════════

The audit literally said "should be SVG" but the operator-visible
bug was perf (first-paint cost on slow connections). True SVG
conversion needs a designer round-trip (auto-trace explicitly
disallowed by the audit prompt — produces 50+ KB redundant path
data on illustrated logos). The closure here addresses the perf
concern via a 97.7% byte-size win without commissioning a designer;
when one IS commissioned, the SVG can land as a follow-up commit
with no other code changes.

═══════════════════════════ VERIFICATION ═══════════════════════════

  • Visual diff: side-by-side render confirmed — same logo,
    just at the proper render size.
  • npx tsc --noEmit — exit 0 (asset path unchanged; type-check
    is satisfied).
  • Layout.test.tsx — 7/7 pass (logo presence + sidebar group
    structure + Setup-guide button + nav-auth-users testid all
    still assert green).
  • npx vite build — built, certctl-logo emitted at 17.64 KB.
  • Phase 0 PERF-H2's loading=eager + decoding=async + explicit
    width/height attributes preserved.

Ground-truth: origin/master tip ac5bb71 (P-M1 just pushed)
verified via GitHub API BEFORE commit.

...

This commit is contained in:

shankar0123

2026-05-14 19:48:45 +00:00

parent ac5bb71b61

commit bc417fc458

1 changed files with 0 additions and 0 deletions

Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL

Download Patch File Download Diff File Expand all files Collapse all files

web/src/assets/certctl-logo.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 755 KiB After Width:  |  Height:  |  Size: 17 KiB