Title: Frontend Performance — LearnCoachAssist

Q: What is frontend performance?
A: Frontend performance is how quickly and smoothly a web application loads, renders, and responds to user input.

Q: Why does frontend performance matter?
A: It affects user satisfaction, accessibility, SEO, conversion, and perceived product quality.

Q: What is Time to First Byte (TTFB)?
A: TTFB measures how long it takes the browser to receive the first byte of the response after making a request.

Q: What is Largest Contentful Paint (LCP)?
A: LCP measures when the largest visible content element finishes rendering, indicating perceived load speed.

Q: What is Interaction to Next Paint (INP)?
A: INP measures how responsive a page feels by tracking the delay between an interaction and the next visual update.

Q: What is Cumulative Layout Shift (CLS)?
A: CLS measures unexpected movement of page elements during load or interaction.

Q: Why should images be optimized?
A: Images are often the heaviest assets on a page, so compression, resizing, and modern formats can cut load time significantly.

Q: What is lazy loading?
A: Lazy loading delays non-critical resources until they are needed, such as images below the fold.

Q: What is code splitting?
A: Code splitting breaks JavaScript into smaller chunks so users download only what is needed for the current page.

Q: Why is bundle size important?
A: Large bundles slow parsing, compilation, and execution in addition to network transfer.

Q: What is tree shaking?
A: Tree shaking removes unused exports from a bundle during build so less code ships to the browser.

Q: What is render blocking?
A: Render blocking happens when the browser must wait for certain resources like CSS or synchronous JavaScript before painting content.

Q: Why should critical CSS be prioritized?
A: Critical CSS lets the browser render above-the-fold content sooner without waiting on the full stylesheet.

Q: What is a long task in the browser?
A: A long task is JavaScript work that blocks the main thread for too long, making the UI feel unresponsive.

Q: Why is main-thread work a bottleneck?
A: The main thread handles rendering, input, and script execution, so too much work there hurts responsiveness.

Q: What is debouncing?
A: Debouncing delays a function until rapid repeated events stop, which helps reduce wasteful work on input or resize handlers.

Q: What is throttling?
A: Throttling limits how often a function runs during rapid events like scroll or resize.

Q: Why should lists be virtualized?
A: Virtualization renders only the visible items in a long list, reducing DOM size and rendering cost.

Q: What is preloading?
A: Preloading tells the browser a resource will be needed soon so it can fetch it earlier.

Q: What is prefetching?
A: Prefetching downloads likely future resources at low priority to improve the next navigation.

Q: Why should fonts be optimized?
A: Slow web fonts can delay text rendering or cause layout shifts unless loaded and swapped carefully.

Q: What is cache busting?
A: Cache busting adds unique hashes to asset filenames so browsers fetch updated files when deployments change them.

Q: What is the benefit of a CDN?
A: A CDN serves static assets from edge locations closer to users, reducing latency and origin load.

Q: Why should third-party scripts be audited?
A: Third-party scripts can add significant network, execution, and privacy costs outside your direct control.

Q: What is hydration cost?
A: Hydration cost is the time and CPU needed to attach interactivity to server-rendered HTML on the client.

Q: What is a performance budget?
A: A performance budget is a limit for metrics like bundle size, LCP, or script weight that teams enforce during development.

Q: What is the simplest way to improve frontend performance?
A: Ship less code, load less media, and defer anything the user does not need immediately.

Q: What is First Contentful Paint (FCP)?
A: FCP measures when the browser first renders any text, image, or non-white canvas content from the page.

Q: Why does perceived performance differ from raw speed?
A: Users care about how quickly the interface feels useful, not just how fast every asset finishes loading.

Q: What is progressive enhancement in performance terms?
A: It means delivering a useful core experience first, then layering richer behavior as device and network conditions allow.

Q: Why should expensive work move off the main thread?
A: Using Web Workers or background processing frees the main thread to keep rendering and input responsive.

Q: What is server-side rendering good for?
A: It can improve first render and SEO by sending meaningful HTML before client-side JavaScript finishes loading.

Q: What is static generation good for?
A: Static generation precomputes pages so they can be served quickly with minimal server work at request time.

Q: Why is request waterfall reduction useful?
A: Reducing chained requests shortens the time users wait before a page becomes fully usable.

Q: What is resource prioritization?
A: It is the practice of making sure the browser fetches the most important assets first.

Q: Why should unused CSS be removed?
A: Unused CSS increases transfer size and can slow style calculation without helping the current screen.

Q: What is image responsive sizing?
A: Serving different image sizes based on device and layout so users do not download pixels they will never see.

Q: Why monitor production performance, not just lab tests?
A: Real-user monitoring captures device diversity, network variance, and page states that synthetic tests miss.

Q: What is a strong performance mindset for teams?
A: Treat performance as a product feature that must be protected continuously, not as a one-time cleanup project.

Q: What are Core Web Vitals?
A: LCP (Largest Contentful Paint), INP (Interaction to Next Paint), CLS (Cumulative Layout Shift) — Google's UX-quality signals.

Q: What is LCP?
A: Time to render the largest visible content element — measures perceived load speed. Good ≤ 2.5s.

Q: What is INP?
A: Replaced FID in 2024. Time from user interaction to visible response. Good ≤ 200ms.

Q: What is CLS?
A: Cumulative Layout Shift — sum of unexpected layout shifts during page lifetime. Good ≤ 0.1.

Q: What is TTFB?
A: Time To First Byte — time from request to first byte of response. Includes DNS, TCP, TLS, server time.

Q: What is FCP?
A: First Contentful Paint — when first text or image renders. Good ≤ 1.8s.

Q: What is TBT?
A: Total Blocking Time — total time main thread was blocked > 50ms during load.

Q: What is the critical rendering path?
A: Sequence of steps the browser takes to convert HTML/CSS/JS into pixels: parse HTML → CSSOM → render tree → layout → paint.

Q: What blocks first paint?
A: Render-blocking CSS and synchronous JS in <head> — defer or async to avoid.

Q: Use defer vs async on scripts?
A: defer: download in parallel, execute in order after HTML parse.
async: download in parallel, execute as soon as ready (out of order).

Q: What is preload?
A: <link rel="preload" href="..." as="..."> — fetch a critical resource early without blocking parse.

Q: What is preconnect?
A: <link rel="preconnect" href="https://cdn..."> — early DNS+TCP+TLS to a domain you'll use.

Q: What is dns-prefetch?
A: Light preconnect — only DNS lookup. Lower priority, cheaper.

Q: What is prefetch?
A: <link rel="prefetch" href="next.html"> — fetch likely next-page resources with low priority.

Q: What is module preload?
A: <link rel="modulepreload"> — preload ES module + its dependencies graph.

Q: What is the importance attribute (Priority Hints)?
A: fetchpriority="high|low|auto" — hint resource priority to the browser.

Q: What is HTTP/2 server push?
A: Server pushes resources before client requests. Largely deprecated in favor of 103 Early Hints.

Q: What is 103 Early Hints?
A: HTTP status sent before main response — lets server share preload links without waiting for full response.

Q: What is HTTP/3?
A: HTTP over QUIC (UDP) — eliminates head-of-line blocking, faster reconnects.

Q: What is HTTP/2 header compression?
A: HPACK reduces redundant header bytes — significant on cookie-heavy requests.

Q: What is Brotli compression?
A: Compression algorithm offering 15–25% smaller payloads than gzip for text — supported in modern browsers.

Q: When to use Brotli vs gzip?
A: Brotli for static assets (pre-compressed at build); gzip as fallback or for dynamic content where CPU matters.

Q: What is content-visibility?
A: CSS property — content-visibility: auto; tells browser to skip rendering off-screen children.

Q: What is contain CSS?
A: contain: layout|paint|size|content — hints the browser to isolate layout/paint work.

Q: What is loading="lazy"?
A: Native lazy-loading for images and iframes — defers off-screen resources until near viewport.

Q: What is decoding="async"?
A: Image attribute hinting browser to decode off the main thread, reducing input latency.

Q: What is fetchpriority="high" on hero image?
A: Combined with preload, ensures LCP image starts downloading immediately.

Q: Avoid layout shifts from images?
A: Always set width+height attributes OR aspect-ratio CSS.

Q: Avoid layout shifts from ads?
A: Reserve space with min-height; ads dropping in late shift content.

Q: Avoid layout shifts from fonts?
A: Use font-display: optional or swap + size-adjust descriptors to match fallback metrics.

Q: What is FOIT?
A: Flash of Invisible Text — text hidden until web font loads. font-display: swap avoids it.

Q: What is FOUT?
A: Flash of Unstyled Text — text shown in fallback then swapped to web font. Better than FOIT.

Q: What is FOFT?
A: Flash of Faux Text — synthetic bold/italic shown until real face loads.

Q: Font subsetting?
A: Generate smaller font files containing only glyphs you actually use — drastic file-size reduction.

Q: Variable fonts?
A: One file containing multiple weights/widths via axes — replaces 4+ separate font files.

Q: Self-host fonts vs CDN?
A: Self-host removes third-party DNS+connect; CDN cache hit unlikely now that browser caches are partitioned.

Q: What is image format choice today?
A: AVIF first (best compression), WebP fallback, JPEG/PNG legacy fallback.

Q: <picture> element use?
A: Provide multiple sources by type and media query — let browser pick the best.

Q: srcset and sizes?
A: srcset provides multiple resolutions; sizes tells browser which to pick based on viewport.

Q: Density-based srcset?
A: srcset="img.png 1x, img@2x.png 2x" — for fixed-size displays at varying pixel densities.

Q: Width-based srcset?
A: srcset="sm.png 480w, lg.png 1200w" sizes="(max-width: 600px) 100vw, 50vw"

Q: Bundle splitting strategy?
A: Vendor bundle (changes rarely), app bundle (changes often), per-route chunks — maximizes cache hit.

Q: Code splitting in React?
A: const X = lazy(() => import('./X')) — Suspense boundary handles loading state.

Q: Dynamic import?
A: import('./module') — returns a Promise, splits a chunk at the call site.

Q: Tree shaking?
A: Dead-code elimination by bundler — relies on ES module syntax and side-effect-free declarations.

Q: Why CommonJS hurts tree shaking?
A: Dynamic require() can't be statically analyzed; bundlers must include the whole module.

Q: sideEffects field in package.json?
A: Tells bundler which files have side effects, allowing aggressive elimination of unused exports.

Q: Minification?
A: Removing whitespace, shortening identifiers, simplifying expressions — typically 30–60% smaller.

Q: Terser, esbuild, swc minifiers?
A: Terser (mature, slow); esbuild (fast, lean); swc (fast, configurable). All produce comparable output.

Q: Source maps?
A: Map minified output back to original code for debugging — should be excluded from production HTTP responses for security.

Q: Hash-based filenames?
A: app.[contenthash].js — long cache TTL since URL changes when content changes.

Q: Cache-Control immutable?
A: cache-control: public, max-age=31536000, immutable — browser skips revalidation entirely.

Q: Stale-while-revalidate header?
A: cache-control: max-age=60, stale-while-revalidate=86400 — serve stale, refresh in background.

Q: Service Worker for offline?
A: Intercept requests, serve from cache, sync when online — basis of PWA offline support.

Q: What is Cache API?
A: JS API used by Service Workers to store HTTP responses programmatically.

Q: Workbox?
A: Google library that simplifies Service Worker caching strategies (network-first, cache-first, etc.).

Q: Stale-while-revalidate strategy?
A: Return cached version; in background fetch fresh; update cache.

Q: Cache-first strategy?
A: Cache hit returns immediately; cache miss fetches from network and stores.

Q: Network-first strategy?
A: Try network; if it fails or is slow, fall back to cache.

Q: What is server-side rendering (SSR)?
A: Render HTML on the server; ship to client; hydrate with JS — improves LCP and SEO.

Q: What is static-site generation (SSG)?
A: Pre-render at build time; serve static HTML — fastest, but content must be known at build.

Q: What is incremental static regeneration (ISR)?
A: Hybrid: pre-render, then re-render on demand after stale period (Next.js feature).

Q: What is streaming SSR?
A: Stream HTML chunks as ready — earlier LCP, lower TTFB perception.

Q: What are React Server Components?
A: Run only on server; ship rendered output, no JS — drastically reduces bundle size.

Q: What is islands architecture?
A: Mostly static HTML with small interactive "islands" hydrated independently — Astro, Fresh.

Q: What is partial hydration?
A: Hydrate only interactive components; static ones ship without JS.

Q: What is qwik resumability?
A: Defer JS execution until user interaction; serialize state in HTML — near-zero JS upfront.

Q: What does Lighthouse score?
A: Performance, Accessibility, Best Practices, SEO, PWA — synthetic lab tests at one viewport/network.

Q: What is the difference between Lighthouse and CrUX?
A: Lighthouse is lab; CrUX is real-user (RUM) data from Chrome users.

Q: What is WebPageTest?
A: Detailed synthetic test tool with waterfall, filmstrip, multiple locations — gold standard for waterfall analysis.

Q: What is web-vitals.js?
A: Google's tiny library for capturing Core Web Vitals from real users and sending to analytics.

Q: Why care about real-user monitoring (RUM)?
A: Lab tests can't reproduce all device/network conditions; field data shows actual user experience.

Q: SpeedCurve, Calibre, Treo?
A: Commercial perf-monitoring tools — synthetic + RUM, alerting, budgets.

Q: Bundle analyzer purpose?
A: Visualize what's in your bundle; identify large modules and duplicate dependencies.

Q: Common React bundle bloat?
A: Moment.js, full lodash, large icon libraries — replace with date-fns/luxon, lodash-es per-method, modular icons.

Q: moment.js alternative?
A: date-fns, day.js, luxon — orders of magnitude smaller.

Q: lodash bloat fix?
A: Use lodash-es with tree shaking, or named imports: import debounce from 'lodash/debounce'.

Q: Tree-shake CSS?
A: PurgeCSS, Tailwind JIT — remove unused selectors based on actual usage.

Q: Critical CSS?
A: Inline above-the-fold CSS in HTML head; load rest async. Reduces FCP and LCP.

Q: critical, critters tools?
A: Extract critical CSS automatically based on page render — integrate into build.

Q: CSS-in-JS perf cost?
A: Runtime generation adds bundle and CPU overhead. Compile-time CSS-in-JS (Vanilla Extract, Linaria) avoids it.

Q: Why avoid !important?
A: Specificity wars hurt maintainability; cascades become unpredictable; not a perf issue but a hygiene one.

Q: Reduce JS execution time?
A: Defer non-critical scripts, code-split, use Web Workers for heavy work, lazy-load below-fold features.

Q: What is a Web Worker?
A: Background JS thread — heavy computation off the main thread without blocking UI.

Q: What is Comlink?
A: Library that wraps Web Worker messaging in a promise-based API — easier to use.

Q: What is requestIdleCallback?
A: Schedule low-priority work during browser idle periods.

Q: What is requestAnimationFrame?
A: Sync work with the browser's repaint cycle — for animation/visual updates.

Q: Avoid layout thrashing?
A: Batch DOM reads, then batch DOM writes — interleaving forces sync layouts.

Q: What forces synchronous layout?
A: Reading layout properties (offsetWidth, scrollTop) after writing styles — browser must compute layout to return values.

Q: DevTools Performance tab?
A: Profile main thread work, paint, layout, scripting — identify long tasks and rendering bottlenecks.

Q: Long tasks definition?
A: Tasks taking > 50ms on the main thread — block input responsiveness.

Q: PerformanceObserver API?
A: JS API to receive performance entries (long tasks, paints, layout shifts) for custom monitoring.

Q: What is INP measurement?
A: Worst-case interaction latency observed during page visit (with some smoothing) — captures real interaction pain.

Q: Improve INP?
A: Break long tasks, avoid synchronous layout, use scheduler.yield(), batch state updates, debounce handlers.

Q: scheduler.yield()?
A: New API to yield back to the main thread mid-task, allowing input events to be processed.

Q: What is the new scheduler API (postTask)?
A: scheduler.postTask(fn, {priority: 'background'}) — explicit task scheduling with priorities.

Q: Optimize React rendering?
A: useMemo/useCallback when profiling shows benefit; React.memo for pure children; key stability; avoid unnecessary state in parents.

Q: What does React.memo do?
A: Skip render if props are referentially equal — useful for expensive leaves.

Q: useDeferredValue purpose?
A: Defer non-urgent updates so urgent input stays responsive — built-in React perf primitive.

Q: useTransition purpose?
A: Mark a state update as non-blocking; React keeps previous UI interactive.

Q: Virtual scrolling?
A: Render only visible rows of a large list (react-window, TanStack Virtual). Saves DOM and memory.

Q: Image CDN?
A: Cloudinary, Imgix, Cloudflare Images — transform and optimize images on the fly via URL params.

Q: Lazy-loading iframe perf gotcha?
A: Off-screen iframes still cost JS execution; defer until needed.

Q: YouTube embed alternative?
A: lite-youtube-embed — clickable thumbnail that loads full iframe only on interaction.

Q: Self-host vs third-party fonts?
A: Self-host typically wins now; cross-site cache is no longer shared.

Q: HTTP/2 multiplexing — what changed?
A: Multiple requests over one connection, no head-of-line blocking at HTTP layer (still at TCP).

Q: HTTP/3 over QUIC — what changed?
A: Eliminates TCP head-of-line blocking; faster handshake (0-RTT for resumed connections).

Q: TLS 1.3 perf benefit?
A: 1-RTT handshake (vs 2-RTT in TLS 1.2); 0-RTT for known sessions.

Q: Why use compression for JSON APIs?
A: Gzip/Brotli reduces payload 60–80% for repetitive structured data.

Q: ETags vs Cache-Control?
A: ETag for conditional revalidation; Cache-Control sets freshness/lifetime. Both can coexist.

Q: Vary header impact?
A: Each unique Vary value creates a separate cache entry — over-broad Vary headers reduce hit rate.

Q: What is the doc TTI?
A: Time to Interactive — when page is reliably responsive to user input. Largely superseded by INP for measurement.

Q: First Input Delay (FID)?
A: Time from first input to handler start. Deprecated in 2024 in favor of INP.

Q: Long Animation Frames API?
A: New API capturing long frames (script + style + layout + paint) — better signal than long tasks alone.

Q: What is Speed Index?
A: How quickly content visually populates the screen — used by Lighthouse.

Q: What is the perceptual speed index?
A: Variant weighting visual completeness over time.

Q: Above-the-fold content priority?
A: Render critical content first; load decorative + below-fold lazily.

Q: 3G simulation in Lighthouse?
A: Slow 4G simulated network — represents median field conditions for many users.

Q: Why test on slow 4G?
A: Median user device + network is far slower than developer laptops.

Q: Why throttle CPU in tests?
A: Mid-tier mobile CPU is ~4× slower than developer CPU; without throttle, JS overhead looks fine in lab.

Q: What is the V8 lazy parsing?
A: V8 parses functions only when first called — speeds up script load by deferring unused code.

Q: Why ship smaller bundles even with caching?
A: First-visit experience matters; cache often gets evicted; parse/compile cost scales with bundle size every time.

Q: Compression of WOFF2 fonts?
A: WOFF2 uses Brotli internally — typically 30% smaller than WOFF.

Q: Optimize SVG icons?
A: SVGO removes editor metadata, redundant attributes — often 30–50% size reduction.

Q: Inline small SVG icons?
A: Avoid HTTP request for small icons; trade-off is HTML size and cacheability.

Q: Icon font perf trade-offs?
A: Single request, but adds FOIT risk and accessibility issues. SVG sprite usually preferred.

Q: SVG sprite via <use>?
A: Single sprite file referenced by <use href="#icon-id"> — cached once, used many times.

Q: Use background-image vs <img>?
A: <img> respects loading=lazy, srcset, alt text. Use background-image only for decorative tiling.

Q: Avoid render-blocking fonts?
A: font-display: swap + preload critical font files + subset.

Q: JS execution priority?
A: Critical interactive code first; analytics, ads, third-party widgets last and async.

Q: Third-party script perf cost?
A: Often dominate page weight and main-thread time; review quarterly; remove unused.

Q: Avoid client-side analytics in SSR?
A: Run analytics server-side or use minimal beacon; client tracking adds JS and latency.

Q: Beacon API?
A: navigator.sendBeacon(url, data) — send analytics during unload without blocking navigation.

Q: Compression-only headers (X-Content-Encoding)?
A: Standard is Content-Encoding; ensure infrastructure isn't double-compressing or mangling.

Q: Why does HTTP/2 prioritization matter?
A: Browser hints which resources are critical; server can deliver in optimal order.

Q: What is the Resource Hints spec?
A: Standardized link rels: dns-prefetch, preconnect, prefetch, preload, modulepreload.

Q: What is dns-prefetch-control header?
A: Allow control over the DNS prefetching behavior — rarely needed.

Q: What is the alt-svc header?
A: Advertises HTTP/3 support so future connections upgrade — important for QUIC adoption.

Q: Connection coalescing?
A: Browser may reuse one HTTP/2 connection for multiple domains sharing IP+cert — reduces handshakes.

Q: DNS resolution cost?
A: First request to a new domain: 20-100ms; multiplied across third-party domains adds up.

Q: PNG vs WebP for transparent images?
A: WebP smaller in nearly all cases; PNG only for archival/print or fallback.

Q: JPEG progressive vs baseline?
A: Progressive loads in passes — faster perceived load; baseline loads top-down.

Q: GIF for animation?
A: Use MP4/WebM video instead — orders of magnitude smaller for the same quality.

Q: <video> autoplay vs animated GIF?
A: <video muted autoplay loop> — far better perf, supports lazy-load.

Q: Aspect-ratio CSS for video?
A: Same as images — set aspect-ratio to prevent layout shift before metadata loads.

Q: Lazy-load YouTube iframe?
A: Use facade like lite-youtube-embed; defer iframe creation until click.

Q: Preconnect to Google Fonts?
A: <link rel="preconnect" href="https://fonts.googleapis.com"> + crossorigin variant for fonts.gstatic.com.

Q: Modern image strategies summary?
A: <picture> for art direction, srcset for resolution, AVIF/WebP for compression, loading=lazy for below-fold, aspect-ratio for stability.

Q: What is "self-hosting" critical third-parties?
A: For predictable performance, mirror small critical assets to your origin — controlled cache and version.

Q: What is connection: keep-alive?
A: HTTP/1.1 default — keeps TCP connection open for follow-up requests. Reduces handshake repetition.

Q: HTTP/2 dependencies in DevTools?
A: Network panel shows prioritization tree — verify critical resources are top priority.

Q: Service Worker update strategy?
A: skipWaiting / clients.claim — replace active SW immediately; can cause inconsistency mid-session.

Q: Bundle splitting per route?
A: Each route ships only its specific code + shared chunks — minimizes initial JS for SPA.

Q: Why does shipping less JS help INP?
A: Less parsing, less hydration, less event-handler binding — main thread freed sooner.

Q: What's the impact of large npm dependencies?
A: Each adds bytes + parse time. Audit with bundle-phobia, package-size.

Q: Library size vs feature value tradeoff?
A: Smaller libraries with focused APIs often beat large all-in-one packages for perf.

Q: Native APIs over polyfills?
A: Modern browsers ship many APIs natively (fetch, IntersectionObserver) — drop polyfills as support grows.

Q: Polyfill differential serving?
A: Serve modern bundle to modern browsers; legacy bundle to old browsers — reduces modern-bundle bloat.

Q: Webpack vs Vite for build perf?
A: Vite uses esbuild for dev and rollup for prod — significantly faster dev startup.

Q: Hot Module Replacement (HMR)?
A: Replace modules without full page reload during dev — preserves state, fast feedback.

Q: What is React's automatic batching?
A: State updates inside event handlers, promises, timeouts batch into single re-render in React 18+.

Q: Concurrent React rendering benefits?
A: Interruptible rendering — urgent updates preempt low-priority ones, keeping UI responsive.

Q: Why setTimeout(0) in old React?
A: Pre-18, escaped batching. Now unnecessary in most cases.

Q: Layout effects synchronous cost?
A: Run before paint — heavy work in useLayoutEffect blocks visible update.

Q: Avoid useLayoutEffect when?
A: When useEffect is sufficient — async timing avoids blocking paint.

Q: What is the rendering pipeline summary?
A: JavaScript → Style → Layout → Paint → Composite — composite-only changes (transform, opacity) are cheapest.

Q: Compositor-friendly animations?
A: Animate transform and opacity only — runs on GPU thread without re-layout/repaint.

Q: will-change CSS hint?
A: Tells browser to optimize an element — overuse hurts perf by promoting too many layers.

Q: Avoid forced synchronous layout in animations?
A: Don't read layout properties in animation loops; use stored values or rAF batching.

Q: Long tasks in extensions?
A: Browser extensions can inject scripts that run on every page — verify in DevTools with "self" filter.

Q: Hide content vs remove?
A: display:none removes from layout (cheap); visibility:hidden keeps layout cost. Choose per intent.

Q: What is "content-visibility: auto"?
A: Skip rendering of off-screen content; major win for long pages with many sections.

Q: Pagination vs infinite scroll perf?
A: Pagination has predictable cost per page; infinite scroll accumulates DOM and memory — use virtualization.

Q: What is "react-window"?
A: Library for windowed virtual lists/grids — only renders visible rows.

Q: Image dimensions tip for CLS?
A: Always include width/height attributes on <img> — browser reserves space before image loads.

Q: What is "lazy hydration"?
A: Hydrate components only when visible or interacted with — saves boot-time JS execution.

Q: Quick wins checklist?
A: Compress images (AVIF/WebP), preconnect to critical origins, lazy-load below-fold, code-split routes, defer non-critical JS, inline critical CSS, set proper cache headers.

Q: Long-term perf strategy?
A: Set budgets, monitor RUM, regression-test in CI, prioritize Core Web Vitals — perf is a continuous practice.