48 lines
2.6 KiB
Markdown
48 lines
2.6 KiB
Markdown
# 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)
|