agentsclimarketplace

Performance observability

Skill codezelat/codezela-web-skills/skills/performance-observability

Production-grade web development skills for AI coding agents.

Install
npx -y skills add codezelat/codezela-web-skills --skill performance-observability

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

  • 0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Use when improving or auditing speed, Core Web Vitals, Lighthouse, PageSpeed, LCP, CLS, INP, bundle size, caching, third-party scripts, analytics, logging, monitoring, or production diagnostics.

SKILL.md

2.7 KB, as published. Nobody here has run it

Performance Observability

Use this when performance must be improved without breaking product behavior.

Non-Negotiables

  • Measure before and after when feasible.
  • Use production builds for serious performance claims; dev-mode timing is not proof.
  • Use Lighthouse as the default local proof path for speed/Core Web Vitals work when browser tooling is available.
  • Keep lab results separate from live field data and PageSpeed/CrUX data.
  • Optimize the actual bottleneck, not a generic checklist.
  • Preserve business flows while removing weight.
  • Add observability where future failures would otherwise be silent.

Workflow

  1. Identify affected routes, critical user flows, current framework/build mode, and whether the user expects Google/PageSpeed proof.
  2. Run a production build, serve it with the repo's production start command, then run Lighthouse locally when feasible.
  3. Capture mobile first, then desktop when relevant. Record score, LCP, CLS, INP/TBT, FCP, Speed Index, and the top failing audits.
  4. Inspect LCP, CLS, INP/TBT, render-blocking resources, image delivery, JS execution, third-party scripts, fonts, cache headers, robots/SEO warnings, and accessibility regressions surfaced by Lighthouse.
  5. Fix in small steps: image sizing/format/priority, route-level Suspense, script strategies, font loading, dead JS, data caching, pagination, and DB query shape.
  6. Add or confirm logging/analytics/error reporting for critical server actions, API routes, jobs, and provider calls.
  7. Re-run the same Lighthouse/profile checks and compare before/after.

Common Fixes

  • Only the real above-the-fold LCP image gets eager/high priority.
  • Delay non-critical analytics and marketing scripts.
  • Reserve layout space for images, skeletons, and auth-dependent shells.
  • Keep expensive providers out of global client layouts unless every page needs them.
  • Cache static/public data intentionally and revalidate after mutations.
  • Avoid blocking entire pages on optional DB sections.
  • Do not claim Google speed/PageSpeed readiness from source review alone; run Lighthouse or clearly state why it could not be run.

Checks

  • npm run build or equivalent succeeds.
  • Production-build Lighthouse result recorded for speed work when feasible.
  • Live PageSpeed/CrUX status is reported separately from local Lighthouse lab results.
  • No new console warnings for images/scripts/layout.
  • Core route smoke confirms UX did not regress.
  • Remaining bottlenecks are named with evidence.

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.