Short answer: TTFB tells you when the first response bytes begin arriving; LCP tells you when the largest eligible visible element is rendered. One contributes to the other, but they are not interchangeable.
This guide answers one tightly bounded question within the Websites subject guide. It develops a mechanism, original worked examples, transfer checks and explicit limits rather than retitling the root article. Use it with The Gold Standard of Education | Learning That Transfers into Life and the How X Works hub.
The calculations are educational models. They do not replace site measurement, performance testing, equipment quality assurance, professional engineering or safety requirements. Every numerical example states its assumptions so that you can change them and see when the conclusion changes.
eduKateSG · Websites
Find your next learning step
Decompose a navigation from first byte to largest visible content before selecting a performance repair.
ROUTE 1 · CHAPTERS 1–5
Define the milestones
Name the journey, TTFB phases, LCP candidate and timing budget.
ROUTE 2 · CHAPTERS 6–11
Trace the critical path
Follow discovery, transfer, rendering, field and lab evidence.
ROUTE 3 · CHAPTERS 12–17
Change the context
Test caching, soft navigation, percentiles, causality and outcomes.
ROUTE 4 · CHAPTERS 18–22
Investigate and continue
Correct misconceptions, build traces, transfer across architectures and follow sources.
Chapter contents
Trace the critical path · Chapters 6–11
6. A low TTFB can coexist with a late LCP
7. A high TTFB constrains every later milestone
8. Resource discovery and priority
9. Transfer duration is not server response
Change the context · Chapters 12–17
12. Changed context: cached repeat visit
13. Changed context: soft navigation
14. Percentiles and sample size
15. Avoid causal claims from before-and-after charts
Investigate and continue · Chapters 18–22
18. Misconceptions that waste effort
19. Build a minimal investigation
20. Transfer check: a text LCP
21. Transfer check: server-rendered and client-rendered pages
Time to First Byte and Largest Contentful Paint describe different stages of a navigation. TTFB ends when the first response byte begins to arrive; LCP marks when the largest eligible visible content element is rendered. A fast server response is helpful but cannot guarantee a fast visual result.
A useful way to reason through this chapter is to write the measured quantity, its unit, its boundary and the decision it is meant to support before doing any arithmetic. Then write the mechanism that connects the observation to the claim. This short discipline prevents a familiar label from silently carrying assumptions about time, place, equipment or population. It also makes a calculation reproducible: another reader can see which values were observed, which were stipulated for the teaching example and which conclusion remains conditional.
In an illustrative load, TTFB is 0.55 seconds and LCP is 3.20 seconds. The 2.65 second gap contains parsing, resource discovery, queueing, transfer, decoding and rendering work. Optimising only the server leaves most of the visible delay untouched.
The practical check is this: measure the whole navigation and attribute time to stages before choosing a fix. Record the result that would change your mind as well as the result you expect. A Gold Standard explanation should survive a changed context, show the limit of the model and direct a real operational decision to the relevant qualified person or current official guidance.
A performance number needs a URL, device class, connection context, cache state, geography and navigation type. Lab and field observations can answer different questions without either being wrong.
A useful way to reason through this chapter is to write the measured quantity, its unit, its boundary and the decision it is meant to support before doing any arithmetic. Then write the mechanism that connects the observation to the claim. This short discipline prevents a familiar label from silently carrying assumptions about time, place, equipment or population. It also makes a calculation reproducible: another reader can see which values were observed, which were stipulated for the teaching example and which conclusion remains conditional.
A cached repeat visit on a laptop may produce a 0.25 second TTFB, while a first mobile visit through redirects records 0.9 seconds. Comparing them as if they were the same journey manufactures a trend.
The practical check is this: segment results by the context that changes the mechanism. Record the result that would change your mind as well as the result you expect. A Gold Standard explanation should survive a changed context, show the limit of the model and direct a real operational decision to the relevant qualified person or current official guidance.
TTFB includes work before application code returns HTML: redirects, service-worker startup where relevant, DNS lookup, connection and TLS negotiation, request travel and backend response time. It is not a pure server-compute stopwatch.
A useful way to reason through this chapter is to write the measured quantity, its unit, its boundary and the decision it is meant to support before doing any arithmetic. Then write the mechanism that connects the observation to the claim. This short discipline prevents a familiar label from silently carrying assumptions about time, place, equipment or population. It also makes a calculation reproducible: another reader can see which values were observed, which were stipulated for the teaching example and which conclusion remains conditional.
Suppose redirects take 120 ms, connection setup 180 ms, request travel 90 ms and backend work 260 ms. The illustrative TTFB is about 650 ms. Removing a redirect improves TTFB even though database work is unchanged.
The practical check is this: use detailed timing evidence before blaming one component. Record the result that would change your mind as well as the result you expect. A Gold Standard explanation should survive a changed context, show the limit of the model and direct a real operational decision to the relevant qualified person or current official guidance.
LCP reports the render time of the largest eligible image, text block or video poster visible in the viewport as the candidate evolves. It is a user-visible milestone, not the completion time of every request.
A useful way to reason through this chapter is to write the measured quantity, its unit, its boundary and the decision it is meant to support before doing any arithmetic. Then write the mechanism that connects the observation to the claim. This short discipline prevents a familiar label from silently carrying assumptions about time, place, equipment or population. It also makes a calculation reproducible: another reader can see which values were observed, which were stipulated for the teaching example and which conclusion remains conditional.
A text heading may be the early candidate at 1.1 seconds, then a hero image becomes the largest candidate at 2.9 seconds. The later eligible element determines the reported LCP for that navigation.
The practical check is this: inspect the candidate element and not only the scalar value. Record the result that would change your mind as well as the result you expect. A Gold Standard explanation should survive a changed context, show the limit of the model and direct a real operational decision to the relevant qualified person or current official guidance.
Break LCP into TTFB, resource-load delay, resource-load duration and element-render delay. The labels make different repairs visible and prevent a total from being treated as one opaque problem.
A useful way to reason through this chapter is to write the measured quantity, its unit, its boundary and the decision it is meant to support before doing any arithmetic. Then write the mechanism that connects the observation to the claim. This short discipline prevents a familiar label from silently carrying assumptions about time, place, equipment or population. It also makes a calculation reproducible: another reader can see which values were observed, which were stipulated for the teaching example and which conclusion remains conditional.
Use an illustrative 0.60 second TTFB, 0.75 second discovery delay, 1.10 second image transfer and 0.35 second render delay. LCP is 2.80 seconds. Cutting backend time by 0.20 seconds helps, but removing 0.55 seconds of discovery delay helps more.
The practical check is this: recompute the total after one change and state which component moved. Record the result that would change your mind as well as the result you expect. A Gold Standard explanation should survive a changed context, show the limit of the model and direct a real operational decision to the relevant qualified person or current official guidance.
CHAPTER 6 OF 22 · Trace the critical path
6. A low TTFB can coexist with a late LCP
The HTML can arrive quickly while the LCP resource is hidden behind CSS, injected by JavaScript, given low priority or lazy-loaded. The server has responded; the browser still lacks the information or bytes needed to paint the main element.
A useful way to reason through this chapter is to write the measured quantity, its unit, its boundary and the decision it is meant to support before doing any arithmetic. Then write the mechanism that connects the observation to the claim. This short discipline prevents a familiar label from silently carrying assumptions about time, place, equipment or population. It also makes a calculation reproducible: another reader can see which values were observed, which were stipulated for the teaching example and which conclusion remains conditional.
A 0.3 second TTFB followed by a hero URL discovered at 1.4 seconds produces 1.1 seconds of avoidable discovery delay before transfer starts. The correct investigation is resource discoverability, not only origin speed.
The practical check is this: check when the LCP resource first appears in the browser request timeline. Record the result that would change your mind as well as the result you expect. A Gold Standard explanation should survive a changed context, show the limit of the model and direct a real operational decision to the relevant qualified person or current official guidance.
CHAPTER 7 OF 22 · Trace the critical path
7. A high TTFB constrains every later milestone
Because the document response precedes resource discovery in a normal navigation, a high TTFB shifts later work. Even perfectly prioritised assets cannot paint before the browser has enough response information.
A useful way to reason through this chapter is to write the measured quantity, its unit, its boundary and the decision it is meant to support before doing any arithmetic. Then write the mechanism that connects the observation to the claim. This short discipline prevents a familiar label from silently carrying assumptions about time, place, equipment or population. It also makes a calculation reproducible: another reader can see which values were observed, which were stipulated for the teaching example and which conclusion remains conditional.
If TTFB rises from 0.5 to 1.4 seconds while later phases remain 1.5 seconds, LCP rises from 2.0 to 2.9 seconds. The same frontend can look slower because its start gate moved.
The practical check is this: test redirects, geography, caching and backend work before changing visual code. Record the result that would change your mind as well as the result you expect. A Gold Standard explanation should survive a changed context, show the limit of the model and direct a real operational decision to the relevant qualified person or current official guidance.
An image referenced directly in initial HTML can usually be discovered earlier than one revealed only after a stylesheet or script. Priority hints and preload can help in specific cases, but incorrect use can compete with more important work.
A useful way to reason through this chapter is to write the measured quantity, its unit, its boundary and the decision it is meant to support before doing any arithmetic. Then write the mechanism that connects the observation to the claim. This short discipline prevents a familiar label from silently carrying assumptions about time, place, equipment or population. It also makes a calculation reproducible: another reader can see which values were observed, which were stipulated for the teaching example and which conclusion remains conditional.
If the LCP image request begins 900 ms after TTFB because JavaScript must run first, moving the reference into discoverable markup may reclaim much of that delay. Preloading every large image would instead create contention.
The practical check is this: identify the actual LCP candidate and change only the critical dependency. Record the result that would change your mind as well as the result you expect. A Gold Standard explanation should survive a changed context, show the limit of the model and direct a real operational decision to the relevant qualified person or current official guidance.
CHAPTER 9 OF 22 · Trace the critical path
9. Transfer duration is not server response
After a resource request starts, byte size, compression, connection reuse, network quality and content delivery location affect completion. This stage can dominate even when document TTFB is healthy.
A useful way to reason through this chapter is to write the measured quantity, its unit, its boundary and the decision it is meant to support before doing any arithmetic. Then write the mechanism that connects the observation to the claim. This short discipline prevents a familiar label from silently carrying assumptions about time, place, equipment or population. It also makes a calculation reproducible: another reader can see which values were observed, which were stipulated for the teaching example and which conclusion remains conditional.
A 1.8 MB image over an effective 6 megabits per second requires roughly 2.4 seconds for payload transfer before overhead, because 14.4 megabits divided by 6 is 2.4. A smaller responsive image may matter more than shaving 50 ms from HTML generation.
The practical check is this: convert bytes and bits correctly and use observed transfer timing. Record the result that would change your mind as well as the result you expect. A Gold Standard explanation should survive a changed context, show the limit of the model and direct a real operational decision to the relevant qualified person or current official guidance.
CHAPTER 10 OF 22 · Trace the critical path
10. Rendering can remain after bytes arrive
Decoding, font availability, main-thread work, style calculation and rendering can delay the visible element after its resource is available. LCP therefore cannot be inferred from network completion alone.
A useful way to reason through this chapter is to write the measured quantity, its unit, its boundary and the decision it is meant to support before doing any arithmetic. Then write the mechanism that connects the observation to the claim. This short discipline prevents a familiar label from silently carrying assumptions about time, place, equipment or population. It also makes a calculation reproducible: another reader can see which values were observed, which were stipulated for the teaching example and which conclusion remains conditional.
If an image finishes at 1.9 seconds but long JavaScript tasks block the main thread until 2.6 seconds, the 0.7 second render delay is a separate problem. Recompressing the already-finished image may not remove it.
The practical check is this: compare resource completion with element render time. Record the result that would change your mind as well as the result you expect. A Gold Standard explanation should survive a changed context, show the limit of the model and direct a real operational decision to the relevant qualified person or current official guidance.
Lab tools provide controlled diagnostics; field data samples real users, devices, networks and cache states. A single lab run cannot establish the distribution users experience.
A useful way to reason through this chapter is to write the measured quantity, its unit, its boundary and the decision it is meant to support before doing any arithmetic. Then write the mechanism that connects the observation to the claim. This short discipline prevents a familiar label from silently carrying assumptions about time, place, equipment or population. It also makes a calculation reproducible: another reader can see which values were observed, which were stipulated for the teaching example and which conclusion remains conditional.
A lab profile might report 2.1 seconds while the field 75th percentile is 3.4 seconds. That difference invites segmentation and reproduction; it does not prove that either system is broken.
The practical check is this: use repeated lab traces to diagnose and field percentiles to understand population experience. Record the result that would change your mind as well as the result you expect. A Gold Standard explanation should survive a changed context, show the limit of the model and direct a real operational decision to the relevant qualified person or current official guidance.
Cache state can change document and resource timing, candidate discovery and transfer. A repair verified only with a warm cache may fail a first visitor.
A useful way to reason through this chapter is to write the measured quantity, its unit, its boundary and the decision it is meant to support before doing any arithmetic. Then write the mechanism that connects the observation to the claim. This short discipline prevents a familiar label from silently carrying assumptions about time, place, equipment or population. It also makes a calculation reproducible: another reader can see which values were observed, which were stipulated for the teaching example and which conclusion remains conditional.
In a warm-cache test the hero image takes 20 ms to retrieve locally; in a cold test it requires 1.1 seconds over the network. If the intended journey includes new visitors, the cold state belongs in acceptance checks.
The practical check is this: state cache conditions and test the journey that matters. Record the result that would change your mind as well as the result you expect. A Gold Standard explanation should survive a changed context, show the limit of the model and direct a real operational decision to the relevant qualified person or current official guidance.
Single-page applications may update content without a traditional document navigation. Measurement support and definitions for soft navigations are evolving, so a document-navigation interpretation should not be copied blindly.
A useful way to reason through this chapter is to write the measured quantity, its unit, its boundary and the decision it is meant to support before doing any arithmetic. Then write the mechanism that connects the observation to the claim. This short discipline prevents a familiar label from silently carrying assumptions about time, place, equipment or population. It also makes a calculation reproducible: another reader can see which values were observed, which were stipulated for the teaching example and which conclusion remains conditional.
A route change that fetches JSON and swaps a main panel may feel like a new page to the user while ordinary navigation TTFB is absent. The team needs an explicit route-performance method instead of inventing a document TTFB.
The practical check is this: name the navigation model and use supported instrumentation. Record the result that would change your mind as well as the result you expect. A Gold Standard explanation should survive a changed context, show the limit of the model and direct a real operational decision to the relevant qualified person or current official guidance.
Performance varies. The 75th percentile is not the mean, and a percentile from a tiny sample can move abruptly. Segmenting too finely can also leave unstable groups.
A useful way to reason through this chapter is to write the measured quantity, its unit, its boundary and the decision it is meant to support before doing any arithmetic. Then write the mechanism that connects the observation to the claim. This short discipline prevents a familiar label from silently carrying assumptions about time, place, equipment or population. It also makes a calculation reproducible: another reader can see which values were observed, which were stipulated for the teaching example and which conclusion remains conditional.
For ten illustrative LCP values, the average may look acceptable while three slow visits reveal a tail problem. Report the chosen percentile, count and time window instead of showing an unexplained “score”.
The practical check is this: retain the distribution and investigate who is represented in the slow tail. Record the result that would change your mind as well as the result you expect. A Gold Standard explanation should survive a changed context, show the limit of the model and direct a real operational decision to the relevant qualified person or current official guidance.
CHAPTER 15 OF 22 · Change the context
15. Avoid causal claims from before-and-after charts
A release may coincide with traffic mix, network, cache or content changes. An improved median does not by itself identify the mechanism.
A useful way to reason through this chapter is to write the measured quantity, its unit, its boundary and the decision it is meant to support before doing any arithmetic. Then write the mechanism that connects the observation to the claim. This short discipline prevents a familiar label from silently carrying assumptions about time, place, equipment or population. It also makes a calculation reproducible: another reader can see which values were observed, which were stipulated for the teaching example and which conclusion remains conditional.
If TTFB drops after a deployment but geography also shifts toward a nearby region, the chart cannot assign the gain to code alone. Use controlled tests and component timing to strengthen attribution.
The practical check is this: record concurrent changes and reproduce the proposed mechanism. Record the result that would change your mind as well as the result you expect. A Gold Standard explanation should survive a changed context, show the limit of the model and direct a real operational decision to the relevant qualified person or current official guidance.
A visually earlier large element does not guarantee the page is operable, understandable or accessible. Loading performance is one part of the task journey.
A useful way to reason through this chapter is to write the measured quantity, its unit, its boundary and the decision it is meant to support before doing any arithmetic. Then write the mechanism that connects the observation to the claim. This short discipline prevents a familiar label from silently carrying assumptions about time, place, equipment or population. It also makes a calculation reproducible: another reader can see which values were observed, which were stipulated for the teaching example and which conclusion remains conditional.
A page can paint a hero quickly while keyboard focus is trapped or form labels are missing. Conversely, accessibility fixes should be performance tested without treating speed as the only acceptance criterion.
The practical check is this: test task completion with relevant users and technical checks. Record the result that would change your mind as well as the result you expect. A Gold Standard explanation should survive a changed context, show the limit of the model and direct a real operational decision to the relevant qualified person or current official guidance.
LCP is a diagnostic user-experience metric, not a direct measure of learning, conversion or correctness. It can support a hypothesis while the product outcome needs its own evidence.
A useful way to reason through this chapter is to write the measured quantity, its unit, its boundary and the decision it is meant to support before doing any arithmetic. Then write the mechanism that connects the observation to the claim. This short discipline prevents a familiar label from silently carrying assumptions about time, place, equipment or population. It also makes a calculation reproducible: another reader can see which values were observed, which were stipulated for the teaching example and which conclusion remains conditional.
A learning page may achieve a 1.8 second LCP but still lose readers at a confusing task. Another page may improve LCP and completion together; the association requires a designed evaluation before causal claims.
The practical check is this: connect technical metrics to a named task and independent outcome measure. Record the result that would change your mind as well as the result you expect. A Gold Standard explanation should survive a changed context, show the limit of the model and direct a real operational decision to the relevant qualified person or current official guidance.
Do not equate TTFB with server compute, LCP with full page load, one Lighthouse run with all users, or a green score with a successful task. Each shortcut collapses distinct mechanisms.
A useful way to reason through this chapter is to write the measured quantity, its unit, its boundary and the decision it is meant to support before doing any arithmetic. Then write the mechanism that connects the observation to the claim. This short discipline prevents a familiar label from silently carrying assumptions about time, place, equipment or population. It also makes a calculation reproducible: another reader can see which values were observed, which were stipulated for the teaching example and which conclusion remains conditional.
If a team says “the server is fast because TTFB is 300 ms,” ask how much came from network and how backend time was observed. If it says “the page loads in LCP,” ask what work continues afterward.
The practical check is this: challenge the hidden equivalence before recommending code changes. Record the result that would change your mind as well as the result you expect. A Gold Standard explanation should survive a changed context, show the limit of the model and direct a real operational decision to the relevant qualified person or current official guidance.
Capture a representative trace, identify the LCP candidate, decompose timing, repeat under stated cache and network conditions, and compare with field segments. Change one plausible cause at a time where possible.
A useful way to reason through this chapter is to write the measured quantity, its unit, its boundary and the decision it is meant to support before doing any arithmetic. Then write the mechanism that connects the observation to the claim. This short discipline prevents a familiar label from silently carrying assumptions about time, place, equipment or population. It also makes a calculation reproducible: another reader can see which values were observed, which were stipulated for the teaching example and which conclusion remains conditional.
A practical worksheet has columns for navigation start, response start, candidate URL, request start, response end, render time, device, cache and notes. The worksheet turns a score into an evidence chain.
The practical check is this: keep raw traces or reproducible exports alongside the summary. Record the result that would change your mind as well as the result you expect. A Gold Standard explanation should survive a changed context, show the limit of the model and direct a real operational decision to the relevant qualified person or current official guidance.
When the candidate is text, font loading, CSS and main-thread work can matter more than image optimisation. The same metric needs a different mechanism model.
A useful way to reason through this chapter is to write the measured quantity, its unit, its boundary and the decision it is meant to support before doing any arithmetic. Then write the mechanism that connects the observation to the claim. This short discipline prevents a familiar label from silently carrying assumptions about time, place, equipment or population. It also makes a calculation reproducible: another reader can see which values were observed, which were stipulated for the teaching example and which conclusion remains conditional.
If the largest heading waits for a web font, using an appropriate font-display strategy may change render timing. Recompressing unrelated images does not address the blocking relationship.
The practical check is this: confirm the candidate type before selecting the repair. Record the result that would change your mind as well as the result you expect. A Gold Standard explanation should survive a changed context, show the limit of the model and direct a real operational decision to the relevant qualified person or current official guidance.
CHAPTER 21 OF 22 · Investigate and continue
21. Transfer check: server-rendered and client-rendered pages
Server rendering can send meaningful HTML earlier, while client rendering may require script download and execution before main content exists. Either architecture can perform well or poorly depending on implementation.
A useful way to reason through this chapter is to write the measured quantity, its unit, its boundary and the decision it is meant to support before doing any arithmetic. Then write the mechanism that connects the observation to the claim. This short discipline prevents a familiar label from silently carrying assumptions about time, place, equipment or population. It also makes a calculation reproducible: another reader can see which values were observed, which were stipulated for the teaching example and which conclusion remains conditional.
Compare two routes with the same TTFB but different render delays. The route that requires a 1.2 second script task before producing the main element will have later LCP despite equal document response timing.
The practical check is this: measure the architecture’s real dependency chain instead of arguing from labels. Record the result that would change your mind as well as the result you expect. A Gold Standard explanation should survive a changed context, show the limit of the model and direct a real operational decision to the relevant qualified person or current official guidance.
CHAPTER 22 OF 22 · Investigate and continue
22. Sources, limits and connected reading
The web.dev TTFB guide explains the phases included in TTFB; web.dev LCP guidance defines the visible milestone; and the W3C Largest Contentful Paint specification defines the API. Continue with Carrying Response Age Across More Than One Cache and Resolving Relative Links.
A useful way to reason through this chapter is to write the measured quantity, its unit, its boundary and the decision it is meant to support before doing any arithmetic. Then write the mechanism that connects the observation to the claim. This short discipline prevents a familiar label from silently carrying assumptions about time, place, equipment or population. It also makes a calculation reproducible: another reader can see which values were observed, which were stipulated for the teaching example and which conclusion remains conditional.
Thresholds and browser support can change, so consult current specifications and tooling. Examples here are diagnostic models, not universal budgets.
The practical check is this: verify current browser behaviour and the actual user population before setting acceptance criteria. Record the result that would change your mind as well as the result you expect. A Gold Standard explanation should survive a changed context, show the limit of the model and direct a real operational decision to the relevant qualified person or current official guidance.