Improve performance-optimization skill with clearer guidance

- Distinguish synthetic (Lighthouse) vs RUM (web-vitals) measurement approaches,
  clarifying when each is appropriate: synthetic for CI regression detection,
  RUM to validate real user impact.

- Expand TTFB diagnosis from a single vague hint into a decision tree that breaks
  down each component (DNS, TCP/TLS, server processing) with specific next steps.
  Mirrors the tree in the skill and adds a dedicated checklist section.

- Fix image optimization example: the previous "GOOD" example applied loading="lazy"
  without distinguishing the LCP hero image from below-the-fold images. Hero images
  must never be lazy-loaded. New example separates both cases explicitly.

- Add art direction + resolution switching to the hero image example using <picture>
  with media queries for mobile/desktop crops and srcset for density variants.
  Mobile-first: <img src> fallback points to the mobile version.
  Covers AVIF → WebP → JPG format cascade and fetchpriority="high" for LCP.

- Correct the date-fns tree-shaking example: modern bundlers (Vite, webpack 5+)
  handle named imports automatically. The "BAD" pattern was not actually bad,
  and following it could lead to unnecessary micro-optimizations. Real gains
  come from dynamic imports and route-level code splitting, which the example
  now illustrates instead.

references/performance-checklist.md

@@ -18,6 +18,14 @@ Quick reference checklist for web application performance. Use alongside the `pe
 | INP (Interaction to Next Paint) | ≤ 200ms | ≤ 500ms | > 500ms |
 | CLS (Cumulative Layout Shift) | ≤ 0.1 | ≤ 0.25 | > 0.25 |
 
+## TTFB Diagnosis
+
+When TTFB is slow (> 600ms), check each component in DevTools Network waterfall:
+
+- [ ] **DNS resolution** slow → add `<link rel="dns-prefetch">` or `<link rel="preconnect">` for known origins
+- [ ] **TCP/TLS handshake** slow → enable HTTP/2, consider edge deployment, verify keep-alive
+- [ ] **Server processing** slow → profile backend, check slow queries, add caching
+
 ## Frontend Checklist
 
 ### Images