Glossary

138 terms from Web Performance, in plain words, each with the chapter that teaches it.

Search the glossary

#

75th percentile: The value that three in four visits are at or better than. Core Web Vitals are judged at this point, so a page can't pass on its fast visits alone.
@font-face: A CSS rule that names a font file and the family name your CSS uses for it. Kettle & Crane has one rule per weight of Poppins.

A

Accept-Encoding: A request header where the browser lists the compression methods it understands, such as gzip and br.
async (script): A script attribute that downloads alongside parsing and runs as soon as it arrives, in any order. It suits independent scripts such as analytics, and it can run before the page is fully parsed.
Attribution build: A version of the web-vitals library that also reports what caused each value, such as the LCP element or the script behind a slow click.
AVIF: A newer compressed image format for photos, often smaller than WebP or JPEG but slower to create. Check the bytes for each image, because it isn't always the smallest.

B

Bandwidth: How many bytes per second a connection delivers once data flows. Low bandwidth hurts big files such as Kettle & Crane's photos.
bfcache: A browser cache that keeps a whole page in memory so Back and Forward show it instantly. An unload listener is a common thing that stops it.
Brotli: A compression method for text files that usually beats gzip, supported by all current browsers. The server marks it with Content-Encoding: br.
Bundle analyzer: A tool that draws a map of what is inside each chunk of your JavaScript, so the big pieces stand out.
Bundler: A build tool, such as Vite, that combines your JavaScript and its packages into a few files for the browser. It can also split them into chunks and shake out unused code.

C

Cache hit / miss: A hit means a cache (such as a CDN edge server) already had the file; a miss means it had to fetch it from your server. CDNs report this in a response header such as x-cache.
Cache-Control: A response header that says who may store a response and for how long. Values include max-age, no-cache, no-store, immutable, public and private.
CDN (content delivery network): A service that keeps copies of your files on servers in many cities, so visitors fetch from a nearby one. This cuts latency on first visits.
Chunk: One of the separate files a bundler splits your JavaScript into. Code splitting lets a chunk such as marked load only when needed.
CI (continuous integration): A service that runs your checks on every change pushed to your repository and blocks changes that fail. A failing budget check can stop a slow change this way.
Client-side rendering (CSR): The server sends a nearly empty page and a script, and the browser builds the content after fetching data. Its content appears late because of a request chain.
CLS (Cumulative Layout Shift): A Core Web Vital that scores how much visible content moves unexpectedly. Good is 0.1 or less.
Code splitting: Cutting your JavaScript into separate files that load only when needed, using dynamic import(). It keeps the first page load small.
Composite: The last rendering step, which stacks painted layers into the final screen. Changes to transform or opacity can often skip layout and paint and only composite.
contain-intrinsic-size: A CSS property that gives a skipped section a guessed height so the scrollbar doesn't jump. The auto keyword remembers the real height once seen.
Content-Encoding: A response header naming the compression the server used, such as br for Brotli.
content-visibility: auto: A CSS property that tells the browser to skip layout and paint for off-screen sections until the visitor scrolls near them. It speeds up long pages.
Core Web Vitals: Google's three user-centered metrics, LCP, INP and CLS, covering loading, responsiveness and visual stability. A page passes when each is good at the 75th percentile.
Coverage panel: A DevTools panel showing how many bytes of each JavaScript and CSS file ran and how many were unused. Mostly gray files are candidates for splitting or removal.
Critical rendering path: The steps that turn HTML, CSS and JavaScript into pixels: DOM and CSSOM, render tree, layout, paint and composite.
CrUX (Chrome User Experience Report): Public field data on Core Web Vitals from real Chrome users who agreed to share it, taken at the 75th percentile over 28 days. Small or new sites may have none.
CSSOM: The browser's model of every style rule, built by parsing CSS. It combines with the DOM to make the render tree.
curl: A command-line tool for making HTTP requests and showing the responses. With options such as `-I` it prints only the response headers, which makes it handy for checking things like `Cache-Control`, `ETag` and `Content-Encoding`.

D

decoding="async": An image attribute that lets the browser turn the file into pixels off the main path. It is a small win, since most browsers already do it.
defer (script): A script attribute that downloads alongside parsing and runs after the HTML is parsed, keeping order. It is the usual choice for your own code that needs the DOM.
DevTools: The developer tools built into Chrome and Edge. Panels used here include Network, Performance, Lighthouse, Coverage and Console.
Disable cache: A DevTools Network option that makes every reload act like a first visit by ignoring the HTTP cache.
DNS (Domain Name System): The system that turns a host name such as shop.kettleandcrane.com into the server's numeric address. It is one of the trips before a request can go out.
dns-prefetch: A link hint that does only the DNS lookup for another server. It is cheaper than preconnect and a fallback for old browsers.
DOM: The browser's tree of page elements, built by parsing the HTML as it streams in.
DOMContentLoaded: The event fired when the HTML has been parsed. It is not the same as the Load event, and neither matches what a visitor feels.
Dynamic import(): A way to load a module while the code runs, with await import("marked"). Bundlers use it to split code into chunks that load on demand.

E

Edge server: A CDN server in a city near visitors that holds copies of your files.
ETag: A fingerprint the server sends with a file. The browser sends it back in If-None-Match to ask whether the file changed, and an unchanged file gets a bodiless 304.
Exit code: The number a program ends with: 0 for success, anything else for failure. check-budget.mjs exits with 1 when a limit is exceeded so CI can stop the change.

F

Facade: A lightweight stand-in that looks like a heavy widget and loads the real one only when someone uses it. Kettle & Crane's chat button is a facade for ChatNow.
FCP (First Contentful Paint): The time when the first text or image appears on screen. The white screen lasts until FCP.
fetchpriority: An attribute that raises or lowers a download's priority. Put fetchpriority="high" on the LCP image only.
Field data: Measurements from real visitors on their own devices and networks. It shows what people felt but arrives only after you ship.
FOIT / FOUT: FOIT is invisible text while a font downloads. FOUT is text shown in a fallback font and swapped when the real font arrives, which is better because people can read at once.
font-display: swap: A @font-face setting that shows text in a fallback font at once and swaps in the web font when it arrives. The optional value never swaps.
Fresh / stale: A cached copy is fresh while within its max-age, and the browser uses it without asking. Once past it, the copy is stale and must be checked before reuse.

G

gzip: An older compression method supported everywhere. Brotli usually makes smaller files.

H

Hard reload: A reload (Ctrl+Shift+R or Cmd+Shift+R) that ignores the cache and downloads every file again.
Hashed file names: File names that include a fingerprint, like index-BHtVgRPC.js. When the content changes the name changes, so long caching is safe.
HTTP cache: The browser's store of files it has downloaded. The server controls how long a copy may be used with Cache-Control.
HTTP status codes: Three-digit numbers a server sends to say how a request went: 200 OK (success), 204 No Content (success, nothing to send back), 304 Not Modified (use your cached copy), 404 Not Found (no such file) and 413 Content Too Large (body too big).
HTTP/2 and HTTP/3: Newer HTTP versions that send many requests over one connection, avoiding HTTP/1.1's limit of about six connections per server. HTTP/3 uses a newer transport that copes better with lost packets.
Hydration: When a framework runs the same components in the browser to attach event listeners to HTML the server already built. It costs JavaScript, so a fast-looking SSR page can still respond slowly.

I

iframe: An HTML element that shows another web page inside yours, used for embedded videos and maps. It can use loading="lazy" or a facade to avoid paying for it until needed.
Image quality setting: A number from 1 to 100 that controls how much a lossy image is compressed. Lower is smaller but blurrier, so pick the lowest value that looks right at its displayed size.
immutable: A Cache-Control value saying a file will never change, so the browser shouldn't even check while it is fresh. Used with hashed file names.
Initiator: A Network panel column showing who requested a file. It makes request chains visible, for example fonts requested by style.css.
INP (Interaction to Next Paint): A Core Web Vital that measures the time from a tap or key press until the next paint, reporting one of the slowest interactions. Good is 200 ms or less.
Insight: A named finding in a Lighthouse report, with an estimated saving, such as "Improve image delivery". Start with the biggest saving.
Islands: A technique that hydrates only the interactive parts of a page and leaves the rest as plain HTML.

J

JPEG: A widely supported image format for photos. It is larger than WebP or AVIF.
JSON Lines: A file format with one complete JSON object per line, easy to append to and read back. vitals.log uses it.

K

keep-alive: A connection header that keeps a connection open so the next request skips DNS, connection and TLS.

L

Lab data: Measurements from a test you run yourself, on one device and network setting, such as Lighthouse. It is repeatable, so it is good for before and after.
Latency: The time for one trip to the server and back. It depends on distance and network, and on a phone it can be 150 ms or more.
Layout: The rendering step that works out each box's size and position. Changing an element's size forces layout again.
Layout shift: Already visible content moving because something else changed, such as an image arriving without reserved space. Each shift scores how much of the screen moved times how far.
LCP (Largest Contentful Paint): A Core Web Vital: the time until the largest image or text block in the first screen is painted. On the slow Kettle & Crane page it is the hero photo, and good is 2.5 s or less.
LCP breakdown: LCP split into four parts: TTFB, load delay, load duration and render delay. Each part points to a different fix.
Lighthouse: Google's free lab tool, built into Chrome DevTools and also run from the command line. It gives a score, metrics and insights for a page.
Load (event): The event fired when every file, photos included, has arrived. It isn't what a visitor feels.
loading="lazy": An attribute that waits to load an image or iframe until the visitor scrolls near it. Use it only below the first screen, never on the LCP image.
Long task: Any piece of main-thread work longer than 50 ms. While it runs, taps must wait.

M

Main thread: The single browser thread that runs parsing, styles, layout, painting and all your JavaScript. While it is busy, taps wait.
max-age: A Cache-Control value giving the number of seconds a cached copy stays fresh.
Median: The middle value when results are sorted. Lighthouse is run three times and the median run is used.
MIME type: The label a server sends in the Content-Type response header to say what a file is, such as text/css. Browsers rely on it.
Module script: A script with type="module", which is deferred by default. It runs in order after parsing and never blocks rendering.

N

Network panel: The DevTools panel listing every request with its status, size, time and waterfall.
no-cache / no-store: no-cache means keep a copy but check with the server before every use. no-store means never keep a copy.

O

Origin (CrUX): Every page of a site together, as opposed to one URL. Small sites often have origin data only.

P

PageSpeed Insights: A web tool that runs Lighthouse on any public address and shows CrUX field data when available.
Paint: The rendering step that fills in pixels: text, colors and images.
Parse and compile: The steps where the browser reads JavaScript text and turns it into code it can run. They happen on the main thread, so JavaScript costs more than its download size.
Percentile: The value that a given share of results fall at or below. At the 75th percentile, three visits in four were at least that good.
Performance budget: A set of limits on metrics and sizes the team agrees the site must stay within, checked on every change.
Performance panel: A DevTools panel that shows live LCP, CLS and INP and records a timeline of main-thread tasks. Long tasks are marked in red.
Performance score: Lighthouse's 0 to 100 summary, a weighted mix of TBT (30%), LCP and CLS (25% each), and FCP and Speed Index (10% each). Don't chase 100.
PerformanceObserver: A browser API that lets your code watch performance entries such as LCP and layout shifts. buffered: true also delivers earlier entries.
PNG: A lossless image format suited to screenshots and sharp edges or transparency; photos come out huge.
Preconnect: A link hint that makes the browser start the DNS lookup, connection and TLS for another server early. Use it only for one or two servers you'll surely need.
Preload: A link in the head that tells the browser to fetch a file now because it will be needed soon, such as a CSS-only hero image or a font. Fonts need crossorigin.
Preload scanner: A browser helper that reads ahead in the HTML and starts downloading images, links and scripts, even while the parser is blocked. It can't see inside CSS.
Purge: Telling a CDN to drop its copies so it fetches new files from your server. With hashed names, only the HTML needs purging.

R

Real-user monitoring (RUM): Collecting performance numbers from real visits and sending them to your own server. It is field data that covers every page and shows up the day you deploy.
Render tree: The visible elements combined with their styles, built from the DOM and CSSOM and ready for layout.
Render-blocking: A file the browser must load before it can paint. A stylesheet in the head and a script without defer are render-blocking.
Request blocking: A DevTools feature that stops a URL from loading, so you can test the page without it and see what a script costs.
Request chain: Files that can only be requested after another file arrives, such as HTML, then CSS, then font. Each link adds a round trip.
Reserving space (width and height): Giving images, embeds and banners a known shape (width and height attributes, aspect-ratio or min-height) so the browser keeps room for them before they load. This stops layout shifts.
Resource priority: How urgent the browser thinks a file is, shown in the Network panel's Priority column. HTML and CSS are Highest, and images start lower until they are seen to be on screen.
Revalidation: Asking the server whether a stale cached copy is still current. If it is, the server answers 304 with no body.

S

s-maxage: A Cache-Control value that sets the lifetime for shared caches such as a CDN only, separate from the browser's max-age.
Sampling: Collecting data from only a share of visits, such as one in ten, to reduce load on a busy site.
scheduler.yield(): A browser function that pauses a long-running task so the browser can handle input and paint, then resumes the task where it left off. It is not available in Safari, so code usually falls back to a `setTimeout`-based promise when it is missing.
sendBeacon: A browser function, `navigator.sendBeacon(url, data)`, that sends a small POST request the browser promises to finish even if the page is closing. It is used to reliably deliver data such as web-vitals measurements when a visitor leaves the page.
Server-side rendering (SSR): The server builds the full HTML for each request, so TTFB includes the server's work. Content appears with the first paint.
Service worker: A script that sits between your page and the network. It can keep files in its own cache and serve them even offline.
sharp: An image library for Node that resizes and converts photos to formats such as WebP and AVIF.
Simulated throttling: Lighthouse's way of loading the page at full speed and then calculating how long it would take on a mid-range phone over slow 4G. It is steadier than real throttling.
Single point of failure: One part whose failure breaks everything, such as a blocking third-party script whose server hangs so the page shows nothing.
size-adjust: A descriptor in @font-face that scales a fallback font to match the web font, reducing layout shift when fonts swap.
Speculation Rules: A script of type speculationrules that tells the browser which link the visitor will likely follow, so it can fetch or render that page ahead of the click. Chrome and Edge support it.
Speed Index: A Lighthouse metric for how quickly the visible page fills in overall.
srcset and sizes: Attributes that list several widths of an image and how wide it will display, so the browser picks the smallest sharp file. A picture element adds a choice of format.
Static site generation (SSG): A build step makes the full HTML ahead of time, so the server just sends files. It is the fastest strategy when content changes rarely.
Streaming: Sending HTML in pieces so the top of the page can paint while the server still waits for data.
Subsetting: Keeping only the characters a font file needs, such as Latin letters, to make it smaller. pyftsubset from fontTools does this.
SVG: A text image format that describes shapes, so it stays sharp at any size. It is good for logos and icons, not photos.
System font stack: A font-family such as system-ui, sans-serif that uses fonts already on the device, costing zero bytes.

T

Tag manager: A tool that lets marketing add third-party scripts without a deploy. It is handy but makes it easy to collect tags nobody measures.
TBT (Total Blocking Time): A lab metric that sums, for each long task during loading, the part over 50 ms. It stands in for INP because Lighthouse never clicks.
Third-party script: Code your page loads from another company's server, such as a chat box, analytics or ads. Self-hosting means serving a copy from your own server instead.
Throttling: Deliberately slowing the network or CPU in DevTools so a fast laptop behaves like a phone on a weak connection. Use it with Disable cache to see a first visit.
TLS: The handshake that sets up encryption for https. It is one of the trips before the first request.
Tree shaking: A bundler feature that leaves unused exports out of the bundle. It works only for named imports from ES modules.
TTFB (Time to First Byte): How long until the first byte of the response arrives ("Waiting for server response"). With SSR it includes the server's work.

U

unicode-range: A descriptor in @font-face that tells the browser which characters a font file covers, so it fetches only the subsets the page uses.

V

Vary: A response header naming the request headers a cached copy depends on. Vary: Accept-Encoding keeps the Brotli and plain copies apart.
Video instead of GIF: An animated GIF stores every frame as a picture and gets huge. A looping video with autoplay, muted, loop and playsinline is usually five to ten times smaller.
Vite: A build tool that bundles JavaScript, splits code into chunks and makes hashed file names.

W

Waterfall: The Network panel's chart that draws each request as a bar on a shared timeline, showing when each ran.
Web worker: A script that runs on a separate thread, off the main thread. It suits heavy work that doesn't touch the DOM.
web-vitals: Google's small library that reports LCP, INP and CLS from real visits, mostly when the page is hidden. It handles details such as how CLS groups shifts.
WebP: A compressed image format for photos and graphics, usually 25 to 35% smaller than JPEG and supported by every current browser.
WOFF2: A compressed font format made for the web, often 30 to 50% smaller than TrueType files.