skills.rest
adcuelloa
adcuelloaCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

performance

Identify web performance bottlenecks and implement optimization strategies using Lighthouse audits.

Updated Mar 13, 2026
Search Tags:#performance#frontend#web vitals#optimization#lighthouse#loading speed
One-click install
npx skills add https://github.com/adcuelloa/restaurant-order --skill performance-adcuelloa
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: performance
Source: https://github.com/adcuelloa/restaurant-order/tree/main/.agents/skills/performance
Command: npx skills add https://github.com/adcuelloa/restaurant-order --skill performance-adcuelloa

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 for critical rendering path, JavaScript, images, and fonts.
  • Performance Budgeting: Defines clear targets for page weight, resource sizes, and third-party scripts.
  • Use Case: Improve your website's Lighthouse score by implementing the provided strategies for image optimization and script deferral.

Quick Start

Optimize the performance of the provided website URL by applying best practices for critical rendering path and resource loading.

Frequently Asked Questions about performance

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

FAQPage Schema
How do I identify frontend web performance bottlenecks affecting loading speed?▼

Improve web performance by optimizing the critical rendering path, deferring JavaScript execution, compressing images, and loading fonts efficiently to achieve faster loading speeds and better Core Web Vitals metrics.

What is a performance budget and how does it help web vitals optimization?▼

Web performance optimization works by analyzing Lighthouse audit results and Core Web Vitals metrics to implement strategies for the critical rendering path, resource loading, JavaScript, images, and fonts, ensuring faster loading and improved user experience.

How do I improve my Lighthouse score by optimizing images and deferring scripts?▼

A performance budget establishes strict targets for page weight, resource sizes, and third-party scripts to control web page bloat. Adhering to these defined limits prevents slow loading and maintains optimal Core Web Vitals metrics.

Does web performance optimization work without external dependencies?▼

Web performance optimization requires no external dependencies to analyze Core Web Vitals and implement critical rendering path improvements. You can directly apply strategies for JavaScript, image, and font optimization using built-in reference components.

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

The best way to optimize the critical rendering path is prioritizing above-the-fold resources, minimizing render-blocking scripts, and streamlining resource loading. This targeted approach significantly reduces bottlenecks and improves user experience.

Related Skills

Explore More Software Engineering Skills→
DanialHaseebDanialHaseeb

optimize

Diagnose and fix UI performance issues across loading, rendering, animations, images, and bundle size.

Community
Advanced
statick88statick88
1

performance

Analyze web performance bottlenecks and optimize loading speed and resource utilization.

Community
Advanced
SylphxAISylphxAI
4

performance

Analyze Next.js frontend performance for Core Web Vitals and bundle size.

Official
Intermediate
usermaumusermaum

performance-optimization

Profile TheMoon project code and optimize backend queries, API responses, and frontend rendering.

Community
Advanced