--- name: tech-leads-club/web-quality-audit source: https://app.decimal.ai/s/tech-leads-club-web-quality-audit@1/SKILL.md source_sha256: 758387f22c5e --- # 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)