Various Types of Cacheable Content
This page demonstrates different types of content that can be cached by browsers and proxy servers. Check your browser's developer tools to see cache behavior.
Page Generated:
Cache-Control: Varies by content type (see below)
Total Assets: Calculating...
Cache-Control: Varies by content type (see below)
Total Assets: Calculating...
Images (Various Formats)
Images are typically cached for long periods. These use Cache-Control: public, max-age=86400, immutable
JPEG Image
First load: Network | Reload: Cache
PNG Image
Transparent PNG with alpha channel
SVG Image
Scalable vector graphics
WebP Image
Modern format with better compression
Stylesheets and Scripts
CSS and JS files with different cache policies:
CSS File
This text uses cached CSS
test-styles.css?v=1
JavaScript
Loading JS...
test-script.js?v=1
CSS with Hash
Versioned with content hash
test-styles.a1b2c3.css
JS Module
ES6 Module
test-module.js
Web Fonts
Font files are cached for extended periods:
WOFF2 Font
Custom WOFF2 Font
Google Fonts
External font from CDN
Various Content Types
JSON Data (Local)
Loading...
JSON API Data
Loading...
XML Data
Loading...
Text File (.gitignore)
Plain Text
Cache Validation Methods
ETag Validation
Uses ETag for cache revalidation
Last-Modified
Uses Last-Modified header
No-Cache
; ?>)
Always fetches fresh (timestamp query)
Immutable
Never revalidates (immutable flag)
How to Test Caching
- Open Developer Tools - Press F12 and go to Network tab
- Load this page - Note which resources are fetched from network
- Reload the page - Check which resources show "(from cache)" or status 304
- Force reload - Ctrl+Shift+R to bypass cache completely
- Check headers - Click on any resource to see Cache-Control headers
What to Look For:
- Status 200 - Content fetched from server
- Status 304 - Not Modified (validated with server)
- Size: (from cache) - Served directly from browser cache
- Cache-Control headers - Define caching behavior
- X-Cache headers - May show proxy/CDN cache status