skills.rest
delbyte
delbyteCOMMUNITY
Explore all skills by this author →
𝕏@delbyteGitHub

optimize

Diagnose web performance bottlenecks and fix Core Web Vitals issues.

Updated Mar 24, 2026
Search Tags:#performance#frontend#optimization#web#bundle-size#core-web-vitals
One-click install
npx skills add https://github.com/delbyte/ciao-bello-website --skill optimize-delbyte
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: optimize
Source: https://github.com/delbyte/ciao-bello-website/tree/main/.agents/skills/optimize
Command: npx skills add https://github.com/delbyte/ciao-bello-website --skill optimize-delbyte

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Identify and fix performance issues to create faster, smoother user experiences.

Core Features & Use Cases

  • Loading performance: optimize images, JavaScript, CSS, and fonts to reduce LCP and TTI.
  • Rendering & animation: minimize layout thrash, leverage GPU-accelerated transforms, and apply containment.
  • Framework & network optimization: code-splitting, debouncing, virtualized lists, and efficient API usage.
  • Core Web Vitals & Monitoring: measure LCP, CLS, FID, TTI, and set up performance monitoring.

Quick Start

Apply the recommended optimizations to a sample page and measure Core Web Vitals before and after

Frequently Asked Questions about optimize

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

FAQPage Schema
How do I improve Core Web Vitals like LCP and CLS for my web application?▼

Improve Core Web Vitals by optimizing images, JavaScript, and fonts to reduce LCP and TTI, while minimizing layout shifts. This Skill diagnoses loading and rendering bottlenecks, providing a structured optimization plan with code snippets to fix them.

What's the best way to reduce JavaScript bundle size and improve loading speed?▼

Reduce JavaScript bundle size and improve loading speed by applying code-splitting and efficient API usage. This Skill identifies bundle-size bottlenecks across web projects and recommends framework and network optimizations for faster performance.

How can I fix frontend rendering and animation bottlenecks for smoother UX?▼

Fix frontend rendering and animation bottlenecks by minimizing layout thrash and leveraging GPU-accelerated transforms. This Skill diagnoses rendering issues and applies CSS containment to create smoother, faster user interfaces.

Does this approach work for measuring time to interactive in web interfaces?▼

Yes, measuring time to interactive is a core capability of this approach. It requires measuring TTI alongside Core Web Vitals like LCP, CLS, and FID, then applies practical optimizations to reduce time to interactive across web projects.

Why does my web interface experience slow loading speeds and how do I diagnose it?▼

Slow loading speeds often stem from unoptimized images, render-blocking JavaScript, or large bundle sizes. This Skill diagnoses these frontend performance issues by measuring Core Web Vitals and following a structured plan to fix bottlenecks.

Related Skills

Explore More Software Engineering Skills→
JochenYangJochenYang
21

performance-optimizer

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

Community
Intermediate
heyparth1heyparth1

optimize

Analyze web performance metrics and apply optimization techniques for Core Web Vitals.

Community
Advanced
mouayadakelmouayadakel

code-splitting-optimizer

Analyze component size and dependency graphs to suggest dynamic import strategies.

Community
Intermediate
wilfriedagowilfriedago
2

angular-performance

Optimize Angular performance with NgOptimizedImage, @defer lazy loading, and SSR hydration.

Community
Intermediate