# Web quality audit Comprehensive quality review based on Google Lighthouse audits. Covers Performance, Accessibility, SEO, and Best Practices across 150+ checks. ## 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) < 2.5s.** The largest visible element must render quickly. Optimize images, fonts, and server response time. * **INP (Interaction to Next Paint) < 200ms.** User interactions must feel instant. Reduce JavaScript execution time and break up long tasks. * **CLS (Cumulative Layout Shift) < 0.1.** Content must not jump around. Set explicit dimensions on images, embeds, and ads. **Resource Optimization:** * **Compress images.** Use WebP/AVIF with fallbacks. Serve correctly sized images via `srcset`. * **Minimize JavaScript.** Remove unused code. Use code splitting. Defer non-critical scripts. * **Optimize CSS.** Extract critical CSS. Remove unused styles. Avoid `@import`. * **Efficient fonts.** Use `font-display: swap`. Preload critical fonts. Subset to needed characters. **Loading Strategy:** * **Preconnect to origins.** Add `` 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: ```markdown ## 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)