Security Headers and Performance: CSP, HSTS, and Browser Impact
HTTP security headers instruct browsers on how to handle your site's content: what scripts can execute, whether HTTPS is required, which browser features are allowed, and how to isolate your content from other origins. These headers are free to add — they're just HTTP response headers — but their directives change how the browser loads and executes resources, which can directly affect page performance.
Some security headers improve performance. HSTS eliminates HTTP-to-HTTPS redirects. Others constrain performance if misconfigured: an overly restrictive Content Security Policy can block critical resources. Understanding the performance implications of each header helps you configure strong security without unexpected side effects on page load speed.
Content Security Policy (CSP)
Content Security Policy controls which resources the browser is allowed to load for your page. It prevents cross-site scripting (XSS) by blocking inline scripts, unauthorized script sources, and other injection vectors.
Performance Impact
CSP itself adds no server-side latency — it's a response header. The performance impact is entirely client-side, determined by what the policy allows and blocks:
| CSP Directive | Performance Effect | Notes |
|---|---|---|
| script-src 'none' | Positive: no JS parsing/execution | Fastest option for static content sites |
| script-src 'self' | Neutral: loads from same origin only | Eliminates third-party script latency |
| script-src 'nonce-...' | Slight positive: prevents inline injection | Server must generate nonce per response |
| script-src 'unsafe-inline' | Neutral (but insecure) | Allows inline scripts — defeats CSP purpose |
| style-src 'self' | Neutral: prevents external CSS | Blocks CDN stylesheets if not whitelisted |
| img-src 'self' data: | Neutral to negative | Blocks external image CDNs if not listed |
| connect-src | Neutral: restricts XHR/Fetch | Can break analytics and third-party APIs |
| upgrade-insecure-requests | Positive: auto-upgrades HTTP → HTTPS | Eliminates mixed content redirect latency |
A strict CSP that blocks third-party scripts eliminates the latency and rendering impact of external JavaScript — often the largest contributor to slow Largest Contentful Paint and Interaction to Next Paint scores.
CSP Configuration for Performance
CSP Report-Only Mode
Deploy CSP in report-only mode (Content-Security-Policy-Report-Only) before enforcing. This logs violations without blocking resources, allowing you to identify which legitimate resources would be blocked. Report-only mode adds the same header parsing overhead as enforce mode but prevents accidental breakage during rollout.
Strict-Transport-Security (HSTS)
HSTS tells browsers to always use HTTPS for your domain, eliminating HTTP-to-HTTPS redirect latency on subsequent visits. Without HSTS, the first request to http://example.com returns a 301 redirect to https://example.com, adding 50-200ms before the page starts loading.
HSTS Performance Benefits
- Redirect elimination: After the first visit, the browser automatically upgrades HTTP to HTTPS without contacting the server. This saves one full round trip (50-200ms) on every navigation.
- HSTS preload: Adding your domain to the browser's built-in HSTS preload list eliminates the redirect even on the very first visit. The browser knows to use HTTPS before any network request.
- Reduced MITM surface: By eliminating the initial HTTP request, HSTS removes the window where a man-in-the-middle could intercept or modify the redirect.
HSTS preload provides a genuine performance improvement: it eliminates 50-200ms of redirect latency on every first visit. Submit your domain to hstspreload.org after verifying all subdomains support HTTPS.
Permissions-Policy (formerly Feature-Policy)
Permissions-Policy controls which browser features your page can use: camera, microphone, geolocation, autoplay, fullscreen, and others. By explicitly disabling unused features, you signal to the browser that certain APIs will never be called, and you prevent embedded iframes from accessing sensitive capabilities.
Performance Implications
Most Permissions-Policy directives have minimal performance impact since they only affect whether an API call succeeds or fails. However, a few directives have measurable effects:
- autoplay: Blocking autoplay prevents video and audio from starting automatically, reducing bandwidth consumption and CPU usage on page load.
- sync-xhr: Disabling synchronous XMLHttpRequest prevents scripts from blocking the main thread with synchronous network calls, improving responsiveness.
- document-domain: Disabling document.domain enables browser optimizations for cross-origin isolation.
X-Content-Type-Options
The X-Content-Type-Options: nosniff header prevents browsers from MIME-type sniffing: interpreting a response as a different content type than declared. This has a small performance benefit: the browser doesn't need to scan response content to guess its type and can immediately proceed with parsing based on the declared Content-Type.
More importantly, nosniff prevents a class of attacks where an attacker uploads a file with a misleading extension (e.g., a JavaScript file disguised as an image) that the browser might execute if it sniffs the content type.
Referrer-Policy
Referrer-Policy controls how much referrer information the browser sends with requests to other origins. The performance impact is negligible — the header only affects the Referer header size on outgoing requests — but the privacy and security benefits are significant.
Cross-Origin Headers
Cross-Origin-Opener-Policy (COOP)
COOP isolates your browsing context from cross-origin windows. Setting same-origin prevents cross-origin windows from holding references to your window, which enables browser optimizations and is required for high-resolution timing APIs (SharedArrayBuffer, performance.measureUserAgentSpecificMemory()).
Cross-Origin-Embedder-Policy (COEP)
COEP ensures all cross-origin resources loaded by your page explicitly grant permission to be loaded. Combined with COOP, it enables cross-origin isolation, which unlocks:
- SharedArrayBuffer for parallel computation in Web Workers
- High-resolution performance.now() timers (microsecond precision)
- performance.measureUserAgentSpecificMemory() for memory profiling
The tradeoff is that all cross-origin resources must include Cross-Origin-Resource-Policy: cross-origin headers, or be loaded via crossorigin attributes. This can require coordination with third-party resource providers.
Header Size and HTTP Overhead
Security headers add bytes to every HTTP response. A comprehensive set of security headers typically adds 500-1500 bytes to response headers. On HTTP/1.1, these headers are sent uncompressed with every response. On HTTP/2 and HTTP/3, HPACK header compression significantly reduces the overhead by referencing previously sent header values.
| Header | Typical Size | Compression (HTTP/2) |
|---|---|---|
| Content-Security-Policy | 200-800 bytes | ~90% reduction after first response |
| Strict-Transport-Security | ~60 bytes | Near-zero after first response |
| Permissions-Policy | 100-300 bytes | ~85% reduction |
| X-Content-Type-Options | ~30 bytes | Near-zero |
| Referrer-Policy | ~50 bytes | Near-zero |
| COOP + COEP | ~80 bytes | Near-zero |
| Total | 520-1320 bytes | <100 bytes after first response |
On HTTP/2 connections, the header overhead is negligible after the first response because the browser and server maintain a shared header table. CSP is the largest header and benefits most from HPACK compression. For HTTP/1.1 connections, consider moving long CSP policies to a <meta> tag in the HTML to avoid repeating the header on every resource response.
Security Header Audit Checklist
Use these tools to audit your security headers and their performance impact:
- securityheaders.com: Grades your site's security header configuration (A+ through F)
- CSP Evaluator (csp-evaluator.withgoogle.com): Checks your CSP for bypasses and weaknesses
- Lighthouse: Reports missing security headers and their performance implications
- Browser DevTools Network panel: Shows response header sizes and compression ratios
- WebPageTest: Measures the performance impact of security headers across different connection speeds