Chrome Lighthouse
Lighthouse is a free tool inside Chrome that checks a web page and gives it scores for speed, accessibility, good practices and SEO.
The Four Scores
| Category | It checks |
|---|---|
| Performance | How fast the page loads and becomes usable |
| Accessibility | Whether people with disabilities can use it (screen readers, contrast, keyboard) |
| Best Practices | Security and modern coding habits (HTTPS, no console errors) |
| SEO | Basic things search engines need (title, description, readable text) |
Each score is from 0 to 100:
- 90-100: green, good
- 50-89: orange, needs improvement
- 0-49: red, poor
Running Lighthouse
- Open the page in Chrome. An Incognito window is best, because extensions can affect the result.
- Press F12 to open DevTools and click the Lighthouse tab (it may be under the
>>menu). - Choose Mobile or Desktop, and tick the categories.
- Click Analyze page load and wait about 30 seconds.
You get a report like this:
Output
Performance 68 Accessibility 84 Best Practices 96 SEO 91
Google mainly ranks the mobile version of websites, and most visitors in Pakistan browse on phones. Always test Mobile first.
Performance Metrics
The Performance score comes from a few measurements:
| Metric | What it means | Good value |
|---|---|---|
| First Contentful Paint (FCP) | When the first text or image appears | Under 1.8 s |
| Largest Contentful Paint (LCP) | When the main content (often a big image) appears | Under 2.5 s |
| Total Blocking Time (TBT) | How long the page is frozen by JavaScript | Under 200 ms |
| Cumulative Layout Shift (CLS) | How much things jump around while loading | Under 0.1 |
| Speed Index | How quickly the page looks complete | Under 3.4 s |
Fixing Common Problems
Below the scores, Lighthouse lists Opportunities and Diagnostics with advice. Common ones:
- Properly size images / serve modern formats: resize big photos and use WebP or AVIF
- Defer offscreen images: add
loading="lazy"to images below the fold - Image elements do not have explicit width and height: set them to stop layout jumps
- Reduce unused JavaScript: remove plugins and libraries you do not need
- Text has low contrast: make text darker or the background lighter
For example, fixing an image tag:
Example
html
<!-- Before -->
<img src="shop-banner.png">
<!-- After -->
<img src="shop-banner.webp" alt="Eid sale at our Saddar shop"
width="1200" height="400" loading="lazy">This one change can help Performance (smaller file, lazy loading), Accessibility (alt text) and layout stability (width and height).
Accessibility and SEO Fixes
Example
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Fresh Bakes Karachi | Cakes and Biscuits</title>
<meta name="description" content="Fresh cakes, biscuits and bread baked daily in Karachi. Order online or visit our shop.">
</head>
<body>
<button aria-label="Open menu">☰</button>
</body>
</html>Output
SEO: passes "Document has a title", "Document has a meta description", "Has a viewport meta tag" Accessibility: passes "Buttons have an accessible name", "html element has a lang attribute"
Tips for Fair Results
- Run it 2 or 3 times; scores change a little each run
- Test the live site, not only
localhost, because real servers and caching matter - A score of 100 is not the goal; a fast, usable site for real visitors is
- PageSpeed Insights (a Google website) runs Lighthouse online and also shows data from real Chrome users
Exercise
Exercise
Which Lighthouse category checks things like image alt text, colour contrast and button labels?