Must Know: Performance

Prerequisites

• - Measured baseline for startup and first interaction timing.
• - Route-level understanding of heavy component usage.
• - A release process to validate optimization impact.

Step 1: Register components once and early

Avoid duplicate registration calls and keep startup deterministic.

import { defineCustomElements } from '@diwacopilot/components/loader';

let didRegister = false;

export function registerDiwaOnce(): void {
  if (didRegister) return;
  defineCustomElements();
  didRegister = true;
}

Step 2: Limit preload hints to proven wins

Use modulepreload for critical entrypoints only after measuring route impact.

<link rel="modulepreload" href="/stencil/diwa-components.esm.js" />

Step 3: Respect motion preferences for smoother UX

Reduce expensive transitions in reduced-motion mode and avoid animation-heavy first paint.

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition-duration: 0ms !important;
  }
}

Implementation Notes

• - Performance changes must be validated with real user flows, not just synthetic scores.
• - Avoid broad preloads that compete with critical CSS and main script downloads.
• - Keep optimization changes reversible and documented per route.

Troubleshooting

• - If startup slows down after adding preloads, remove non-critical hints.
• - If interaction lags persist, profile heavy pages and defer non-critical UI.
• - If animation stutters on low-end devices, simplify transitions and reduce shadows.

Next Actions