Practice & Assessment
Test your understanding of Network and Delivery Optimization
Multiple Choice Questions
5What problem does HTTP/2 multiplexing solve compared to HTTP/1.1?
Which Cache-Control directive sets a separate TTL specifically for CDN caches, not browsers?
You want to ensure the browser resolves DNS for a third-party analytics domain as early as possible, but not open a full connection. Which hint should you use?
What is the cache-first service worker strategy?
Why should you NOT compress already-compressed image files with gzip or Brotli?
Coding Challenges
1Implement a Workbox service worker for a static site
Given a static HTML site with 1 HTML file, 2 CSS files, 3 JS files, and 5 images, implement a service worker using Workbox that: (1) precaches the HTML, CSS, and JS files on install, (2) uses cache-first for images with a 30-day expiry, (3) uses network-first for any /api/ requests. Register the service worker in the main HTML. Input: provided static site files. Output: sw.js using Workbox strategies and the updated index.html with registration code. Verify in DevTools → Application → Cache Storage that assets are cached after first load. Estimated time: 25–30 minutes.
Mini Project
Fully Optimized Static Site Delivery
Set up an Nginx server (or use Netlify/Vercel config files) for a provided static site with the following configuration: (1) enable HTTP/2, (2) configure Brotli and gzip compression for all text assets, (3) set cache headers — max-age=31536000,immutable for hashed assets, no-cache for HTML, (4) add resource hints (preconnect for a Google Fonts origin, preload for the hero image), (5) implement a Workbox service worker with cache-first for static assets and network-first for HTML, (6) run Lighthouse before and after configuration and document TTI and TTFB improvements. Deliverable: nginx.conf or Netlify/Vercel config, sw.js, updated index.html with hints, and a README with before/after Lighthouse scores.