Tutorial 4: Performance and Caching

Unit 1 · Web architecture and protocols

Objectives

Performance is a user-visible property

Latency is the time a user waits for an operation; throughput is the amount of work transferred or completed over time. A page can have high throughput but poor interaction latency if the critical request is delayed. Measure DNS, connection, TLS, server wait, content download, parsing, and rendering separately.

Cache-Control: public, max-age=31536000, immutable
ETag: "course-466-v8"

If-None-Match: "course-466-v8"
HTTP/1.1 304 Not Modified

Freshness headers tell caches when a stored response may be reused. Validators such as ETags let a client ask whether its stored copy is still current. A 304 response avoids retransmitting an unchanged body. Long-lived caching works best with versioned asset URLs; personalized or sensitive data usually needs private or no-store policy.

Optimize the critical path

Reduce unnecessary bytes, avoid blocking work, compress suitable content, prioritize critical resources, and reuse connections. Do not optimize from intuition alone: use browser timing data, server metrics, and realistic network conditions.

Exercises

  1. Classify a course logo, public CSS file, and private profile response as public, private, or no-store.
  2. Choose a cache policy for a versioned JavaScript bundle.
  3. List three measurements you would collect before changing a slow page.

Self-check

  1. What does an ETag validate?
  2. Why version static asset URLs?
  3. Why measure the critical path?

Self-Check Quiz

1. What does a 304 response mean?

AnswerThe cached representation is still valid, so the server does not need to send the response body again.

2. Which response should not normally be publicly cached?

Answer(C) A private account page may contain user-specific data and should not be shared through a public cache.

3. What is a cache validator?

AnswerA value such as an ETag or Last-Modified timestamp that lets a client check whether its stored response remains current.

Homework

  1. Build a performance budget for a course page: critical bytes, response time, and interaction target.
  2. Specify cache headers for three resources and justify each choice.
  3. Use developer tools to compare a fresh load and a cached reload.
Sample answer

A sound policy gives versioned public assets a long immutable lifetime, allows public documentation to be reused for a bounded period, and marks personalized responses private or no-store. The performance budget should name measurable targets and identify the critical path. The comparison should record timing, transferred bytes, cache status, and any changed requests.

👤