| 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
