skills.rest
1IssaMohamed
1IssaMohamedCOMMUNITY
Explore all skills by this author →
GitHub

optimize

Identify and fix web application performance bottlenecks using Core Web Vitals metrics.

Updated Nov 25, 2025
Search Tags:#frontend#optimize#web-performance#lazy-loading#code-splitting#core-web-vitals
One-click install
npx skills add https://github.com/1IssaMohamed/IEEE-YorkU --skill optimize-1issamohamed
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: optimize
Source: https://github.com/1IssaMohamed/IEEE-YorkU/tree/main/.agents/skills/optimize
Command: npx skills add https://github.com/1IssaMohamed/IEEE-YorkU --skill optimize-1issamohamed

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Performance bottlenecks in web interfaces cause slow loads, janky interactions, and poor user satisfaction. This Skill provides a structured approach to identifying, prioritizing, and applying optimizations across loading, rendering, animations, images, and bundle size to deliver faster, smoother experiences.

Core Features & Use Cases

  • Assessment & measurement: gather Core Web Vitals (LCP, FID/INP, CLS), time to interactive, bundle size, and runtime metrics to locate bottlenecks.
  • Strategic optimization: deliver an end-to-end plan covering loading (images, code-splitting, lazy loading), rendering (efficient DOM, contain, virtualization), animations (smooth, GPU-accelerated), and network optimizations.
  • Verification & monitoring: define before/after success criteria, run lightweight experiments, and monitor improvements through metrics and user feedback.

Quick Start

Identify the top performance bottlenecks in a project and propose a prioritized optimization plan.

Frequently Asked Questions about optimize

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

FAQPage Schema
How do I identify web performance bottlenecks using Core Web Vitals?▼

Identify web performance bottlenecks by gathering Core Web Vitals like LCP, FID/INP, CLS, and TTI to locate slow loading, rendering, and interaction issues, enabling a structured optimization plan for smoother interfaces.

What's the best way to reduce bundle size through code-splitting and lazy loading?▼

Reduce bundle size by applying code-splitting and lazy loading across your network paths and frontend ecosystem, strategically deferring non-critical assets to deliver faster initial page loads and measurable metric improvements.

Can I optimize rendering and animations for mobile web applications?▼

Yes, you can optimize rendering and animations for mobile web applications by adapting to mobile constraints, utilizing efficient DOM structuring, contain, virtualization, and GPU-accelerated animations for smooth interactions.

How do I measure and verify frontend optimization improvements?▼

Measure and verify frontend optimization improvements by defining before/after success criteria, running lightweight experiments, and monitoring outcomes through runtime metrics and user feedback to ensure measurable performance gains.

Why does my web interface experience layout shifts and janky interactions?▼

Your web interface experiences layout shifts and janky interactions due to unoptimized rendering, large bundle sizes, and inefficient animations, which can be fixed by evaluating CLS and applying DOM and image optimizations.

Related Skills

Explore More Software Engineering Skills→
melikhanmutlumelikhanmutlu

performance-profiling

Measure Core Web Vitals and profile runtime behavior with Lighthouse.

Community
Advanced
dhruvil7797dhruvil7797

optimize

Optimize front-end UI performance to improve Core Web Vitals metrics.

Community
Advanced
Canhada-LabsCanhada-Labs
2

Frontend Performance Optimization

Optimize React and TypeScript frontend performance with bundle analysis and Core Web Vitals.

Official
Advanced
christopheraaronhoggchristopheraaronhogg

hiram-performance

Identify web application performance bottlenecks and deliver prioritized optimization recommendations.

Community
Advanced