performance

Analyzes Lighthouse audits and implements optimizations for faster web loading and runtime efficiency.

Updated Mar 12, 2026

Search Tags:#performance #frontend #web vitals #optimization #lighthouse #loading speed

Ready to run

npx skills add https://github.com/MuhamadAnang/wareflow-project --skill performance-muhamadanang

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: performance
Source: https://github.com/MuhamadAnang/wareflow-project/tree/main/.agents/skills/performance
Command: npx skills add https://github.com/MuhamadAnang/wareflow-project --skill performance-muhamadanang

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses slow website loading times and poor user experience by identifying and resolving performance bottlenecks.

Core Features & Use Cases

Bottleneck Identification: Pinpoints issues in code, assets, and server response times.
Optimization Strategies: Provides actionable code examples and best practices for critical rendering path, image, font, and script optimization.
Performance Budgeting: Defines clear targets for resource sizes and load times.
Use Case: Improve your site's Lighthouse score by implementing the recommended optimizations for JavaScript, CSS, and image loading.

Quick Start

Optimize the performance of the website at the provided URL.

Frequently Asked Questions about performance

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

FAQPage Schema

How do I improve my website's Lighthouse score and loading speed?▼

Improve your website's Lighthouse score by analyzing audits to implement critical rendering path, JavaScript, CSS, and image loading optimizations. This process targets faster loading, runtime efficiency, and resource optimization to boost overall speed.

What are Web Vitals and how do they affect frontend optimization strategies?▼

Web Vitals like LCP, FCP, and TBT are key metrics measuring user experience and loading speed. Frontend optimization strategies target these metrics directly by streamlining resource delivery, blocking unnecessary scripts, and prioritizing critical assets.

How do I set and enforce a performance budget for web assets?▼

Set a performance budget by defining clear targets for maximum resource sizes and load times. Enforce it by measuring key metrics during development and applying optimization strategies for JavaScript, CSS, and image loading to stay within limits.

What is the best way to optimize the critical rendering path for faster loading?▼

The best way to optimize the critical rendering path is to minimize render-blocking resources by deferring non-critical JavaScript and inlining critical CSS. This ensures the browser processes essential elements immediately for a faster FCP.

Does this performance optimization approach work for both image and font loading?▼

Yes, this performance optimization approach works for both image and font loading. It provides actionable code examples and best practices to efficiently deliver assets, addressing runtime efficiency and resolving bottlenecks for these specific resources.

Why does my website have poor TBT and how can I reduce runtime bottlenecks?▼

Poor TBT occurs when heavy JavaScript blocks the main thread during loading. Reduce runtime bottlenecks by implementing script optimization strategies, minimizing unused code, and adhering to performance budgets to improve runtime efficiency.