A 300-kilobyte downloaded response can become a 1.2-megabyte decoded resource in memory, while a performance tool may show a third number that also includes response headers. These figures can all be correct. They answer different questions: bytes transferred over the network, bytes in the encoded response body, and bytes after content coding is removed.
In an invented example, response headers occupy 1,500 bytes, the gzip-encoded body is 300,000 bytes and the decoded body is 1,200,000 bytes. The teaching transfer size is 301,500 bytes, the encoded body size is 300,000 and the decoded body size is 1,200,000. The compression ratio is 1,200,000/300,000=4.0. Calling every number the “file size” hides the boundary.
Browser cache, service workers, cross-origin timing restrictions, redirects and protocol accounting can change what a tool exposes. This guide teaches the definitions and checks; it does not promise that every browser panel or API reports identical fields in every context.
This guide develops a focused reader question within the Websites subject guide. It adds a complete evidence chain, original worked examples, changed-context checks and explicit limits. Read it with The Gold Standard of Education | Learning That Transfers into Life and the How X Works.
Every dataset and calculation below is an invented teaching case. The article does not report a real weather record, website audit, recycling operation or wireless test. Use current documentation, qualified specialists and applicable rules for operational decisions.
The reader job is to explain a browser measurement without treating every byte count as interchangeable. Begin by stating whether the question concerns network usage, response-body compression, decoded representation size, runtime memory or user-visible speed. Choose the field after naming that decision. A smaller transfer can be valuable while leaving parse time or image memory unchanged.
Three ledgers are useful. The delivery ledger records request context, cache state, response headers and network bytes. The representation ledger records content coding and body sizes before and after its removal. The execution ledger records parsing, object creation and rendering costs. Resource Timing helps with the first two boundaries; it does not replace the third.
The examples use clean addition of response headers and encoded body to make the boundary visible. Actual transport accounting can be shaped by protocols, connection reuse and implementation details. Do not turn the teaching equation into a packet-capture specification. When exact wire cost matters, collect evidence at the layer that defines that cost.
Cache observations deserve their own route. A zero transfer-size field may mean that the representation came from cache, or that detailed timing is unavailable because an origin check failed. Preserve origin and timing permission before interpreting zero. A warm load and a cold load answer different questions and should not be averaged without labels.
Compression percentage is equally easy to misstate. If a 1,000-byte decoded body becomes 250 encoded bytes, encoded size is 25% of decoded size, the saving is 75%, and the decoding expansion ratio is four. All three sentences describe the same pair, but only when their denominators are explicit.
The practical outcome is an audit that another person can repeat. Save the resource set, filters, browser version, build identity, cache state and exported measurements. Then connect the chosen byte field to the user constraint. This prevents a tidy dashboard total from becoming a claim about a different layer of the website.
One useful FAQ asks why DevTools and a script can disagree. They may select different entries, apply different rounding, observe different cache paths or lack the same cross-origin access. Compare raw exported fields for one resource before comparing page totals. The first goal is to align evidence, not decide which interface is more authoritative by appearance.
Another asks whether decoded size is always larger. No. When no content coding is applied, encoded and decoded body sizes can be equal. An ineffective coding can even add overhead. The direction of change is an observation, not a rule to impose on every media type.
eduKateSG · Websites
Find your next learning step
Keep response headers, encoded body, decoded body, cache path, origin permissions and runtime memory as separate boundaries.
ROUTE 1 · CHAPTERS 1–6
Name the byte boundaries
Define transfer, encoded and decoded sizes, units, headers and cache cases.
ROUTE 2 · CHAPTERS 7–12
Trace the delivery path
Handle validation, origins, redirects, page totals, service workers and requests.
ROUTE 3 · CHAPTERS 13–18
Change the resource context
Compare codings, media, runtime cost, builds, distributions and budgets.
ROUTE 4 · CHAPTERS 19–22
Audit and continue
Repair tool mistakes, preserve fetch evidence and follow web standards.
Chapter contents
Name the byte boundaries · Chapters 1–6
1. Name the three byte boundaries
2. Distinguish content coding from media encoding
3. Work the basic compression example
4. Calculate compression ratio with the correct direction
Trace the delivery path · Chapters 7–12
7. Separate revalidation from full transfer
8. Respect cross-origin timing restrictions
9. Do not add redirects blindly
10. Distinguish resource entries from navigation totals
Change the resource context · Chapters 13–18
13. Compare gzip and Brotli fairly
14. Avoid double compression claims
15. Separate byte savings from render cost
16. Account for source maps and development builds
Audit and continue · Chapters 19–22
19. Repair common developer-tool mistakes
20. Create a reproducible fetch ledger
Transfer size, encoded body size and decoded body size describe different boundaries in a resource fetch. Transfer size concerns network bytes for the final response as defined by the measurement interface; encoded body size excludes headers; decoded body size reflects the body after content codings are removed.
Start with a claim ledger. Write the reported quantity, numerator, denominator, observational unit, time window and transformation rule in separate fields. Mark every value as observed, stipulated, estimated or assumed. This prevents a familiar label from silently carrying a different measurement basis into the calculation. Keep the raw record beside each derived value so another reader can reproduce the step and locate any disagreement.
A fictional CSS response has 900 header bytes, 24,000 encoded body bytes and 96,000 decoded bytes. The three values are 24,900, 24,000 and 96,000. None should be substituted for another in a budget.
Before moving on, identify the observation that would most directly challenge the current explanation. If no feasible observation exists, narrow the claim instead of hiding the ambiguity.
A changed-context transfer check is to write one sentence for each boundary without using the vague phrase file size. State what changes, what remains comparable and what the new result still cannot establish.
CHAPTER 2 OF 22 · Name the byte boundaries
2. Distinguish content coding from media encoding
HTTP content coding such as gzip or br compresses a representation for transfer. A JPEG is already a media representation whose internal coding remains after HTTP decompression. Decoded body size does not mean pixels expanded into an uncompressed bitmap.
Draw the mechanism before interpreting the number. Show where material, information or probability enters, what transformation occurs, and where a loss or bias can arise. Then ask which observation would distinguish two plausible explanations. A mechanism diagram is useful only when every arrow has a stated condition and an evidence route.
A 200 kB JPEG is sent with no HTTP content coding and occupies 200 kB as both encoded and decoded body. Rendering may require several megabytes of pixel memory, which is a fourth boundary outside these fields.
Before moving on, identify the observation that would most directly challenge the current explanation. If no feasible observation exists, narrow the claim instead of hiding the ambiguity.
A changed-context transfer check is to add gzip around a text file and compare HTTP decoding with application-level parsing. State what changes, what remains comparable and what the new result still cannot establish.
Start with body bytes before and after content coding, then add header bytes only when calculating the stated transfer measure. Keep decimal and binary unit conventions explicit.
Use two checks that fail differently. Reconstruct an input from outputs, calculate a limiting case, or solve the same example from the original definitions. Agreement matters most when the checks do not simply repeat the same assumption in different notation. Preserve the first result in the audit trail if a later check changes it.
An HTML body is 500,000 decoded bytes and 125,000 encoded bytes. Headers add 1,200 bytes, so transfer size is 126,200 bytes. Body saving is 375,000 bytes, or 75% of decoded size.
Before moving on, identify the observation that would most directly challenge the current explanation. If no feasible observation exists, narrow the claim instead of hiding the ambiguity.
A changed-context transfer check is to recalculate in KiB and explain why the displayed numerals change while byte counts do not. State what changes, what remains comparable and what the new result still cannot establish.
CHAPTER 4 OF 22 · Name the byte boundaries
4. Calculate compression ratio with the correct direction
Some tools call decoded/encoded the compression ratio; others report encoded/decoded or a percentage saving. State the formula. A ratio below or above one is not interpretable without that convention.
Keep the comparison fair. Hold the population, interval, boundary, protocol and unit constant before treating a difference as evidence of change. If one of those conditions differs, report the difference as a changed context and either standardise it transparently or narrow the claim.
Decoded body 800,000 divided by encoded body 200,000 gives 4.0× expansion on decoding. Encoded/decoded is 0.25, equivalent to 75% fewer body bytes in transfer.
Before moving on, identify the observation that would most directly challenge the current explanation. If no feasible observation exists, narrow the claim instead of hiding the ambiguity.
A changed-context transfer check is to report all three forms and label every numerator and denominator. State what changes, what remains comparable and what the new result still cannot establish.
Response header fields can matter for network cost, especially for tiny resources, but they are not part of either body-size field. Protocol header compression and connection reuse add further boundaries beyond a simplified per-response account.
Separate a measurement from the decision built on it. A value can be calculated correctly while remaining too uncertain, too local or too method-dependent for the intended action. Report the numerical result, the conditions that make it interpretable and the next observation needed for the real decision.
A 400-byte icon body with 900 response-header bytes has teaching transfer size 1,300 bytes. Saying compression reduced the 1,300-byte object by changing only the body would mix layers.
Before moving on, identify the observation that would most directly challenge the current explanation. If no feasible observation exists, narrow the claim instead of hiding the ambiguity.
A changed-context transfer check is to compare one tiny resource with one large resource using the same header allowance. State what changes, what remains comparable and what the new result still cannot establish.
CHAPTER 6 OF 22 · Name the byte boundaries
6. Understand cache-dependent zero values
A resource served from a local cache may show zero transfer bytes because no network transfer occurred for that observation. Its encoded and decoded body sizes can remain non-zero because the representation still has a body. Zero transfer is not zero resource cost in every sense.
Treat missing and excluded observations as data. Record why they are absent, whether absence is related to the process being studied, and which denominator they leave. A clean table produced by silently dropping difficult cases is less trustworthy than an incomplete table whose limits are explicit.
First load: transfer 101,000, encoded 100,000, decoded 400,000. Cached reload: transfer 0, encoded 100,000, decoded 400,000. The second observation answers a different delivery path.
Before moving on, identify the observation that would most directly challenge the current explanation. If no feasible observation exists, narrow the claim instead of hiding the ambiguity.
A changed-context transfer check is to clear the cache, repeat the measurement and label cold and warm runs separately. State what changes, what remains comparable and what the new result still cannot establish.
CHAPTER 7 OF 22 · Trace the delivery path
7. Separate revalidation from full transfer
A conditional request can validate a cached representation with a small response instead of sending the full body. A performance table must distinguish validation traffic from representation bytes already held locally.
Preserve sequence and identity. Two datasets with the same totals can imply different mechanisms when events occur in a different order or belong to different units. Keep timestamps, sample identifiers, packet or batch boundaries, and processing stages until the reader question no longer depends on them.
A cached 500 kB decoded script is revalidated with a teaching 700-byte response and no body transfer. The user still executes the cached script; the 700 bytes do not describe its executable size.
Before moving on, identify the observation that would most directly challenge the current explanation. If no feasible observation exists, narrow the claim instead of hiding the ambiguity.
A changed-context transfer check is to compare a 304-style validation path with a 200 response carrying a new body. State what changes, what remains comparable and what the new result still cannot establish.
CHAPTER 8 OF 22 · Trace the delivery path
8. Respect cross-origin timing restrictions
Detailed resource sizes can be hidden when the timing-allow conditions are not met. A displayed zero may therefore represent restricted visibility rather than a cache hit. Inspect origin and timing permissions before interpreting it.
Test a deliberately changed case. Change one assumption while holding the rest fixed, calculate again, and explain why the conclusion moves or stays stable. Transfer is demonstrated when the reasoning survives a new context, not when the original numbers are merely substituted into the same line of arithmetic.
Two resources each show transferSize=0. One is same-origin and cached; the other is cross-origin without timing permission. Identical numbers encode different evidence states.
Before moving on, identify the observation that would most directly challenge the current explanation. If no feasible observation exists, narrow the claim instead of hiding the ambiguity.
A changed-context transfer check is to add the appropriate timing permission in a controlled test and see which fields become observable. State what changes, what remains comparable and what the new result still cannot establish.
A final resource timing entry may not expose every byte from every redirect in the way a casual sum assumes. Redirect visibility and origin checks matter. Preserve the redirect chain and measure the claim actually needed.
State the boundary of inference in the answer itself. Name the system, population, representation or interval to which the result applies, then name one tempting stronger claim that the evidence cannot support. This turns a caveat into part of the reasoning rather than an afterthought.
An initial URL redirects twice before a 120 kB body arrives. Counting only the final body omits redirect traffic; adding guessed header allowances invents evidence.
Before moving on, identify the observation that would most directly challenge the current explanation. If no feasible observation exists, narrow the claim instead of hiding the ambiguity.
A changed-context transfer check is to repeat with same-origin redirects and record each observable stage. State what changes, what remains comparable and what the new result still cannot establish.
CHAPTER 10 OF 22 · Trace the delivery path
10. Distinguish resource entries from navigation totals
One resource entry covers one fetch observation. A page total needs a declared set of resources, time window and de-duplication rule. Preloads, duplicate requests, iframes and late fetches complicate the boundary.
Use uncertainty as structure rather than decoration. Identify which input controls the conclusion, vary it over a defensible range, and show whether the decision changes. A long list of generic caveats is weaker than one sensitivity calculation tied to the actual mechanism.
A page loads one 100 kB script twice in the log but the second entry is cache-served. Summing decoded sizes gives 200 kB of resource uses; summing transfer sizes may show only one network body.
Before moving on, identify the observation that would most directly challenge the current explanation. If no feasible observation exists, narrow the claim instead of hiding the ambiguity.
A changed-context transfer check is to state whether the question concerns network traffic, unique resources or decoding work. State what changes, what remains comparable and what the new result still cannot establish.
A service worker can intercept a request, return cached data, synthesise a response or fetch upstream. The browser-facing resource timing record and the upstream network path may not be the same evidence object.
Finish with an evidence package. Include the raw observations, definitions, exclusions, processing version, calculations, validation result and decision rule. A future reviewer should be able to reproduce the result and understand what would require the conclusion to be revised.
A worker returns a 50 kB cached JSON response while refreshing 52 kB upstream in the background. The navigation’s resource entry cannot automatically stand in for total network use.
Before moving on, identify the observation that would most directly challenge the current explanation. If no feasible observation exists, narrow the claim instead of hiding the ambiguity.
A changed-context transfer check is to disable the worker in a test profile and compare both paths without claiming either is universally normal. State what changes, what remains comparable and what the new result still cannot establish.
The three resource-body fields focus on response accounting. Upload bodies and request headers require a separate measurement route. A page with a small response can still send a large request.
Start with a claim ledger. Write the reported quantity, numerator, denominator, observational unit, time window and transformation rule in separate fields. Mark every value as observed, stipulated, estimated or assumed. This prevents a familiar label from silently carrying a different measurement basis into the calculation. Keep the raw record beside each derived value so another reader can reproduce the step and locate any disagreement.
A form uploads 5 MB and receives a 2 kB confirmation. Reporting 2 kB as the transaction size ignores the request direction.
Before moving on, identify the observation that would most directly challenge the current explanation. If no feasible observation exists, narrow the claim instead of hiding the ambiguity.
A changed-context transfer check is to add separate sent and received columns to the ledger. State what changes, what remains comparable and what the new result still cannot establish.
Different content codings can produce different encoded sizes and decoding costs. Use the same source representation, settings and request context. A smaller encoded body does not by itself prove faster user experience.
Draw the mechanism before interpreting the number. Show where material, information or probability enters, what transformation occurs, and where a loss or bias can arise. Then ask which observation would distinguish two plausible explanations. A mechanism diagram is useful only when every arrow has a stated condition and an evidence route.
The same 900 kB decoded script becomes 240 kB with gzip and 210 kB with Brotli. Body saving is 30 kB for that artifact, while actual load time still depends on cache, CPU, transport and priority.
Before moving on, identify the observation that would most directly challenge the current explanation. If no feasible observation exists, narrow the claim instead of hiding the ambiguity.
A changed-context transfer check is to test both codings under a controlled cold load and record size and timing separately. State what changes, what remains comparable and what the new result still cannot establish.
Many image, audio and video formats are already compressed. Applying an HTTP coding may yield little benefit or overhead. Measure the actual encoded body instead of applying a text-file ratio.
Use two checks that fail differently. Reconstruct an input from outputs, calculate a limiting case, or solve the same example from the original definitions. Agreement matters most when the checks do not simply repeat the same assumption in different notation. Preserve the first result in the audit trail if a later check changes it.
A 400,000-byte PNG becomes 401,200 bytes under an unnecessary coding. The ratio decoded/encoded is below one for that HTTP step, indicating expansion rather than savings.
Before moving on, identify the observation that would most directly challenge the current explanation. If no feasible observation exists, narrow the claim instead of hiding the ambiguity.
A changed-context transfer check is to compare a text SVG and a PNG with the same visual dimensions. State what changes, what remains comparable and what the new result still cannot establish.
CHAPTER 15 OF 22 · Change the resource context
15. Separate byte savings from render cost
Decoded HTTP body size is not DOM size, JavaScript heap, image surface memory or GPU texture size. Performance work needs the boundary associated with the observed bottleneck.
Keep the comparison fair. Hold the population, interval, boundary, protocol and unit constant before treating a difference as evidence of change. If one of those conditions differs, report the difference as a changed context and either standardise it transparently or narrow the claim.
A 60 kB compressed script decodes to 240 kB, then creates 8 MB of objects. Reducing transfer by 10 kB may help the network but does not prove heap pressure is solved.
Before moving on, identify the observation that would most directly challenge the current explanation. If no feasible observation exists, narrow the claim instead of hiding the ambiguity.
A changed-context transfer check is to hold transfer size constant while changing runtime allocation. State what changes, what remains comparable and what the new result still cannot establish.
CHAPTER 16 OF 22 · Change the resource context
16. Account for source maps and development builds
Source maps, comments and unminified code can dominate development traffic while being absent from production. Compare like deployments and preserve build identity.
Separate a measurement from the decision built on it. A value can be calculated correctly while remaining too uncertain, too local or too method-dependent for the intended action. Report the numerical result, the conditions that make it interpretable and the next observation needed for the real decision.
Development downloads 1.8 MB decoded JavaScript plus a 4 MB map; production downloads 320 kB decoded and no map. Combining them into one average produces no actionable baseline.
Before moving on, identify the observation that would most directly challenge the current explanation. If no feasible observation exists, narrow the claim instead of hiding the ambiguity.
A changed-context transfer check is to measure two production builds with identical feature flags and cache state. State what changes, what remains comparable and what the new result still cannot establish.
CHAPTER 17 OF 22 · Change the resource context
17. Use distributions instead of one lucky load
Connection state, cache, content negotiation and dynamic responses vary. Repeat observations and group them by delivery path. A median transfer size can hide a minority of full downloads after cache misses.
Treat missing and excluded observations as data. Record why they are absent, whether absence is related to the process being studied, and which denominator they leave. A clean table produced by silently dropping difficult cases is less trustworthy than an incomplete table whose limits are explicit.
Ten runs show eight zero-transfer cache hits and two 300 kB transfers. Median is zero while total network body is 600 kB and cache-miss cost is 300 kB.
Before moving on, identify the observation that would most directly challenge the current explanation. If no feasible observation exists, narrow the claim instead of hiding the ambiguity.
A changed-context transfer check is to report hit rate, miss transfer and total alongside the median. State what changes, what remains comparable and what the new result still cannot establish.
CHAPTER 18 OF 22 · Change the resource context
18. Build a resource budget with declared fields
A useful budget says whether it limits transfer, encoded body, decoded body, request count or runtime memory. Mixing fields lets a team pass by choosing the smallest available number.
Preserve sequence and identity. Two datasets with the same totals can imply different mechanisms when events occur in a different order or belong to different units. Keep timestamps, sample identifiers, packet or batch boundaries, and processing stages until the reader question no longer depends on them.
Set a fictional budget of 500 kB encoded body for first-party JavaScript on a cold navigation. Third-party frames, warm reloads and decoded bytes belong in separate rows.
Before moving on, identify the observation that would most directly challenge the current explanation. If no feasible observation exists, narrow the claim instead of hiding the ambiguity.
A changed-context transfer check is to change the decision to low-memory devices and choose a more relevant field. State what changes, what remains comparable and what the new result still cannot establish.
Common mistakes include treating transfer size as decoded size, reading zero as absence, adding cached decoded bodies to network bytes, and comparing differently filtered panels. Save the filter, cache state and export with the conclusion.
Test a deliberately changed case. Change one assumption while holding the rest fixed, calculate again, and explain why the conclusion moves or stays stable. Transfer is demonstrated when the reasoning survives a new context, not when the original numbers are merely substituted into the same line of arithmetic.
Analyst A filters JS and sums transfer. Analyst B filters all resources and sums decoded body. Their totals disagree because both the set and metric differ, not because one arithmetic sum is wrong.
Before moving on, identify the observation that would most directly challenge the current explanation. If no feasible observation exists, narrow the claim instead of hiding the ambiguity.
A changed-context transfer check is to make the filters and metric identical before debugging the numbers. State what changes, what remains comparable and what the new result still cannot establish.
Record URL, initiator, origin, status, content coding, cache path, transfer size, encoded body size, decoded body size, timing permission, build version and observation time. Keep browser and tool versions where reproducibility matters.
State the boundary of inference in the answer itself. Name the system, population, representation or interval to which the result applies, then name one tempting stronger claim that the evidence cannot support. This turns a caveat into part of the reasoning rather than an afterthought.
A reviewer traces app.js from decoded 1,020,000 bytes through br-encoded 255,000 bytes to 256,100 transfer bytes, with a cold-cache flag and same-origin access.
Before moving on, identify the observation that would most directly challenge the current explanation. If no feasible observation exists, narrow the claim instead of hiding the ambiguity.
A changed-context transfer check is to repeat after deployment and identify exactly which layer changed. State what changes, what remains comparable and what the new result still cannot establish.
A learner choosing a repair should ask whether the constraint is data allowance, latency, parse work, memory or server cost. One byte metric rarely answers all of them.
Use uncertainty as structure rather than decoration. Identify which input controls the conclusion, vary it over a defensible range, and show whether the decision changes. A long list of generic caveats is weaker than one sensitivity calculation tied to the actual mechanism.
On a slow link, encoded body dominates. On an offline repeat, transfer is zero but parse and execution remain. The same resource can need different fixes in those contexts.
Before moving on, identify the observation that would most directly challenge the current explanation. If no feasible observation exists, narrow the claim instead of hiding the ambiguity.
A changed-context transfer check is to write two recommendations for the same resource under network-limited and memory-limited conditions. State what changes, what remains comparable and what the new result still cannot establish.
The W3C Resource Timing specification defines the performance interface and the size fields, including cache and timing-access behaviour. HTTP semantics and content codings are defined through the current HTTP Semantics standard. Read this byte-accounting lesson with the existing guides on cache validation and representation transfer and server response time versus Largest Contentful Paint.
Finish with an evidence package. Include the raw observations, definitions, exclusions, processing version, calculations, validation result and decision rule. A future reviewer should be able to reproduce the result and understand what would require the conclusion to be revised.
The transferable habit is to name the byte boundary before optimising it. The same discipline applies to files, database payloads, media pipelines and any system where one representation expands into another.
Before moving on, identify the observation that would most directly challenge the current explanation. If no feasible observation exists, narrow the claim instead of hiding the ambiguity.
A changed-context transfer check is to audit a page with cold and warm runs, then explain why no single total replaces the whole ledger. State what changes, what remains comparable and what the new result still cannot establish.