Performance Glossary
Every web performance term explained twice β once for engineers, once like you're five. Searchable and filterable.
Core Web Vitals
Google uses LCP, INP, and CLS as ranking signals. These three metrics directly affect your site's position in search results.
14 terms
Time to First Byte
Technical
The time from when the browser sends an HTTP request to receiving the first byte of the server response. Includes DNS, TCP, TLS, and server processing time.
ELI5 β Like I'm 5
You order food at a restaurant. TTFB is how long until the waiter acknowledges your order and brings even a glass of water β before the actual meal arrives.
First Contentful Paint
Technical
The time from page load start until any content (text, image, SVG, or canvas element) first appears on screen.
ELI5 β Like I'm 5
You're staring at a blank tab after clicking a link. FCP is the exact moment you first see ANYTHING appear β even just a heading. The blank waiting is finally over.
Largest Contentful Paint
Technical
The render time of the largest image or text block visible in the viewport. One of Google's three Core Web Vitals.
ELI5 β Like I'm 5
Imagine a news article page. LCP is when the big hero photo finally loads and the page looks "done" to your eyes β not just the text, but the main thing.
Cumulative Layout Shift
Technical
Measures visual instability β the total score of unexpected layout shifts that occur during the page's entire lifetime. Score from 0 (perfect) upward.
ELI5 β Like I'm 5
You're about to tap a button and suddenly an ad loads above it β pushing the button down β and you tap the wrong thing. That's a layout shift. CLS counts how much of that happens.
lower score = better stability
Interaction to Next Paint
Technical
Measures the latency of all user interactions (clicks, taps, keyboard) throughout the page's lifetime. Replaced FID as a Core Web Vital in March 2024.
ELI5 β Like I'm 5
You tap a button. INP measures how quickly the screen visually responds β even if nothing "happens" yet, does it at least look like it heard you? The longer the wait, the worse the score.
First Input Delay
Technical
The delay between a user's very first interaction and the browser beginning to process it. Retired as a Core Web Vital in 2024 β INP does this job better.
ELI5 β Like I'm 5
Like pressing a button in an elevator and nothing happens for 3 seconds. FID measured that exact pause. INP replaced it because it watches ALL your taps, not just the first one.
Time to Interactive
Technical
Time until the page is fully interactive β the main thread has quieted, network requests have settled, and user interactions are handled within 50ms.
ELI5 β Like I'm 5
A page might LOOK ready but buttons do nothing because JavaScript is still loading. TTI is when the page is ACTUALLY ready to use β not just pretty to look at.
Total Blocking Time
Technical
The total time the main thread was blocked by long tasks (> 50ms each) between FCP and TTI, preventing the page from responding to user input.
ELI5 β Like I'm 5
Your browser has one brain doing everything. TBT is the total time that brain was too busy with homework to listen to you clicking things. Lower is better.
Speed Index
Technical
Measures how quickly content is visually populated during page load. Rewards pages that progressively render content rather than showing nothing then appearing all at once.
ELI5 β Like I'm 5
Two pages both take 4s to load. One shows nothing for 3.9s then pops in. The other fills in gradually. They finish together but the second feels faster β Speed Index captures that.
DNS Lookup
Technical
The time to resolve a human-readable domain name (e.g. sreeramganesan.dev) to a numeric IP address via the Domain Name System.
ELI5 β Like I'm 5
You want to visit a friend but only know their name. DNS is like calling a phone book service to get their street address before you can drive there. It happens every time you visit a new site.
TCP Handshake
Technical
A three-step process (SYN β SYN-ACK β ACK) to establish a reliable connection between the browser and server before any data is exchanged.
ELI5 β Like I'm 5
"Can you hear me?" β "Yes, can you hear me?" β "Yes, let's talk." That three-step back-and-forth is a TCP handshake. It happens before every new connection, adding a round-trip delay.
TLS Handshake
Technical
The negotiation process for establishing an encrypted HTTPS connection β exchanging certificates, verifying identities, and agreeing on encryption algorithms.
ELI5 β Like I'm 5
Before your secret conversation, you and a friend agree on a code language so no one eavesdropping can understand you. TLS is that agreement, happening invisibly on every HTTPS page.
Render-Blocking Resources
Technical
CSS stylesheets and synchronous JavaScript files that the browser must fully download and parse before it can render any content on screen.
ELI5 β Like I'm 5
Imagine having to read the entire IKEA manual before you're allowed to open the box. Render-blocking resources make the browser finish reading them before showing you anything.
Long Task
Technical
Any JavaScript task that takes more than 50ms to execute on the main thread, blocking rendering and preventing the browser from responding to user input.
ELI5 β Like I'm 5
Your browser has one worker that handles everything: JS, drawing pixels, responding to clicks. A Long Task is handing that worker a job so big they go heads-down for 50ms+ ignoring everything else.