skills.rest
wolfstar-project
wolfstar-projectOFFICIAL
Explore all skills by this author →
WebsiteGitHub

performance

Optimize web page loading speed, rendering efficiency, and resource delivery against Core Web Vitals budgets.

Updated Aug 8, 2026
Search Tags:#caching#lighthouse#web performance#code splitting#core web vitals#image optimization#lcp
One-click install
npx skills add https://github.com/wolfstar-project/code-zero --skill performance-wolfstar-project
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: performance
Source: https://github.com/wolfstar-project/code-zero/tree/main/.agents/skills/performance
Command: npx skills add https://github.com/wolfstar-project/code-zero --skill performance-wolfstar-project

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Slow page loads, render-blocking resources, and unoptimized assets degrade user experience and Core Web Vitals scores. This Skill provides a structured audit-and-fix workflow that identifies performance bottlenecks and applies concrete code-level optimizations. ## Core Features & Use Cases - Performance Budgets: Enforce measurable limits for page weight, JavaScript, CSS, images, fonts, and third-party scripts. - Critical Rendering Path Optimization: Apply preconnect, preload, Early Hints, speculation rules, and deferred loading patterns with ready-to-use code snippets. - Asset Optimization: Implement responsive images (AVIF/WebP), font subsetting with font-display strategies, and cache-control policies. - Runtime Efficiency: Fix layout thrashing, debounce handlers, virtualize long lists, and add View Transitions for smooth navigations. - Use Case: A Lighthouse audit shows LCP of 4.2s on a landing page. Use this Skill to preload the hero image with fetchpriority="high", defer non-critical CSS, and split the JavaScript bundle to bring LCP under 2.5s. ## Quick Start Audit my landing page for performance bottlenecks and optimize it to meet the Core Web Vitals targets.

Frequently Asked Questions about performance

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

FAQPage Schema
How do I improve my Lighthouse performance score?▼

Improve Lighthouse scores by reducing render-blocking resources, preloading the LCP image, deferring non-critical JavaScript, and compressing text assets with Brotli. Measure before and after with the Lighthouse CLI to verify each change.

How to reduce LCP on a web page?▼

Reduce LCP by preloading the hero image with fetchpriority="high", serving it in AVIF or WebP, cutting server TTFB below 800ms with CDN edge caching, and sending HTTP 103 Early Hints for critical resources.

What image format should I use for web performance?▼

Use AVIF for photos where supported (92%+ browsers) with WebP as fallback and JPEG as the final fallback via the picture element. Use SVG for icons and logos, and PNG only for graphics requiring transparency.

Does deferring JavaScript break page functionality?▼

Deferred scripts execute in order after HTML parsing, so dependent scripts remain safe. Use async only for independent scripts like analytics, and module scripts are deferred by default.

Why is my page still slow after optimizing images?▼

Remaining slowness usually comes from render-blocking CSS, large JavaScript bundles, third-party scripts, or slow server response. Check TTFB, apply code splitting, and load third-party widgets with facades or intersection observers.

What are the performance budget limits for a fast website?▼

Keep total page weight under 1.5 MB, compressed JavaScript under 300 KB, CSS under 100 KB, above-fold images under 500 KB, fonts under 100 KB, and third-party scripts under 200 KB.

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
WhaleylawWhaleylaw

cdn-caching-specialist

Diagnose and resolve CDN caching issues for web applications and static sites.

Community
Intermediate
guiledoguiledo

frontend-semantic-auditor

Audit frontend code for accessibility, semantics, and SEO compliance.

Community
Advanced
ThejanaJayalathThejanaJayalath

react-performance

Audit React and Next.js applications for Core Web Vitals and runtime performance issues.

Community
Advanced