# Site Speed Optimization

> 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.

- Skill: `thisisahsaniqbal/site-speed-optimization` (Agent Skill)
- Install (CLI): `npx skillmds@latest add thisisahsaniqbal/site-speed-optimization`
- Raw SKILL.md: https://api.skillmd.com/api/skills/thisisahsaniqbal/site-speed-optimization/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- License: MIT
- Author: thisisAhsanIqbal (https://skillmd.com/u/thisisahsaniqbal)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/thisisahsaniqbal/site-speed-optimization

---


# 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](../core-web-vitals/SKILL.md) 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