Service workers give you a programmable network proxy right inside the browser. They sit between your page and the server, intercept every fetch request, and let you decide whether to serve a response from cache or from the network. For static sites - where every page is a pre-built file and every asset has a predictable URL - this is a natural fit. A well-configured service worker makes your static site load in single-digit milliseconds on repeat visits, work fully offline, and pass every Lighthouse PWA audit. The entire implementation fits in a single JavaScript file under 100 lines.

CSS container queries (@container) style components based on the width of their parent container instead of the browser viewport. Add container-type: inline-size to a parent element, write @container (min-width: 400px) { ... } rules on the children, and those children automatically adapt their layout based on the space available to them - not the screen size. All major browsers have supported container queries since early 2023 (Chrome 105+, Firefox 110+, Safari 16+), and as of 2026 they sit at over 96% global support according to Can I Use .

A Progressive Web App requires just three things beyond your existing website: a Web App Manifest JSON file that defines the app’s name, icons, and display mode; a service worker that intercepts network requests for offline support and caching; and HTTPS hosting. Add these to any site with plain JavaScript - no React, Angular, or framework needed - and browsers will offer an install prompt, enable push notifications, and cache your app for offline use. The entire setup can be done in under an hour with three files.

To pass all three Core Web Vitals, target an LCP under 2.5 seconds by preloading your hero image and cutting server response time, a CLS under 0.1 by reserving explicit dimensions for all media, and an INP under 200ms by breaking long JavaScript tasks into smaller chunks. Diagnose all three using Chrome DevTools, Lighthouse, and the CrUX Dashboard for real-user field data.

Why Core Web Vitals Matter for SEO and User Experience

Google formally incorporated Core Web Vitals into its ranking algorithm in 2021, but their weight has grown since then. With the March 2026 core update, Google introduced holistic CWV scoring - performance data aggregated across your entire domain rather than judged page by page. If 30% of your indexed pages fail LCP thresholds, that drags down the site-wide score even if your homepage is fast.

Web Components are native browser APIs - Custom Elements, Shadow DOM, and HTML Templates - that let you create reusable, encapsulated UI elements like <modal-dialog> or <accordion-panel> that work in React, Vue, Svelte, Angular, or plain HTML without build tools or framework dependencies. With 98% browser support across all modern browsers in 2026, they are the most portable component format available: write it once, ship it anywhere.

The Three APIs That Make Up Web Components

Web Components is an umbrella term for three distinct browser APIs that work together. You can use each independently - Custom Elements without Shadow DOM, Shadow DOM without Templates - but the combination is where they become genuinely useful.