Web Performance Optimization

aj-geddes/useful-ai-prompts/skills/web-performance-optimization

作者 aj-geddes3f5182cfd739无许可证355 个星标收录于 2026年10月8日更新于 2026年10月8日仓库7个月前更新

Optimize web application performance using code splitting, lazy loading, caching, compression, and monitoring. Use when improving Core Web Vitals and user experience.

仅含说明Software Development

AI 生成的概览

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

功能: 该技能提供改善 Web 应用性能的指导和参考资料，涵盖 React 中的代码分割与懒加载、图片优化、HTTP 缓存与 Service Worker、gzip 压缩与资源优化以及性能监控。它包含一个最简懒加载代码示例和一个组件模板，并指向详细参考指南以获取完整实现。重点在于改善 Core Web Vitals 和整体用户体验。
适用场景: 当 Web 应用页面加载缓慢、Largest Contentful Paint 偏高、打包体积过大、频繁出现 Cumulative Layout Shift 或存在移动端性能问题时使用。它面向从事前端性能改进的团队。
运行要求: 不附带脚本，仅为说明文档和参考资料。使用示例时假定为 React/TypeScript 前端项目，但不需要特定工具、软件包、凭据或网络访问。

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

Quick Start

Minimal working example:

typescript

// utils/lazyLoad.tsimport React from 'react';
export const lazyLoad = (importStatement: Promise<any>) => {  return React.lazy(() =>    importStatement.then(module => ({      default: module.default    }))  );};
// routes.tsximport { lazyLoad } from './utils/lazyLoad';
export const routes = [  {    path: '/',    component: () => import('./pages/Home'),    lazy: lazyLoad(import('./pages/Home'))  },  {    path: '/dashboard',    lazy: lazyLoad(import('./pages/Dashboard'))  },  {// ... (see reference guides for full implementation)

// utils/lazyLoad.tsimport React from 'react';
export const lazyLoad = (importStatement: Promise<any>) => {  return React.lazy(() =>    importStatement.then(module => ({      default: module.default    }))  );};
// routes.tsximport { lazyLoad } from './utils/lazyLoad';
export const routes = [  {    path: '/',    component: () => import('./pages/Home'),    lazy: lazyLoad(import('./pages/Home'))  },  {    path: '/dashboard',    lazy: lazyLoad(import('./pages/Dashboard'))  },  {// ... (see reference guides for full implementation)

Reference Guides

Detailed implementations in the references/ directory:

Guide	Contents
Code Splitting and Lazy Loading (React) [blocked]	Code Splitting and Lazy Loading (React)
Image Optimization [blocked]	Image Optimization
HTTP Caching and Service Workers [blocked]	HTTP Caching and Service Workers
Gzip Compression and Asset Optimization [blocked]	Gzip Compression and Asset Optimization
Performance Monitoring [blocked]	Performance Monitoring

Best Practices

✅ DO

Follow established patterns and conventions
Write clean, maintainable code
Add appropriate documentation
Test thoroughly before deploying

❌ DON'T

Skip testing or validation
Ignore error handling
Hard-code configuration values

来源与署名

来源：aj-geddes/useful-ai-prompts位于skills/web-performance-optimization提交3f5182c

许可证：无许可证

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

举报或申请下架

Web Performance Optimization

Web Performance Optimization

Table of Contents

Overview

When to Use

Quick Start

Reference Guides

Best Practices

✅ DO

❌ DON'T

来源与署名

更多来自 aj-geddes/useful-ai-prompts 的技能

Xss Prevention

Wireframe Prototyping

Vue Application Structure

Visual Regression Testing

User Persona Creation

User Guide Creation

更多Software Development技能

Playground

M5 Onboard

Cardputer Buddy

Web Design Guidelines

Vercel React Native Skills

Vercel React Best Practices