skills.rest
MWest2020
MWest2020COMMUNITY
Explore all skills by this author →
𝕏@MarkWesterweelGitHub

performance

Diagnose and optimize web page performance using Core Web Vitals and browser traces.

Updated May 24, 2026
Search Tags:#optimization#lighthouse#web performance#core web vitals#lcp#page speed#crux
One-click install
npx skills add https://github.com/MWest2020/skill-forge --skill performance-mwest2020
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: performance
Source: https://github.com/MWest2020/skill-forge/tree/main/skills/performance
Command: npx skills add https://github.com/MWest2020/skill-forge --skill performance-mwest2020

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Slow page loads and poor runtime responsiveness hurt user experience, but teams often guess at causes instead of measuring them. This Skill provides an evidence-led workflow that prioritizes real-user Core Web Vitals data and uses browser performance traces to find and fix actual bottlenecks. ## Core Features & Use Cases - Measurement-first workflow: Establish field-plus-lab baselines with CrUX data, DevTools performance traces, and Lighthouse before changing any code, then verify fixes with before/after comparisons. - Optimization playbooks: Concrete patterns for critical rendering path, image formats (AVIF/WebP), font loading, caching headers, JavaScript code splitting, third-party script facades, and layout thrashing fixes. - Performance budgets: Starting guardrails for page weight, JavaScript, CSS, images, fonts, and third-party resources that can be calibrated to target devices and networks. - Use Case: A user reports their e-commerce site loads slowly on mobile. The Skill guides pulling CrUX field data, recording a DevTools trace to identify a render-blocking LCP image, applying preload and fetchpriority fixes, and re-measuring to confirm improvement. ## Quick Start Audit my site's page speed and tell me which performance bottlenecks to fix first.

Frequently Asked Questions about performance

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I find out why my website loads slowly?▼

Start with CrUX field data to see if real users experience poor Core Web Vitals, then record a Chrome DevTools performance trace to identify the cause. The trace insights like LCPBreakdown, RenderBlocking, and ThirdParties point to specific bottlenecks before you change any code.

How to improve LCP on a web page?▼

Improve LCP by preloading the LCP image with fetchpriority="high", reducing server response time below 800ms TTFB, and removing render-blocking resources. Use a DevTools trace to confirm which of these is the actual bottleneck before applying fixes.

What image format should I use for web performance?▼

Use AVIF for photos where supported (92%+ browsers) with WebP as fallback, PNG for graphics needing transparency, and SVG for icons and logos. Serve them through a picture element with responsive srcset sizes so browsers pick the best option.

Does Lighthouse measure real user performance?▼

No, Lighthouse produces lab data from a controlled synthetic navigation, not real-user measurements. Field data comes from CrUX or first-party RUM with the web-vitals library; use lab results for diagnosis and field p75 values for pass/fail decisions.

Why is my lab performance good but field data poor?▼

Local lab runs often miss real-user conditions like slow devices, throttled networks, and cold caches. Segment first-party RUM data by form factor and route, and test representative devices and cache states to reproduce what users actually experience.

Related Skills

Explore More Software Engineering Skills→
GregM1991GregM1991

core-web-vitals

Diagnose and optimize LCP, INP, and CLS using field data and browser traces.

Community
Advanced
udsy19udsy19

performance-optimization

Measure and fix web application performance bottlenecks using Lighthouse and Core Web Vitals.

Community
Advanced
Bonny94ITABonny94ITA

web-quality-audit

Audit website performance, accessibility, SEO, and best practices with Google Lighthouse.

Community
Advanced
rogerzntsrogerznts
1

anvil-diagnose

Diagnose hard bugs and performance regressions through a six-phase feedback-loop workflow.

Community
Advanced