Check Performance
Analyze performance-related HTML patterns on web pages.
Quick Start
cd /path/to/html-checker/scripts
bun src/check-performance.ts <URL>
CLI Options
| Option | Short | Default | Description |
|---|
--verbose | -v | false | Show all resources |
--json | -j | false | Output results as JSON |
Checks Performed
| Check | Impact | Description |
|---|
| Render-blocking CSS | High | CSS in head without media query |
| Render-blocking JS | High | Scripts without async/defer |
| No lazy loading | Medium | Images/iframes without loading="lazy" |
| Missing preconnect | Medium | Third-party domains without preconnect |
| Missing preload | Medium | Critical resources not preloaded |
| Large inline styles | Medium | Inline CSS over 14KB |
| Large inline scripts | Medium | Inline JS over 14KB |
| No image dimensions | Medium | Images without width/height (CLS) |
| Unoptimized images | Low | Images without srcset/sizes |
| No resource hints | Low | Missing dns-prefetch for external domains |
| Sync third-party | High | Synchronous third-party scripts |
Usage Examples
# Basic check
bun src/check-performance.ts https://example.com
# Verbose output
bun src/check-performance.ts https://example.com --verbose
# JSON output
bun src/check-performance.ts https://example.com --json
Output Example
Performance Analysis for https://example.com
Resource Summary:
Stylesheets: 5 (3 render-blocking)
Scripts: 12 (4 render-blocking)
Images: 25 (18 without lazy loading)
Iframes: 2 (2 without lazy loading)
Critical Issues:
[HIGH ] 3 render-blocking CSS files
- /styles/main.css
- /styles/vendor.css
- https://fonts.googleapis.com/css
[HIGH ] 4 render-blocking scripts
- /js/jquery.min.js
- /js/analytics.js
- /js/main.js
- https://third-party.com/widget.js
Optimization Opportunities:
[MEDIUM] 18 images could use lazy loading
[MEDIUM] Missing preconnect for 3 domains
- fonts.googleapis.com
- third-party.com
- cdn.example.com
[MEDIUM] 5 images missing width/height
Resource Hints Found:
[OK] preconnect: fonts.gstatic.com
[MISSING] preconnect: third-party.com
Score: 45/100
Recommendations:
- Add async/defer to non-critical scripts
- Use media="print" for non-critical CSS
- Add loading="lazy" to below-fold images
- Add preconnect for third-party domains
- Specify width/height on images to prevent CLS
Core Web Vitals Impact
LCP (Largest Contentful Paint)
- Preload critical resources
- Remove render-blocking resources
- Optimize images
CLS (Cumulative Layout Shift)
- Set image dimensions
- Reserve space for ads/embeds
- Avoid injecting content above fold
INP (Interaction to Next Paint)
- Defer non-critical JavaScript
- Break up long tasks
- Use async event handlers
Quick Fixes
<!-- Preconnect to third-party -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<!-- Defer non-critical CSS -->
<link rel="stylesheet" href="print.css" media="print">
<!-- Async/defer scripts -->
<script src="analytics.js" async></script>
<script src="main.js" defer></script>
<!-- Lazy load images -->
<img src="photo.jpg" loading="lazy" width="800" height="600">
Related Files
- Command:
plugins/html-checker/commands/check-performance.md
- Scripts:
plugins/html-checker/scripts/src/check-performance.ts
- Check Images:
plugins/html-checker/skills/check-images/
- Check Meta:
plugins/html-checker/skills/check-meta/
