Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
Google Lighthouse is an automated, open-source tool built into Chrome DevTools that audits your web app for performance, accessibility, best practices, SEO, and Progressive Web App features. It gives you a score (0-100) for each category and provides actionable recommendations to improve.
Measures how fast your page loads and becomes interactive. This is the most important category for user experience.
Key Metrics Measured:
Good: 90-100 • Needs Improvement: 50-89 • Poor: 0-49
Checks if your site is usable by people with disabilities. Important for inclusive design and legal compliance.
What it Checks:
Ensures your site follows web development best practices for security, modern standards, and reliability.
Audits Include:
Checks if your site is optimized for search engine rankings. Better SEO = more organic traffic.
Key Checks:
Checks if your site can work like a native app - installable, offline-capable, and fast.
PWA Requirements:
Step 1: Open your website in Google Chrome
Step 2: Press F12 or right-click → Inspect
Step 3: Click the Lighthouse tab
Step 4: Choose categories to audit (Performance, Accessibility, etc.)
Step 5: Select device (Mobile or Desktop)
Step 6: Click "Analyze page load"
Step 7: Wait 30-60 seconds for the report
URL: pagespeed.web.dev
Step 1: Visit PageSpeed Insights website
Step 2: Enter your website URL
Step 3: Click "Analyze"
Step 4: Get results for both Mobile and Desktop
Install: npm install -g lighthouse
Run: lighthouse https://example.com
Use case: Automate audits in your build pipeline
Your site is performing well! Minor optimizations only.
Moderate issues. Follow recommendations to improve.
Significant problems. Urgent optimizations needed.
Shows specific timing metrics with color-coded scores. Each metric shows the actual time (e.g., "2.4s") and whether it's good, needs improvement, or poor.
Focus on LCP and TBT first - they have the biggest impact on user experience.
Lists potential time savings. Each opportunity shows estimated time you could save (e.g., "Save 1.2s").
Prioritize opportunities with the largest time savings first.
Additional information about performance. Shows issues that don't have specific time savings but affect overall performance.
Review these after addressing main opportunities.
Things you're doing well! These are audits you passed.
Expand to see what you're doing right (and make sure you keep doing it).
Problem: Big JS bundles slow down page load
Fix: Code splitting, lazy loading, tree shaking, minification
Problem: Large image files take forever to load
Fix: Compress images, use WebP format, responsive images, lazy loading
Problem: Sending large text files uncompressed
Fix: Enable Gzip or Brotli compression on your server
Problem: CSS/JS files block page rendering
Fix: Inline critical CSS, defer non-critical JS, use async attributes
Problem: Browser can't cache resources effectively
Fix: Set proper Cache-Control headers on server
Problem: Analytics, ads, social widgets slow down site
Fix: Load scripts asynchronously, remove unnecessary ones, use facades
Performance, Accessibility, Best Practices, SEO, PWA
Each scored 0-100
F12 → Lighthouse tab → Analyze
Or use PageSpeed Insights online
Metrics, opportunities, diagnostics
Shows time savings per fix
Test after every major change
Track improvements over time