What colors are available?

Our widgets come in blue, red, and green.

What is the warranty?

All widgets include a 2-year warranty.

Item

Item

Click ``` ### Semantic HTML ```html

Headline

``` ### Image aspect ratios ```html

``` --- ## Permissions & privacy ### Request permissions properly ```javascript // ❌ Request on page load (bad UX, often denied) navigator.geolocation.getCurrentPosition(success, error); // ✅ Request in context, after user action findNearbyButton.addEventListener('click', async () => { // Explain why you need it if (await showPermissionExplanation()) { navigator.geolocation.getCurrentPosition(success, error); } }); ``` ### Permissions policy ```html ``` --- ## Audit checklist ### Security (critical) - [ ] HTTPS enabled, no mixed content - [ ] No vulnerable dependencies (`npm audit`) - [ ] CSP headers configured (with `frame-ancestors`, `base-uri`, `form-action`) - [ ] `require-trusted-types-for 'script'` enforced (or report-only during rollout) - [ ] Third-party ` ``` `eagerness` settings (cheapest → most aggressive): `conservative` (start on pointerdown), `moderate` (start after ~200ms hover), `eager` (start as soon as the link is in the viewport), `immediate` (start on page load). Start with `moderate` — it captures most navigations without prerendering pages users never visit. Caveats: - **Bandwidth/CPU cost.** Each prerender is roughly a full page load. Scope `where` carefully (`href_matches` patterns, exclude logout/checkout) and avoid `immediate` outside small sites. - **Side effects fire early.** Analytics, ads, and any code that runs on load will fire when the prerender starts, not when the user navigates. Gate side effects on the [`prerenderingchange` event](https://developer.chrome.com/docs/web-platform/prerender-pages#detect_when_a_page_is_prerendered_or_used_for_a_full_navigation) or `document.prerendering`. - **Chromium-only.** Safari and Firefox ignore the script — it's a progressive enhancement, never a regression. ### LCP optimization checklist ```markdown - [ ] TTFB < 800ms (use CDN, edge caching) - [ ] LCP image preloaded with fetchpriority="high" - [ ] LCP image optimized (WebP/AVIF, correct size) - [ ] Critical CSS inlined (< 14KB) - [ ] No render-blocking JavaScript in - [ ] Fonts don't block text rendering (font-display: swap) - [ ] LCP element in initial HTML (not JS-rendered) - [ ] Speculation Rules added for likely-next navigations (moderate eagerness) ``` ### LCP element identification ```javascript // Find your LCP element new PerformanceObserver((list) => { const entries = list.getEntries(); const lastEntry = entries[entries.length - 1]; console.log('LCP element:', lastEntry.element); console.log('LCP time:', lastEntry.startTime); }).observe({ type: 'largest-contentful-paint', buffered: true }); ``` --- ## INP: Interaction to Next Paint INP measures responsiveness across ALL interactions (clicks, taps, key presses) during a page visit. It reports the worst interaction (at 98th percentile for high-traffic pages). ### INP breakdown Total INP = **Input Delay** + **Processing Time** + **Presentation Delay** | Phase | Target | Optimization | |-------|--------|--------------| | Input Delay | < 50ms | Reduce main thread blocking | | Processing | < 100ms | Optimize event handlers | | Presentation | < 50ms | Minimize rendering work | ### Common INP issues **1. Long tasks blocking main thread** ```javascript // ❌ Long synchronous task function processLargeArray(items) { items.forEach(item => expensiveOperation(item)); } // ✅ Break into chunks and yield to the scheduler. scheduler.yield() is the // recommended modern API — its continuation is queued at a boosted // priority so the rest of your work resumes ahead of unrelated tasks, // while still letting the browser handle pending input first. async function processLargeArray(items) { const CHUNK_SIZE = 100; for (let i = 0; i < items.length; i += CHUNK_SIZE) { items.slice(i, i + CHUNK_SIZE).forEach(expensiveOperation); if ('scheduler' in window && 'yield' in scheduler) { await scheduler.yield(); } else { // Fallback for browsers without scheduler.yield (Safari, older Firefox). // setTimeout(0) yields but loses priority — your continuation may run // after unrelated tasks the browser picked up in between. await new Promise(r => setTimeout(r, 0)); } } } ``` **2. Heavy event handlers** ```javascript // ❌ All work in handler button.addEventListener('click', () => { // Heavy computation const result = calculateComplexThing(); // DOM updates updateUI(result); // Analytics trackEvent('click'); }); // ✅ Prioritize visual feedback, then yield before doing the heavy work button.addEventListener('click', async () => { // 1. Immediate visual feedback (cheap DOM update) button.classList.add('loading'); // 2. Yield so the browser can paint the loading state before we block if ('scheduler' in window && 'yield' in scheduler) { await scheduler.yield(); } // 3. Now do the heavy work — the user already saw the click register const result = calculateComplexThing(); updateUI(result); // 4. Lowest-priority work last, when the main thread is idle if ('requestIdleCallback' in window) { requestIdleCallback(() => trackEvent('click')); } else { setTimeout(() => trackEvent('click'), 0); } }); ``` **3. Third-party scripts** ```javascript // ❌ Eagerly loaded, blocks interactions // ✅ Lazy loaded on interaction or visibility const loadWidget = () => { import('https://heavy-widget.com/widget.js') .then(widget => widget.init()); }; button.addEventListener('click', loadWidget, { once: true }); ``` **4. Excessive re-renders (React/Vue)** ```javascript // ❌ Re-renders entire tree function App() { const [count, setCount] = useState(0); return (

{/* Re-renders on every count change */}

); } // ✅ Memoized expensive components const MemoizedExpensive = React.memo(ExpensiveComponent); function App() { const [count, setCount] = useState(0); return (

); } ``` ### INP optimization checklist ```markdown - [ ] No tasks > 50ms on main thread - [ ] Event handlers complete quickly (< 100ms) - [ ] Visual feedback provided immediately - [ ] Heavy work deferred with requestIdleCallback - [ ] Third-party scripts don't block interactions - [ ] Debounced input handlers where appropriate - [ ] Web Workers for CPU-intensive operations ``` ### INP debugging ```javascript // Identify slow interactions. durationThreshold: 40 matches what the // web-vitals library uses — 16 (one frame) fires on nearly every interaction // and drowns the console; 40 surfaces interactions that are starting to feel // sluggish without spamming. new PerformanceObserver((list) => { for (const entry of list.getEntries()) { if (entry.duration > 200) { console.warn('Slow interaction:', { type: entry.name, duration: entry.duration, processingStart: entry.processingStart, processingEnd: entry.processingEnd, target: entry.target }); } } }).observe({ type: 'event', buffered: true, durationThreshold: 40 }); ``` For field debugging across real users, prefer the `web-vitals/attribution` build of the [web-vitals library](https://github.com/GoogleChrome/web-vitals) — `onINP()` from that build attaches a `LoAF` (Long Animation Frame) breakdown identifying the longest script and the input/processing/presentation phase that ate the budget. --- ## CLS: Cumulative Layout Shift CLS measures unexpected layout shifts. A shift occurs when a visible element changes position between frames without user interaction. **CLS Formula:** `impact fraction × distance fraction` ### Common CLS causes **1. Images without dimensions** ```html

``` **2. Ads, embeds, and iframes** ```html

``` **3. Dynamically injected content** ```javascript // ❌ Inserts content above viewport notifications.prepend(newNotification); // ✅ Insert below viewport or use transform const insertBelow = viewport.bottom < newNotification.top; if (insertBelow) { notifications.prepend(newNotification); } else { // Animate in without shifting newNotification.style.transform = 'translateY(-100%)'; notifications.prepend(newNotification); requestAnimationFrame(() => { newNotification.style.transform = ''; }); } ``` **4. Web fonts causing FOUT** ```css /* ❌ Font swap shifts text */ @font-face { font-family: 'Custom'; src: url('custom.woff2') format('woff2'); } /* ✅ Optional font (no shift if slow) */ @font-face { font-family: 'Custom'; src: url('custom.woff2') format('woff2'); font-display: optional; } /* ✅ Or match fallback metrics */ @font-face { font-family: 'Custom'; src: url('custom.woff2') format('woff2'); font-display: swap; size-adjust: 105%; /* Match fallback size */ ascent-override: 95%; descent-override: 20%; } ``` **5. Animations triggering layout** ```css /* ❌ Animates layout properties */ .animate { transition: height 0.3s, width 0.3s; } /* ✅ Use transform instead */ .animate { transition: transform 0.3s; } .animate.expanded { transform: scale(1.2); } ``` ### CLS optimization checklist ```markdown - [ ] All images have width/height or aspect-ratio - [ ] All videos/embeds have reserved space - [ ] Ads have min-height containers - [ ] Fonts use font-display: optional or matched metrics - [ ] Dynamic content inserted below viewport - [ ] Animations use transform/opacity only - [ ] No content injected above existing content ``` ### CLS debugging ```javascript // Track layout shifts new PerformanceObserver((list) => { for (const entry of list.getEntries()) { if (!entry.hadRecentInput) { console.log('Layout shift:', entry.value); entry.sources?.forEach(source => { console.log(' Shifted element:', source.node); console.log(' Previous rect:', source.previousRect); console.log(' Current rect:', source.currentRect); }); } } }).observe({ type: 'layout-shift', buffered: true }); ``` --- ## Measurement tools ### Lab testing - **Chrome DevTools** → Performance panel, Lighthouse - **WebPageTest** → Detailed waterfall, filmstrip - **Lighthouse CLI** → `npx lighthouse ` ### Field data (real users) - **Chrome User Experience Report (CrUX)** → BigQuery or API - **Search Console** → Core Web Vitals report - **web-vitals library** → Send to your analytics ```javascript import {onLCP, onINP, onCLS} from 'web-vitals'; function sendToAnalytics({name, value, rating}) { gtag('event', name, { event_category: 'Web Vitals', value: Math.round(name === 'CLS' ? value * 1000 : value), event_label: rating }); } onLCP(sendToAnalytics); onINP(sendToAnalytics); onCLS(sendToAnalytics); ``` --- ## Framework quick fixes ### Next.js ```jsx // LCP: Use next/image with priority import Image from 'next/image'; Hero

// INP: Use dynamic imports const HeavyComponent = dynamic(() => import('./Heavy'), { ssr: false }); // CLS: Image component handles dimensions automatically ``` ### React ```jsx // LCP: Preload in head // INP: Memoize and useTransition const [isPending, startTransition] = useTransition(); startTransition(() => setExpensiveState(newValue)); // CLS: Always specify dimensions in img tags ``` ### Vue/Nuxt ```vue ``` ## References - [web.dev LCP](https://web.dev/articles/lcp) - [web.dev INP](https://web.dev/articles/inp) - [web.dev CLS](https://web.dev/articles/cls) - [Performance skill](../performance/SKILL.md) --- ## 4. performance - **Source:** https://github.com/addyosmani/web-quality-skills/blob/main/skills/performance/SKILL.md - **Raw:** https://raw.githubusercontent.com/addyosmani/web-quality-skills/main/skills/performance/SKILL.md - **Markdown:** https://skillsdocs.com/addyosmani/web-quality-skills/performance.md - **Licence:** MIT — https://spdx.org/licenses/MIT.html --- name: performance description: Optimize web performance for faster loading and better user experience. Use when asked to "speed up my site", "optimize performance", "reduce load time", "fix slow loading", "improve page speed", or "performance audit". license: MIT metadata: author: web-quality-skills version: "1.0" --- # Performance optimization Deep performance optimization based on Lighthouse performance audits. Focuses on loading speed, runtime efficiency, and resource optimization. ## How it works 1. Identify performance bottlenecks in code and assets 2. Prioritize by impact on Core Web Vitals 3. Provide specific optimizations with code examples 4. Measure improvement with before/after metrics ## Performance budget | Resource | Budget | Rationale | |----------|--------|-----------| | Total page weight | < 1.5 MB | 3G loads in ~4s | | JavaScript (compressed) | < 300 KB | Parsing + execution time | | CSS (compressed) | < 100 KB | Render blocking | | Images (above-fold) | < 500 KB | LCP impact | | Fonts | < 100 KB | FOIT/FOUT prevention | | Third-party | < 200 KB | Uncontrolled latency | ## Critical rendering path ### Server response * **TTFB < 800ms.** Time to First Byte should be fast. Use CDN, caching, and efficient backends. * **Enable compression.** Gzip or Brotli for text assets. Brotli preferred (15-20% smaller). * **HTTP/2 or HTTP/3.** Multiplexing reduces connection overhead. * **Edge caching.** Cache HTML at CDN edge when possible. * **Send Early Hints (HTTP 103) for slow origins.** When the origin needs hundreds of milliseconds to assemble the final response, return a `103 Early Hints` with `Link: ; rel=preload; as=image` (and similar for critical CSS/fonts) so the browser starts fetching before the `200 OK` lands. Cloudflare reports [20–30% LCP improvements](https://blog.cloudflare.com/early-hints-performance/) on image-heavy pages. Requires HTTP/2+ and is supported by Chromium-based browsers; other browsers ignore the 103 and fall through to the 200 — safe to enable. CDNs (Cloudflare, Fastly, Akamai) can synthesize 103s automatically from prior responses; on your own origin, emit them from the same handler that issues the 200. ### Resource loading **Preconnect to required origins:** ```html ``` **Preload critical resources:** ```html ``` **Prerender likely-next navigations** with the [Speculation Rules API](https://developer.chrome.com/docs/web-platform/prerender-pages): ```html ``` `moderate` triggers after a ~200ms hover — usually intent-correlated, rarely wasted. See [core-web-vitals → LCP](../core-web-vitals/SKILL.md#lcp-largest-contentful-paint) for the full discussion of eagerness tradeoffs and the `prerenderingchange` gating you'll need for analytics. **Defer non-critical CSS:** ```html ``` ### JavaScript optimization **Defer non-essential scripts:** ```html ``` **Code splitting patterns:** ```javascript // Route-based splitting const Dashboard = lazy(() => import('./Dashboard')); // Component-based splitting const HeavyChart = lazy(() => import('./HeavyChart')); // Feature-based splitting if (user.isPremium) { const PremiumFeatures = await import('./PremiumFeatures'); } ``` **Tree shaking best practices:** ```javascript // ❌ Imports entire library import _ from 'lodash'; _.debounce(fn, 300); // ✅ Imports only what's needed import debounce from 'lodash/debounce'; debounce(fn, 300); ``` ## Image optimization ### Format selection | Format | Use case | Browser support | |--------|----------|-----------------| | AVIF | Photos, best compression | 92%+ | | WebP | Photos, good fallback | 97%+ | | PNG | Graphics with transparency | Universal | | SVG | Icons, logos, illustrations | Universal | ### Responsive images ```html

``` ### LCP image priority ```html Hero

``` ## Font optimization ### Loading strategy ```css /* System font stack as fallback */ body { font-family: 'Custom Font', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } /* Prevent invisible text */ @font-face { font-family: 'Custom Font'; src: url('/fonts/custom.woff2') format('woff2'); font-display: swap; /* or optional for non-critical */ font-weight: 400; font-style: normal; unicode-range: U+0000-00FF; /* Subset to Latin */ } ``` ### Preloading critical fonts ```html ``` ### Variable fonts ```css /* One file instead of multiple weights */ @font-face { font-family: 'Inter'; src: url('/fonts/Inter-Variable.woff2') format('woff2-variations'); font-weight: 100 900; font-display: swap; } ``` ## Caching strategy ### Cache-Control headers ``` # HTML (short or no cache) Cache-Control: no-cache, must-revalidate # Static assets with hash (immutable) Cache-Control: public, max-age=31536000, immutable # Static assets without hash Cache-Control: public, max-age=86400, stale-while-revalidate=604800 # API responses Cache-Control: private, max-age=0, must-revalidate ``` ### Service worker caching ```javascript // Cache-first for static assets self.addEventListener('fetch', (event) => { if (event.request.destination === 'image' || event.request.destination === 'style' || event.request.destination === 'script') { event.respondWith( caches.match(event.request).then((cached) => { return cached || fetch(event.request).then((response) => { const clone = response.clone(); caches.open('static-v1').then((cache) => cache.put(event.request, clone)); return response; }); }) ); } }); ``` ## Runtime performance ### Avoid layout thrashing ```javascript // ❌ Forces multiple reflows elements.forEach(el => { const height = el.offsetHeight; // Read el.style.height = height + 10 + 'px'; // Write }); // ✅ Batch reads, then batch writes const heights = elements.map(el => el.offsetHeight); // All reads elements.forEach((el, i) => { el.style.height = heights[i] + 10 + 'px'; // All writes }); ``` ### Debounce expensive operations ```javascript function debounce(fn, delay) { let timeout; return (...args) => { clearTimeout(timeout); timeout = setTimeout(() => fn(...args), delay); }; } // Debounce scroll/resize handlers window.addEventListener('scroll', debounce(handleScroll, 100)); ``` ### Use requestAnimationFrame ```javascript // ❌ May cause jank setInterval(animate, 16); // ✅ Synced with display refresh function animate() { // Animation logic requestAnimationFrame(animate); } requestAnimationFrame(animate); ``` ### Virtualize long lists ```javascript // For lists > 100 items, render only visible items // Use libraries like react-window, vue-virtual-scroller, or native CSS: .virtual-list { content-visibility: auto; contain-intrinsic-size: 0 50px; /* Estimated item height */ } ``` ### Smooth navigations with View Transitions The [View Transitions API](https://developer.chrome.com/docs/web-platform/view-transitions) lets the browser cross-fade (or custom-animate) between two DOM states using a single GPU-composited snapshot — no double-render, no layout thrash, and the snapshot doesn't count toward CLS. **Same-document (SPA-style) — Baseline 2026:** ```javascript // Wrap the DOM mutation that swaps the view function navigate(newView) { if (!document.startViewTransition) return swapDOM(newView); document.startViewTransition(() => swapDOM(newView)); } ``` **Cross-document (MPA-style) — Chromium-stable, progressive enhancement elsewhere:** ```css /* On both source and destination pages */ @view-transition { navigation: auto; } ``` That's the entire integration — same-origin navigations now fade automatically. To opt specific elements into shared-element transitions (e.g. a thumbnail expanding into a hero), give them a matching `view-transition-name`: ```css .product-thumb[data-id="42"], .product-hero { view-transition-name: product-42; } ``` Pair this with Speculation Rules (above) for instant + animated navigations. ## Third-party scripts ### Load strategies ```javascript // ❌ Blocks main thread // ✅ Async loading // ✅ Delay until interaction ``` ### Facade pattern ```html

``` ## Measurement ### Key metrics | Metric | Target | Tool | |--------|--------|------| | LCP | < 2.5s | Lighthouse, CrUX | | FCP | < 1.8s | Lighthouse | | Speed Index | < 3.4s | Lighthouse | | TBT | < 200ms | Lighthouse | | TTI | < 3.8s | Lighthouse | ### Testing commands ```bash # Lighthouse CLI npx lighthouse https://example.com --output html --output-path report.html # Web Vitals library import {onLCP, onINP, onCLS} from 'web-vitals'; onLCP(console.log); onINP(console.log); onCLS(console.log); ``` ## References For Core Web Vitals specific optimizations, see [Core Web Vitals](../core-web-vitals/SKILL.md). --- ## 5. seo - **Source:** https://github.com/addyosmani/web-quality-skills/blob/main/skills/seo/SKILL.md - **Raw:** https://raw.githubusercontent.com/addyosmani/web-quality-skills/main/skills/seo/SKILL.md - **Markdown:** https://skillsdocs.com/addyosmani/web-quality-skills/seo.md - **Licence:** MIT — https://spdx.org/licenses/MIT.html --- name: seo description: Optimize for search engine visibility and ranking. Use when asked to "improve SEO", "optimize for search", "fix meta tags", "add structured data", "sitemap optimization", or "search engine optimization". license: MIT metadata: author: web-quality-skills version: "1.0" --- # SEO optimization Search engine optimization based on Lighthouse SEO audits and Google Search guidelines. Focus on technical SEO, on-page optimization, and structured data. ## SEO fundamentals Search ranking factors (approximate influence): | Factor | Influence | This Skill | |--------|-----------|------------| | Content quality & relevance | ~40% | Partial (structure) | | Backlinks & authority | ~25% | ✗ | | Technical SEO | ~15% | ✓ | | Page experience (Core Web Vitals) | ~10% | See [Core Web Vitals](../core-web-vitals/SKILL.md) | | On-page SEO | ~10% | ✓ | --- ## Technical SEO ### Crawlability **robots.txt:** ```text # /robots.txt User-agent: * Allow: / # Block admin/private areas Disallow: /admin/ Disallow: /api/ Disallow: /private/ # Don't block resources needed for rendering # ❌ Disallow: /static/ Sitemap: https://example.com/sitemap.xml ``` **Meta robots:** ```html ``` **Canonical URLs:** ```html ``` ### XML sitemap ```xml https://example.com/ 2024-01-15 daily 1.0 https://example.com/products 2024-01-14 weekly 0.8 ``` **Sitemap best practices:** - Maximum 50,000 URLs or 50MB per sitemap - Use sitemap index for larger sites - Include only canonical, indexable URLs - Update `lastmod` when content changes - Submit to Google Search Console ### URL structure ``` ✅ Good URLs: https://example.com/products/blue-widget https://example.com/blog/how-to-use-widgets ❌ Poor URLs: https://example.com/p?id=12345 https://example.com/products/item/category/subcategory/blue-widget-2024-sale-discount ``` **URL guidelines:** - Use hyphens, not underscores - Lowercase only - Keep short (< 75 characters) - Include target keywords naturally - Avoid parameters when possible - Use HTTPS always ### HTTPS & security ```html

``` **Security headers for SEO trust signals:** ``` Strict-Transport-Security: max-age=31536000; includeSubDomains X-Content-Type-Options: nosniff X-Frame-Options: DENY ``` --- ## On-page SEO ### Title tags ```html Page Home Blue Widgets for Sale | Premium Quality | Example Store ``` **Title tag guidelines:** - 50-60 characters (Google truncates ~60) - Primary keyword near the beginning - Unique for every page - Brand name at end (unless homepage) - Action-oriented when appropriate ### Meta descriptions ```html ``` **Meta description guidelines:** - 150-160 characters - Include primary keyword naturally - Compelling call-to-action - Unique for every page - Matches page content ### Heading structure ```html

Welcome to Our Store

Products

Contact Us

Blue Widgets - Premium Quality

Product Features

Durability

Design

Customer Reviews

Pricing

``` **Heading guidelines:** - Single `

` per page (the main topic) - Logical hierarchy (don't skip levels) - Include keywords naturally - Descriptive, not generic ### Image SEO ```html ``` Image guidelines: - Descriptive filenames with keywords - Alt text describes the image content - Compressed and properly sized - WebP/AVIF with fallbacks - Lazy load below-fold images ### Internal linking ```html Click here Read more Browse our blue widget collection Learn how to maintain your widgets ``` Linking guidelines: - Descriptive anchor text with keywords - Link to relevant internal pages - Reasonable number of links per page - Fix broken links promptly - Use breadcrumbs for hierarchy --- ## Structured data (JSON-LD) ### Organization ```html ``` ### Article ```html ``` ### Product ```html ``` ### FAQ ```html ``` ### Breadcrumbs ```html ``` ### Validation Test structured data at: - [Google Rich Results Test](https://search.google.com/test/rich-results) - [Schema.org Validator](https://validator.schema.org/) --- ## AI search visibility (emerging) A class of AI search engines (ChatGPT search, Perplexity, Gemini Overviews) cite web pages from their training and retrieval pipelines, not from the classic ranked results. As of 2026 this is an unstable area — there are no confirmed ranking signals — but a few things are low-cost and won't hurt: - Don't block AI crawlers wholesale. `OAI-SearchBot`, `PerplexityBot`, `GoogleOther`, `Google-Extended`, `ClaudeBot`, etc. each have separate `robots.txt` user-agents. Decide per-bot rather than blanket-blocking — a `Disallow` removes you from that bot's citations. - Lean on schema.org `Article`/`Product`/`FAQPage`. AI summarizers parse structured data more reliably than they parse prose layouts. The structured-data examples above are the same ones that help here. - Make first-paragraph answers self-contained. Both featured snippets and AI summaries pull short, coherent passages. A definition or direct answer in the first 1-2 sentences is more extractable than the same content buried under marketing prose. ### `llms.txt` — emerging, unproven [`llms.txt`](https://llmstxt.org/) is a proposed convention (a Markdown index of your site's important pages, served at `/llms.txt`) for LLMs to consume. As of mid-2026 adoption is ~0.015% of sites and no major AI vendor has confirmed they read it. Treat it as a 5-minute speculative add for content sites — not a meaningful ranking or citation factor — and don't reorganize content around it. --- ## Mobile SEO ### Responsive design ```html ``` ### Tap targets ```css /* ❌ Too small for mobile / .small-link { padding: 4px; font-size: 12px; } / ✅ Adequate tap target / .mobile-friendly-link { padding: 12px; font-size: 16px; min-height: 48px; min-width: 48px; } ``` ### Font sizes ```css / ❌ Too small on mobile / body { font-size: 10px; } / ✅ Readable without zooming */ body { font-size: 16px; line-height: 1.5; } ``` --- ## International SEO ### Hreflang tags ```html ``` ### Language declaration ```html ``` --- ## SEO audit checklist ### Critical - [ ] HTTPS enabled - [ ] robots.txt allows crawling - [ ] No `noindex` on important pages - [ ] Title tags present and unique - [ ] Single `

` per page ### High priority - [ ] Meta descriptions present - [ ] Sitemap submitted - [ ] Canonical URLs set - [ ] Mobile-responsive - [ ] Core Web Vitals passing ### Medium priority - [ ] Structured data implemented - [ ] Internal linking strategy - [ ] Image alt text - [ ] Descriptive URLs - [ ] Breadcrumb navigation ### Ongoing - [ ] Fix crawl errors in Search Console - [ ] Update sitemap when content changes - [ ] Monitor ranking changes - [ ] Check for broken links - [ ] Review Search Console insights --- ## Tools | Tool | Use | |------|-----| | Google Search Console | Monitor indexing, fix issues | | Google PageSpeed Insights | Performance + Core Web Vitals | | Rich Results Test | Validate structured data | | Lighthouse | Full SEO audit | | Screaming Frog | Crawl analysis | ## References - [Google Search Central](https://developers.google.com/search) - [Schema.org](https://schema.org/) - [Core Web Vitals](../core-web-vitals/SKILL.md) - [Web Quality Audit](../web-quality-audit/SKILL.md) --- ## 6. web-quality-audit - Source: https://github.com/addyosmani/web-quality-skills/blob/main/skills/web-quality-audit/SKILL.md - Raw: https://raw.githubusercontent.com/addyosmani/web-quality-skills/main/skills/web-quality-audit/SKILL.md - Markdown: https://skillsdocs.com/addyosmani/web-quality-skills/web-quality-audit.md - Licence: MIT — https://spdx.org/licenses/MIT.html Bundled files (1), referenced from this skill's directory: - `scripts/analyze.sh` — https://raw.githubusercontent.com/addyosmani/web-quality-skills/main/skills/web-quality-audit/scripts/analyze.sh --- name: web-quality-audit description: Comprehensive web quality audit covering performance, accessibility, SEO, and best practices. Use when asked to "audit my site", "review web quality", "run lighthouse audit", "check page quality", or "optimize my website". license: MIT metadata: author: web-quality-skills version: "1.0" --- # 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](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. ## 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)