Perf Web Optimization

by tech-leads-club120b67676388No licenseListed Oct 8, 2026Updated Oct 8, 2026

Optimize web performance: bundle size, images, caching, lazy loading, and overall page speed. Use when site is slow, reducing bundle size, fixing layout shifts, improving Time to Interactive, or optimizing for Lighthouse scores. Triggers on: web performance, bundle size, page speed, slow site, lazy loading. Do NOT use for Core Web Vitals-specific fixes (use core-web-vitals), running Lighthouse audits (use perf-lighthouse), or Astro-specific optimization (use perf-astro).

Instructions onlySoftware Development
AI-generated overview

Guides systematic web performance optimization of bundle size, images, fonts, caching and lazy loading.

What it does
Provides a measure-identify-prioritize-implement-verify workflow for improving page speed, with target metric thresholds for LCP, INP, CLS and TTFB. It supplies quick-win patterns for images, fonts, third-party scripts and critical CSS, plus bundle analysis commands, code splitting examples and caching header recommendations. It also includes checklists and points to reference files on Core Web Vitals, bundle optimization and image optimization.
When to use it
Use when a site is slow or when reducing bundle size, fixing layout shifts, improving Time to Interactive, or optimizing for Lighthouse scores. It is not intended for Core Web Vitals-specific fixes, running Lighthouse audits, or Astro-specific optimization.
Requirements
No scripts; instructions and reference documents only. Bundle analysis examples assume Node.js tooling such as webpack-bundle-analyzer, vite-bundle-visualizer or bundlephobia, but these are optional.

Web Performance Optimization

Systematic approach: Measure → Identify → Prioritize → Implement → Verify.

Target Metrics

MetricGoodNeeds WorkPoor
LCP< 2.5s2.5-4s> 4s
INP< 200ms200-500ms> 500ms
CLS< 0.10.1-0.25> 0.25
TTFB< 800ms800ms-1.8s> 1.8s

Quick Wins

1. Images (usually biggest impact on LCP)

html
<!-- Hero/LCP image: eager + high priority --><img src="/hero.webp" alt="Hero" width="1200" height="600" loading="eager" fetchpriority="high" decoding="async" />
<!-- Below fold: lazy load --><img src="/product.webp" alt="Product" width="400" height="300" loading="lazy" decoding="async" />

Always set width and height to prevent CLS.

2. Fonts (common LCP/CLS culprit)

html
<!-- Preconnect to font origin --><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<!-- Non-blocking font load --><link  rel="stylesheet"  href="https://fonts.googleapis.com/css2?family=Inter&display=swap"  media="print"  onload="this.media='all'"/>

3. Third-party Scripts (common INP killer)

html
<!-- Defer to user interaction --><script>  function loadThirdParty() {    // Load analytics, chat widgets, etc.  }  ;['scroll', 'click', 'touchstart'].forEach((e) => addEventListener(e, loadThirdParty, { once: true, passive: true }))  setTimeout(loadThirdParty, 5000)</script>

4. Critical CSS

Inline critical CSS in <head>, defer the rest:

html
<style>  /* critical styles */</style><link rel="preload" href="/styles.css" as="style" onload="this.rel='stylesheet'" />

Bundle Analysis

bash
# Webpacknpx webpack-bundle-analyzer dist/stats.json
# Vitenpx vite-bundle-visualizer
# Check package size before installingnpx bundlephobia <package-name>

Common heavy packages to replace:

  • moment (67KB) → date-fns (12KB) or dayjs (2KB)
  • lodash (72KB) → cherry-pick imports or native methods

Code Splitting Patterns

javascript
// React lazyconst Chart = lazy(() => import('./Chart'))
// Next.js dynamicconst Admin = dynamic(() => import('./Admin'), { ssr: false })
// Vite/Rollup manual chunksbuild: {  rollupOptions: {    output: {      manualChunks: {        vendor: ['react', 'react-dom']      }    }  }}

Caching Headers

# Static assets (immutable hash in filename)Cache-Control: public, max-age=31536000, immutable
# HTML (revalidate)Cache-Control: no-cache
# API responsesCache-Control: private, max-age=0, must-revalidate

Measurement

For running audits, reading reports, and setting budgets, use the perf-lighthouse skill.

Checklist

Images

  • Modern formats (WebP/AVIF)
  • Responsive srcset
  • width/height attributes
  • loading="lazy" below fold
  • fetchpriority="high" on LCP image

JavaScript

  • Bundle < 200KB gzipped
  • Code splitting by route
  • Third-party scripts deferred
  • No unused dependencies

CSS

  • Critical CSS inlined
  • Non-critical CSS deferred
  • No unused CSS

Fonts

  • font-display: swap
  • Preconnect to font origin
  • Subset if possible

Detailed Examples

For in-depth optimization patterns, see:

  • references/core-web-vitals.md [blocked] - Fixing LCP, CLS, INP issues
  • references/bundle-optimization.md [blocked] - Reducing JS bundle size
  • references/image-optimization.md [blocked] - Image formats, responsive images, sharp scripts

Source and attribution

Source:tech-leads-club/agent-skillsinpackages/skills-catalog/skills/(performance)/perf-web-optimizationat commit120b676

License: No license

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

Report or request removal

More from tech-leads-club/agent-skills

Nx Workspace

tech-leads-club

Guides configuring, exploring and optimizing Nx monorepo workspaces, including affected analysis and CI/CD setup.

DevOps & CloudOct 8, 2026

Nx Run Tasks

tech-leads-club

Runs build, test, lint, serve and other tasks in an Nx workspace using run, run-many and affected commands.

Software DevelopmentOct 8, 2026

Nx Generate

tech-leads-club

Guides an agent through discovering, validating, running and verifying Nx generators to scaffold code in a monorepo.

Software DevelopmentOct 8, 2026

Nx Ci Monitor

tech-leads-club

Monitors Nx Cloud CI pipeline status and orchestrates self-healing fixes until CI passes or a limit is reached.

DevOps & CloudOct 8, 2026

Excalidraw Studio

tech-leads-club

Generates Excalidraw .excalidraw JSON diagram files from natural-language descriptions.

Includes scripts
Design & CreativeOct 8, 2026

Chrome Devtools

tech-leads-club

Controls a live Chrome browser through the chrome-devtools MCP server for debugging, inspection, automation and performance profiling.

Software DevelopmentOct 8, 2026

More in Software Development

Playground

anthropics

Featured

Builds self-contained interactive HTML playgrounds with controls, live preview, and copyable prompt output.

Software Development37Kupdated today

M5 Onboard

anthropics

Featured

Provisions M5Stack ESP32 boards by detecting them on USB, flashing UIFlow 2.0 firmware, and installing a MicroPython app bundle.

Software Development37Kupdated today

Cardputer Buddy

anthropics

Featured

Guides iterating on a Cardputer-Adv MicroPython app bundle: adding apps, pushing files over USB-serial, tailing logs, and running REPL commands.

Software Development37Kupdated today

Dpop Adoption

google

Featured

Guides implementation of OAuth 2.0 DPoP (RFC 9449) sender-constrained refresh tokens for Google's OAuth platform.

Software Development21Kupdated today

Gemini Live Api

google

Featured

Generates a Gemini Live API WebSocket client class, tests, docs, and a demo UI for bidirectional streaming.

Software Development21Kupdated today

Gemini Api

google

Featured

Guides use of the Gemini API on Google's Agent Platform with the Gen AI SDK across languages and capabilities.

Software Development21Kupdated today