--- id: ssh2-web-quality-audit name: "web-quality-audit" url: https://skills.yangsir.net/skill/ssh2-web-quality-audit author: addyosmani domain: testing tags: ["performance-testing", "accessibility-testing", "seo-audit", "usability-testing", "web-standards"] install_count: 6900 rating: 4.50 (120 reviews) github: https://github.com/addyosmani/web-quality-skills --- # web-quality-audit > 提供全面的Web质量审计，涵盖性能、可访问性和SEO，确保网站高质量运行并符合行业标准。 **Stats**: 6,900 installs · 4.5/5 (120 reviews) ## Before / After 对比 ### 网站质量全面审计 | Metric | Before | After | Change | |---|---|---|---| | - | - | - | - | | - | - | - | - | | - | - | - | - | ## Readme # 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) --- Source: https://skills.yangsir.net/skill/ssh2-web-quality-audit Markdown mirror: https://skills.yangsir.net/api/skill/ssh2-web-quality-audit/markdown