Web Performance (60fps)

Two distinct problems: load fast (get to interactive quickly) and stay smooth (never miss a frame). Measure first — optimize the dominant cost, not what's easy. The platform is fast; jank is almost always self-inflicted by main-thread work.

Core Web Vitals (the targets)

• LCP (Largest Contentful Paint) ≤ 2.5s — largest element visible. Fix: optimize the hero image/font, preconnect, reduce render-blocking CSS/JS, server response time.
• INP (Interaction to Next Paint) ≤ 200ms — responsiveness. Fix: break up long tasks, yield to the main thread, defer non-urgent work.
• CLS (Cumulative Layout Shift) ≤ 0.1 — visual stability. Fix: set width/height/aspect-ratio on media, reserve space for dynamic content, preload fonts.

The frame budget

At 60fps you have ~16.7ms per frame (and ~8ms at 120Hz). Everything — JS, style, layout, paint, composite — must fit. Miss it and the frame drops → visible jank.

JS → Style → Layout → Paint → Composite
            (skip layout+paint by animating transform/opacity)