S7: skrip ukur UI, lazy-load xterm/charts/htmx, perf sebelum-sesudah

[coderbuzz]

Ringkasan

S7: pengukuran (K8) dan perbaikan performa.

• tests/e2e/ui.mjs (Node + Playwright dari ~/.local/share/pw-tools, tanpa dependensi repo): menyemai data ZZ Uji bila kosong, screenshot 8 halaman × 3 viewport × terang/gelap (+ login, + navy/teal di 390 gelap), overflow 360/390, node DOM per halaman dan per baris, navigasi CPU 4x + 80 ms per request (median 5), ukuran transfer dingin, kontras WCAG 19 pasangan × 3 palet × 2 tema dari app.css, a11y cepat; OUT/report.md; exit 1 bila overflow/kontras/a11y gagal.
• Perbaikan: xterm (283 KB + addon + css) dimuat hanya saat tombol Console diklik (loadXterm); live_charts → static/charts.js, dan htmx, dimuat hanya di halaman detail app/server; font Google dimuat non-blocking (media=print + onload, <noscript> fallback, display=swap tetap); .breadcrumb digabung.
• docs/ui-revamp/perf-sebelum.md dan perf-sesudah.md; cara menjalankan di AGENTS.md.

Hasil (CPU 4x, +80 ms per request, median 5, 390 px)

halaman	DCL sebelum → sesudah	load sebelum → sesudah	KB dingin sebelum → sesudah
/	327 → 300	398 → 315	467 → 126
/servers	329 → 301	385 → 311	461 → 120
/apps	326 → 301	380 → 309	463 → 122
/apps/1	334 → 328	390 → 336	473 → 192

Overflow 0; kontras 19/19 di 6 kombinasi; a11y: 0 kontrol tanpa nama, 0 dialog tanpa label, fokus Tab terlihat di 8 halaman.

Tidak tercapai / catatan

• DCL median 300-301 ms untuk /, /servers, /apps (target ≤300): lantai terukur ≈ 2 hop × 80 ms (dokumen → CSS/JS) + ±140 ms CPU 4x; tidak dipaksa lebih jauh. /apps/1 DCL 328 ms (target 450 terpenuhi).
• Server tidak mengompres respons (tanpa gzip/br): 126 KB per halaman dingin masih tanpa kompresi; kompresi di Go = perubahan handler, di luar S7.
• Tidak ada preload CSS (sesuai arahan); CSS tetap satu file 38 KB.

Penyimpangan

1. xterm dimuat on-demand (bukan "hanya di halaman detail"), lebih hemat; konsol tetap berfungsi (diuji: Terminal undefined sebelum klik, terdefinisi dan .xterm muncul setelah klik).
2. live_charts.html dihapus (jadi charts.js).
3. Ukuran transfer dihitung via request.sizes() pada konteks dingin; header ikut dihitung.

🤖 Generated with Claude Code