site-speed-optimization

name	site-speed-optimization
description	Audits stylesheet loading, inline CSS volume, image alt text, image formats, and Next.js Image component usage. Use when checking page speed related to HTML structure. For render-blocking scripts, image dimensions, lazy loading, and resource hints, see the core-web-vitals skill.
license	MIT
metadata	{"author":"Muhammad Ahsan Iqbal (https://muhammadahsaniqbal.com)","linkedin":"https://www.linkedin.com/in/ahsan-iqbal-digitalmarketingexpert/","version":"1.0"}

Site Speed Optimization

Audit HTML-level factors that affect page load speed.

Note: Render-blocking scripts, image dimensions/lazy loading, preconnect hints, and font loading are handled by the core-web-vitals skill. Do not duplicate those checks here.

1. Total script count

Count all <script src="..."> elements:

• More than 10 external scripts → ⚠️ WARN "Consider bundling or removing unused scripts"
• 10 or fewer → ✅ PASS

2. Inline CSS volume

Measure total character count of all style="..." attributes + <style> element contents:

Condition	Status
Total > 5000 characters	⚠️ WARN "Move styles to external stylesheet for caching"
Total ≤ 5000	✅ PASS

3. Stylesheet loading

• Count <link rel="stylesheet"> elements
• If stylesheets > 3 → ⚠️ WARN "Consider combining CSS files"

4. Image alt text

Condition	Status
All images have alt attribute	✅ PASS
Any image missing alt	❌ FAIL "Critical for SEO and accessibility"

5. Image formats

• Images with .jpg, .jpeg, .png, .gif extensions → ⚠️ WARN "Consider WebP or AVIF for smaller file sizes"

6. Next.js Image component

• Images not using /_next/image src → ⚠️ WARN "Consider using Next.js <Image> component for automatic optimization"
• Skip this check if the site is not a Next.js project

Edge cases

• Inline <script> tags (no src) should be counted separately from external scripts — they contribute to page weight but not network requests
• <style> elements inside <noscript> blocks should be excluded from inline CSS volume
• Base64-encoded images (src="data:image/...") bypass network loading but increase HTML size — flag as ⚠️ WARN if total base64 content exceeds 10KB
• SVG images (<img src="*.svg">) do not need WebP/AVIF conversion — exclude from image format checks
• Next.js <Image> component detection: look for /_next/image in src or srcset attributes, or data-nimg attribute
• Dynamically injected scripts (via JS) are not visible in static HTML — note this limitation