skills.rest
Emmraan
EmmraanCOMMUNITY
Explore all skills by this author →
GitHub

frontend-performance

Audit frontend performance and optimize Core Web Vitals metrics.

Updated Mar 14, 2026
Search Tags:#performance#frontend#web vitals#optimization#bundle size#rendering#auditing
One-click install
npx skills add https://github.com/Emmraan/agent-skills --skill frontend-performance-emmraan
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-performance
Source: https://github.com/Emmraan/agent-skills/tree/main/skills/frontend-performance
Command: npx skills add https://github.com/Emmraan/agent-skills --skill frontend-performance-emmraan

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill addresses slow website loading times, janky user interactions, and poor Core Web Vitals scores, ensuring a fast, smooth, and responsive user experience.

Core Features & Use Cases

  • End-to-End Auditing: Diagnoses performance bottlenecks from network requests to rendering.
  • Core Web Vitals Optimization: Guides the AI to improve LCP, INP, and CLS scores.
  • Bundle Analysis & Optimization: Identifies and reduces JavaScript bundle sizes.
  • Rendering & Memory Profiling: Detects and fixes layout shifts, jank, and memory leaks.
  • Use Case: A user reports their e-commerce product page is slow to load and interactions are laggy. This Skill will guide the AI to audit the page, identify the LCP element bottleneck, optimize image loading, break down long JavaScript tasks, and ensure smooth scrolling and interaction responsiveness.

Quick Start

Use the frontend-performance skill to audit the performance of the provided URL and suggest optimizations.

Frequently Asked Questions about frontend-performance

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

FAQPage Schema
How do I optimize Core Web Vitals like LCP, INP, and CLS for my website?▼

To optimize Core Web Vitals, you must audit your page to identify bottlenecks affecting LCP, INP, and CLS scores. This involves analyzing element loading, breaking down long JavaScript tasks, and fixing layout shifts to ensure a smooth user experience.

What is the best way to reduce JavaScript bundle size for faster web performance?▼

The best way to reduce JavaScript bundle size is through comprehensive bundle analysis to identify unnecessary dependencies and bloat. This process pinpoints specific optimization opportunities to minimize script sizes and improve overall loading speed.

How do I fix slow loading and laggy interactions on my e-commerce product pages?▼

Fixing slow loading and laggy interactions requires an end-to-end performance audit to diagnose rendering and network bottlenecks. You optimize the LCP element, improve image loading, and break down long tasks to restore responsiveness.

Why does my web application have janky scrolling and layout shifts during rendering?▼

Janky scrolling and layout shifts occur due to rendering inefficiencies and unoptimized asset loading. Profiling runtime memory and rendering processes helps detect these issues, allowing you to implement fixes that ensure smooth visual stability.

Can I perform a frontend performance audit without external dependencies or libraries?▼

Yes, you can perform a frontend performance audit without external dependencies by utilizing a built-in engineering framework. This approach guides the AI directly through auditing, diagnosis, and optimization using modern browser capabilities and metrics.

How do I identify memory leaks and runtime bottlenecks affecting frontend performance?▼

You identify memory leaks and runtime bottlenecks through runtime profiling and memory management analysis. This process detects hidden issues causing jank and sluggish interactions, enabling data-driven improvements grounded in real-world metrics.

Related Skills

Explore More Software Engineering Skills→
chiruu12chiruu12
1

benchmark

Automate web page performance benchmarking to detect regressions in load times and Core Web Vitals.

Community
Advanced
JochenYangJochenYang
21

performance-optimizer

Identify performance bottlenecks and optimize application speed across backend, database, and frontend workflows.

Community
Intermediate
HieubkavHieubkav

web-performance-audit

Measure Core Web Vitals and identify web performance bottlenecks.

Community
Advanced
FlorianBruniauxFlorianBruniaux
77

core-web-vitals

Identify and optimize LCP, INP, and CLS metrics in Next.js and React projects.

Community
Advanced