Performance Mastery

Aced your technical interviews with 200+ curated questions on modern web performance optimization, metrics, and best practices.

0 / 200 Vitals Mastered
100/100 Lighthouse
INP Ready

Analyzing 190 Performance Insights

Optimizing Core Web Vitals
1
What are Core Web Vitals?
Beginner

Core Web Vitals are a set of specific factors that Google considers important in a webpage's overall user experience. They consist of three specific p...

Performance Deep Dive

Core Web Vitals are a set of specific factors that Google considers important in a webpage's overall user experience. They consist of three specific page speed and user interaction measurements: Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS).

Metric: metrics
2
Explain Largest Contentful Paint (LCP).
Beginner

LCP measures loading performance. To provide a good user experience, LCP should occur within 2.5 seconds of when the page first starts loading. It mar...

Performance Deep Dive

LCP measures loading performance. To provide a good user experience, LCP should occur within 2.5 seconds of when the page first starts loading. It marks the point in the page load timeline when the page's main content has likely loaded.

Metric: metrics
3
Explain Cumulative Layout Shift (CLS).
Beginner

CLS measures visual stability. To provide a good user experience, pages should maintain a CLS of 0.1. or less. It identifies how much the visible cont...

Performance Deep Dive

CLS measures visual stability. To provide a good user experience, pages should maintain a CLS of 0.1. or less. It identifies how much the visible content of a page moves around during the loading phase.

Metric: metrics
4
What is First Input Delay (FID)?
Beginner

FID measures interactivity. To provide a good user experience, pages should have a FID of 100 milliseconds or less. It measures the time from when a u...

Performance Deep Dive

FID measures interactivity. To provide a good user experience, pages should have a FID of 100 milliseconds or less. It measures the time from when a user first interacts with a page to the time when the browser is actually able to begin processing event handlers in response to that interaction.

Metric: metrics
5
What is Interaction to Next Paint (INP)?
Experience

INP is a metric that assesses a page's overall responsiveness to user interactions throughout the entire lifespan of a user's visit. It replaced FID a...

Performance Deep Dive

INP is a metric that assesses a page's overall responsiveness to user interactions throughout the entire lifespan of a user's visit. It replaced FID as a Core Web Vital in March 2024. It measures the latency of all click, tap, and keyboard interactions.

Metric: metrics
6
What is First Contentful Paint (FCP)?
Beginner

FCP measures the time from when the page starts loading to when any part of the page's content is rendered on the screen. This includes text, images (...

Performance Deep Dive

FCP measures the time from when the page starts loading to when any part of the page's content is rendered on the screen. This includes text, images (including background images), <svg> elements, or non-white <canvas> elements.

Metric: metrics
7
What is Time to First Byte (TTFB)?
Experience

TTFB is a foundational metric for measuring connection setup time and web server responsiveness in both the lab and the field. It helps identify when ...

Performance Deep Dive

TTFB is a foundational metric for measuring connection setup time and web server responsiveness in both the lab and the field. It helps identify when a web server is too slow to respond to requests.

Metric: metrics
8
Difference between Lab Data and Field Data?
Experience

Lab data is collected in a controlled environment with predefined device and network settings (e.g., Lighthouse). Field data (RUM - Real User Monitori...

Performance Deep Dive

Lab data is collected in a controlled environment with predefined device and network settings (e.g., Lighthouse). Field data (RUM - Real User Monitoring) is collected from real users visiting the page in the wild (e.g., Chrome User Experience Report).

Metric: metrics
9
What is Total Blocking Time (TBT)?
Experience

TBT measures the total amount of time between FCP and Time to Interactive (TTI) where the main thread was blocked for long enough to prevent input res...

Performance Deep Dive

TBT measures the total amount of time between FCP and Time to Interactive (TTI) where the main thread was blocked for long enough to prevent input responsiveness. It is a lab proxy for FID/INP.

Metric: metrics
10
Explain Time to Interactive (TTI).
Advanced

TTI measures the time from when the page starts loading to when it's visually rendered, its initial scripts have loaded, and it's capable of reliably ...

Performance Deep Dive

TTI measures the time from when the page starts loading to when it's visually rendered, its initial scripts have loaded, and it's capable of reliably responding to user input quickly.

Metric: metrics
11
What counts as a 'Long Task' in performance?
Advanced

A long task is any continuous execution of JavaScript on the main thread that exceeds 50 milliseconds. Long tasks block the main thread and prevent th...

Performance Deep Dive

A long task is any continuous execution of JavaScript on the main thread that exceeds 50 milliseconds. Long tasks block the main thread and prevent the browser from responding to user input.

Metric: metrics
12
How is CLS calculated?
Advanced

CLS = Impact Fraction * Distance Fraction. Impact fraction measures how much space an unstable element takes up in the viewport between two frames. Di...

Performance Deep Dive

CLS = Impact Fraction * Distance Fraction. Impact fraction measures how much space an unstable element takes up in the viewport between two frames. Distance fraction measures the distance that unstable elements have moved, relative to the viewport.

Metric: metrics
13
What is the Speed Index?
Experience

Speed Index measures how quickly content is visually displayed during page load. Lighthouse calculates this by taking a video of the page loading and ...

Performance Deep Dive

Speed Index measures how quickly content is visually displayed during page load. Lighthouse calculates this by taking a video of the page loading and computing the visual progression between frames.

Metric: metrics
14
What is Perceived Performance?
Beginner

Perceived performance is how fast a website *feels* to a user, regardless of its actual load time. Techniques like skeleton screens, optimistic UI, an...

Performance Deep Dive

Perceived performance is how fast a website *feels* to a user, regardless of its actual load time. Techniques like skeleton screens, optimistic UI, and progress bars improve perceived performance.

Metric: metrics
15
What is the Rail Model?
Advanced

RAIL stands for Response, Animation, Idle, and Load. It is a user-centric performance model that breaks down the user's experience into these four dis...

Performance Deep Dive

RAIL stands for Response, Animation, Idle, and Load. It is a user-centric performance model that breaks down the user's experience into these four distinct interactions.

Metric: metrics
16
What is 'DomContentLoaded' event?
Beginner

The DOMContentLoaded event fires when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and su...

Performance Deep Dive

The DOMContentLoaded event fires when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.

Metric: metrics
17
What is the 'Load' event?
Beginner

The load event is fired when the whole page has loaded, including all dependent resources such as stylesheets, scripts, iframes, and images.

Performance Deep Dive

The load event is fired when the whole page has loaded, including all dependent resources such as stylesheets, scripts, iframes, and images.

Metric: metrics
18
How does 'Document.readyState' relate to performance?
Experience

It describes the loading state of the document ('loading', 'interactive', 'complete'). It can be used to time specific phases of the page lifecycle.

Performance Deep Dive

It describes the loading state of the document ('loading', 'interactive', 'complete'). It can be used to time specific phases of the page lifecycle.

Metric: metrics
19
What is CrUX (Chrome User Experience Report)?
Experience

CrUX is a public dataset of real user experience data on millions of websites. It is the primary source of 'Field Data' used by Google Search Console ...

Performance Deep Dive

CrUX is a public dataset of real user experience data on millions of websites. It is the primary source of 'Field Data' used by Google Search Console and PageSpeed Insights.

Metric: metrics
20
What is the 'Performance' API in JS?
Experience

The Performance API provides methods and properties to measure the performance of web applications, including the timing of navigation and resource lo...

Performance Deep Dive

The Performance API provides methods and properties to measure the performance of web applications, including the timing of navigation and resource loading.

Metric: metrics
21
How to measure LCP using JavaScript?
Advanced

You use the PerformanceObserver API to observe 'largest-contentful-paint' entries. It yields the highest value recorded until the user interacts with ...

Performance Deep Dive

You use the PerformanceObserver API to observe 'largest-contentful-paint' entries. It yields the highest value recorded until the user interacts with the page.

SNIPPET
new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    console.log('LCP:', entry.startTime);
  }
}).observe({type: 'largest-contentful-paint', buffered: true});
Metric: metrics
22
What is navigationStart vs fetchStart?
Advanced

navigationStart (deprecated in favor of startTime) is when the user prompts the navigation. fetchStart is when the browser is ready to fetch the docum...

Performance Deep Dive

navigationStart (deprecated in favor of startTime) is when the user prompts the navigation. fetchStart is when the browser is ready to fetch the document using an HTTP request.

Metric: metrics
23
What is the 'Back/forward cache' (bfcache)?
Advanced

bfcache is a browser optimization that allows for instant back and forward navigation. It snapshots the entire page state (including the heap) to avoi...

Performance Deep Dive

bfcache is a browser optimization that allows for instant back and forward navigation. It snapshots the entire page state (including the heap) to avoid re-parsing and re-executing scripts.

Metric: metrics
24
How to track CLS in the field?
Advanced

Use a PerformanceObserver for 'layout-shift' entries. Sum the values of entries that aren't preceded by a user input within 500ms.

Performance Deep Dive

Use a PerformanceObserver for 'layout-shift' entries. Sum the values of entries that aren't preceded by a user input within 500ms.

Metric: metrics
25
What is 'First Paint' vs 'First Contentful Paint'?
Experience

First Paint is when the browser renders *anything* from the page (even a background color). FCP is when the browser renders the first piece of 'conten...

Performance Deep Dive

First Paint is when the browser renders *anything* from the page (even a background color). FCP is when the browser renders the first piece of 'content' (DOM element like text/image).

Metric: metrics
26
What is User Timing API?
Experience

Enables developers to create custom performance markers and measures using performance.mark() and performance.measure() to profile specific app logic.

Performance Deep Dive

Enables developers to create custom performance markers and measures using performance.mark() and performance.measure() to profile specific app logic.

Metric: metrics
27
How to detect long tasks in JS?
Advanced

Use PerformanceObserver to observe 'longtask' entries.

Performance Deep Dive

Use PerformanceObserver to observe 'longtask' entries.

SNIPPET
new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.warn('Long Task detected:', entry.duration);
  }
}).observe({entryTypes: ['longtask']});
Metric: metrics
28
What is 'Hydration' in the context of SSR?
Experience

Hydration is the process of attaching event listeners to static HTML rendered by a server, making it interactive. Slow hydration can lead to a high TB...

Performance Deep Dive

Hydration is the process of attaching event listeners to static HTML rendered by a server, making it interactive. Slow hydration can lead to a high TBT or INP.

Metric: metrics
29
What is 'Server Timing' header?
Advanced

An HTTP response header that communicates backend performance metrics to the browser, which can then be viewed in DevTools or via the Performance API.

Performance Deep Dive

An HTTP response header that communicates backend performance metrics to the browser, which can then be viewed in DevTools or via the Performance API.

Metric: metrics
30
What is a 'Pass' score for LCP?
Beginner

An LCP of 2.5 seconds or less is considered 'Good'. 2.5s to 4s 'Needs Improvement', and over 4s is 'Poor'.

Performance Deep Dive

An LCP of 2.5 seconds or less is considered 'Good'. 2.5s to 4s 'Needs Improvement', and over 4s is 'Poor'.

Metric: metrics
31
What is 'Cumulative' in CLS?
Advanced

It refers to the sum of all individual layout shift scores for every unexpected layout shift that occurs during the entire lifespan of the page, group...

Performance Deep Dive

It refers to the sum of all individual layout shift scores for every unexpected layout shift that occurs during the entire lifespan of the page, grouped into windows.

Metric: metrics
32
How does PageSpeed Insights calculate its score?
Experience

It uses a weighted average of Lighthouse metrics (LCP, TBT, CLS, FCP, Speed Index). The weights change as Google refines what matters most for UX.

Performance Deep Dive

It uses a weighted average of Lighthouse metrics (LCP, TBT, CLS, FCP, Speed Index). The weights change as Google refines what matters most for UX.

Metric: metrics
33
What is the 'DOMContentLoaded' vs 'Load' priority?
Experience

DOMContentLoaded is critical for starting JS-heavy apps. Load is critical for ensuring full visual completion (including images).

Performance Deep Dive

DOMContentLoaded is critical for starting JS-heavy apps. Load is critical for ensuring full visual completion (including images).

Metric: metrics
34
What is 'Speculative Loading'?
Advanced

Techniques like <link rel='prerender'> or <link rel='prefetch'> where the browser loads resources it *thinks* the user will need soon to make future n...

Performance Deep Dive

Techniques like <link rel='prerender'> or <link rel='prefetch'> where the browser loads resources it *thinks* the user will need soon to make future navigations instant.

Metric: metrics
35
What is 'Request Idle Callback'?
Experience

A browser API that allows developers to queue non-essential background tasks to be executed when the main thread is idle, avoiding impact on user inte...

Performance Deep Dive

A browser API that allows developers to queue non-essential background tasks to be executed when the main thread is idle, avoiding impact on user interactions.

Metric: metrics
36
What is 'Main Thread' efficiency?
Experience

Refers to keeping the main thread free from heavy computations or long tasks so the browser can remain responsive to user input and maintain smooth an...

Performance Deep Dive

Refers to keeping the main thread free from heavy computations or long tasks so the browser can remain responsive to user input and maintain smooth animations.

Metric: metrics
37
What is 'Frame Rate' (FPS)?
Beginner

The frequency at which images are displayed on a screen. For smooth animations, web pages should aim for 60 frames per second (16.67ms per frame).

Performance Deep Dive

The frequency at which images are displayed on a screen. For smooth animations, web pages should aim for 60 frames per second (16.67ms per frame).

Metric: metrics
38
What is 'Jank'?
Beginner

Jank is a term used to describe visual stuttering or jerky animations caused by long tasks on the main thread or dropping frames.

Performance Deep Dive

Jank is a term used to describe visual stuttering or jerky animations caused by long tasks on the main thread or dropping frames.

Metric: metrics
39
Difference between Passive and Active event listeners?
Advanced

Passive listeners (e.g., for scroll) tell the browser they won't call preventDefault(), allowing the browser to optimize scrolling without waiting for...

Performance Deep Dive

Passive listeners (e.g., for scroll) tell the browser they won't call preventDefault(), allowing the browser to optimize scrolling without waiting for the JS to execute.

Metric: metrics
40
What is 'Critical Rendering Path'?
Advanced

The sequence of steps the browser goes through to convert HTML, CSS, and JS into pixels on the screen. (DOM -> CSSOM -> Render Tree -> Layout -> Paint...

Performance Deep Dive

The sequence of steps the browser goes through to convert HTML, CSS, and JS into pixels on the screen. (DOM -> CSSOM -> Render Tree -> Layout -> Paint).

Metric: metrics
41
How to optimize images for the web?
Beginner

Use modern formats (WebP/AVIF), implement responsive images (srcset/sizes), use lazy loading, compress images, and serve appropriate dimensions.

Performance Deep Dive

Use modern formats (WebP/AVIF), implement responsive images (srcset/sizes), use lazy loading, compress images, and serve appropriate dimensions.

Metric: loading
42
What is Lazy Loading?
Beginner

A technique that delays the loading of non-critical resources (like images or iframes) until they are needed (e.g., when they enter the viewport).

Performance Deep Dive

A technique that delays the loading of non-critical resources (like images or iframes) until they are needed (e.g., when they enter the viewport).

Metric: loading
43
How to implement native lazy loading for images?
Beginner

Add the loading='lazy' attribute to the <img> tag. Browsers handle the implementation automatically based on scroll position.

Performance Deep Dive

Add the loading='lazy' attribute to the <img> tag. Browsers handle the implementation automatically based on scroll position.

SNIPPET
<img src='hero.jpg' loading='lazy' alt='Description'>
Metric: loading
44
What is the 'srcset' attribute?
Experience

Part of the responsive images spec. It provides a list of image sources and their widths, allowing the browser to choose the most appropriate one base...

Performance Deep Dive

Part of the responsive images spec. It provides a list of image sources and their widths, allowing the browser to choose the most appropriate one based on screen density and size.

Metric: loading
45
Difference between <picture> and <img> with srcset?
Experience

srcset is for serving the *same* image in different sizes. <picture> is for *art direction* (different crops) or serving different *formats* (e.g., AV...

Performance Deep Dive

srcset is for serving the *same* image in different sizes. <picture> is for *art direction* (different crops) or serving different *formats* (e.g., AVIF with WebP fallback).

Metric: loading
46
What is WebP?
Beginner

A modern image format that provides superior lossless and lossy compression for images on the web. It's significantly smaller than JPEG or PNG.

Performance Deep Dive

A modern image format that provides superior lossless and lossy compression for images on the web. It's significantly smaller than JPEG or PNG.

Metric: loading
47
What is AVIF?
Experience

A newer image format that provides even better compression than WebP. It supports HDR and is backed by Netflix, Google, and Apple.

Performance Deep Dive

A newer image format that provides even better compression than WebP. It supports HDR and is backed by Netflix, Google, and Apple.

Metric: loading
48
What is 'Font-display: swap'?
Experience

A CSS property that tells the browser to display fallback text using a system font until the custom web font finishes loading, preventing the 'Flash o...

Performance Deep Dive

A CSS property that tells the browser to display fallback text using a system font until the custom web font finishes loading, preventing the 'Flash of Invisible Text' (FOIT).

Metric: loading
49
What is FOIT vs FOUT?
Experience

FOIT (Flash of Invisible Text) is when content is hidden until the font loads. FOUT (Flash of Unstyled Text) is when content shows in a system font fi...

Performance Deep Dive

FOIT (Flash of Invisible Text) is when content is hidden until the font loads. FOUT (Flash of Unstyled Text) is when content shows in a system font first, then snaps to the custom font.

Metric: loading
50
How to preload critical fonts?
Experience

Use <link rel='preload'> in the HTML <head>. Make sure to include crossorigin for fonts.

Performance Deep Dive

Use <link rel='preload'> in the HTML <head>. Make sure to include crossorigin for fonts.

SNIPPET
<link rel='preload' href='font.woff2' as='font' type='font/woff2' crossorigin>
Metric: loading
51
What is 'Async' script loading?
Beginner

The script is downloaded in parallel with HTML parsing and executed as soon as it's ready, which might interrupt parsing.

Performance Deep Dive

The script is downloaded in parallel with HTML parsing and executed as soon as it's ready, which might interrupt parsing.

Metric: loading
52
What is 'Defer' script loading?
Beginner

The script is downloaded in parallel with HTML parsing but only executed after the document has been fully parsed. This is generally preferred for per...

Performance Deep Dive

The script is downloaded in parallel with HTML parsing but only executed after the document has been fully parsed. This is generally preferred for performance.

Metric: loading
53
Explain 'Preload' vs 'Prefetch'.
Advanced

Preload is for high-priority resources needed for the *current* page. Prefetch is for low-priority resources that might be needed for the *next* navig...

Performance Deep Dive

Preload is for high-priority resources needed for the *current* page. Prefetch is for low-priority resources that might be needed for the *next* navigation.

Metric: loading
54
What is 'Preconnect'?
Experience

Informs the browser that your page intends to establish a connection to another origin, allowing it to perform DNS lookups, TCP handshakes, and TLS ne...

Performance Deep Dive

Informs the browser that your page intends to establish a connection to another origin, allowing it to perform DNS lookups, TCP handshakes, and TLS negotiations early.

Metric: loading
55
What is the 'DNS-prefetch' utility?
Experience

A lighter version of preconnect that only performs the DNS lookup for a specific domain.

Performance Deep Dive

A lighter version of preconnect that only performs the DNS lookup for a specific domain.

Metric: loading
56
How to optimize CSS delivery?
Experience

Minify CSS, inline critical CSS, load non-critical CSS asynchronously, and remove unused styles using tools like PurgeCSS.

Performance Deep Dive

Minify CSS, inline critical CSS, load non-critical CSS asynchronously, and remove unused styles using tools like PurgeCSS.

Metric: loading
57
What is 'Critical CSS'?
Advanced

The CSS required to render the 'above-the-fold' content (what the user sees first). Inlining this prevents the browser from waiting for external CSS f...

Performance Deep Dive

The CSS required to render the 'above-the-fold' content (what the user sees first). Inlining this prevents the browser from waiting for external CSS files before rendering.

Metric: loading
58
How to load non-critical CSS asynchronously?
Advanced

Change the rel attribute on the fly from 'preload' to 'stylesheet' or use the window.onload event.

Performance Deep Dive

Change the rel attribute on the fly from 'preload' to 'stylesheet' or use the window.onload event.

SNIPPET
<link rel='preload' href='style.css' as='style' onload="this.rel='stylesheet'">
Metric: loading
59
What is 'Gzip' vs 'Brotli' compression?
Experience

Gzip is the standard compression algorithm. Brotli is a newer, more efficient algorithm optimized specifically for the web, offering 15-20% better com...

Performance Deep Dive

Gzip is the standard compression algorithm. Brotli is a newer, more efficient algorithm optimized specifically for the web, offering 15-20% better compression than Gzip.

Metric: loading
60
What is 'Module' script loading in modern browsers?
Experience

<script type='module'> is deferred by default and allows for native ES modules. Browsers only load dependencies that are actually imported.

Performance Deep Dive

<script type='module'> is deferred by default and allows for native ES modules. Browsers only load dependencies that are actually imported.

Metric: loading
61
Explain 'Tree Shaking'.
Experience

A dead-code elimination technique used during the build process (by Webpack/Rollup) that removes unused exports from your JavaScript bundles.

Performance Deep Dive

A dead-code elimination technique used during the build process (by Webpack/Rollup) that removes unused exports from your JavaScript bundles.

Metric: loading
62
What is 'Code Splitting'?
Experience

The practice of splitting your code into smaller chunks that can be loaded on demand (e.g., per route or per component) instead of sending one giant J...

Performance Deep Dive

The practice of splitting your code into smaller chunks that can be loaded on demand (e.g., per route or per component) instead of sending one giant JS bundle.

Metric: loading
63
How to implement code splitting in React?
Experience

Use React.lazy and Suspense or dynamic imports().

Performance Deep Dive

Use React.lazy and Suspense or dynamic imports().

SNIPPET
const OtherComponent = React.lazy(() => import('./OtherComponent'));
Metric: loading
64
What is 'Subresource Integrity' (SRI)?
Experience

A security feature that ensures the resources (like JS from a CDN) haven't been tampered with. It doesn't affect speed directly but is a standard prac...

Performance Deep Dive

A security feature that ensures the resources (like JS from a CDN) haven't been tampered with. It doesn't affect speed directly but is a standard practice.

Metric: loading
65
How to optimize SVG performance?
Beginner

Use SVGO to remove metadata, use symbols/sprites for icons, and minify the path data.

Performance Deep Dive

Use SVGO to remove metadata, use symbols/sprites for icons, and minify the path data.

Metric: loading
66
Difference between inlining and externalizing images?
Experience

Inlining (Base64) saves a request but increases HTML size and prevents caching. Externalizing allows caching but adds an HTTP request.

Performance Deep Dive

Inlining (Base64) saves a request but increases HTML size and prevents caching. Externalizing allows caching but adds an HTTP request.

Metric: loading
67
What is 'LCP Image Priority'?
Advanced

The image responsible for LCP should *never* be lazy-loaded. It should often be preloaded to ensure it starts downloading as soon as possible.

Performance Deep Dive

The image responsible for LCP should *never* be lazy-loaded. It should often be preloaded to ensure it starts downloading as soon as possible.

Metric: loading
68
What is 'Fetch Priority' API?
Advanced

A new attribute (fetchpriority='high'/'low') that allows developers to give the browser a hint about a resource's importance relative to others.

Performance Deep Dive

A new attribute (fetchpriority='high'/'low') that allows developers to give the browser a hint about a resource's importance relative to others.

SNIPPET
<img src='hero.jpg' fetchpriority='high' alt='Hero'>
Metric: loading
69
How to optimize Video loading?
Experience

Use the preload='metadata' attribute, use the tracks for captions, and ensure videos are compressed and served in efficient formats like MP4/WebM.

Performance Deep Dive

Use the preload='metadata' attribute, use the tracks for captions, and ensure videos are compressed and served in efficient formats like MP4/WebM.

Metric: loading
70
Explain 'HTTP/2 Push'.
Advanced

Allows a server to send resources to the browser before it's even asked for them. While powerful, it's complex and often replaced by 103 Early Hints.

Performance Deep Dive

Allows a server to send resources to the browser before it's even asked for them. While powerful, it's complex and often replaced by 103 Early Hints.

Metric: loading
71
What are '103 Early Hints'?
Advanced

An HTTP status code that allows a server to send informational links (like preloads) to the browser while the main response is still being generated.

Performance Deep Dive

An HTTP status code that allows a server to send informational links (like preloads) to the browser while the main response is still being generated.

Metric: loading
72
How to optimize third-party scripts (GTM, Ads)?
Experience

Load them asynchronously, use 'Partytown' to run them in a web worker, or use 'preconnect' for their domains.

Performance Deep Dive

Load them asynchronously, use 'Partytown' to run them in a web worker, or use 'preconnect' for their domains.

Metric: loading
73
What is 'JavaScript Execution Cost'?
Experience

The time it takes for the browser to parse, compile, and execute JS. Even if a script is small to download, it might be expensive to run.

Performance Deep Dive

The time it takes for the browser to parse, compile, and execute JS. Even if a script is small to download, it might be expensive to run.

Metric: loading
74
How to move JS execution to Web Workers?
Advanced

By spawning a new Worker thread for heavy non-DOM calculations, keeping the main thread responsive.

Performance Deep Dive

By spawning a new Worker thread for heavy non-DOM calculations, keeping the main thread responsive.

SNIPPET
const worker = new Worker('worker.js');
worker.postMessage(data);
Metric: loading
75
What is 'Bundler Optimization'?
Experience

Configuring tools like Webpack or Vite to minify code, extract CSS into files, and use content hashing for better caching.

Performance Deep Dive

Configuring tools like Webpack or Vite to minify code, extract CSS into files, and use content hashing for better caching.

Metric: loading
76
Explain 'Minification' vs 'Compression'.
Beginner

Minification removes white space/comments/variable names (reduces file size). Compression (Gzip) encodes the file to be smaller over the wire (reduces...

Performance Deep Dive

Minification removes white space/comments/variable names (reduces file size). Compression (Gzip) encodes the file to be smaller over the wire (reduces transfer size).

Metric: loading
77
How to handle large Icon libraries?
Experience

Instead of Loading the whole FontAwesome library, use SVG icons or tree-shakeable icon packages for React/Vue.

Performance Deep Dive

Instead of Loading the whole FontAwesome library, use SVG icons or tree-shakeable icon packages for React/Vue.

Metric: loading
78
What is 'Resource Priority' in Chrome?
Advanced

Chrome assigns a priority (Highest, High, Medium, Low, Lowest) to every resource based on its type and position in the document.

Performance Deep Dive

Chrome assigns a priority (Highest, High, Medium, Low, Lowest) to every resource based on its type and position in the document.

Metric: loading
79
How to audit resource loading?
Beginner

Use the 'Network' tab in Chrome DevTools. Sort by size or time, and look for long waterfalls or blocked requests.

Performance Deep Dive

Use the 'Network' tab in Chrome DevTools. Sort by size or time, and look for long waterfalls or blocked requests.

Metric: loading
80
Explain 'Payload Budgeting'.
Experience

Setting a maximum allowed size for your JS/CSS/Image assets (e.g., 'no more than 200kb of JS') and enforcing it during CI/CD.

Performance Deep Dive

Setting a maximum allowed size for your JS/CSS/Image assets (e.g., 'no more than 200kb of JS') and enforcing it during CI/CD.

Metric: loading
81
What is a CDN (Content Delivery Network)?
Beginner

A CDN is a distributed network of servers that serve content from locations closer to the user, reducing latency and offloading traffic from the origi...

Performance Deep Dive

A CDN is a distributed network of servers that serve content from locations closer to the user, reducing latency and offloading traffic from the origin server.

Metric: network
82
Explain HTTP Cache-Control header.
Beginner

The primary header for controlling caching. Directives like 'max-age', 'no-cache', 'no-store', and 'public/private' determine how and for how long a r...

Performance Deep Dive

The primary header for controlling caching. Directives like 'max-age', 'no-cache', 'no-store', and 'public/private' determine how and for how long a resource is cached.

Metric: network
83
Difference between 'no-cache' and 'no-store'?
Experience

'no-store' prevents the browser and intermediaries from ever storing the response. 'no-cache' allows storing but requires re-validation with the serve...

Performance Deep Dive

'no-store' prevents the browser and intermediaries from ever storing the response. 'no-cache' allows storing but requires re-validation with the server before use.

Metric: network
84
What is 'Etag'?
Experience

A unique identifier for a specific version of a resource. The browser sends it in the 'If-None-Match' header to check if the file has changed since it...

Performance Deep Dive

A unique identifier for a specific version of a resource. The browser sends it in the 'If-None-Match' header to check if the file has changed since it was cached.

Metric: network
85
What is 'Last-Modified' header?
Beginner

An older validation mechanism using timestamps. The browser uses 'If-Modified-Since' to check for updates.

Performance Deep Dive

An older validation mechanism using timestamps. The browser uses 'If-Modified-Since' to check for updates.

Metric: network
86
What is 'stale-while-revalidate' (SWR)?
Advanced

A cache directive that tells the browser to serve the stale version of a resource while fetching an updated version in the background for the next use...

Performance Deep Dive

A cache directive that tells the browser to serve the stale version of a resource while fetching an updated version in the background for the next use.

Metric: network
87
Explain the 'Vary' header.
Advanced

Tells the cache which request headers should be used to determine if a cached response matches (e.g., 'Vary: Accept-Encoding').

Performance Deep Dive

Tells the cache which request headers should be used to determine if a cached response matches (e.g., 'Vary: Accept-Encoding').

Metric: network
88
What is 'Immutable' cache directive?
Advanced

'Cache-Control: immutable' tells the browser that the file contents will never change as long as the URL is the same, preventing unnecessary re-valida...

Performance Deep Dive

'Cache-Control: immutable' tells the browser that the file contents will never change as long as the URL is the same, preventing unnecessary re-validation.

Metric: network
89
What is 'Cache Invalidation'?
Experience

The process of removing a cached resource before its expiry. In front-end dev, this is usually solved by 'Cache Busting' (adding a hash to the filenam...

Performance Deep Dive

The process of removing a cached resource before its expiry. In front-end dev, this is usually solved by 'Cache Busting' (adding a hash to the filename).

Metric: network
90
Explain HTTP/2 and how it helps performance.
Experience

HTTP/2 introduced multiplexing (multiple requests over one TCP connection), header compression (HPACK), and binary framing, reducing the overhead of m...

Performance Deep Dive

HTTP/2 introduced multiplexing (multiple requests over one TCP connection), header compression (HPACK), and binary framing, reducing the overhead of many small requests.

Metric: network
91
What is HTTP/3 (QUIC)?
Advanced

The next version of HTTP that uses UDP instead of TCP. It solves the 'Head-of-Line Blocking' problem in HTTP/2 and significantly improves connection s...

Performance Deep Dive

The next version of HTTP that uses UDP instead of TCP. It solves the 'Head-of-Line Blocking' problem in HTTP/2 and significantly improves connection setup time.

Metric: network
92
Difference between TCP and UDP?
Advanced

TCP is connection-oriented and ensures packet delivery (reliable but slower). UDP is connectionless and better for speed (potentially unreliable, used...

Performance Deep Dive

TCP is connection-oriented and ensures packet delivery (reliable but slower). UDP is connectionless and better for speed (potentially unreliable, used in HTTP/3).

Metric: network
93
What is a Service Worker?
Experience

A programmable network proxy that runs in a separate thread. It allows for offline support, push notifications, and advanced caching strategies.

Performance Deep Dive

A programmable network proxy that runs in a separate thread. It allows for offline support, push notifications, and advanced caching strategies.

Metric: network
94
Explain 'Cache Aside' vs 'Cache First' strategy.
Advanced

'Cache First' looks in cache and falls back to network. 'Network First' looks at network and falls back to cache (good for dynamic data).

Performance Deep Dive

'Cache First' looks in cache and falls back to network. 'Network First' looks at network and falls back to cache (good for dynamic data).

Metric: network
95
What is the 'Cache Storage' API?
Experience

A system for storing and retrieving network requests and responses, typically used within a Service Worker for PWA functionality.

Performance Deep Dive

A system for storing and retrieving network requests and responses, typically used within a Service Worker for PWA functionality.

Metric: network
96
What is 'Latency' vs 'Bandwidth'?
Beginner

Latency is the delay (ping) for a single packet to travel. Bandwidth is the total data capacity (pipe size). For small files, latency matters more; fo...

Performance Deep Dive

Latency is the delay (ping) for a single packet to travel. Bandwidth is the total data capacity (pipe size). For small files, latency matters more; for large ones, bandwidth.

Metric: network
97
What is 'Head-of-Line Blocking'?
Advanced

A performance issue where a single delayed or lost packet blocks the entire queue of requests/packets behind it.

Performance Deep Dive

A performance issue where a single delayed or lost packet blocks the entire queue of requests/packets behind it.

Metric: network
98
How to optimize DNS resolution?
Experience

Use a fast DNS provider (Cloudflare), minimize the number of unique domains your site uses, and use 'dns-prefetch'.

Performance Deep Dive

Use a fast DNS provider (Cloudflare), minimize the number of unique domains your site uses, and use 'dns-prefetch'.

Metric: network
99
What is 'Keep-Alive'?
Beginner

An HTTP/1.1 mechanism that allows reusing the same TCP connection for multiple requests instead of opening a new one for each.

Performance Deep Dive

An HTTP/1.1 mechanism that allows reusing the same TCP connection for multiple requests instead of opening a new one for each.

Metric: network
100
What is 'Brotli' vs 'Gzip' again?
Beginner

Brotli (developed by Google) generally offers better compression ratios for text assets compared to Gzip.

Performance Deep Dive

Brotli (developed by Google) generally offers better compression ratios for text assets compared to Gzip.

Metric: network
101
Explain 'Edge Computing' in CDNs.
Advanced

Running server-side logic (e.g., A/B testing, header modification, security checks) on the CDN nodes closer to the user instead of the origin.

Performance Deep Dive

Running server-side logic (e.g., A/B testing, header modification, security checks) on the CDN nodes closer to the user instead of the origin.

Metric: network
102
What is 'TCP Slow Start'?
Advanced

An algorithm that increases the amount of data sent over a connection gradually. This is why few large files are often faster than many small files.

Performance Deep Dive

An algorithm that increases the amount of data sent over a connection gradually. This is why few large files are often faster than many small files.

Metric: network
103
What is 'TLS Handshake' cost?
Advanced

The multi-step process for establishing an encrypted connection. It adds RTTs (Round Trip Times), which is why 'Preconnect' is helpful.

Performance Deep Dive

The multi-step process for establishing an encrypted connection. It adds RTTs (Round Trip Times), which is why 'Preconnect' is helpful.

Metric: network
104
Explain 'Pre-flighting' (CORS).
Experience

An OPTIONS request sent by the browser to verify permissions for actual cross-origin requests. It adds latency to API calls.

Performance Deep Dive

An OPTIONS request sent by the browser to verify permissions for actual cross-origin requests. It adds latency to API calls.

Metric: network
105
How to avoid CORS preflight?
Advanced

Use 'simple requests' (GET/POST with specific headers) or ensure the API and Front-end are on the same origin (e.g., using a proxy).

Performance Deep Dive

Use 'simple requests' (GET/POST with specific headers) or ensure the API and Front-end are on the same origin (e.g., using a proxy).

Metric: network
106
What is 'Data URI' downside?
Experience

Base64 encoding increases file size by ~33% and isn't cached separately from the HTML/CSS it's in.

Performance Deep Dive

Base64 encoding increases file size by ~33% and isn't cached separately from the HTML/CSS it's in.

Metric: network
107
What is 'WebSocket' vs 'SSE' (Server-Sent Events)?
Experience

WebSockets are bi-directional. SSE is one-way from server to client. For real-time data, both are faster than polling.

Performance Deep Dive

WebSockets are bi-directional. SSE is one-way from server to client. For real-time data, both are faster than polling.

Metric: network
108
Explain 'Fetch' vs 'XHR' performance.
Beginner

Fetch is modern, promise-based, and better integrated with Service Workers. Performance is similar, but Fetch is easier to optimize.

Performance Deep Dive

Fetch is modern, promise-based, and better integrated with Service Workers. Performance is similar, but Fetch is easier to optimize.

Metric: network
109
What is 'Beacon API'?
Experience

Used to send small amounts of data (like analytics) to a server without delaying the navigation or page unload.

Performance Deep Dive

Used to send small amounts of data (like analytics) to a server without delaying the navigation or page unload.

SNIPPET
navigator.sendBeacon('/log', analyticsData);
Metric: network
110
How to reduce 'Redirect' latency?
Beginner

Every redirect adds another round-trip and DNS lookup. Ensure internally links point to final URLs (including trailing slashes).

Performance Deep Dive

Every redirect adds another round-trip and DNS lookup. Ensure internally links point to final URLs (including trailing slashes).

Metric: network
111
What is 'Connection: Close' header?
Advanced

Directs the browser to close the TCP connection immediately after the request, preventing reuse. Usually should be avoided for performance.

Performance Deep Dive

Directs the browser to close the TCP connection immediately after the request, preventing reuse. Usually should be avoided for performance.

Metric: network
112
Explain 'Priority Hints' for fetch.
Advanced

Using the 'importance' field in the fetch init object to hint to the browser how to prioritize the network request.

Performance Deep Dive

Using the 'importance' field in the fetch init object to hint to the browser how to prioritize the network request.

SNIPPET
fetch('/api/data', { priority: 'high' });
Metric: network
113
What is 'Local Storage' vs 'IndexedDB'?
Experience

Local Storage is synchronous and limited to ~5MB. IndexedDB is asynchronous, structured, and can store much larger amounts of data.

Performance Deep Dive

Local Storage is synchronous and limited to ~5MB. IndexedDB is asynchronous, structured, and can store much larger amounts of data.

Metric: network
114
How does 'Network Throttling' help?
Beginner

It simulates slower conditions in DevTools, allowing developers to see how the site performs for users on 3G or high-latency connections.

Performance Deep Dive

It simulates slower conditions in DevTools, allowing developers to see how the site performs for users on 3G or high-latency connections.

Metric: network
115
Explain 'Cold Cache' vs 'Warm Cache'.
Beginner

Cold cache: First visit, everything must be downloaded. Warm cache: Returning visit, many assets are already stored locally.

Performance Deep Dive

Cold cache: First visit, everything must be downloaded. Warm cache: Returning visit, many assets are already stored locally.

Metric: network
116
What is 'Web Bundler' Hashing?
Experience

Adding a hash (e.g., main.a1b2c3.js) to filenames. This allows for long 'max-age' caching while ensuring updates aren't blocked by old caches.

Performance Deep Dive

Adding a hash (e.g., main.a1b2c3.js) to filenames. This allows for long 'max-age' caching while ensuring updates aren't blocked by old caches.

Metric: network
117
What is 'Content-Encoding' header?
Beginner

Specifies the compression algorithm used (gzip, br, deflate) so the browser knows how to decompress the asset.

Performance Deep Dive

Specifies the compression algorithm used (gzip, br, deflate) so the browser knows how to decompress the asset.

Metric: network
118
Explain 'Early Data' (TLS 1.3).
Advanced

Allows the browser to send data in the first packet of a reconnection, reducing handshake latency to zero in some cases.

Performance Deep Dive

Allows the browser to send data in the first packet of a reconnection, reducing handshake latency to zero in some cases.

Metric: network
119
What is 'OCSP Stapling'?
Advanced

A method for securely verifying a TLS certificate that avoids the browser having to talk to a 3rd party server, reducing connection time.

Performance Deep Dive

A method for securely verifying a TLS certificate that avoids the browser having to talk to a 3rd party server, reducing connection time.

Metric: network
120
How to check 'Time to Connect' in DevTools?
Beginner

In the Network tab, click a request and go to 'Timing'. Look at 'Initial Connection' and 'SSL'.

Performance Deep Dive

In the Network tab, click a request and go to 'Timing'. Look at 'Initial Connection' and 'SSL'.

Metric: network
121
What is the 'DOM' (Document Object Model)?
Beginner

The DOM is a tree-like representation of the HTML document. Every tag is an object. Manipulating the DOM can be expensive for performance.

Performance Deep Dive

The DOM is a tree-like representation of the HTML document. Every tag is an object. Manipulating the DOM can be expensive for performance.

Metric: rendering
122
What is the 'CSSOM'?
Experience

The CSS Object Model is a map of CSS rules applied to the DOM. The browser combines DOM and CSSOM to create the 'Render Tree'.

Performance Deep Dive

The CSS Object Model is a map of CSS rules applied to the DOM. The browser combines DOM and CSSOM to create the 'Render Tree'.

Metric: rendering
123
Explain 'Reflow' (Layout).
Experience

Reflow is the process of calculating the position and size of all elements in the document. It is very expensive and is triggered by changes to DOM st...

Performance Deep Dive

Reflow is the process of calculating the position and size of all elements in the document. It is very expensive and is triggered by changes to DOM structure or styles (e.g., width, font-size).

Metric: rendering
124
Explain 'Repaint'.
Experience

Repaint happens when changes are made to an element's visibility that don't affect its layout (e.g., color, visibility, background-image).

Performance Deep Dive

Repaint happens when changes are made to an element's visibility that don't affect its layout (e.g., color, visibility, background-image).

Metric: rendering
125
How to avoid Reflow and Repaint?
Advanced

Use 'transform' and 'opacity' for animations (handled by GPU), use 'requestAnimationFrame', minimize DOM access, and use 'DocumentFragment' for batchi...

Performance Deep Dive

Use 'transform' and 'opacity' for animations (handled by GPU), use 'requestAnimationFrame', minimize DOM access, and use 'DocumentFragment' for batching.

Metric: rendering
126
What is 'Layout Thrashing'?
Advanced

Happens when you alternate between reading and writing to the DOM in a loop (e.g., read element.offsetWidth then set element.style.width). This forces...

Performance Deep Dive

Happens when you alternate between reading and writing to the DOM in a loop (e.g., read element.offsetWidth then set element.style.width). This forces the browser to recalculate layout repeatedly.

Metric: rendering
127
Explain 'RequestAnimationFrame' (rAF).
Experience

A browser API that tells the browser you want to perform an animation and requests it to call a function before the next repaint. It synchronizes with...

Performance Deep Dive

A browser API that tells the browser you want to perform an animation and requests it to call a function before the next repaint. It synchronizes with the display refresh rate.

Metric: rendering
128
What is 'Will-change' CSS property?
Advanced

Hints to the browser that an element will change, allowing it to optimize ahead of time (e.g., by creating a new compositor layer).

Performance Deep Dive

Hints to the browser that an element will change, allowing it to optimize ahead of time (e.g., by creating a new compositor layer).

Metric: rendering
129
What is a 'Compositor Layer'?
Advanced

A separate 'layer' of the page that is sent to the GPU. Changes here (like transform) don't trigger reflow/repaint on the main page.

Performance Deep Dive

A separate 'layer' of the page that is sent to the GPU. Changes here (like transform) don't trigger reflow/repaint on the main page.

Metric: rendering
130
Why is 'Transform' better than 'Top/Left' for animation?
Experience

Top/Left triggers Reflow. Transform is handled during the 'Compositing' phase on the GPU, which is much faster and doesn't block the main thread.

Performance Deep Dive

Top/Left triggers Reflow. Transform is handled during the 'Compositing' phase on the GPU, which is much faster and doesn't block the main thread.

Metric: rendering
131
How to reduce DOM size?
Beginner

Avoid deep nesting, use pagination or lazy loading for long lists, and remove unnecessary wrapper divs.

Performance Deep Dive

Avoid deep nesting, use pagination or lazy loading for long lists, and remove unnecessary wrapper divs.

Metric: rendering
132
What is 'Virtual DOM'?
Beginner

A programming concept (used by React) where an ideal 'virtual' representation of a UI is kept in memory and synced with the 'real' DOM via 'reconcilia...

Performance Deep Dive

A programming concept (used by React) where an ideal 'virtual' representation of a UI is kept in memory and synced with the 'real' DOM via 'reconciliation'.

Metric: rendering
133
Explain 'Shadow DOM'.
Experience

A web standard for encapsulating DOM trees. It allows for scoped styles and private DOM structures, which can help prevent large global CSSOM recalcul...

Performance Deep Dive

A web standard for encapsulating DOM trees. It allows for scoped styles and private DOM structures, which can help prevent large global CSSOM recalculations.

Metric: rendering
134
What is 'Content-visibility' CSS property?
Advanced

Introduced in Chromium, it allows the browser to skip the rendering work for elements that are currently off-screen. 'content-visibility: auto' is a h...

Performance Deep Dive

Introduced in Chromium, it allows the browser to skip the rendering work for elements that are currently off-screen. 'content-visibility: auto' is a huge performance win for long pages.

Metric: rendering
135
What is 'Contain-intrinsic-size'?
Advanced

Used with 'content-visibility' to provide a placeholder size for elements before they are rendered, preventing CLS (layout shifts).

Performance Deep Dive

Used with 'content-visibility' to provide a placeholder size for elements before they are rendered, preventing CLS (layout shifts).

Metric: rendering
136
What is 'Contain' CSS property?
Advanced

Allows developers to tell the browser that an element and its contents are independent of the rest of the page, allowing for aggressive rendering opti...

Performance Deep Dive

Allows developers to tell the browser that an element and its contents are independent of the rest of the page, allowing for aggressive rendering optimizations.

Metric: rendering
137
How to handle large lists of data?
Experience

Use 'Windowing' or 'Virtual Scrolling' (e.g., react-window) to only render the items currently visible in the viewport.

Performance Deep Dive

Use 'Windowing' or 'Virtual Scrolling' (e.g., react-window) to only render the items currently visible in the viewport.

Metric: rendering
138
Explain 'InnerHtml' vs 'CreateElement'.
Beginner

InnerHtml is easier but can be slower (parsing string) and is a security risk (XSS). CreateElement is faster for small updates and more secure.

Performance Deep Dive

InnerHtml is easier but can be slower (parsing string) and is a security risk (XSS). CreateElement is faster for small updates and more secure.

Metric: rendering
139
What is 'BFC' (Block Formatting Context)?
Advanced

A part of visual CSS rendering where box layouts occur. Creating a new BFC (e.g., via overflow: hidden or display: flow-root) can isolate layout shift...

Performance Deep Dive

A part of visual CSS rendering where box layouts occur. Creating a new BFC (e.g., via overflow: hidden or display: flow-root) can isolate layout shifts.

Metric: rendering
140
What is 'FOUC' (Flash of Unstyled Content)?
Beginner

When the browser renders HTML before the CSS has loaded. Correcting this by putting <link> in the <head> is a fundamental performance/UX practice.

Performance Deep Dive

When the browser renders HTML before the CSS has loaded. Correcting this by putting <link> in the <head> is a fundamental performance/UX practice.

Metric: rendering
141
What is 'GPU Acceleration'?
Experience

Offloading rendering tasks (like compositing and painting) from the CPU to the Graphics Processing Unit to achieve smoother visuals.

Performance Deep Dive

Offloading rendering tasks (like compositing and painting) from the CPU to the Graphics Processing Unit to achieve smoother visuals.

Metric: rendering
142
Explain 'Image Decoding'.
Advanced

The process of converting compressed image data into pixels. This can block the main thread. 'decoding: async' on <img> tags can help.

Performance Deep Dive

The process of converting compressed image data into pixels. This can block the main thread. 'decoding: async' on <img> tags can help.

Metric: rendering
143
What is 'Paint Holding'?
Advanced

A browser optimization that delays the clearing of the old page's pixels during navigation until the new page has enough content to show, avoiding whi...

Performance Deep Dive

A browser optimization that delays the clearing of the old page's pixels during navigation until the new page has enough content to show, avoiding white flashes.

Metric: rendering
144
How to use 'Aspect-Ratio' in CSS for performance?
Beginner

Setting aspect-ratio prevents layout shifts (CLS) by reserving space for images/videos before they load.

Performance Deep Dive

Setting aspect-ratio prevents layout shifts (CLS) by reserving space for images/videos before they load.

Metric: rendering
145
What is 'Recalculate Styles'?
Experience

The phase where the browser reapplies CSS rules to the DOM tree. Large CSS files or complex selectors make this slower.

Performance Deep Dive

The phase where the browser reapplies CSS rules to the DOM tree. Large CSS files or complex selectors make this slower.

Metric: rendering
146
How to optimize CSS selectors?
Advanced

Keep them flat and simple. Descendant selectors (e.g., '.nav ul li a') are slower than simple class selectors (e.g., '.nav-link').

Performance Deep Dive

Keep them flat and simple. Descendant selectors (e.g., '.nav ul li a') are slower than simple class selectors (e.g., '.nav-link').

Metric: rendering
147
Explain 'Forced Synchronous Layout'.
Advanced

When you read a layout property in JS, the browser is forced to run layout *immediately* to give you the correct answer. Avoiding this is key to smoot...

Performance Deep Dive

When you read a layout property in JS, the browser is forced to run layout *immediately* to give you the correct answer. Avoiding this is key to smooth performance.

Metric: rendering
148
What is 'Preloading Images' in JS?
Beginner

Creating an Image object and setting its src in the background so it's in the browser cache when needed.

Performance Deep Dive

Creating an Image object and setting its src in the background so it's in the browser cache when needed.

SNIPPET
const img = new Image();
img.src = 'large.jpg';
Metric: rendering
149
What is 'DocumentFragment'?
Experience

A lightweight version of a Document. You append elements to it first and then append the fragment to the real DOM, triggering only one reflow.

Performance Deep Dive

A lightweight version of a Document. You append elements to it first and then append the fragment to the real DOM, triggering only one reflow.

Metric: rendering
150
How to measure FPS in Chrome?
Beginner

In DevTools, open the 'Command Menu' (Ctrl+Shift+P) and type 'Show Frames Per Second (FPS) meter'.

Performance Deep Dive

In DevTools, open the 'Command Menu' (Ctrl+Shift+P) and type 'Show Frames Per Second (FPS) meter'.

Metric: rendering
151
What is Google Lighthouse?
Beginner

An automated tool for improving the quality of web pages. It provides audits for performance, accessibility, SEO, and more.

Performance Deep Dive

An automated tool for improving the quality of web pages. It provides audits for performance, accessibility, SEO, and more.

Metric: tools
152
What is PageSpeed Insights (PSI)?
Beginner

A free tool by Google that analyzes the content of a web page, Then generates suggestions to make that page faster. It shows both Lab and Field data.

Performance Deep Dive

A free tool by Google that analyzes the content of a web page, Then generates suggestions to make that page faster. It shows both Lab and Field data.

Metric: tools
153
Explain the 'Performance' Tab in DevTools.
Experience

The most powerful tool for performance profiling. It allows recording page load or runtime and viewing a flame graph of the main thread.

Performance Deep Dive

The most powerful tool for performance profiling. It allows recording page load or runtime and viewing a flame graph of the main thread.

Metric: tools
154
What is WebPageTest?
Experience

A tool that allows you to run performance tests from various locations around the world using real browsers and at real consumer connection speeds.

Performance Deep Dive

A tool that allows you to run performance tests from various locations around the world using real browsers and at real consumer connection speeds.

Metric: tools
155
What are 'Chrome DevTools Protocol' (CDP)?
Advanced

A set of APIs for interacting with the DevTools. Used by automation tools like Puppeteer and Playwright to gather performance metrics.

Performance Deep Dive

A set of APIs for interacting with the DevTools. Used by automation tools like Puppeteer and Playwright to gather performance metrics.

Metric: tools
156
What is 'WPO' (Web Performance Optimization)?
Beginner

The field of knowledge about making websites as fast as possible.

Performance Deep Dive

The field of knowledge about making websites as fast as possible.

Metric: tools
157
Explain 'Synthetic' vs 'Real User' Monitoring.
Experience

Synthetic monitoring (Lighthouse) uses a robot. RUM (Field Data) uses real telemetry from your actual users.

Performance Deep Dive

Synthetic monitoring (Lighthouse) uses a robot. RUM (Field Data) uses real telemetry from your actual users.

Metric: tools
158
What is 'Waterfall' chart?
Beginner

A visualization of the network activity on a page. It shows when each resource started loading, how long it took, and its priority.

Performance Deep Dive

A visualization of the network activity on a page. It shows when each resource started loading, how long it took, and its priority.

Metric: tools
159
How to find 'Unused JS' in DevTools?
Experience

Use the 'Coverage' tab. It shows exactly which lines of code were executed during the session and which were not.

Performance Deep Dive

Use the 'Coverage' tab. It shows exactly which lines of code were executed during the session and which were not.

Metric: tools
160
What is 'Bundlesize' tool?
Experience

A tool used in CI to check that your JS bundle size doesn't exceed a predefined threshold.

Performance Deep Dive

A tool used in CI to check that your JS bundle size doesn't exceed a predefined threshold.

Metric: tools
161
Difference between MOBILE and DESKTOP Lighthouse scores?
Experience

Mobile tests are run with a throttled processor and slower network (simulating an average device). Desktop tests are run with much faster settings.

Performance Deep Dive

Mobile tests are run with a throttled processor and slower network (simulating an average device). Desktop tests are run with much faster settings.

Metric: tools
162
What is 'Cumulative Layout Shift' debug overlay?
Beginner

In the 'Rendering' tab of DevTools, check 'Layout Shift Regions'. It will highlight elements as they move.

Performance Deep Dive

In the 'Rendering' tab of DevTools, check 'Layout Shift Regions'. It will highlight elements as they move.

Metric: tools
163
Explain 'Memory' Tab in DevTools.
Advanced

Used to find memory leaks and profile memory usage over time using Heap Snapshots.

Performance Deep Dive

Used to find memory leaks and profile memory usage over time using Heap Snapshots.

Metric: tools
164
What is 'Application' Tab useful for?
Beginner

Used to inspect and clear storage (Local, Session, Cookies, IndexedDB) and manage Service Workers.

Performance Deep Dive

Used to inspect and clear storage (Local, Session, Cookies, IndexedDB) and manage Service Workers.

Metric: tools
165
How to simulate 'Offline' profile?
Beginner

In the Network tab, use the 'Throttling' dropdown and select 'Offline'.

Performance Deep Dive

In the Network tab, use the 'Throttling' dropdown and select 'Offline'.

Metric: tools
166
What is 'Flame Graph'?
Advanced

A graphical representation of the call stack over time. Higher stacks mean deeper call nesting; wider bars mean the function took longer.

Performance Deep Dive

A graphical representation of the call stack over time. Higher stacks mean deeper call nesting; wider bars mean the function took longer.

Metric: tools
167
How to use 'Search' in DevTools for code?
Beginner

Ctrl+Shift+F allows you to search through all loaded source files for specific classes or functions.

Performance Deep Dive

Ctrl+Shift+F allows you to search through all loaded source files for specific classes or functions.

Metric: tools
168
What is 'Audit' in PageSpeed Insights?
Beginner

A specific check performed (e.g., 'Ensure text remains visible during webfont load') that yields a Pass/Fail or actionable advice.

Performance Deep Dive

A specific check performed (e.g., 'Ensure text remains visible during webfont load') that yields a Pass/Fail or actionable advice.

Metric: tools
169
What is 'Request Blocking' feature?
Experience

Allows you to manually block specific requests (like tracking scripts) to see how the site performs without them.

Performance Deep Dive

Allows you to manually block specific requests (like tracking scripts) to see how the site performs without them.

Metric: tools
170
Explain 'Timeline' view in Performance tab.
Experience

Shows a high-level overview of network activity, main-thread activity, and screenshots of the visual load.

Performance Deep Dive

Shows a high-level overview of network activity, main-thread activity, and screenshots of the visual load.

Metric: tools
171
What is 'Chrome Tracing'?
Advanced

A low-level profiling tool built into Chrome (chrome://tracing) that provides even more detail than the DevTools Performance tab.

Performance Deep Dive

A low-level profiling tool built into Chrome (chrome://tracing) that provides even more detail than the DevTools Performance tab.

Metric: tools
172
Difference between 'PageSpeed Insights' and 'Lighthouse' extension?
Experience

PSI includes real user 'Field Data'. The extension only runs a 'Lab' test from your specific machine and network.

Performance Deep Dive

PSI includes real user 'Field Data'. The extension only runs a 'Lab' test from your specific machine and network.

Metric: tools
173
What is 'Yellow' vs 'Red' tasks in Performance tab?
Beginner

Yellow tasks are usually JavaScript. Red bars on top indicate 'Long Tasks' (>50ms) that are candidates for optimization.

Performance Deep Dive

Yellow tasks are usually JavaScript. Red bars on top indicate 'Long Tasks' (>50ms) that are candidates for optimization.

Metric: tools
174
How to use 'Layer' panel in DevTools?
Advanced

Visualizes the compositing layers of the page in 3D, helping identify why certain elements are being promoted to the GPU.

Performance Deep Dive

Visualizes the compositing layers of the page in 3D, helping identify why certain elements are being promoted to the GPU.

Metric: tools
175
What is 'Puppeteer' for performance?
Advanced

A Node library for controlling headless Chrome. Used to automate performance audits and capture metrics in a pipeline.

Performance Deep Dive

A Node library for controlling headless Chrome. Used to automate performance audits and capture metrics in a pipeline.

Metric: tools
176
How to check 'Third-Party' impact in Lighthouse?
Experience

Look at the 'Reduce the impact of third-party code' audit, which breaks down execution time by external providers.

Performance Deep Dive

Look at the 'Reduce the impact of third-party code' audit, which breaks down execution time by external providers.

Metric: tools
177
What is 'Web Vitals' extension?
Beginner

A Chrome extension that shows the Core Web Vitals HUD (Heads-Up Display) on every site you visit.

Performance Deep Dive

A Chrome extension that shows the Core Web Vitals HUD (Heads-Up Display) on every site you visit.

Metric: tools
178
Explain 'Paint Profiler' in performance recordings.
Advanced

Allows you to step through the drawing commands of a specific frame to see exactly how the browser painted an element.

Performance Deep Dive

Allows you to step through the drawing commands of a specific frame to see exactly how the browser painted an element.

Metric: tools
179
What is 'Resource Summary' audit?
Beginner

Shows a breakdown of the number of requests and total size by resource type (Document, Script, Style, Image).

Performance Deep Dive

Shows a breakdown of the number of requests and total size by resource type (Document, Script, Style, Image).

Metric: tools
180
How to audit for 'Accessibility' performance?
Experience

Lighthouse 'Accessibility' category checks for ARIA, contrast, and proper tagging which improves navigability speed for screen readers.

Performance Deep Dive

Lighthouse 'Accessibility' category checks for ARIA, contrast, and proper tagging which improves navigability speed for screen readers.

Metric: tools
181
What is 'Sentry' or 'LogRocket' relative to perf?
Experience

These are RUM/Error tracking tools that also record performance metrics and session replays to find issues in production.

Performance Deep Dive

These are RUM/Error tracking tools that also record performance metrics and session replays to find issues in production.

Metric: tools
182
How to find the 'Largest Contentful Paint' element?
Beginner

In the Performance tab recording, hover over the 'LCP' marker in the Timings track. It will highlight the DOM element.

Performance Deep Dive

In the Performance tab recording, hover over the 'LCP' marker in the Timings track. It will highlight the DOM element.

Metric: tools
183
What is 'Local Overrides' for testing?
Experience

Allows you to modify CSS/JS directly in the browser and persist them, letting you test optimizations without redeploying.

Performance Deep Dive

Allows you to modify CSS/JS directly in the browser and persist them, letting you test optimizations without redeploying.

Metric: tools
184
How to use 'Protocol Monitor'?
Advanced

A DevTools experiment that shows the raw communication between the front-end and the browser core.

Performance Deep Dive

A DevTools experiment that shows the raw communication between the front-end and the browser core.

Metric: tools
185
What is 'Web Core Vitals' in Search Console?
Beginner

A report in Google Search Console that tells site owners which pages pass or fail the 'Good' threshold based on actual user data.

Performance Deep Dive

A report in Google Search Console that tells site owners which pages pass or fail the 'Good' threshold based on actual user data.

Metric: tools
186
Explain 'User Flow' audits in Lighthouse.
Experience

Allows auditing specific interactions (like completing a checkout) rather than just a cold page load.

Performance Deep Dive

Allows auditing specific interactions (like completing a checkout) rather than just a cold page load.

Metric: tools
187
What is 'GSC' (Google Search Console)?
Beginner

A tool to monitor and troubleshoot your site's presence in Google Search results, including page speed metrics.

Performance Deep Dive

A tool to monitor and troubleshoot your site's presence in Google Search results, including page speed metrics.

Metric: tools
188
How to identify 'CLS' culprits in a trace?
Advanced

Look at the 'Experience' track in the Performance tab. It will list 'Layout Shift' occurrences and their scores.

Performance Deep Dive

Look at the 'Experience' track in the Performance tab. It will list 'Layout Shift' occurrences and their scores.

Metric: tools
189
What is 'Treemap' in Lighthouse?
Experience

A visualization of your JS bundles, showing exactly which npm packages are taking up the most space.

Performance Deep Dive

A visualization of your JS bundles, showing exactly which npm packages are taking up the most space.

Metric: tools
190
What is the ultimate goal of Web Performance Tools?
Beginner

To bridge the gap between developer perception and real user experience, providing actionable metrics to improve speed and conversion.

Performance Deep Dive

To bridge the gap between developer perception and real user experience, providing actionable metrics to improve speed and conversion.

Metric: tools

Speed Matters

Join 20k+ performance engineers and get Lighthouse-friendly tips every week.