Web Performance Optimization

secondsky/claude-skills/plugins/web-performance-optimization/skills/web-performance-optimization

作者 secondsky88378361314fMIT227 个星标收录于 2026年10月8日更新于 2026年10月8日仓库10天前更新

Optimizes web application performance through code splitting, lazy loading, caching strategies, and Core Web Vitals monitoring. Use when improving page load times, implementing service workers, or reducing bundle sizes.

仅含说明Software Development

AI 生成的概览

通过代码分割、懒加载、缓存、压缩和 Core Web Vitals 监控来指导 Web 性能优化。

功能: 该技能提供改进 Web 应用性能的说明与代码示例，涵盖 React 代码分割、Webpack 打包优化、响应式图片标记、Service Worker 缓存以及 Nginx gzip 压缩。它演示如何用 PerformanceObserver 和 sendToAnalytics 采集 Core Web Vitals（LCP、CLS、INP），并给出性能目标与优化检查清单。两个参考文件补充了压缩与监控配置以及进阶 TypeScript 工具。
适用场景: 适用于页面加载缓慢、LCP 或 CLS 指标不佳、打包体积过大或移动端性能存在问题的情况。也适合实现 Service Worker、缓存或压缩，以及搭建 Core Web Vitals 监控。
运行要求: 不附带脚本，仅为说明与代码示例。实践示例需要具备打包工具（如 Webpack）的 Web 项目，可能还需要 React、Service Worker 以及 Nginx 或 Apache 等 Web 服务器；监控示例需要分析数据接收端点，文中列出的工具包括 Lighthouse、WebPageTest、Chrome DevTools 和 web-vitals npm 包。

Web Performance Optimization

Overview

Implement performance optimization strategies including lazy loading, code splitting, caching, compression, and monitoring to improve Core Web Vitals and user experience.

When to Use

Slow page load times
High Largest Contentful Paint (LCP)
Large bundle sizes
Frequent Cumulative Layout Shift (CLS)
Mobile performance issues

Code Splitting (React)

javascript

import { lazy, Suspense } from 'react';import { Routes, Route } from 'react-router-dom';
const Home = lazy(() => import('./pages/Home'));const Dashboard = lazy(() => import('./pages/Dashboard'));const Settings = lazy(() => import('./pages/Settings'));
function App() {  return (    <Suspense fallback={<Loading />}>      <Routes>        <Route path="/" element={<Home />} />        <Route path="/dashboard" element={<Dashboard />} />        <Route path="/settings" element={<Settings />} />      </Routes>    </Suspense>  );}

import { lazy, Suspense } from 'react';import { Routes, Route } from 'react-router-dom';
const Home = lazy(() => import('./pages/Home'));const Dashboard = lazy(() => import('./pages/Dashboard'));const Settings = lazy(() => import('./pages/Settings'));
function App() {  return (    <Suspense fallback={<Loading />}>      <Routes>        <Route path="/" element={<Home />} />        <Route path="/dashboard" element={<Dashboard />} />        <Route path="/settings" element={<Settings />} />      </Routes>    </Suspense>  );}

Webpack Bundle Optimization

javascript

// webpack.config.jsmodule.exports = {  optimization: {    splitChunks: {      chunks: 'all',      cacheGroups: {        vendor: {          test: /[\\/]node_modules[\\/]/,          name: 'vendors',          chunks: 'all'        }      }    }  }};

// webpack.config.jsmodule.exports = {  optimization: {    splitChunks: {      chunks: 'all',      cacheGroups: {        vendor: {          test: /[\\/]node_modules[\\/]/,          name: 'vendors',          chunks: 'all'        }      }    }  }};

Image Optimization

html

<picture>  <source srcset="image.webp" type="image/webp">  <source srcset="image.jpg" type="image/jpeg">  <img    src="image.jpg"    srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w"    sizes="(max-width: 600px) 100vw, 50vw"    loading="lazy"    decoding="async"    alt="Description"  ></picture>

<picture>  <source srcset="image.webp" type="image/webp">  <source srcset="image.jpg" type="image/jpeg">  <img    src="image.jpg"    srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w"    sizes="(max-width: 600px) 100vw, 50vw"    loading="lazy"    decoding="async"    alt="Description"  ></picture>

Service Worker Caching

javascript

// sw.jsconst CACHE_NAME = 'app-v1';const ASSETS = ['/', '/index.html', '/main.js', '/styles.css'];
self.addEventListener('install', (event) => {  event.waitUntil(    caches.open(CACHE_NAME).then(cache => cache.addAll(ASSETS))  );});
self.addEventListener('fetch', (event) => {  event.respondWith(    caches.match(event.request).then(cached => {      return cached || fetch(event.request).then(response => {        return caches.open(CACHE_NAME).then(cache => {          cache.put(event.request, response.clone());          return response;        });      });    })  );});

// sw.jsconst CACHE_NAME = 'app-v1';const ASSETS = ['/', '/index.html', '/main.js', '/styles.css'];
self.addEventListener('install', (event) => {  event.waitUntil(    caches.open(CACHE_NAME).then(cache => cache.addAll(ASSETS))  );});
self.addEventListener('fetch', (event) => {  event.respondWith(    caches.match(event.request).then(cached => {      return cached || fetch(event.request).then(response => {        return caches.open(CACHE_NAME).then(cache => {          cache.put(event.request, response.clone());          return response;        });      });    })  );});

Core Web Vitals Monitoring

javascript

// Track LCP, CLS, INP (Note: INP replaced FID as of March 2024)// sendToAnalytics is a placeholder function that sends metrics to your analytics endpoint// Expected signature: sendToAnalytics({ metric: string, value: number }) => void// Example implementation:function sendToAnalytics({ metric, value }) {  // Replace with your analytics implementation (e.g., Google Analytics, Segment)  fetch('/api/analytics', {    method: 'POST',    headers: { 'Content-Type': 'application/json' },    body: JSON.stringify({ metric, value, timestamp: Date.now() })  });}
// Largest Contentful Paint (LCP)new PerformanceObserver((list) => {  for (const entry of list.getEntries()) {    console.log(`LCP: ${entry.startTime}ms`);    sendToAnalytics({ metric: 'LCP', value: entry.startTime });  }}).observe({ type: 'largest-contentful-paint', buffered: true });
// Cumulative Layout Shift (CLS)new PerformanceObserver((list) => {  let cls = 0;  for (const entry of list.getEntries()) {    if (!entry.hadRecentInput) cls += entry.value;  }  sendToAnalytics({ metric: 'CLS', value: cls });}).observe({ type: 'layout-shift', buffered: true });
// Interaction to Next Paint (INP) - replaces FIDnew PerformanceObserver((list) => {  for (const entry of list.getEntries()) {    // INP measures responsiveness - duration of slowest interaction    const inp = entry.processingEnd - entry.processingStart;    console.log(`INP: ${inp}ms`);    sendToAnalytics({ metric: 'INP', value: inp });  }}).observe({ type: 'event', buffered: true }); // 'event' captures interaction events

// Track LCP, CLS, INP (Note: INP replaced FID as of March 2024)// sendToAnalytics is a placeholder function that sends metrics to your analytics endpoint// Expected signature: sendToAnalytics({ metric: string, value: number }) => void// Example implementation:function sendToAnalytics({ metric, value }) {  // Replace with your analytics implementation (e.g., Google Analytics, Segment)  fetch('/api/analytics', {    method: 'POST',    headers: { 'Content-Type': 'application/json' },    body: JSON.stringify({ metric, value, timestamp: Date.now() })  });}
// Largest Contentful Paint (LCP)new PerformanceObserver((list) => {  for (const entry of list.getEntries()) {    console.log(`LCP: ${entry.startTime}ms`);    sendToAnalytics({ metric: 'LCP', value: entry.startTime });  }}).observe({ type: 'largest-contentful-paint', buffered: true });
// Cumulative Layout Shift (CLS)new PerformanceObserver((list) => {  let cls = 0;  for (const entry of list.getEntries()) {    if (!entry.hadRecentInput) cls += entry.value;  }  sendToAnalytics({ metric: 'CLS', value: cls });}).observe({ type: 'layout-shift', buffered: true });
// Interaction to Next Paint (INP) - replaces FIDnew PerformanceObserver((list) => {  for (const entry of list.getEntries()) {    // INP measures responsiveness - duration of slowest interaction    const inp = entry.processingEnd - entry.processingStart;    console.log(`INP: ${inp}ms`);    sendToAnalytics({ metric: 'INP', value: inp });  }}).observe({ type: 'event', buffered: true }); // 'event' captures interaction events

Performance Targets

Note: INP (Interaction to Next Paint) replaced FID (First Input Delay) as a Core Web Vital in March 2024. INP provides a more comprehensive measure of page responsiveness by capturing the full duration of interactions, not just the input delay.

Compression (Nginx)

nginx

gzip on;gzip_types text/plain text/css application/json application/javascript;gzip_min_length 1000;gzip_comp_level 6;

gzip on;gzip_types text/plain text/css application/json application/javascript;gzip_min_length 1000;gzip_comp_level 6;

Best Practices

Minimize bundle size with code splitting
Optimize images with appropriate formats
Implement lazy loading strategically
Use HTTP caching headers
Enable gzip/brotli compression
Monitor Core Web Vitals continuously
Implement service workers
Defer non-critical JavaScript
Optimize critical rendering path
Test on real devices and networks

Optimization Checklist

Enable code splitting for routes
Lazy load below-fold components
Optimize and compress images
Implement service worker caching
Enable gzip/brotli compression
Monitor Core Web Vitals
Minimize render-blocking resources

Additional Configuration

See references/compression-monitoring.md [blocked] for:

Webpack compression plugin setup
Apache .htaccess compression config
TTFB monitoring implementation
Puppeteer automation for measurement

See references/typescript-advanced.md [blocked] for:

TypeScript lazyLoad utility
TypeScript image component
Advanced service worker with offline fallback
TerserPlugin configuration
Complete PerformanceMetrics interface

Tools

Lighthouse / PageSpeed Insights
WebPageTest
Chrome DevTools Performance tab
web-vitals npm package

Resources

来源与署名

来源：secondsky/claude-skills位于plugins/web-performance-optimization/skills/web-performance-optimization提交8837836

许可证： MIT

内容归原作者所有。SourceWeft 从公开仓库中收录这些内容。

举报或申请下架

Metric	Good	Needs Improvement
LCP	<2.5s	2.5-4s
INP	<200ms	200-500ms
CLS	<0.1	0.1-0.25
TTI	<3.8s	3.8-7.3s

Web Performance Optimization

Web Performance Optimization

Overview

When to Use

Code Splitting (React)

Webpack Bundle Optimization

Image Optimization

Service Worker Caching

Core Web Vitals Monitoring

Performance Targets

Compression (Nginx)

Best Practices

Optimization Checklist

Additional Configuration

Tools

Resources

来源与署名

更多来自 secondsky/claude-skills 的技能

Vulnerability Scanning

Web Performance Audit

Threejs

Tailwind V4 Shadcn

Technical Specification

React Native Skills

更多Software Development技能

Playground

M5 Onboard

Cardputer Buddy

Web Design Guidelines

Vercel React Native Skills

Vercel React Best Practices