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.

Common Commands/API

Use OpenClaw's CLI or API endpoint /api/skills/web-performance/execute with JSON payload. Authentication requires $OPENCLAW_API_KEY in headers.

• CLI: openclaw execute web-performance --url https://example.com --audit-type full --output json
• API: POST to /api/skills/web-performance/execute with body: {"url": "https://example.com", "options": {"chromeFlags": "--headless"}}
• Code snippet for lazy loading:

  import React, { lazy, Suspense } from 'react';
  const LazyImage = lazy(() => import('./ImageComponent'));
  <Suspense fallback={<div>Loading...</div>}><LazyImage /></Suspense>;

• Webpack config for bundle optimization:

  { "optimization": { "minimizer": ["terser-webpack-plugin"], "splitChunks": { "chunks": "all" } } }

• CDN config example: In Nginx, add location /static/ { proxy_pass https://cdn.example.com; expires 1d; }

Integration Notes

Integrate by importing OpenClaw SDK and calling the skill function with required params. For auth, set env var $OPENCLAW_API_KEY before runtime. Combine with other skills like monitoring tools: e.g., pipe Lighthouse results to a logging service. Use JSON config files for multi-step optimizations, such as: {"steps": ["audit", "optimize-bundle", "apply-caching"]}. Ensure compatibility with Node.js 14+ for Webpack integrations.

Error Handling

Handle errors by checking response codes from API calls (e.g., 400 for invalid URL, 401 for auth issues). In code, use try-catch around skill executions: e.g.,

try {
  const result = await openclaw.execute('web-performance', { url: 'https://example.com' });
  console.log(result);
} catch (error) {
  if (error.code === 'AUTH_ERROR') process.env.OPENCLAW_API_KEY = 'new-key';
  else console.error(error.message);
}

Common issues: Invalid URLs return "Invalid input"; network errors suggest retry with exponential backoff. Always validate inputs like URLs before calling.

Concrete Usage Examples

1. Audit a website with Lighthouse: Run openclaw execute web-performance --url https://example.com --report-path ./report.json to generate a JSON report with Core Web Vitals scores, then analyze LCP > 2.5s as a failure threshold. 2. Optimize and deploy with CDN: In a build script, use openclaw execute web-performance --action optimize-bundle --config webpack.config.js, followed by openclaw execute web-performance --action setup-cdn --provider cloudflare --assets /static/, to enable caching and reduce load times by 30-50%.

Graph Relationships

• Connected to: web-dev cluster
• Related skills: seo-optimization (for performance-driven SEO), frontend-dev (for bundle and lazy loading integrations)
• Dependencies: monitoring-tools (for post-audit analysis)