best-practices

# Best practices Modern web development standards based on Lighthouse best practices audits. Covers security, browser compatibility, and code quality patterns. ## Security ### HTTPS everywhere **Enforce HTTPS:** ```html <!-- ❌ Mixed content --> <img src="http://example.com/image.jpg"> <script src="http://cdn.example.com/script.js"></script> <!-- ✅ HTTPS only --> <img src="https://example.com/image.jpg"> <script src="https://cdn.example.com/script.js"></script> <!-- ✅ Protocol-relative (will use page's protocol) --> <img src="//example.com/image.jpg"> ``` **HSTS Header:** ``` Strict-Transport-Security: max-age=31536000; includeSubDomains; preload ``` ### Content Security Policy (CSP) ```html <!-- Basic CSP via meta tag --> <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://trusted-cdn.com; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; connect-src 'self' https://api.example.com;"> <!-- Better: HTTP header --> ``` **CSP Header (recommended):** ``` Content-Security-Policy: default-src 'self'; script-src 'self' 'nonce-abc123' https://trusted.com; style-src 'self' 'nonce-abc123'; img-src 'self' data: https:; connect-src 'self' https://api.example.com; frame-ancestors 'self'; base-uri 'self'; form-action 'self'; ``` **Using nonces for inline scripts:** ```html <script nonce="abc123"> // This inline script is allowed </scr...