SkillAgentSearch skills...

perf-web-optimization

Optimize web performance: bundle size, images, caching, lazy loading, and overall page speed

GenerateConvertImprove

Install / Use

npx skills add tech-leads-club/agent-skills --skill perf-web-optimization

Installs into whichever agent you are using.

About this skill
📄

SKILL.md

Installable skill definition

Quality Score

89/100

Supported Platforms

Universal

Our assessment of perf-web-optimization

perf-web-optimization scores 89/100 on our quality scale, 509th of 2,185 Development & Engineering skills we index (top 24%).

Its SKILL.md is 4.1 KB long, well organised into 23 sections with 7 code examples: a solid amount of guidance for an agent.

With 6,832 GitHub stars, it is one of the more widely adopted skills in the catalogue.

Substance
26/30
Structure
20/20
Description
12/15
Adoption
16/20
Freshness
15/15

Maintenance, license and trust

  • The repository was last updated 6 days ago, so perf-web-optimization is actively maintained.
  • No license is declared. By default that means all rights are reserved: you can read it, but reusing or redistributing it is not clearly permitted. Ask the author before building on it commercially.
  • Its trust signals score 88/100, with 1 caution from licensing, adoption, age or documentation. These come from repository metadata, not a code audit — read the skill file before letting an agent act on it.

perf-web-optimization compared with similar skills

All 4 of these similar skills score higher than perf-web-optimization; compare them before choosing.

SkillScoreStarsUpdatedFormat
perf-web-optimization (this skill)by tech-leads-club896.8k6d agoSKILL.md
ai-job-searchby MadsLorentzen10044.0k5d agoCLAUDE.md
claude-howtoby luongnv8910041.7ktodayCLAUDE.md
LocalAIby mudler10049.3ktodayMCP Server
algorithmic-artby anthropics100177.9k4d agoSKILL.md

Frequently asked questions

How do I install perf-web-optimization?
Run npx skills add tech-leads-club/agent-skills --skill perf-web-optimization. The install tabs above show the steps for each supported agent.
Which AI agents does perf-web-optimization work with?
It is written for Universal, as a SKILL.md file. Other agents that read the same format can often use it too.
Is perf-web-optimization safe to use?
It declares no license and scores 88/100 on trust signals. Skills are instructions an agent will follow, so read the file before installing it and do not approve commands you do not understand.
Is perf-web-optimization still maintained?
The repository was last updated 6 days ago, so perf-web-optimization is actively maintained.

Skill content

View source on GitHub

name: perf-web-optimization description: '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).'

Web Performance Optimization

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

Target Metrics

| Metric | Good | Needs Work | Poor | | ------ | ------- | ---------- | ------- | | LCP | < 2.5s | 2.5-4s | > 4s | | INP | < 200ms | 200-500ms | > 500ms | | CLS | < 0.1 | 0.1-0.25 | > 0.25 | | TTFB | < 800ms | 800ms-1.8s | > 1.8s |

Quick Wins

1. Images (usually biggest impact on LCP)

<!-- 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)

<!-- 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)

<!-- 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:

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

Bundle Analysis

# Webpack
npx webpack-bundle-analyzer dist/stats.json

# Vite
npx vite-bundle-visualizer

# Check package size before installing
npx 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

// React lazy
const Chart = lazy(() => import('./Chart'))

// Next.js dynamic
const Admin = dynamic(() => import('./Admin'), { ssr: false })

// Vite/Rollup manual chunks
build: {
  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 responses
Cache-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:

Related Skills

ai-job-search

44.0k

The job search that runs on your machine. AI job application framework built on Claude Code: evaluate postings, tailor CVs, write cover letters, prep interviews. Fork it and own it.

claude-howto

41.7k

A visual, example-driven guide to Claude Code — from basic concepts to advanced agents, with copy-paste templates that bring immediate value.

LocalAI

49.3k

LocalAI is the open-source AI engine. Run any model - LLMs, vision, voice, image, video - on any hardware. No GPU required.

algorithmic-art

177.9k

Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems.

tech-leads-club

View profile

View on GitHub
GitHub Stars6.8k
CategoryDevelopment
Updated6d ago
Forks551
tech-leads-club/perf-web-optimization

Languages

TypeScript

Trust signals

88/100

From repository metadata: license, adoption, age and documentation. Not a code audit — see the Safety scan above for what the skill file itself contains.

1 medium