--- name: check-performance description: Analyze performance-related HTML issues on web pages. Use when users ask to check page performance, audit resource loading, verify lazy loading, check preload hints, or analyze render-blocking resources. Detects missing optimizations, large resources, render-blocking issues, and Core Web Vitals problems. --- # Check Performance Analyze performance-related HTML patterns on web pages. ## Quick Start ```bash cd \/path\/to\/html-checker\/scripts bun src\/check-performance.ts ``` ## 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 ```bash # 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 ```html