šØ What is Lighthouse?
Lighthouse is an open-source tool by Google that audits your website for:
ā Performance
ā Accessibility
ā Best Practices
ā SEO
ā Progressive Web App (PWA) compliance
It helps developers improve the quality of web pages by running a series of automated tests and generating a report with scores and recommendations.
š How to Use Lighthouse
š§© 1. Using Chrome DevTools
Open your site in Google Chrome
Right-click ā Inspect or press
Ctrl+Shift+I
Go to the Lighthouse tab
Choose categories & device (Mobile/Desktop)
Click “Analyze page load”
š§Ŗ 2. Using PageSpeed Insights (Web-based)
Go to: https://pagespeed.web.dev
Enter your URL
Get Lighthouse-powered results (no Chrome needed)
š» 3. Command Line
npm install -g lighthouse
lighthouse https://example.com --view
š Lighthouse Report Breakdown
Section | What It Measures |
---|---|
ā” Performance | Load speed, First Contentful Paint, Largest Contentful Paint, Time to Interactive |
āæ Accessibility | Contrast, labels, keyboard navigation, screen reader compatibility |
š Best Practices | HTTPS, security issues, JS errors, image sizing |
š SEO | Meta tags, structured data, indexability |
š² PWA | Offline support, service workers, installability (for mobile apps) |
š„ Performance Metrics Explained
Metric | Target | Meaning |
---|---|---|
FCP (First Contentful Paint) | < 1.8s | Time until first visible element |
LCP (Largest Contentful Paint) | < 2.5s | Time until largest visual item loads |
CLS (Cumulative Layout Shift) | < 0.1 | Visual stability (avoiding layout jank) |
TTI (Time to Interactive) | < 3.8s | Time until app becomes responsive |
TBT (Total Blocking Time) | < 200ms | JS execution blocking user input |
š ļø How to Improve Lighthouse Scores
Category | Fixes |
---|---|
Performance | Minify CSS/JS, use lazy loading, compress images, reduce third-party scripts |
Accessibility | Use correct labels, proper color contrast, alt attributes |
Best Practices | Use HTTPS, avoid deprecated APIs, clean JS |
SEO | Add meta tags, robots.txt, sitemap.xml, alt attributes |
PWA | Use service workers, manifest.json, HTTPS |
ā Benefits of Using Lighthouse
Helps improve Core Web Vitals (important for Google ranking)
Improves user experience and load speed
Guides you to fix technical SEO issues
Assists in building accessible and inclusive websites
š§ Bonus Tip: Automate with CI
Use Lighthouse CI to run audits on every deployment:
npm install -g @lhci/cli
lhci autorun