Advanced40 minperformancecachingcompressioncdn

Caching, Compression and Content Delivery

Understand how browser caching, compression, response headers, hosting, and CDNs influence the performance of delivered website resources.

Learning Objectives

By the end of this lesson, you'll be able to:

  • explain browser caching
  • recognise caching headers
  • explain gzip and Brotli
  • explain the purpose of a CDN
  • inspect response headers

Why This Matters:

Understand how browser caching, compression, response headers, hosting, and CDNs influence the performance of delivered website resources.

Before You Start:

You should be familiar with:

Delivery pathway

A simplified delivery pathway looks like this:

  1. Visitor requests a page.
  2. DNS points the browser toward the host or CDN.
  3. The delivery layer checks whether a cached resource can be returned.
  4. If yes, the cached resource is returned.
  5. If no, the origin may need to handle the request.
Caching and CDN delivery flow A visitor request travels through DNS to a host or CDN. A cache hit returns the resource, while a miss requests it from the origin and stores the response. VisitorDNSHost orCDNCached?fresh responseReturnresourceRequestoriginYes: cache hitNo: cache missstore response
A nearby cached response can return quickly. A cache miss continues to the origin, then stores the response for a later request.

Compression

Text resources commonly benefit from transfer compression.

Examples include:

  • HTML
  • CSS
  • JavaScript
  • JSON
  • SVG

Common mechanisms include gzip and Brotli. Compression does not change the source file you edit; it changes how bytes are transferred over the network.

Response headers

Headers tell the browser how a response was delivered and how it may be reused.

In DevTools:

  1. Open Network.
  2. Reload the page.
  3. Select an HTML, CSS, or JavaScript request.
  4. Choose Headers.
  5. Inspect response headers.

Look for cache-control, content-encoding, and content-type.

Screenshot placeholder: Add a current DevTools response-header screenshot with cache-control, content-encoding, and content-type highlighted.

CDN concept

A CDN is distributed delivery infrastructure, not a magic speed button.

A badly optimised 8 MB photograph remains badly optimised even if it is delivered through excellent infrastructure. Delivery choices help most when the assets themselves are also sensible.

Check Your Understanding

Before moving forward, can you answer these?

  1. 1. What kinds of resources commonly benefit from compression?
  2. 2. What does `cache-control` help describe?
  3. 3. Why is a CDN not a substitute for optimisation?
Check Your Answers
  1. Text resources such as HTML, CSS, JavaScript, JSON, and SVG.
  2. How the browser or intermediary caches may store and reuse a response.
  3. Because it may improve delivery distance or caching, but it does not fix oversized or unnecessary assets.

How confident are you with this concept?

Still confused | Getting there | Got it | Could explain it to a friend

Guided Practice

Inspect response headers on a deployed site.

Step 1 - Open a deployed page

Use a live page rather than localhost if possible.

Step 2 - Inspect headers

Select HTML, CSS, JavaScript, and image requests. Record cache-control, content-encoding, and content-type where present.

Step 3 - Interpret differences

Describe which resources appear cacheable and which appear compressed.

Independent Practice

Compare two deployed projects if available, such as a traditional hosting example and a static CDN platform example.

Your Task:

Compare two deployed projects if available, such as a traditional hosting example and a static CDN platform example.

Requirements:
  • inspect headers for comparable resources
  • record caching and compression differences
  • avoid declaring one host universally better
  • describe what the differences mean for this specific site

Success Criteria:

CriteriaYou've succeeded if...
your comparison is evidence-basedCompleted clearly and correctly in your solution.
response headers are interpreted accuratelyCompleted clearly and correctly in your solution.
delivery is connected to visitor experienceCompleted clearly and correctly in your solution.

Before you continue

  • I can explain browser caching.
  • I can recognise basic caching headers.
  • I can explain gzip and Brotli at a beginner level.
  • I understand the purpose of a CDN.
  • I can inspect response headers in DevTools.

Extension activity

Find a cache-control header on a static asset and research what its directives mean. Explain whether the value seems sensible for that asset.

Closure

Key Takeaways:

  • Performance is a whole-system concern.
  • Source code, asset preparation, hosting, caching, compression, and delivery all contribute to the visitor's experience.
  • Good infrastructure helps most when the website itself is thoughtfully prepared.

Learning Objectives Review:

Look back at what you set out to learn. Can you now:

  • explain browser caching Check!
  • recognise caching headers Got it!
  • explain gzip and Brotli Can explain it!
  • explain the purpose of a CDN Could teach this!
  • inspect response headers Check!

If you can confidently answer "yes" to most of these, you're ready to move on!

Think & Reflect:

Pause and reflect

  • Which idea from this lesson now feels practical rather than abstract?
  • What would you build or test next to make this stick?

Looking Ahead:

  • Performance is a whole-system concern.
  • Source code, asset preparation, hosting, caching, compression, and delivery all contribute to the visitor's experience.
  • Good infrastructure helps most when the website itself is thoughtfully prepared.

Recommended Next Steps

Continue Learning

Ready to move forward? Continue with the next tutorial in this series:

Performance Budgets and Continuous Improvement

Related Topics

Explore these related tutorials to expand your knowledge:

JavaScript and Resource LoadingPerformance Budgets and Continuous ImprovementCSS and Web Font Performance

Additional Resources

Deepen your understanding with these helpful resources:

Progress tracking is disabled. Enable it in to track your completed tutorials.

Cookie Settings

Required

These cookies are necessary for the website to function and cannot be switched off.

Recommended

These cookies allow us to track your progress through tutorials and remember where you left off.

These cookies allow us to remember your preferences and settings.

JavaScript and Resource Loading
Performance Budgets and Continuous Improvement