mcpField
A
auditing-performance

auditing-performance

github.com/revitalb-portDevelopment069 installsUpdated 10w ago
Repository

About auditing-performance

Performance Audit is a skill for developers investigating slow pages, load times, or Core Web Vitals. It provides a structured review of bundles, rendering, data fetching, database queries, and assets, followed by prioritized recommendations.

Key features

  1. 01Inspect bundle size and dependencies
  2. 02Review rendering and component behavior
  3. 03Identify data-fetching bottlenecks
  4. 04Check database query patterns
  5. 05Audit image, font, and code assets
  6. 06Rank recommendations by impact and effort

Use cases

  1. 01Investigate slow page loads
  2. 02Audit Core Web Vitals
  3. 03Find query or request bottlenecks
  4. 04Prioritize performance fixes

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/revitalb-port/skills-registry-demo --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