Web Quality Audit

Web quality audit

Comprehensive quality review based on Google Lighthouse audits. Covers Performance, Accessibility, SEO, and Best Practices across 150+ checks.

> Lighthouse v13 note (Oct 2025+). Lighthouse has migrated the Performance category from per-opportunity audits to Performance Insight Audits (announcement). Several individual audit names this skill historically referenced — First Meaningful Paint, No Document Write, Uses Passive Event Listeners, Uses Rel Preload — have been removed or merged. The underlying advice is unchanged and still applies; only the report format moved. The CLS-related audits ("layout shifts", "non-composited animations", "unsized images") are now consolidated into a single cls-culprits-insight, and image audits are merged into image-delivery-insight. Treat older Lighthouse JSON output as a superset, not a contradiction.

How it works

1. Analyze the provided code/project for quality issues
2. Categorize findings by severity (Critical, High, Medium, Low)
3. Provide specific, actionable recommendations
4. Include code examples for fixes

Audit categories

Performance (40% of typical issues)

Core Web Vitals — Must pass for good page experience:

• **LCP (Largest Contentful Paint) ` for third-party domains.
• Preload critical assets. LCP images, fonts, and above-fold CSS.
• Lazy load below-fold content. Images, iframes, and heavy components.
• Cache effectively. Long cache TTLs for static assets. Immutable caching for hashed files.

Accessibility (30% of typical issues)

Perceivable:

• Text alternatives. Every ` has meaningful alt text. Decorative images use alt=""`.
• Color contrast. Minimum 4.5:1 for normal text, 3:1 for large text (WCAG AA).
• Don't rely on color alone. Use icons, patterns, or text alongside color indicators.
• Captions and transcripts. Video has captions. Audio has transcripts.

Operable:

• Keyboard accessible. All functionality available via keyboard. No keyboard traps.
• Focus visible. Clear focus indicators on all interactive elements.
• Skip links. Provide "Skip to main content" for keyboard users.
• Sufficient time. Users can extend time limits. No auto-advancing content without controls.

Understandable:

• Page language. Set lang attribute on ``.
• Consistent navigation. Same navigation structure across pages.
• Error identification. Form errors clearly described and associated with fields.
• Labels and instructions. All form inputs have associated labels.

Robust:

• Valid HTML. No duplicate IDs. Properly nested elements.
• ARIA used correctly. Prefer native elements. ARIA roles match behavior.
• Name, role, value. Interactive elements have accessible names and correct roles.

SEO (15% of typical issues)

Crawlability:

• Valid robots.txt. Doesn't block important resources.
• XML sitemap. Lists all important pages. Submitted to Search Console.
• Canonical URLs. Prevent duplicate content issues.
• No noindex on important pages. Check meta robots and headers.

On-Page SEO:

• Unique title tags. 50-60 characters. Primary keyword included.
• Meta descriptions. 150-160 characters. Compelling and unique.
• Heading hierarchy. Single ``. Logical heading structure.
• Descriptive link text. Not "click here" or "read more".

Technical SEO:

• Mobile-friendly. Responsive design. Tap targets ≥ 48px.
• HTTPS. Secure connection required.
• Fast loading. Performance directly impacts ranking.
• Structured data. JSON-LD for rich snippets (Article, Product, FAQ, etc.).

Best practices (15% of typical issues)

Security:

• HTTPS everywhere. No mixed content. HSTS enabled.
• No vulnerable libraries. Keep dependencies updated.
• CSP headers. Content Security Policy to prevent XSS.
• No exposed source maps. In production builds.

Modern Standards:

• No deprecated APIs. Replace document.write, synchronous XHR, etc.
• Valid doctype. Use ``.
• Charset declared. ` as first element in `.
• No browser errors. Clean console. No CORS issues.

UX Patterns:

• No intrusive interstitials. Especially on mobile.
• Clear permission requests. Only ask when needed, with context.
• No misleading buttons. Buttons do what they say.

Severity levels

| Level | Description | Action | |-------|-------------|--------| | Critical | Security vulnerabilities, complete failures | Fix immediately | | High | Core Web Vitals failures, major a11y barriers | Fix before launch | | Medium | Performance opportunities, SEO improvements | Fix within sprint | | Low | Minor optimizations, code quality | Fix when convenient |

Audit output format

When performing an audit, structure findings as:

## Audit results

### Critical issues (X found)
- **[Category]** Issue description. File: `path/to/file.js:123`
  - **Impact:** Why this matters
  - **Fix:** Specific code change or recommendation

### High priority (X found)
...

### Summary
- Performance: X issues (Y critical)
- Accessibility: X issues (Y critical)
- SEO: X issues
- Best Practices: X issues

### Recommended priority
1. First fix this because...
2. Then address...
3. Finally optimize...

Quick checklist

Before every deploy

• [ ] Core Web Vitals passing
• [ ] No accessibility errors (axe/Lighthouse)
• [ ] No console errors
• [ ] HTTPS working
• [ ] Meta tags present

Weekly review

• [ ] Check Search Console for issues
• [ ] Review Core Web Vitals trends
• [ ] Update dependencies
• [ ] Test with screen reader

Monthly deep dive

• [ ] Full Lighthouse audit
• [ ] Performance profiling
• [ ] Accessibility audit with real users
• [ ] SEO keyword review

References

For detailed guidelines on specific areas:

• [Performance Optimization](../performance/SKILL.md)
• [Core Web Vitals](../core-web-vitals/SKILL.md)
• [Accessibility](../accessibility/SKILL.md)
• [SEO](../seo/SKILL.md)
• [Best Practices](../best-practices/SKILL.md)

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: addyosmani
• Source: addyosmani/web-quality-skills
• License: MIT

Install and usage instructions live in the source repository linked above.