Skip to content

perfpatch-fixes.md

Latest commit

 

History

History
112 lines (88 loc) · 5.83 KB

perfpatch-fixes.md

File metadata and controls

112 lines (88 loc) · 5.83 KB
Raw

perfpatch — fix brief

Generated by perfpatch. Paste this into your IDE agent (Claude Code, Cursor, …) and let it apply the fixes, or use the perfpatch MCP server.

You are a senior frontend performance engineer with direct file access to this project. Below is an automated health audit (Lighthouse runtime metrics, bundle analysis, and dead-code findings) plus the detected stack.

Your job: apply the highest-impact, lowest-effort fixes by editing the project's files directly. Don't just describe them — make the changes.

How to work:

  1. Start with the HIGH IMPACT items. Skip anything you can't do safely.
  2. For each fix, open the relevant file, make the minimal change, and briefly say what you changed and which metric it helps (e.g. "LCP", "bundle size").
  3. Respect the detected stack — don't use Next.js APIs in a Vite project, etc.
  4. For dependency swaps, update the imports AND the package.json, then note the install/uninstall command the user should run.
  5. Don't invent problems. If a finding isn't actionable from the code you can see, say so and move on.

Before you change anything — verify, don't assume:

  • Every change must map to a finding. Only act on items that correspond to a specific entry in the "Top failing audits" list or the bundle/dead-code findings below. If a piece of advice from the framework knowledge section has no matching failing audit, DO NOT apply it — it is reference material, not a task.
  • Check it isn't already done. Before applying any suggestion (e.g. next/font, a modern browserslist, priority on the LCP image, code-splitting), open the relevant file and confirm the project does NOT already do it. If it's already implemented, skip it silently — do not "re-apply" or restate it as a fix.
  • Don't pad the report. A short list of real, verified fixes is the goal. Do not list generic best practices, things already in place, or items with no corresponding finding just to look thorough.

The mechanical fixes (unused-dependency removals, etc.) are listed separately as suggested commands — perfpatch does not run them, since dead-code detection can have false positives. Review them and fold any that are clearly safe into your plan, but focus your effort on the contextual code changes that need judgment.

Generic frontend fix knowledge

Reference, not a checklist. The items below are background knowledge about how to fix common frontend issues. They are NOT a list of problems in this project. Only act on a point here if it directly addresses one of the failing audits in the findings above, and only after confirming the project doesn't already do it.

No specific framework detected — prefer standards-based, framework-agnostic fixes.

  • Images: add fetchpriority="high" + loading="eager" to the single LCP image; loading="lazy" + explicit width/height (to prevent layout shift) on all others. Serve modern formats (WebP/AVIF) where possible.
  • Render-blocking: add defer to non-critical <script>, move <script> to end of <body>, inline critical CSS and defer the rest with media="print" onload="this.media='all'".
  • Fonts: add font-display: swap to @font-face; <link rel="preload"> the critical font; rel="preconnect" to font hosts.
  • Bundle: split code with dynamic import(); replace heavy dependencies with lighter alternatives or native APIs.
  • Caching/compression: enable gzip/brotli and long Cache-Control TTLs on static assets (server/infra config).

Only suggest fixes you can express as a concrete patch or command.

Stack

  • Framework: generic
  • Bundler: unknown · CSS: unknown · Images: unknown
  • JavaScript · npm · Node 25.9.0
  • Audited URL: https://polynuts.vercel.app

Lighthouse

  • URL: https://polynuts.vercel.app (desktop)
  • Scores: perf 100, a11y 96, seo 100, best-practices 100
  • Metrics: LCP 545ms, FCP 304ms, TBT 0ms, CLS 0.003

Top failing audits, prioritized by the report's measured impact × fixability (savings figures are Lighthouse's own estimates from this run):

  • Reduce unused JavaScript (unused-javascript) — score 0, Est savings of 777 KiB, est. ~50ms
  • Background and foreground colors do not have a sufficient contrast ratio. (color-contrast) — score 0
  • Avoid serving legacy JavaScript to modern browsers (legacy-javascript) — score 50, Est savings of 12 KiB
  • Network dependency tree (network-dependency-tree-insight) — score 0
  • Missing source maps for large first-party JavaScript (valid-source-maps) — score 0
  • Render blocking requests (render-blocking-insight) — score 50
  • Serve static assets with an efficient cache policy (uses-long-cache-ttl) — score 50, 1 resource found

LCP element (the element that finished painting last — optimize THIS one): <h1 class="font-display text-[clamp(2.5rem,6vw,4.5rem)] font-extrabold leading-[0.98]…">

Failing color-contrast nodes (fix the foreground/background of these specific elements):

  • div.overflow-hidden > div.flex > div.flex > span.rounded-md — "polynuts.app/markets"
  • div.relative > div.overflow-hidden > div.flex > span.flex — "LIVE"
  • div.overflow-hidden > div.bg-[#131720] > div.mb-3 > p.font-mono — "LIVE MARKETS"

  • div.overflow-hidden > div.bg-[#131720] > div.mb-3 > span.font-mono — "Base mainnet"
  • div.grid > button.group > div.flex > span.num — "$586.79"

When done, re-run perfpatch (or the MCP verify_fix tool) to confirm the metrics improved.