Web UI best practices

Principles for building web interfaces that feel fast, intentional, and respectful of the user's time. Every rule here is a smell test — violating one is fine if you have a reason, violating several means the UI needs work.

Speed

Every interaction completes in under 100ms. If it can't, fake it.

• Optimistic UI updates — show the result before the server confirms
• Debounce inputs, but never debounce perceived response
• Prefetch likely next routes on hover or viewport entry
• Use will-change and transform for animations, never top/left
• Measure with performance.now(), not gut feel

// Optimistic delete — remove from UI immediately, reconcile later
async function handleDelete(id) {
  setItems(prev => prev.filter(i => i.id !== id));
  try {