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'slazy()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.