{"id":"web-quality-audit","name":"web-quality-audit","summary":"パフォーマンス、アクセシビリティ、SEO、ベストプラクティスを網羅した包括的なウェブ品質監査。「サイトの監査」「ウェブ品質のレビュー」「灯台監査を実施」「ページの品質チェック」「ウェブサイトの最適化」などを求められたときに使ってください。","body":"# Web quality audit\n\nComprehensive quality review based on Google Lighthouse audits. Covers Performance, Accessibility, SEO, and Best Practices across 150+ checks.\n\n> **Lighthouse v13 note (Oct 2025+).** Lighthouse has migrated the Performance category from per-opportunity audits to **Performance Insight Audits** ([announcement](https://developer.chrome.com/blog/moving-lighthouse-to-insights)). 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.\n\n## How it works\n\n1. Analyze the provided code/project for quality issues\n2. Categorize findings by severity (Critical, High, Medium, Low)\n3. Provide specific, actionable recommendations\n4. Include code examples for fixes\n\n## Audit categories\n\n### Performance (40% of typical issues)\n\n**Core Web Vitals** — Must pass for good page experience:\n* **LCP (Largest Contentful Paint) < 2.5s.** The largest visible element must render quickly. Optimize images, fonts, and server response time.\n* **INP (Interaction to Next Paint) < 200ms.** User interactions must feel instant. Reduce JavaScript execution time and break up long tasks.\n* **CLS (Cumulative Layout Shift) < 0.1.** Content must not jump around. Set explicit dimensions on images, embeds, and ads.\n\n**Resource Optimization:**\n* **Compress images.** Use WebP/AVIF with fallbacks. Serve correctly sized images via `srcset`.\n* **Minimize JavaScript.** Remove unused code. Use code splitting. Defer non-critical scripts.\n* **Optimize CSS.** Extract critical CSS. Remove unused styles. Avoid `@import`.\n* **Efficient fonts.** Use `font-display: swap`. Preload critical fonts. Subset to needed characters.\n\n**Loading Strategy:**\n* **Preconnect to origins.** Add `` for third-party domains.\n* **Preload critical assets.** LCP images, fonts, and above-fold CSS.\n* **Lazy load below-fold content.** Images, iframes, and heavy components.\n* **Cache effectively.** Long cache TTLs for static assets. Immutable caching for hashed files.\n\n### Accessibility (30% of typical issues)\n\n**Perceivable:**\n* **Text alternatives.** Every `` has meaningful `alt` text. Decorative images use `alt=\"\"`.\n* **Color contrast.** Minimum 4.5:1 for normal text, 3:1 for large text (WCAG AA).\n* **Don't rely on color alone.** Use icons, patterns, or text alongside color indicators.\n* **Captions and transcripts.** Video has captions. Audio has transcripts.\n\n**Operable:**\n* **Keyboard accessible.** All functionality available via keyboard. No keyboard traps.\n* **Focus visible.** Clear focus indicators on all interactive elements.\n* **Skip links.** Provide \"Skip to main content\" for keyboard users.\n* **Sufficient time.** Users can extend time limits. No auto-advancing content without controls.\n\n**Understandable:**\n* **Page language.** Set `lang` attribute on ``.\n* **Consistent navigation.** Same navigation structure across pages.\n* **Error identification.** Form errors clearly described and associated with fields.\n* **Labels and instructions.** All form inputs have associated labels.\n\n**Robust:**\n* **Valid HTML.** No duplicate IDs. Properly nested elements.\n* **ARIA used correctly.** Prefer native elements. ARIA roles match behavior.\n* **Name, role, value.** Interactive elements have accessible names and correct roles.\n\n### SEO (15% of typical issues)\n\n**Crawlability:**\n* **Valid robots.txt.** Doesn't block important resources.\n* **XML sitemap.** Lists all important pages. Submitted to Search Console.\n* **Canonical URLs.** Prevent duplicate content issues.\n* **No noindex on important pages.** Check meta robots and headers.\n\n**On-Page SEO:**\n* **Unique title tags.** 50-60 characters. Primary keyword included.\n* **Meta descriptions.** 150-160 characters. Compelling and unique.\n* **Heading hierarchy.** Single `

`. Logical heading structure.\n* Descriptive link text. Not \"click here\" or \"read more\".\n\nTechnical SEO:\n* Mobile-friendly. Responsive design. Tap targets ≥ 48px.\n* HTTPS. Secure connection required.\n* Fast loading. Performance directly impacts ranking.\n* Structured data. JSON-LD for rich snippets (Article, Product, FAQ, etc.).\n\n### Best practices (15% of typical issues)\n\nSecurity:\n* HTTPS everywhere. No mixed content. HSTS enabled.\n* No vulnerable libraries. Keep dependencies updated.\n* CSP headers. Content Security Policy to prevent XSS.\n* No exposed source maps. In production builds.\n\nModern Standards:\n* No deprecated APIs. Replace `document.write`, synchronous XHR, etc.\n* Valid doctype. Use ``.\n* Charset declared. `` as first element in ``.\n* No browser errors. Clean console. No CORS issues.\n\nUX Patterns:\n* No intrusive interstitials. Especially on mobile.\n* Clear permission requests. Only ask when needed, with context.\n* No misleading buttons. Buttons do what they say.\n\n## Severity levels\n\n| Level | Description | Action |\n|-------|-------------|--------|\n| Critical | Security vulnerabilities, complete failures | Fix immediately |\n| High | Core Web Vitals failures, major a11y barriers | Fix before launch |\n| Medium | Performance opportunities, SEO improvements | Fix within sprint |\n| Low | Minor optimizations, code quality | Fix when convenient |\n\n## Audit output format\n\nWhen performing an audit, structure findings as:\n\n```markdown\n## Audit results\n\n### Critical issues (X found)\n- [Category] Issue description. File: `path/to/file.js:123`\n - Impact: Why this matters\n - Fix: Specific code change or recommendation\n\n### High priority (X found)\n...\n\n### Summary\n- Performance: X issues (Y critical)\n- Accessibility: X issues (Y critical)\n- SEO: X issues\n- Best Practices: X issues\n\n### Recommended priority\n1. First fix this because...\n2. Then address...\n3. Finally optimize...\n```\n\n## Quick checklist\n\n### Before every deploy\n- [ ] Core Web Vitals passing\n- [ ] No accessibility errors (axe/Lighthouse)\n- [ ] No console errors\n- [ ] HTTPS working\n- [ ] Meta tags present\n\n### Weekly review\n- [ ] Check Search Console for issues\n- [ ] Review Core Web Vitals trends\n- [ ] Update dependencies\n- [ ] Test with screen reader\n\n### Monthly deep dive\n- [ ] Full Lighthouse audit\n- [ ] Performance profiling\n- [ ] Accessibility audit with real users\n- [ ] SEO keyword review\n\n## References\n\nFor detailed guidelines on specific areas:\n- [Performance Optimization](../performance/SKILL.md)\n- [Core Web Vitals](../core-web-vitals/SKILL.md)\n- [Accessibility](../accessibility/SKILL.md)\n- [SEO](../seo/SKILL.md)\n- [Best Practices](../best-practices/SKILL.md)","author":"@addyosmani","ownerProfile":null,"authorContacts":null,"sourceUrl":"https://github.com/addyosmani/web-quality-skills/tree/main/skills/web-quality-audit","license":"MIT","category":"writing","lang":"en","tokens":1663,"stars":0,"calls30d":1,"claimed":false,"visibility":"public","origin":"crawler","version":"0.1.0","createdAt":"2026-08-22","updatedAt":"2026-08-22","files":[{"path":"scripts/analyze.sh","size":3864,"sha256":"b1b28663af412f746baf5008618e3ae798e322b10ff5ab7ae1830826a6d8e4e2"}],"requires":{"mcp":[],"tools":[]},"safety":{"flags":[{"code":"net.endpoints","kind":"exfiltration","excerpt":"developer.chrome.com","message":"bundled scripts reach 1 external host(s)","severity":"warn"}],"scannedAt":"2026-08-22","hasScripts":true,"networkEndpoints":["developer.chrome.com"]}}