mirror of
https://github.com/shankar0123/certctl.git
synced 2026-06-07 23:11:32 +00:00
shankar0123
bc417fc458
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.
