Question 1

What are Core Web Vitals?

Accepted Answer

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).

Question 2

Explain Largest Contentful Paint (LCP).

Accepted Answer

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.

Question 3

Explain Cumulative Layout Shift (CLS).

Accepted Answer

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.

Question 4

What is First Input Delay (FID)?

Accepted Answer

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.

Question 5

What is Interaction to Next Paint (INP)?

Accepted Answer

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.

Question 6

What is First Contentful Paint (FCP)?

Accepted Answer

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),

Question 7

What is Time to First Byte (TTFB)?

Accepted Answer

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.

Question 8

Difference between Lab Data and Field Data?

Accepted Answer

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).

Question 9

What is Total Blocking Time (TBT)?

Accepted Answer

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.

Question 10

Explain Time to Interactive (TTI).

Accepted Answer

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.

Question 11

What counts as a 'Long Task' in performance?

Accepted Answer

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.

Question 12

How is CLS calculated?

Accepted Answer

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.

Question 13

What is the Speed Index?

Accepted Answer

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.

Question 14

What is Perceived Performance?

Accepted Answer

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.

Question 15

What is the Rail Model?

Accepted Answer

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.

Question 16

What is 'DomContentLoaded' event?

Accepted Answer

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.

Question 17

What is the 'Load' event?

Accepted Answer

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

Question 18

How does 'Document.readyState' relate to performance?

Accepted Answer

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

Question 19

What is CrUX (Chrome User Experience Report)?

Accepted Answer

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.

Question 20

What is the 'Performance' API in JS?

Accepted Answer

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

Question 21

How to measure LCP using JavaScript?

Accepted Answer

You use the PerformanceObserver API to observe 'largest-contentful-paint' entries. It yields the highest value recorded until the user interacts with the page.
Code Example:
new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    console.log('LCP:', entry.startTime);
  }
}).observe({type: 'largest-contentful-paint', buffered: true});

Question 22

What is navigationStart vs fetchStart?

Accepted Answer

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.

Question 23

What is the 'Back/forward cache' (bfcache)?

Accepted Answer

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.

Question 24

How to track CLS in the field?

Accepted Answer

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

Question 25

What is 'First Paint' vs 'First Contentful Paint'?

Accepted Answer

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).

Question 26

What is User Timing API?

Accepted Answer

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

Question 27

How to detect long tasks in JS?

Accepted Answer

Use PerformanceObserver to observe 'longtask' entries.
Code Example:
new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.warn('Long Task detected:', entry.duration);
  }
}).observe({entryTypes: ['longtask']});

Question 28

What is 'Hydration' in the context of SSR?

Accepted Answer

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.

Question 29

What is 'Server Timing' header?

Accepted Answer

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

Question 30

What is a 'Pass' score for LCP?

Accepted Answer

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

Web Performance & Core Web Vitals

Difficulty Filters

Tools & Options

What are Core Web Vitals?

Explain Largest Contentful Paint (LCP).

Explain Cumulative Layout Shift (CLS).

What is First Input Delay (FID)?

What is Interaction to Next Paint (INP)?

What is First Contentful Paint (FCP)?

What is Time to First Byte (TTFB)?

Difference between Lab Data and Field Data?

What is Total Blocking Time (TBT)?

Explain Time to Interactive (TTI).

What counts as a 'Long Task' in performance?

How is CLS calculated?

What is the Speed Index?

What is Perceived Performance?

What is the Rail Model?

What is 'DomContentLoaded' event?

What is the 'Load' event?

How does 'Document.readyState' relate to performance?

What is CrUX (Chrome User Experience Report)?

What is the 'Performance' API in JS?

How to measure LCP using JavaScript?

What is navigationStart vs fetchStart?

What is the 'Back/forward cache' (bfcache)?

How to track CLS in the field?

What is 'First Paint' vs 'First Contentful Paint'?

What is User Timing API?

How to detect long tasks in JS?

What is 'Hydration' in the context of SSR?

What is 'Server Timing' header?

What is a 'Pass' score for LCP?

What is 'Cumulative' in CLS?

How does PageSpeed Insights calculate its score?

What is the 'DOMContentLoaded' vs 'Load' priority?

What is 'Speculative Loading'?

What is 'Request Idle Callback'?

What is 'Main Thread' efficiency?

What is 'Frame Rate' (FPS)?

What is 'Jank'?

Difference between Passive and Active event listeners?

What is 'Critical Rendering Path'?

How to optimize images for the web?

What is Lazy Loading?

How to implement native lazy loading for images?

What is the 'srcset' attribute?

Difference between <picture> and <img> with srcset?

What is WebP?

What is AVIF?

What is 'Font-display: swap'?

What is FOIT vs FOUT?

How to preload critical fonts?

What is 'Async' script loading?

What is 'Defer' script loading?

Explain 'Preload' vs 'Prefetch'.

What is 'Preconnect'?

What is the 'DNS-prefetch' utility?

How to optimize CSS delivery?

What is 'Critical CSS'?

How to load non-critical CSS asynchronously?

What is 'Gzip' vs 'Brotli' compression?

What is 'Module' script loading in modern browsers?

Explain 'Tree Shaking'.

What is 'Code Splitting'?

How to implement code splitting in React?

What is 'Subresource Integrity' (SRI)?

How to optimize SVG performance?

Difference between inlining and externalizing images?

What is 'LCP Image Priority'?

What is 'Fetch Priority' API?

How to optimize Video loading?

Explain 'HTTP/2 Push'.

What are '103 Early Hints'?

How to optimize third-party scripts (GTM, Ads)?

What is 'JavaScript Execution Cost'?

How to move JS execution to Web Workers?

What is 'Bundler Optimization'?

Explain 'Minification' vs 'Compression'.

How to handle large Icon libraries?