stella-ops.org/git.stella-ops.org
1
0
Fork 0
Code Issues Pull Requests Actions 2 Releases Wiki Activity
Files
1bf6bbf3955ecbd8d20f5eeb767da5c7f8324b57
git.stella-ops.org/docs/features/dropped/mi5-performance-budgets.md

2.6 KiB
Raw Blame History

MI5 - Performance Budgets (Interaction Response, Animation Frame, LCP)

Module

Web

Status

PARTIALLY_IMPLEMENTED

Description

Lighthouse CI config exists for performance monitoring. Specific interaction response <=100ms, frame budget 16ms, and layout shift <0.05 budgets were not found as explicitly configured thresholds in test fixtures.

What's Implemented

  • Existing components:
    • extension-slot (src/Web/StellaOps.Web/src/app/core/plugins/extension-slots/extension-slot.component.ts)
  • Existing services:
    • evidence-panel-metrics (src/Web/StellaOps.Web/src/app/core/analytics/evidence-panel-metrics.service.ts)
    • gateway-metrics (src/Web/StellaOps.Web/src/app/core/api/gateway-metrics.service.ts)
    • policy-interop (src/Web/StellaOps.Web/src/app/core/api/policy-interop.service.ts)
    • reachability-integration (src/Web/StellaOps.Web/src/app/core/api/reachability-integration.service.ts)
    • vuln-export-orchestrator (src/Web/StellaOps.Web/src/app/core/api/vuln-export-orchestrator.service.ts)

What's Missing

  • Interaction response budget: No explicitly configured <=100ms interaction response threshold in test fixtures or CI checks
  • Animation frame budget: No configured 16ms frame budget validation for animations
  • Layout shift budget: No configured <0.05 CLS (Cumulative Layout Shift) threshold enforcement
  • LCP budget: No Largest Contentful Paint budget configured in Lighthouse CI or performance tests
  • Performance regression CI gate: Lighthouse CI config exists but no CI gate failing builds on budget violations

Implementation Plan

  • Configure Lighthouse CI budgets: interaction <=100ms, frame 16ms, CLS <0.05, LCP <2.5s
  • Add performance regression CI gate failing on budget violations
  • Add evidence-panel-metrics.service.ts integration with performance budgets for key user flows
  • Document performance budgets in frontend architecture docs

E2E Test Plan

  • Setup:
    • Log in with a user that has appropriate permissions
    • Navigate to the relevant page/section where this feature appears
    • Ensure test data exists (scanned artifacts, SBOM data, or seed data as needed)
  • Core verification:
    • Verify the component renders correctly with sample data
    • Verify interactive elements respond to user input
    • Verify data is fetched and displayed from the correct API endpoints
  • Edge cases:
    • Verify graceful handling when backend API is unavailable (error state)
    • Verify responsive layout at different viewport sizes
    • Verify accessibility (keyboard navigation, screen reader labels, ARIA attributes)