# Lighthouse Quick
> Core Web Vitals performance check (LCP, CLS, INP). Use when: "lighthouse", "pagespeed", "performance", "core web vitals", "speed".
- Skill: `claude-hangar/lighthouse-quick` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add claude-hangar/lighthouse-quick`
- Raw SKILL.md: https://api.skillmd.com/api/skills/claude-hangar/lighthouse-quick/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: claude-hangar (https://skillmd.com/u/claude-hangar)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/claude-hangar/lighthouse-quick
---
# /lighthouse-quick — Performance Quick Check
Static code analysis of the most common performance issues.
Not real Lighthouse — checks patterns in code that affect Core Web Vitals.
## Check Catalog
### LCP (Largest Contentful Paint)
| # | Check | What to look for |
|---|-------|-----------------|
| 1 | Hero image optimized? | `![]()
` in above-the-fold: `loading="eager"`, `fetchpriority="high"` |
| 2 | Preload for critical assets? | `` for hero image, critical fonts |
| 3 | Server response time? | No blocking redirects, no chain loading |
| 4 | Modern image formats? | WebP/AVIF instead of PNG/JPG (Astro: `` component) |
### CLS (Cumulative Layout Shift)
| # | Check | What to look for |
|---|-------|-----------------|
| 5 | Images with width/height? | All `![]()
` need explicit dimensions |
| 6 | Font display? | `font-display: swap` or `optional` |
| 7 | Dynamic content? | Ads, embeds, lazy content without placeholders |
| 8 | CSS animations? | `transform` instead of `top/left/width/height` |
### INP (Interaction to Next Paint)
| # | Check | What to look for |
|---|-------|-----------------|
| 9 | Heavy event handlers? | `click`/`input` handlers with >50ms work |
| 10 | Main thread blocking? | Synchronous loops, DOM manipulation in batches |
| 11 | Debouncing? | Input/scroll handlers without debounce/throttle |
### Assets & Bundle
| # | Check | What to look for |
|---|-------|-----------------|
| 12 | JS bundle size? | Single bundles >200KB (uncompressed) |
| 13 | Tree shaking? | Barrel imports (`import * from`), unused dependencies |
| 14 | CSS unused? | Large CSS files without PurgeCSS/Tailwind |
| 15 | Lazy loading? | Below-the-fold images without `loading="lazy"` |
| 16 | Compression? | Gzip/Brotli in server config or build |
### Fonts
| # | Check | What to look for |
|---|-------|-----------------|
| 17 | Self-hosted? | No Google Fonts CDN links (GDPR!) |
| 18 | Subset? | Font files >100KB? -> Recommend subsetting |
| 19 | Formats? | WOFF2 as primary format |
| 20 | Preload? | Critical fonts via `` |
| 21 | FOUT with view transitions? | Font flash during ClientRouter navigation (Astro) |
### View Transitions / ClientRouter
| # | Check | What to look for |
|---|-------|-----------------|
| 22 | FOUT during navigation? | Font flash with ClientRouter SPA navigation (Astro 5.18+/6 beta.16 fixed, check older versions) |
| 23 | fetchpriority on hero? | `` for LCP-critical images (Astro 6 beta.16+) |
## Procedure
1. Find layout/base template -> analyze ``
2. Search components/pages for `![]()
`, `