Qasar Younis

Caching Strategy for Repeat Visits

Caching Strategy for Repeat Visits

This document explains how the site is optimized for instant repeat visits through aggressive caching strategies.

🚀 Caching Layers Implemented

1. Service Worker (Primary Caching)

File: sw.js

Strategy: Cache-First with Network Fallback

How it works:

  1. First visit: Assets downloaded and cached
  2. Repeat visits: Assets served instantly from cache (0ms load time!)
  3. Background updates: Service worker checks for updates periodically

Cache Versions:

2. Browser HTTP Caching

File: _headers (for CDN/Cloudflare)

Strategy: Very aggressive caching - most content is static

Note: GitHub Pages doesn’t support custom headers natively. If you use:

3. Browser Native Caching

Automatic: Browser handles this based on HTTP headers

📊 Performance Impact

First Visit:

Repeat Visits:

🔧 How to Update Cache

When You Update Content:

  1. Update Service Worker Version: 
    // In sw.js, change version number
const CACHE_NAME = 'qyco-v1.0.1'; // Increment version
  2. Deploy Changes:
    • Push to GitHub
    • Service worker automatically updates
    • Old cache cleaned up
    • New content cached

Force Cache Refresh:

🎯 What Gets Cached

Immediately Cached (on install):

Cached on First Request:

NOT Cached:

🔍 Testing Caching

Test Service Worker:

  1. Open DevTools → Application tab → Service Workers
  2. Check “Update on reload”
  3. Reload page - should see service worker active
  4. Go offline (DevTools → Network → Offline)
  5. Reload page - should still work!

Test Cache:

  1. First visit: Check Network tab, see all requests
  2. Second visit: Most requests should show “(from ServiceWorker)” or “(from disk cache)”
  3. Load time should be < 100ms

Verify Cache Headers:

  1. DevTools → Network tab
  2. Click on any asset
  3. Check “Response Headers” for Cache-Control

📈 Expected Results

Repeat Visit Performance:

Resource Type First Visit Repeat Visit (Cached)
HTML Pages ~500ms < 50ms ⚡
CSS/JS ~200ms < 10ms ⚡
Images ~1-2s < 20ms ⚡
Total ~2-3s < 100ms ⚡

Offline Support:

🛠️ Advanced: Customize Caching

Cache Specific Pages Longer:

Edit sw.js:

// Add to STATIC_ASSETS array
const STATIC_ASSETS = [
  '/',
  '/photos/',
  '/books/',
  // ... add pages you want cached immediately
];

Change Cache Duration:

Edit _headers file:

# Change max-age value (in seconds)
/assets/*
  Cache-Control: public, max-age=31536000  # 1 year

Exclude from Cache:

Edit sw.js fetch handler:

// Skip certain URLs
if (url.pathname.includes('/admin/')) {
  return; // Don't cache admin pages
}

🚨 Important Notes

  1. Service Worker Scope:
    • Must be served from root (/sw.js)
    • Works for entire domain
    • HTTPS required (GitHub Pages provides this)
  2. Cache Size Limits:
    • Browsers limit cache size (~50-100MB)
    • Service worker automatically manages this
    • Old caches cleaned up automatically
  3. Updates:
    • Service worker checks for updates every minute
    • Users get new version on next visit
    • Old cache cleaned up automatically
  4. Browser Support:
    • ✅ Chrome/Edge: Full support
    • ✅ Firefox: Full support
    • ✅ Safari: Full support (iOS 11.3+)
    • ⚠️ Older browsers: Falls back to HTTP caching

📝 Maintenance

Regular Tasks:

When to Update Cache Version:

🎉 Result

Repeat visits are now INSTANT!

Your site now feels like a native app! 🚀