Lighthouse Best Practices Score

Following web development best practices for security, reliability, and user experience.

What is the Best Practices Score?

The Lighthouse Best Practices score evaluates whether your page follows modern web development standards. It checks for security issues, deprecated APIs, browser errors, and other factors that affect reliability and user trust.

Best Practices Score Thresholds

90-100

Good

50-89

Needs Improvement

0-49

Poor

Best Practices Audit Categories

Security

HTTPS usage, secure cookies, cross-origin safety, Content Security Policy, and protection against common vulnerabilities.

Modern Web APIs

Avoiding deprecated APIs, using modern JavaScript features, and following current web standards.

Browser Errors

Console errors, JavaScript exceptions, and issues that indicate bugs or misconfigurations.

User Experience

Image aspect ratios, notification permissions, paste prevention, and other UX anti-patterns.

Security Best Practices

1. Use HTTPS

HTTPS encrypts data in transit, preventing eavesdropping and man-in-the-middle attacks. It's required for many modern web APIs.

Get a free SSL certificate from Let's Encrypt
Redirect all HTTP traffic to HTTPS
Enable HSTS (HTTP Strict Transport Security)
Ensure all resources are loaded over HTTPS

Example: HSTS Header

Strict-Transport-Security: max-age=31536000; includeSubDomains; preload

2. Avoid Mixed Content

Loading HTTP resources on HTTPS pages is insecure. Browsers may block these requests.

<!-- Bad: HTTP resource on HTTPS page -->
<img src="http://example.com/image.jpg">
<script src="http://example.com/script.js"></script>
<!-- Good: HTTPS or protocol-relative -->
<img src="https://example.com/image.jpg">
<script src="//example.com/script.js"></script>

3. Set Security Headers

HTTP security headers protect against common attacks like XSS and clickjacking.

Essential security headers

# Prevent XSS attacks
Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline'

# Prevent clickjacking
X-Frame-Options: DENY

# Prevent MIME type sniffing
X-Content-Type-Options: nosniff

# Control referrer information
Referrer-Policy: strict-origin-when-cross-origin

# Enable browser XSS filter
X-XSS-Protection: 1; mode=block

4. Secure Cross-Origin Resources

Use proper CORS headers and add crossorigin attributes to cross-origin resources.

<!-- Links to cross-origin resources -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<!-- Images from other origins -->
<img src="https://cdn.example.com/image.jpg" crossorigin="anonymous">

<!-- Scripts from CDNs with SRI -->
<script src="https://cdn.example.com/lib.js"
        integrity="sha384-..."
        crossorigin="anonymous"></script>

Avoiding Deprecated APIs

Deprecated APIs may stop working in future browser versions. Replace them with modern alternatives:

Deprecated	Modern Alternative
`document.write()`	DOM manipulation methods
`synchronous XHR`	`fetch()` or async XHR
`AppCache`	Service Workers
`mutation events`	`MutationObserver`
`unload` event	`pagehide` or `visibilitychange`

Browser Compatibility

1. Fix Console Errors

JavaScript errors indicate bugs that affect functionality. Check the console and fix all errors.

Check for undefined variables or functions
Handle network request failures
Fix type errors and null references
Address CORS errors

2. Use Feature Detection

Check if features exist before using them, rather than assuming browser capabilities.

// Check for feature support before using
if ('IntersectionObserver' in window) {
  const observer = new IntersectionObserver(callback);
} else {
  // Fallback for older browsers
}

// Check for API support
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js');
}

// CSS feature detection
@supports (display: grid) {
  .container { display: grid; }
}

3. Provide Fallbacks

Use polyfills or alternative approaches for browsers that don't support modern features.

<!-- Load polyfill only if needed -->
<script>
  if (!window.fetch) {
    document.write('<script src="fetch-polyfill.js"><\/script>');
  }
</script>

<!-- Modern image format with fallback -->
<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Description">
</picture>

User Experience Best Practices

Don't: Request Notification Permission on Load

Users haven't engaged yet and will likely deny. Wait until they take a relevant action.

Don't: Prevent Paste in Password Fields

This breaks password managers and encourages weak passwords.

Don't: Display Images with Incorrect Aspect Ratio

Stretched or squished images look unprofessional. Use object-fit to maintain aspect ratios.

Don't: Use Geolocation on Page Load

Request location only when the user initiates an action that requires it.

Quick Wins for Best Practices

Ensure your site uses HTTPS everywhere
Fix all JavaScript errors in the console
Add security headers (CSP, X-Frame-Options, etc.)
Remove deprecated API usage
Use rel="noopener" on external links

Security Header Checker Tools

securityheaders.com - Scan and grade your headers
Mozilla Observatory - Comprehensive security assessment
SSL Labs - Test your SSL/TLS configuration