web-performance

Purpose

This skill focuses on optimizing web performance by leveraging tools and strategies like Core Web Vitals, Lighthouse for audits, bundle optimization with Webpack, lazy loading in HTML/JS, CDN setup, and caching strategies to improve load times and user experience.

When to Use

Use this skill when analyzing and improving site performance, such as for slow-loading pages, preparing for SEO impacts from Core Web Vitals, optimizing large JavaScript bundles, or implementing efficient asset delivery in production environments.

Key Capabilities

• Run Lighthouse audits to measure Core Web Vitals (LCP, FID, CLS) with metrics like time to first byte.
• Optimize bundles using Webpack's TerserPlugin for minification and code splitting.
• Implement lazy loading via HTML attributes (e.g., loading="lazy" on images) or React's lazy() function.
• Configure CDNs with providers like Cloudflare for static asset delivery.
• Apply caching strategies using HTTP headers (e.g., Cache-Control: max-age=3600) or service workers.

Usage Patterns

To accomplish tasks, invoke this skill via OpenClaw's API or CLI, passing parameters like URLs or config files. For audits, provide a URL and options; for optimization, supply code snippets or build configs. Always wrap calls in try-catch for error handling. Example pattern: Use the skill in a CI/CD pipeline to audit PR builds automatically.