Compare 'font-display: swap' and 'font-display: optional' in terms of Flash of Unstyled Text (FOUT) and Cumulative Layout Shift (CLS).

'font-display: swap' immediately renders fallback system text (0ms block period) and swaps in the custom web font whenever it finishes downloading, which can trigger a layout shift (CLS) if font metrics differ. 'font-display: optional' gives the font an ultra-short ~100ms block period and zero swap period—if the font isn't ready in ~100ms, the page keeps the fallback font for that navigation and caches the web font for the next pageview, completely eliminating font-induced CLS.

What is HTTP 103 Early Hints, and how does it optimize the Critical Rendering Path during slow server database queries?

While the origin server is still generating the main HTTP 200 HTML response (think time), the server or CDN sends an interim 'HTTP/1.1 103 Early Hints' frame containing 'Link: ; rel=preload; as=style' and 'preconnect' headers, allowing the browser to warm up connections and download critical CSS/fonts during server TTFB wait time.

What defines a 'Long Task' on the browser's main thread, and how do 'scheduler.yield()' or 'setTimeout(fn, 0)' improve INP?

Any contiguous main-thread task taking longer than 50 milliseconds is a Long Task, blocking user input processing and frame rendering. Breaking up heavy JavaScript work via 'await scheduler.yield()' (or 'setTimeout') yields control back to the browser event loop so pending user interactions and next-frame paints can execute immediately.

How did Interaction to Next Paint (INP) improve upon First Input Delay (FID) when it officially replaced FID as a Core Web Vital in March 2024?

FID only measured the input delay (main-thread queuing time) of the very first interaction on a page, ignoring event handler execution time and frame rendering delay. INP measures the complete lifecycle (Input Delay + Processing Duration + Presentation Delay) across all click, tap, and keyboard interactions throughout the entire page visit, reporting the worst (or 98th percentile on high-interaction pages) latency.

What does the CSS property 'content-visibility: auto' paired with 'contain-intrinsic-size' do for long pages with heavy DOM trees?

'content-visibility: auto' instructs the browser to completely skip Layout and Paint work for off-screen sections until they approach the viewport, reducing initial rendering time and main-thread cost, while 'contain-intrinsic-size' provides a placeholder height so the scrollbar doesn't jump.

Why must explicit 'width' and 'height' attributes (or CSS 'aspect-ratio') be set on all ' ', ' ', and ' ' elements?

Modern browsers use the HTML 'width' and 'height' attributes in their internal user-agent stylesheet to compute the element's intrinsic aspect ratio ('aspect-ratio: attr(width) / attr(height)') during HTML parsing, reserving the exact vertical space prior to image download and preventing CLS.

How do normal ' ', ' ', and ' ' differ in HTML parsing and execution timing?

A standard ' ' pauses HTML parsing immediately to fetch and execute the script. ' ' fetches in parallel with HTML parsing and pauses parsing immediately once downloaded to execute (in arbitrary arrival order). ' ' fetches in parallel without blocking HTML parsing and executes in document order after the DOM is fully parsed, right before 'DOMContentLoaded'.

Why do layout shifts that occur within 500 milliseconds of a discrete user interaction (such as a click or key press) get excluded from CLS?

The 'hadRecentInput' flag ignores shifts within 500ms of active user input (clicking, tapping, pressing a key—excluding scrolling or hovering) so that expected UI changes like expanding an accordion or opening a menu are not penalized as unexpected layout instability.

How is a single Layout Shift Score calculated in Cumulative Layout Shift (CLS)?

Layout Shift Score = Impact Fraction × Distance Fraction, where Impact Fraction is the union of the visible area of unstable elements in the previous and current frames as a fraction of the viewport, and Distance Fraction is the greatest horizontal or vertical distance any unstable element moved divided by the viewport's largest dimension.

What protocol problem in HTTP/2 did HTTP/3 (QUIC over UDP) solve to improve TTFB and LCP on lossy mobile networks?

Although HTTP/2 introduced stream multiplexing over a single TCP connection, a single lost TCP packet stalls all multiplexed streams at the OS kernel level (TCP Head-of-Line Blocking). HTTP/3 runs over QUIC (built on UDP), isolating packet loss to only the affected stream and combining the transport and TLS 1.3 handshakes into 1-RTT (or 0-RTT on resumption).

Why should CSS animations use 'transform' (e.g., 'translate3d', 'scale') and 'opacity' instead of 'top', 'left', 'width', or 'height'?

Animating layout-inducing properties like 'top', 'left', 'width', or 'height' triggers main-thread Layout (reflow) and Paint on every frame, worsening INP and contributing directly to Cumulative Layout Shift (CLS). 'transform' and 'opacity' run on the GPU compositor thread without triggering main-thread Layout, Paint, or CLS.

How do the 'srcset' and 'sizes' attributes on an ' ' tag work together to serve responsive images before layout is calculated?

'srcset' lists available image file URLs alongside their intrinsic pixel widths (using 'w' descriptors like '800w'), while 'sizes' tells the browser's preload scanner how wide the image will render at various viewport breakpoints (e.g., '(max-width: 600px) 100vw, 50vw') so it can download the optimal image before CSS loads.

Why is CSS considered 'render-blocking' by default, and how can non-critical CSS be loaded without blocking First Contentful Paint (FCP)?

Browsers block rendering of any page content until all standard ' ' files in the document are downloaded and parsed into the CSSOM to prevent a Flash of Unstyled Content (FOUC). You can inline critical above-the-fold CSS in a ' ' block and load non-critical stylesheets via media queries (e.g., 'media="print" onload="this.media='all'"') or component-level splitting.

How does the 'fetchpriority="high"' attribute work on an LCP ' ' element, and why should 'loading="lazy"' NEVER be placed on the LCP image?

'fetchpriority="high"' elevates the image's internal network priority from Low/Medium to High before layout completes, eliminating Resource Load Delay. Putting 'loading="lazy"' on the LCP image delays fetching until after layout/intersection observer runs, directly worsening LCP.

Explain the HTTP caching header 'Cache-Control: public, max-age=60, s-maxage=3600, stale-while-revalidate=86400'.

'public' allows both browser and shared CDN caches to store the response; 'max-age=60' keeps it fresh in the browser for 60s; 's-maxage=3600' overrides max-age for shared CDN edge caches to 1 hour; 'stale-while-revalidate=86400' lets the cache immediately serve a stale response for up to 24 hours after expiration while asynchronously fetching a fresh copy in the background.

What happens if you preload a web font using ' ' WITHOUT including the 'crossorigin' attribute?

Web fonts are always fetched by the browser in anonymous CORS mode. If the ' ' tag omits the 'crossorigin' attribute, the preloaded non-CORS request will not match the CSS '@font-face' CORS request, causing the browser to download the font twice and waste bandwidth.

Compare modern image formats WebP, AVIF, and SVG for web performance.

WebP offers ~25–35% smaller file sizes than JPEG/PNG with universal browser support; AVIF (based on AV1 video coding) achieves ~50% smaller file sizes than JPEG with superior gradients and HDR support; SVG is an XML vector format ideal for logos and icons because it scales infinitely at tiny byte sizes.

How does Brotli ('br') compression compare to Gzip for HTML, CSS, and JavaScript delivery?

Brotli uses a pre-defined static dictionary of common HTML/CSS/JS tokens alongside LZ77 and Huffman coding, achieving 15–25% smaller payload sizes than Gzip at comparable decompression speeds, directly reducing Resource Load Duration over HTTPS.

When should you use 'Cache-Control: public, max-age=31536000, immutable', and what filename strategy does it require?

Use it for fingerprinted static assets (JS bundles, CSS files, fonts, images) whose filenames contain a content hash (e.g., 'app.8f9d2a.js'). 'immutable' tells the browser never to send conditional revalidation requests for 1 year even if the user reloads the page; when code changes, a new filename hash is deployed.

How do 'ETag' (with 'If-None-Match') and 'Last-Modified' (with 'If-Modified-Since') differ as HTTP cache validators?

'Last-Modified' is a timestamp validator with 1-second resolution that can fail if a file is rebuilt with identical content. 'ETag' is an opaque content hash or version identifier generated by the server; when a cached resource expires, the client sends 'If-None-Match: "etag-value"' and receives a lightweight HTTP 304 Not Modified if unchanged.

Which HTML element types are eligible candidates for Largest Contentful Paint (LCP)?

' ' elements, ' ' inside an ' ', ' ' elements (using either the poster image load time or first rendered video frame, whichever is earlier), elements with a CSS 'background-image' loaded via 'url()', and block-level elements containing text nodes.

What is the 'Good' threshold for Time to First Byte (TTFB), and what are its network and server sub-phases?

A 'Good' TTFB is <= 800 milliseconds. Its sub-phases are Redirect Duration, Service Worker Startup (if present), DNS Lookup, TCP Connection & TLS Handshake, and Server Request-to-Response Waiting Time.

How do the CSS '@font-face' descriptors 'size-adjust', 'ascent-override', 'descent-override', and 'line-height-override' reduce CLS?

When applied to a local fallback '@font-face' (such as Arial or Roboto), these metric overrides calibrate the fallback font's glyph box height and width to match the custom web font's dimensions, preventing line reflow and layout shifts when 'font-display: swap' activates.

What are the five sequential stages of the browser's Critical Rendering Path (CRP)?

1. DOM construction (parsing HTML bytes into nodes); 2. CSSOM construction (parsing CSS rules); 3. Render Tree construction (combining visible DOM nodes with computed CSSOM styles, excluding 'display: none'); 4. Layout / Reflow (calculating exact geometry and box positions); 5. Paint & Composite (rasterizing pixels onto layers and compositing on the GPU).

What are the three Core Web Vitals metrics and their 'Good', 'Needs Improvement', and 'Poor' thresholds at the 75th percentile?

1. Largest Contentful Paint (LCP): Good 4.0s; 2. Interaction to Next Paint (INP): Good 500ms; 3. Cumulative Layout Shift (CLS): Good 0.25.

How does the 'Session Window' aggregation method calculate a page's final CLS score?

Layout shifts are grouped into session windows where there is at most a 1-second gap between individual shifts and each window lasts at most 5 seconds total. The page's reported CLS score is the maximum cumulative score of any single session window (not the sum of all shifts across a 30-minute visit).

What are the four sequential sub-parts of Largest Contentful Paint (LCP) used to diagnose loading bottlenecks?

1. Time to First Byte (TTFB: from navigation start to receiving the first byte of HTML); 2. Resource Load Delay (time between TTFB and when the browser starts fetching the LCP resource); 3. Resource Load Duration (time taken to download the LCP image/video/font); 4. Element Render Delay (time between the LCP resource finishing download and actually painting to screen).

What causes 'Layout Thrashing' (Forced Synchronous Layout) in JavaScript, and how does it impact INP?

Layout thrashing occurs when JavaScript repeatedly writes to the DOM/styles and immediately reads geometric layout properties (like 'offsetHeight', 'getBoundingClientRect()', or 'scrollTop') inside a loop, forcing the browser to recalculate layout synchronously multiple times within a single frame and spiking INP Processing Duration.

Compare the three resource hints: 'dns-prefetch', 'preconnect', and 'preload'.

'dns-prefetch' only resolves the domain's IP address in the background; 'preconnect' performs DNS lookup + TCP handshake + TLS negotiation to a critical third-party origin; 'preload' (' ') forces the browser to immediately fetch a specific high-priority resource (such as a critical web font or CSS background LCP image) needed for the current page.

How does Field Data (Chrome User Experience Report / CrUX) differ from Lab Data (Lighthouse), and which one does Google use as a ranking signal?

CrUX Field Data is collected from real opted-in Chrome users over a rolling 28-day window across varied devices, networks, and full page lifecycles; Lighthouse Lab Data is a single simulated load in a controlled environment with no post-load user interactions (so Lighthouse measures Total Blocking Time, TBT, as a lab proxy for INP). Google Search uses only CrUX Field Data for Page Experience ranking signals.

What is the Speculation Rules API (' '), and how do 'prefetch' and 'prerender' modes differ?

The Speculation Rules API declaratively instructs Chrome which likely next navigations to warm up based on URL lists or link-matching rules with configurable 'eagerness' ('immediate', 'eager', 'moderate', 'conservative'). 'prefetch' only downloads the target HTML document in the background, whereas 'prerender' downloads all subresources, executes JavaScript, and renders the full page in a hidden background tab for near-0ms LCP on click.

How does the Browser Back/Forward Cache (bfcache) affect Core Web Vitals, and what two common practices break bfcache eligibility?

The bfcache keeps a complete in-memory snapshot (including the JS heap) of a page when the user navigates away, enabling instant (near-zero LCP and CLS) restoration when pressing Back/Forward. Eligibility is most commonly broken by setting 'Cache-Control: no-store' on the HTML document or attaching 'unload' event listeners.

Core Web Vitals (LCP, INP, CLS), TTFB, Critical Rendering Path, Resource Hints, Image/Font Optimization & CDN Caching

2026 Core Web Vitals at the 75th percentile (LCP <= 2.5s, INP <= 200ms replacing FID, CLS <= 0.1), CrUX field vs. Lighthouse lab data, TTFB and LCP sub-parts, Critical Rendering Path, resource hints (preload, preconnect, fetchpriority), WebP/AVIF, font-display, HTTP/3, Cache-Control, bfcache, and Speculation Rules API.

Level: basic
Languages: en → en
Cards: 32
Markdown: Core Web Vitals (LCP, INP, CLS), TTFB, Critical Rendering Path, Resource Hints, Image/Font Optimization & CDN Caching (.md)

Flashcards (32)

#	Front (Term / Question)	Back (Definition / Answer)
1	Compare 'font-display: swap' and 'font-display: optional' in terms of Flash of Unstyled Text (FOUT) and Cumulative Layout Shift (CLS).	'font-display: swap' immediately renders fallback system text (0ms block period) and swaps in the custom web font whenever it finishes downloading, which can trigger a layout shift (CLS) if font metrics differ. 'font-display: optional' gives the font an ultra-short ~100ms block period and zero swap period—if the font isn't ready in ~100ms, the page keeps the fallback font for that navigation and caches the web font for the next pageview, completely eliminating font-induced CLS.
2	What is HTTP 103 Early Hints, and how does it optimize the Critical Rendering Path during slow server database queries?	While the origin server is still generating the main HTTP 200 HTML response (think time), the server or CDN sends an interim 'HTTP/1.1 103 Early Hints' frame containing 'Link: </style.css>; rel=preload; as=style' and 'preconnect' headers, allowing the browser to warm up connections and download critical CSS/fonts during server TTFB wait time.
3	What defines a 'Long Task' on the browser's main thread, and how do 'scheduler.yield()' or 'setTimeout(fn, 0)' improve INP?	Any contiguous main-thread task taking longer than 50 milliseconds is a Long Task, blocking user input processing and frame rendering. Breaking up heavy JavaScript work via 'await scheduler.yield()' (or 'setTimeout') yields control back to the browser event loop so pending user interactions and next-frame paints can execute immediately.
4	How did Interaction to Next Paint (INP) improve upon First Input Delay (FID) when it officially replaced FID as a Core Web Vital in March 2024?	FID only measured the input delay (main-thread queuing time) of the very first interaction on a page, ignoring event handler execution time and frame rendering delay. INP measures the complete lifecycle (Input Delay + Processing Duration + Presentation Delay) across all click, tap, and keyboard interactions throughout the entire page visit, reporting the worst (or 98th percentile on high-interaction pages) latency.
5	What does the CSS property 'content-visibility: auto' paired with 'contain-intrinsic-size' do for long pages with heavy DOM trees?	'content-visibility: auto' instructs the browser to completely skip Layout and Paint work for off-screen sections until they approach the viewport, reducing initial rendering time and main-thread cost, while 'contain-intrinsic-size' provides a placeholder height so the scrollbar doesn't jump.
6	Why must explicit 'width' and 'height' attributes (or CSS 'aspect-ratio') be set on all '<img>', '<video>', and '<iframe>' elements?	Modern browsers use the HTML 'width' and 'height' attributes in their internal user-agent stylesheet to compute the element's intrinsic aspect ratio ('aspect-ratio: attr(width) / attr(height)') during HTML parsing, reserving the exact vertical space prior to image download and preventing CLS.
7	How do normal '<script>', '<script async>', and '<script defer>' differ in HTML parsing and execution timing?	A standard '<script>' pauses HTML parsing immediately to fetch and execute the script. '<script async>' fetches in parallel with HTML parsing and pauses parsing immediately once downloaded to execute (in arbitrary arrival order). '<script defer>' fetches in parallel without blocking HTML parsing and executes in document order after the DOM is fully parsed, right before 'DOMContentLoaded'.
8	Why do layout shifts that occur within 500 milliseconds of a discrete user interaction (such as a click or key press) get excluded from CLS?	The 'hadRecentInput' flag ignores shifts within 500ms of active user input (clicking, tapping, pressing a key—excluding scrolling or hovering) so that expected UI changes like expanding an accordion or opening a menu are not penalized as unexpected layout instability.
9	How is a single Layout Shift Score calculated in Cumulative Layout Shift (CLS)?	Layout Shift Score = Impact Fraction × Distance Fraction, where Impact Fraction is the union of the visible area of unstable elements in the previous and current frames as a fraction of the viewport, and Distance Fraction is the greatest horizontal or vertical distance any unstable element moved divided by the viewport's largest dimension.
10	What protocol problem in HTTP/2 did HTTP/3 (QUIC over UDP) solve to improve TTFB and LCP on lossy mobile networks?	Although HTTP/2 introduced stream multiplexing over a single TCP connection, a single lost TCP packet stalls all multiplexed streams at the OS kernel level (TCP Head-of-Line Blocking). HTTP/3 runs over QUIC (built on UDP), isolating packet loss to only the affected stream and combining the transport and TLS 1.3 handshakes into 1-RTT (or 0-RTT on resumption).
11	Why should CSS animations use 'transform' (e.g., 'translate3d', 'scale') and 'opacity' instead of 'top', 'left', 'width', or 'height'?	Animating layout-inducing properties like 'top', 'left', 'width', or 'height' triggers main-thread Layout (reflow) and Paint on every frame, worsening INP and contributing directly to Cumulative Layout Shift (CLS). 'transform' and 'opacity' run on the GPU compositor thread without triggering main-thread Layout, Paint, or CLS.
12	How do the 'srcset' and 'sizes' attributes on an '<img>' tag work together to serve responsive images before layout is calculated?	'srcset' lists available image file URLs alongside their intrinsic pixel widths (using 'w' descriptors like '800w'), while 'sizes' tells the browser's preload scanner how wide the image will render at various viewport breakpoints (e.g., '(max-width: 600px) 100vw, 50vw') so it can download the optimal image before CSS loads.
13	Why is CSS considered 'render-blocking' by default, and how can non-critical CSS be loaded without blocking First Contentful Paint (FCP)?	Browsers block rendering of any page content until all standard '<link rel="stylesheet">' files in the document are downloaded and parsed into the CSSOM to prevent a Flash of Unstyled Content (FOUC). You can inline critical above-the-fold CSS in a '<style>' block and load non-critical stylesheets via media queries (e.g., 'media="print" onload="this.media='all'"') or component-level splitting.
14	How does the 'fetchpriority="high"' attribute work on an LCP '<img>' element, and why should 'loading="lazy"' NEVER be placed on the LCP image?	'fetchpriority="high"' elevates the image's internal network priority from Low/Medium to High before layout completes, eliminating Resource Load Delay. Putting 'loading="lazy"' on the LCP image delays fetching until after layout/intersection observer runs, directly worsening LCP.
15	Explain the HTTP caching header 'Cache-Control: public, max-age=60, s-maxage=3600, stale-while-revalidate=86400'.	'public' allows both browser and shared CDN caches to store the response; 'max-age=60' keeps it fresh in the browser for 60s; 's-maxage=3600' overrides max-age for shared CDN edge caches to 1 hour; 'stale-while-revalidate=86400' lets the cache immediately serve a stale response for up to 24 hours after expiration while asynchronously fetching a fresh copy in the background.
16	What happens if you preload a web font using '<link rel="preload" href="/font.woff2" as="font" type="font/woff2">' WITHOUT including the 'crossorigin' attribute?	Web fonts are always fetched by the browser in anonymous CORS mode. If the '<link rel="preload" as="font">' tag omits the 'crossorigin' attribute, the preloaded non-CORS request will not match the CSS '@font-face' CORS request, causing the browser to download the font twice and waste bandwidth.
17	Compare modern image formats WebP, AVIF, and SVG for web performance.	WebP offers ~25–35% smaller file sizes than JPEG/PNG with universal browser support; AVIF (based on AV1 video coding) achieves ~50% smaller file sizes than JPEG with superior gradients and HDR support; SVG is an XML vector format ideal for logos and icons because it scales infinitely at tiny byte sizes.
18	How does Brotli ('br') compression compare to Gzip for HTML, CSS, and JavaScript delivery?	Brotli uses a pre-defined static dictionary of common HTML/CSS/JS tokens alongside LZ77 and Huffman coding, achieving 15–25% smaller payload sizes than Gzip at comparable decompression speeds, directly reducing Resource Load Duration over HTTPS.
19	When should you use 'Cache-Control: public, max-age=31536000, immutable', and what filename strategy does it require?	Use it for fingerprinted static assets (JS bundles, CSS files, fonts, images) whose filenames contain a content hash (e.g., 'app.8f9d2a.js'). 'immutable' tells the browser never to send conditional revalidation requests for 1 year even if the user reloads the page; when code changes, a new filename hash is deployed.
20	How do 'ETag' (with 'If-None-Match') and 'Last-Modified' (with 'If-Modified-Since') differ as HTTP cache validators?	'Last-Modified' is a timestamp validator with 1-second resolution that can fail if a file is rebuilt with identical content. 'ETag' is an opaque content hash or version identifier generated by the server; when a cached resource expires, the client sends 'If-None-Match: "etag-value"' and receives a lightweight HTTP 304 Not Modified if unchanged.
21	Which HTML element types are eligible candidates for Largest Contentful Paint (LCP)?	'<img>' elements, '<image>' inside an '<svg>', '<video>' elements (using either the poster image load time or first rendered video frame, whichever is earlier), elements with a CSS 'background-image' loaded via 'url()', and block-level elements containing text nodes.
22	What is the 'Good' threshold for Time to First Byte (TTFB), and what are its network and server sub-phases?	A 'Good' TTFB is <= 800 milliseconds. Its sub-phases are Redirect Duration, Service Worker Startup (if present), DNS Lookup, TCP Connection & TLS Handshake, and Server Request-to-Response Waiting Time.
23	How do the CSS '@font-face' descriptors 'size-adjust', 'ascent-override', 'descent-override', and 'line-height-override' reduce CLS?	When applied to a local fallback '@font-face' (such as Arial or Roboto), these metric overrides calibrate the fallback font's glyph box height and width to match the custom web font's dimensions, preventing line reflow and layout shifts when 'font-display: swap' activates.
24	What are the five sequential stages of the browser's Critical Rendering Path (CRP)?	1. DOM construction (parsing HTML bytes into nodes); 2. CSSOM construction (parsing CSS rules); 3. Render Tree construction (combining visible DOM nodes with computed CSSOM styles, excluding 'display: none'); 4. Layout / Reflow (calculating exact geometry and box positions); 5. Paint & Composite (rasterizing pixels onto layers and compositing on the GPU).
25	What are the three Core Web Vitals metrics and their 'Good', 'Needs Improvement', and 'Poor' thresholds at the 75th percentile?	1. Largest Contentful Paint (LCP): Good <= 2.5s, Needs Improvement 2.5s–4.0s, Poor > 4.0s; 2. Interaction to Next Paint (INP): Good <= 200ms, Needs Improvement 200ms–500ms, Poor > 500ms; 3. Cumulative Layout Shift (CLS): Good <= 0.1, Needs Improvement 0.1–0.25, Poor > 0.25.
26	How does the 'Session Window' aggregation method calculate a page's final CLS score?	Layout shifts are grouped into session windows where there is at most a 1-second gap between individual shifts and each window lasts at most 5 seconds total. The page's reported CLS score is the maximum cumulative score of any single session window (not the sum of all shifts across a 30-minute visit).
27	What are the four sequential sub-parts of Largest Contentful Paint (LCP) used to diagnose loading bottlenecks?	1. Time to First Byte (TTFB: from navigation start to receiving the first byte of HTML); 2. Resource Load Delay (time between TTFB and when the browser starts fetching the LCP resource); 3. Resource Load Duration (time taken to download the LCP image/video/font); 4. Element Render Delay (time between the LCP resource finishing download and actually painting to screen).
28	What causes 'Layout Thrashing' (Forced Synchronous Layout) in JavaScript, and how does it impact INP?	Layout thrashing occurs when JavaScript repeatedly writes to the DOM/styles and immediately reads geometric layout properties (like 'offsetHeight', 'getBoundingClientRect()', or 'scrollTop') inside a loop, forcing the browser to recalculate layout synchronously multiple times within a single frame and spiking INP Processing Duration.
29	Compare the three resource hints: 'dns-prefetch', 'preconnect', and 'preload'.	'dns-prefetch' only resolves the domain's IP address in the background; 'preconnect' performs DNS lookup + TCP handshake + TLS negotiation to a critical third-party origin; 'preload' ('<link rel="preload" as="...">') forces the browser to immediately fetch a specific high-priority resource (such as a critical web font or CSS background LCP image) needed for the current page.
30	How does Field Data (Chrome User Experience Report / CrUX) differ from Lab Data (Lighthouse), and which one does Google use as a ranking signal?	CrUX Field Data is collected from real opted-in Chrome users over a rolling 28-day window across varied devices, networks, and full page lifecycles; Lighthouse Lab Data is a single simulated load in a controlled environment with no post-load user interactions (so Lighthouse measures Total Blocking Time, TBT, as a lab proxy for INP). Google Search uses only CrUX Field Data for Page Experience ranking signals.
31	What is the Speculation Rules API ('<script type="speculationrules">'), and how do 'prefetch' and 'prerender' modes differ?	The Speculation Rules API declaratively instructs Chrome which likely next navigations to warm up based on URL lists or link-matching rules with configurable 'eagerness' ('immediate', 'eager', 'moderate', 'conservative'). 'prefetch' only downloads the target HTML document in the background, whereas 'prerender' downloads all subresources, executes JavaScript, and renders the full page in a hidden background tab for near-0ms LCP on click.
32	How does the Browser Back/Forward Cache (bfcache) affect Core Web Vitals, and what two common practices break bfcache eligibility?	The bfcache keeps a complete in-memory snapshot (including the JS heap) of a page when the user navigates away, enabling instant (near-zero LCP and CLS) restoration when pressing Back/Forward. Eligibility is most commonly broken by setting 'Cache-Control: no-store' on the HTML document or attaching 'unload' event listeners.