Web Performance Optimization

by aj-geddes3f5182cfd739No license355 starsListed Oct 8, 2026Updated Oct 8, 2026Repository updated 7 months ago

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

Instructions onlySoftware Development

AI-generated overview

Guides web performance optimization through code splitting, lazy loading, caching, compression, and monitoring.

What it does: This skill provides guidance and reference material for improving web application performance, covering code splitting and lazy loading in React, image optimization, HTTP caching and service workers, gzip compression and asset optimization, and performance monitoring. It includes a minimal lazy-loading code example and a component template, and points to detailed reference guides for full implementations. The focus is on improving Core Web Vitals and overall user experience.
When to use it: Use it when a web application has slow page load times, high Largest Contentful Paint, large bundle sizes, frequent Cumulative Layout Shift, or mobile performance problems. It is intended for teams working on front-end performance improvements.
Requirements: No scripts are shipped; it is instructions and reference documents only. Working with the examples assumes a React/TypeScript front-end project, but no specific tools, packages, credentials, or network access are required.

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

Source and attribution

Source:aj-geddes/useful-ai-promptsinskills/web-performance-optimizationat commit3f5182c

License: No license

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal

Web Performance Optimization

Web Performance Optimization

Table of Contents

Overview

When to Use

Quick Start

Reference Guides

Best Practices

✅ DO

❌ DON'T

Source and attribution

More from aj-geddes/useful-ai-prompts

Xss Prevention

Wireframe Prototyping

Vue Application Structure

Visual Regression Testing

User Persona Creation

User Guide Creation

More in Software Development

Playground

M5 Onboard

Cardputer Buddy

Web Design Guidelines

Vercel React Native Skills

Vercel React Best Practices