audit-performance

---
name: "audit-performance"
description: "Performance is not an optimization — it is a baseline requirement. Every second of load time costs conversions. Every render-blocking resource delays the user's first interaction. Every unoptimized image wastes bandwidth and damages Core Web Vitals scores that directly affect SEO ranking."
license: "MIT"
---

# Performance & Loading Audit
## Static Websites on cPanel

Performance is not an optimization — it is a baseline requirement. Every second of load time costs conversions. Every render-blocking resource delays the user's first interaction. Every unoptimized image wastes bandwidth and damages Core Web Vitals scores that directly affect SEO ranking.

This audit covers everything that affects how fast the site loads and how smoothly it runs, verifiable by reading the code directly without external tools.

---

## Severity Levels

| Level | Description | Action |
|-------|-------------|--------|
| **Critical** | Blocks rendering or causes complete load failure | Fix before any other work |
| **High** | Fails Core Web Vitals, major bottleneck | Fix before launch |
| **Medium** | Performance opportunity with measurable impact | Fix within current sprint |
| **Low** | Minor optimization, marginal gain | Fix when convenient |

---

## Section 1 — Core Web Vitals

### 1.1 LCP — Largest Contentful Paint

Time to render the largest visible element. Measures perceived load speed.

| Rating | Value |
|--------|-------|
| Good | < 2.5s |
| Needs improvement | 2.5s – 4.0s |
| Poor | > 4.0s |

**What to check:**
- LCP image must NOT have `loading="lazy"` — critical mistake that delays the most important element
- LCP image must have `fetchpriority="high"`
- LCP image in WebP format
- No render-blocking CSS or JS delaying first paint
- Fonts use `font-display: swap`
- LCP image preloaded with `<link rel="preload">`
```html








```

### 1.2 CLS — Cumulative Layout Shift

Visual stability. Measures how much content moves unexpectedly during load.

| Rating | Value |
|--------|-------|
| Good | < 0.1 |
| Needs improvement | 0.1 – 0.25 |
| Poor | > 0.25 |

**What to check:**
- All images and videos have explicit `width` and `height` attributes
- `font-display: swap` strategy defined
- No content injected above existing content after load
- Animations use `transform` not `top`/`left`/`margin`/`width`/`height`

### 1.3 INP — Interaction to Next Paint

Responsiveness. Measures time from user interaction to next visual update.

| Rating | Value |
|--------|-------|
| Good | < 200ms |
| Needs improvement | 200ms – 500ms |
| Poor | > 500ms |

**What to check:**
- No JavaScript tasks longer than 50ms
- Event delegation instead of many individual listeners
- Scroll and resize handlers debounced
- No synchronous fetch or DOM manipulation blocking the main thread

---

## Section 2 — Page Weight Budget

Every page has a weight ceiling. Exceeding it degrades load times on mobile networks and low-end devices.

| Rating | Total Page Weight |
|--------|-------------------|
| Excellent | < 500 KB |
| Good | 500 KB – 1 MB |
| Acceptable | 1 MB – 2 MB |
| Poor | 2 MB – 5 MB |
| Critical | > 5 MB |

**What to check:**
- Calculate total weight of HTML + CSS + JS + images + fonts per page
- Flag any single resource > 500 KB
- Flag total JS payload > 300 KB (uncompressed)
- Flag total CSS payload > 150 KB (uncompressed)
- Flag pages with more than 50 HTTP requests
- Inline SVGs count toward HTML weight — flag any SVG block > 20 KB
```
<!-- Weight audit summary format -->
HTML:     _____ KB
CSS:      _____ KB (files: ___)
JS:       _____ KB (files: ___)
Images:   _____ KB (files: ___)
Fonts:    _____ KB (files: ___)
Other:    _____ KB
TOTAL:    _____ KB
Requests: ___
```

---

## Section 3 — Image Strategy

Images are typically 50–70% of total page weight. This section covers both performance and responsive delivery.

> **Full image strategy reference with code examples:** see `references/image-strategy.md`

**Summary of checks:**
- Format hierarchy: AVIF → WebP → JPEG/PNG via `<picture>` element
- Width descriptors (`w`) over density descriptors (`x`) — exception: fixed-size logos/icons
- Every `<img>` with `srcset` must have a `sizes` attribute matching actual layout widths
- LCP image: `loading="eager"` + `fetchpriority="high"`
- All below-fold images: `loading="lazy"`
- No `loading="lazy"` on above-fold images — High severity
- All images have explicit `width` and `height` attributes
- Images in fixed containers use `object-fit: cover` or `contain`
- Art direction (different crops per breakpoint) uses `<picture>` with `media` queries

| Image Position | `loading` | `fetchpriority` | Reason |
|----------------|-----------|-----------------|--------|
| Hero / LCP element | `eager` | `high` | Optimize LCP score |
| Above fold, not LCP | `eager` | omit | Load normally |
| Below fold | `lazy` | omit | Defer until near viewport |
| Off-screen carousel | `lazy` | omit | Defer until interaction |

---

## Section 4 — CSS Optimization

**What to check:**
- All stylesheets loaded in `<head>` before content
- No `@import` rules — each creates a blocking chain
- No unused CSS files or dead rules
- Minified for production
- Critical CSS inlined or preloaded if render-blocking
- `transition` specifies properties explicitly, not `all`
```html


  @import url('components.css');
  @import url('animations.css');






```

### 4.1 Critical CSS Preloading

Render-blocking stylesheets delay first paint. Non-critical CSS should be loaded asynchronously.
```html





```

**What to check:**
- Is the above-fold CSS inlined or preloaded?
- Are animation/component styles blocking first render when they could be deferred?
- Flag any stylesheet > 50 KB that is fully render-blocking

---

## Section 5 — JavaScript Optimization

**What to check:**
- All scripts use `defer` or placed at end of `<body>`
- Minified for production
- No unused JS files or functions
- No synchronous DOM queries in loops
- Event listeners cleaned up when elements are removed
```html


  




  

```

---

## Section 6 — Font Optimization

**What to check:**
- Google Fonts loaded with `&display=swap`
- `<link rel="preconnect">` for font domains
- Only font weights actually used in the design are loaded
- LCP-critical font preloaded
```html




```

---

## Section 7 — Loading Strategy

### 7.1 Resource Hints
```html

  
  
  

  
  

  
  

  
  

  
  

```

### 7.2 Lazy Loading

**What to check:**
- All below-fold images use `loading="lazy"`
- Iframes use `loading="lazy"`
- No `loading="lazy"` on above-fold elements

---

## Section 8 — cPanel Server Configuration

The `.htaccess` file at the project root controls compression and caching. Without it, every visit downloads uncompressed files with no browser caching.

**What to check — verify `.htaccess` exists and contains:**
```apache
# GZIP Compression
<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html text/css text/javascript
  AddOutputFilterByType DEFLATE application/javascript application/json
  AddOutputFilterByType DEFLATE image/svg+xml
</IfModule>

# Cache Expiration Headers
<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType text/css "access plus 1 month"
  ExpiresByType application/javascript "access plus 1 month"
  ExpiresByType image/webp "access plus 1 year"
  ExpiresByType image/avif "access plus 1 year"
  ExpiresByType image/jpeg "access plus 1 year"
  ExpiresByType image/png "access plus 1 year"
  ExpiresByType image/svg+xml "access plus 1 year"
  ExpiresByType font/woff2 "access plus 1 year"
</IfModule>

# HTTPS Enforcement
<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteCond %{HTTPS} off
  RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
</IfModule>
```

Flag if `.htaccess` is missing entirely — **High severity**. Flag if GZIP or cache headers are absent.

---

## Section 9 — HTML Document Structure

**What to check:**
```html



           
  

  
  
  

  
  
  

  Page Title — Brand

  
  

```

Flag if: `<!DOCTYPE html>` is missing, charset is not within first 1024 bytes, viewport meta is absent, `<title>` is empty, scripts lack `defer`.

---

## Section 10 — Animation Runtime Performance

> **Full animation, WebGL/Canvas, and inline SVG reference:** see `references/animation-webgl-svg.md`

### 10.1 CSS Animations — Summary

- Animations must use only `transform` and `opacity` — GPU-accelerated
- No animations on `width`, `height`, `margin`, `padding`, `top`, `left` — trigger layout recalculation
- `transition` specifies properties explicitly, not `all`
- JS animations use `requestAnimationFrame`

### 10.2 will-change — Summary

- `will-change` must NOT be declared in static CSS rules — **Medium severity**
- Apply via JS before animation starts and remove after
- No more than 5 elements with active `will-change` at any time

### 10.3 backdrop-filter — Summary

| Count on page | Impact |
|---------------|--------|
| 1–3 | Acceptable |
| 4–8 | Medium — monitor on low-end devices |
| 9+ | High — likely causes jank on mobile |

- Flag pages with > 8 active `backdrop-filter` elements
- Flag `backdrop-filter` on elements > 50% viewport — **High severity**
- Flag `backdrop-filter` combined with CSS animations — **High severity**
- Verify `@supports not (backdrop-filter: blur())` fallback exists

---

## Section 11 — WebGL & Canvas Performance (Conditional)

*If the project does not use WebGL or Canvas, skip this section and note "Not applicable — no WebGL/Canvas detected" in the audit output.*

> **Full WebGL/Canvas reference with code examples:** see `references/animation-webgl-svg.md`

**Summary of checks:**
- WebGL context: `{ antialias: false }` on mobile
- Canvas DPR capped at 2 via `Math.min(window.devicePixelRatio || 1, 2)`
- Animation loop pauses when off-screen (`IntersectionObserver`) — **High severity** if missing
- `webglcontextlost` event handled
- Canvas 2D: context cached, `Path2D` for complex paths, offscreen canvas for static elements

---

## Section 12 — Inline SVG Performance (Conditional)

*If the project does not use inline SVGs, skip this section and note "Not applicable — no inline SVGs detected" in the audit output.*

> **Full inline SVG reference:** see `references/animation-webgl-svg.md`

**Summary of checks:**

| SVG Block Size | Action |
|----------------|--------|
| < 5 KB | Fine to inline |
| 5–20 KB | Consider if it must be inline or can be `<img>` |
| 20–50 KB | Should be external `<img>` with `loading="lazy"` unless animated |
| > 50 KB | Must be external — **High severity** if inline |

- Flag any single inline SVG > 20 KB
- Flag pages with > 100 KB total inline SVG
- Static illustrations should be external `<img>`, not inline
- `viewBox` (case-sensitive) present on all SVGs
- SVG animations respect `prefers-reduced-motion`

---

## Section 13 — prefers-reduced-motion

Respecting motion preferences is both an accessibility requirement and a performance optimization.

**What to check:**
- `@media (prefers-reduced-motion: reduce)` rule exists in CSS covering all animations
- JS animations check `window.matchMedia('(prefers-reduced-motion: reduce)')` before starting
- WebGL/Canvas animations reduce complexity or pause entirely
- Scroll-driven animations fall back to static positioning
- Flag any animation that ignores `prefers-reduced-motion` — **Medium severity**

> **Full code examples:** see `references/animation-webgl-svg.md`

---

## Section 14 — Third-Party Resources

**What to check:**
- All external CDN links use HTTPS
- External scripts use `defer` or `async`
- No unused external libraries loaded
- Single font provider — no mixing Google Fonts with Adobe Fonts
- Analytics and tracking loaded after page is interactive

---

## Audit Output Format
```
Performance Audit — [Project Name]
Date: [Date]

Summary
- Critical issues: X
- High priority: X
- Medium priority: X
- Low priority: X
- Total page weight: X KB (target: < 1 MB)
- backdrop-filter count: X
- Inline SVG weight: X KB
- WebGL/Canvas contexts: X
- Overall performance assessment: [Good / Needs work / Critical problems]

Critical Issues
[Issue title]
- File: [filename and line]
- Severity: Critical
- Issue: [What is wrong and why it matters]
- Fix: [Specific correction with code example]

High Priority
[Same format]

Medium Priority
[Same format]

Low Priority
[Same format]

Quick Wins
[Issues fixable in under 5 minutes with high impact]

Recommended Fix Order
1. [First because...]
2. [Then...]
3. [Finally...]
```

> **Full quick-reference checklist:** see `references/checklist.md`