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