Best Practices Checklist
Lighthouse Best Practices refer to a set of recommendations and guidelines provided by the Lighthouse tool to help developers and website owners optimize their web pages for improved performance, accessibility, and user experience.
Make Your Page Secure
Use HTTPS
Ensure all resources are served securely over HTTPS.
Avoid Vulnerable JavaScript Libraries
Check for libraries with known security vulnerabilities.
Implement a Content Security Policy (CSP)
Ensure an effective Content Security Policy is in place to protect against cross-site scripting (XSS).
Ensure Safe External Links
Use rel="noopener" or rel="noreferrer" for cross-origin links to prevent security risks.
Avoid Mixed Content
Prevent loading both HTTPS and HTTP content, which compromises security.
Use Secure Cookies
Ensure cookies are sent with Secure and HttpOnly attributes for better security.
Disallow Insecure Requests
Ensure the site doesn’t make any insecure requests over HTTP.
Create a Good User Experience
Use Passive Event Listeners
Improve scrolling performance by using passive event listeners for certain events.
Prevent Console Errors
Ensure there are no JavaScript errors or warnings in the browser console.
Optimize Web Font Loading
Use efficient font loading techniques like font-display: swap to avoid invisible text.
Avoid Redirects
Minimize unnecessary redirects to reduce load times.
Avoid Geolocation Permission on Load
Do not request geolocation permissions immediately on page load to avoid disrupting users.
Avoid Notification Permission on Load
Do not request notification permissions as soon as the page loads to prevent intrusiveness.
Allow Pasting into Input Fields
Ensure users can paste into form fields without restrictions, improving accessibility.
Use Video Formats for Animated Content
Replace GIFs with video formats for animated content to improve performance.
Set a Viewport Meta Tag
Ensure the page has a proper viewport meta tag for responsive design.
Optimize Performance
Set an Efficient Cache Policy
Serve static resources (like images, JavaScript, and CSS) with long cache lifetimes.
Avoid Render-Blocking Resources
Ensure non-critical CSS and JavaScript do not block rendering of the page’s visible content.
Use Compression (gzip/Brotli)
Compress server responses to reduce data transfer size and improve load times.
Eliminate Render-Blocking Fonts
Optimize web fonts to minimize their impact on page load times.
Use Properly Sized Images
Ensure images are appropriately sized for different devices and resolutions.
Preload Key Requests
Preload critical resources like fonts or important images to speed up page rendering.
Avoid Excessive DOM Size
Keep the Document Object Model (DOM) small and manageable to reduce processing time.
Avoid Large JavaScript Libraries
Minimize the use of large JavaScript libraries that might negatively affect load times.
Minimize Main-Thread Work
Reduce JavaScript execution that blocks rendering or user interactions.
Use HTTP/2
Ensure HTTP/2 is implemented to enable multiplexing and faster loading of resources.
Optimize JavaScript Loading
Load JavaScript asynchronously or defer it to avoid blocking the main rendering process.
Avoid Deprecated Technologies
Avoid document.write()
Do not use document.write(), which harms performance and security.
Avoid Application Cache
Avoid using the deprecated Application Cache API.
Avoid Deprecated APIs
Ensure modern JavaScript APIs are used instead of deprecated ones.
Other Best Practices
Use a Valid Robots.txt
Ensure the robots.txt file is valid and properly configured.
Use rel="noopener" or rel="noreferrer" on Links
Add these attributes to prevent security vulnerabilities in external links.
Set a Valid rel=canonical
Ensure the page includes a valid canonical link to avoid duplicate content issues.
Avoid Plugins
Ensure the page avoids using outdated or unsupported browser plugins, like Flash.
Set a Meta Description
Provide a meta description to help search engines understand the page's content.
Use Descriptive Link Text
Ensure links have descriptive, accessible text for SEO and screen readers.
Set Valid Hreflang Attributes
Use valid hreflang attributes for language targeting and localization.
Ensure Mobile-Friendly Tap Targets
Make sure touch targets (e.g., buttons and links) are appropriately sized for mobile users.
Use Legible Font Sizes
Ensure font sizes are large enough to be easily readable on mobile devices.
Updated about 1 month ago