Audit performance

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

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

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

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

---

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

---

Section 7 — Loading Strategy

7.1 Resource Hints

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:

# 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:

           
  

  
  
  

  
  
  

  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