---

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

Copycd /path/to/html-checker/scripts
bun src/check-performance.ts <URL>

CLI Options

Checks Performed

Usage Examples

Copy# 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

CopyPerformance 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

Copy<!-- 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/