check-performance

leobrival's avatarfrom leobrival

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.

⭐0stars🔀0forks📁View on GitHub🕐Updated Jan 2, 2026
[Developer Tools]

When & Why to Use This Skill

This Claude skill is a comprehensive web performance auditor that analyzes HTML patterns to identify speed bottlenecks and optimization gaps. It specializes in detecting render-blocking resources, missing lazy loading, and improper resource hints, providing actionable insights to improve Core Web Vitals (LCP, CLS, INP). By auditing resource loading sequences and asset optimization, it helps developers and SEO professionals significantly enhance page load speeds and user experience.

Use Cases

  • Performance Auditing: Automatically scan web pages to identify high-impact issues like render-blocking CSS/JS and unoptimized images.
  • Core Web Vitals Optimization: Pinpoint specific causes for poor LCP and CLS scores, such as missing image dimensions or lack of critical resource preloading.
  • SEO & Technical Health Checks: Ensure web pages adhere to modern performance standards to improve search engine rankings and reduce bounce rates.
  • Resource Loading Strategy: Verify the correct implementation of async/defer scripts, lazy loading for below-the-fold content, and preconnect hints for third-party domains.
namecheck-performance
descriptionAnalyze 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

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">
  • 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/