skills.rest
wellsgz
wellsgzCOMMUNITY
Explore all skills by this author →
GitHub

optimize

Diagnose and fix frontend web performance bottlenecks to improve Core Web Vitals.

Updated Feb 8, 2026
Search Tags:#performance#frontend#optimize#web#bundle-size#core-web-vitals
One-click install
npx skills add https://github.com/wellsgz/SonarScope --skill optimize-wellsgz
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: optimize
Source: https://github.com/wellsgz/SonarScope/tree/main/.codex/skills/optimize
Command: npx skills add https://github.com/wellsgz/SonarScope --skill optimize-wellsgz

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Performance bottlenecks slow loads, hamper interactions, and degrade user satisfaction. This Skill guides identifying and fixing such issues to deliver faster, smoother experiences for users.

Core Features & Use Cases

  • Diagnose loading, rendering, animation, and network bottlenecks in web UIs.
  • Implement targeted optimizations (image formats, code-splitting, critical CSS, caching) to improve Core Web Vitals.
  • Use case: A slow dashboard loads in under 2 seconds after optimizing images and bundling.

Quick Start

Run a targeted performance audit and implement the recommended optimizations to achieve measurable improvements.

Frequently Asked Questions about optimize

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

FAQPage Schema
How do I optimize web frontend performance to improve Core Web Vitals?▼

To optimize web frontend performance, you diagnose loading, rendering, and network bottlenecks, then implement targeted fixes like image optimization and code-splitting to improve Core Web Vitals and reduce Time to Interactive.

What causes slow loading and rendering bottlenecks in web UIs?▼

Slow loading and rendering bottlenecks in web UIs are caused by unoptimized images, large bundle sizes, and render-blocking resources. Identifying these issues allows you to apply critical CSS and caching strategies for smoother interactions.

How do I reduce bundle size and Time to Interactive for a web application?▼

You can reduce bundle size and Time to Interactive by implementing code-splitting and optimizing image formats. This performance engineering practice directly targets loading bottlenecks to deliver faster, measurable improvements.

Does this approach work for optimizing slow dashboards and complex interfaces?▼

Yes, this approach works for optimizing slow dashboards and complex interfaces by diagnosing specific loading and animation bottlenecks. Applying targeted optimizations like bundling and image compression can bring dashboard load times under 2 seconds.

What's the best way to run a performance audit on a frontend web application?▼

The best way to run a performance audit on a frontend web application is to systematically identify loading, rendering, and animation bottlenecks, then implement recommended optimizations like critical CSS and caching to achieve measurable improvements.

Related Skills

Explore More Software Engineering Skills→
Itinerant18Itinerant18

web-performance-optimization

Analyze Core Web Vitals and optimize frontend loading performance.

Community
Advanced
hiddink-aihiddink-ai
1

optimize-report

Generate optimization reports analyzing bundle size, performance metrics, and code quality.

Official
Intermediate
SylphxAISylphxAI
4

performance

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

Official
Intermediate
capaas2capaas2

react-best-practices

Diagnose React and Next.js performance bottlenecks in application code.

Community
Advanced