mcpField
A
auditing-performance

auditing-performance

github.com/spencerpaulyDevelopment868481 installsUpdated 13w ago
Repository

About auditing-performance

A performance-audit skill for developers working on web applications. It guides checks of bundles, rendering, data fetching, database queries, and assets, then organizes recommendations by impact and effort.

Key features

  1. 01Analyze bundle size and dependencies
  2. 02Inspect rendering bottlenecks
  3. 03Review data-fetching patterns
  4. 04Check database query efficiency
  5. 05Audit asset loading
  6. 06Prioritize optimization recommendations

Use cases

  1. 01Investigate slow page loads
  2. 02Audit Core Web Vitals
  3. 03Find oversized or duplicated dependencies
  4. 04Prepare a prioritized optimization plan

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/spencerpauly/awesome-cursor-skills --skill auditing-performance

After installing, type/auditing-performancein Claude Code to confirm it loaded.

Details

From the project README

Performance Audit

Use this skill when the user asks to optimize performance, reduce load times, fix slow pages, or audit Core Web Vitals.

Steps

  1. Analyze bundle size

    • Run npx @next/bundle-analyzer (Next.js) or npx vite-bundle-visualizer (Vite) to identify large dependencies.
    • Look for large libraries that could be replaced with lighter alternatives (e.g. moment → date-fns, lodash → individual imports or native methods).
    • Check for duplicated dependencies in the bundle.
    • Verify tree-shaking is working (no barrel file re-exports pulling in unused code).

  2. Audit rendering performance

    • Identify components that re-render unnecessarily — look for inline object/array/function creation in JSX props.
    • Check for expensive computations in render paths that should use useMemo.
    • Verify lists use proper key props (not array index for dynamic lists).
    • Look for layout thrashing (reading DOM measurements then writing styles in a loop).

  3. Check data fetching

    • Identify request waterfalls — sequential API calls that could be parallelized with Promise.all.
    • Look for data fetched on the client that could be fetched on the server.
    • Check for missing pagination on large data sets.
    • Verify API responses aren't over-fetching (returning fields the client doesn't need).

  4. Database query optimization

    • Look for N+1 query patterns (a query per item in a list).
    • Check for missing indexes on columns used in WHERE, ORDER BY, and JOIN clauses.
    • Identify queries that could use SELECT with specific columns instead of SELECT *.
    • Look for missing connection pooling.

  5. Check assets

    • Verify images use modern formats (WebP/AVIF) and are properly sized.
    • Check for missing loading="lazy" on below-the-fold images.
    • Verify fonts use font-display: swap and are preloaded.
    • Check for render-blocking CSS or JavaScript.

  6. Generate recommendations — produce a prioritized list of optimizations ranked by impact (High / Medium / Low) with estimated effort for each.

Notes

  • Focus on measurable improvements — use Lighthouse, WebPageTest, or the Performance tab in DevTools.
  • Don't prematurely optimize — profile first, optimize bottlenecks.
  • For React apps, use React DevTools Profiler to identify slow components.

Comments

Markdown supported