optimize

Measure and fix web performance bottlenecks across loading, rendering, and bundle size.

2.4k|295|Updated Feb 7, 2026
One-click install
npx skills add https://github.com/The-Vibe-Company/companion --skill optimize-the-vibe-company
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: optimize
Source: https://github.com/The-Vibe-Company/companion/tree/main/archived/legacy-companion/.agents/skills/optimize
Command: npx skills add https://github.com/The-Vibe-Company/companion --skill optimize-the-vibe-company

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Identify and fix performance issues across web interfaces to deliver faster, smoother user experiences.

Core Features & Use Cases

  • Performance assessment: measure and diagnose bottlenecks across LCP, FID/INP, CLS, and bundle size.
  • Targeted optimizations: propose image, JS, CSS, and rendering improvements with concrete steps.
  • Use case: For a slow onboarding page, optimize images, code-splitting, and CSS to reduce TTI and CLS.

Quick Start

Identify and fix performance bottlenecks in a web application.

Frequently Asked Questions about optimize

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

FAQPage Schema
How do I identify and fix web performance bottlenecks for Core Web Vitals?

Web performance bottlenecks are identified by measuring Core Web Vitals like LCP, FID/INP, and CLS. You can fix these issues by applying targeted image, JS, CSS, and rendering optimizations to reduce loading times and improve user experience.

What is the best way to reduce Time to Interactive (TTI) on a slow onboarding page?

The best way to reduce TTI on a slow page is to implement image optimizations, JS code-splitting, and CSS improvements. This reduces bundle size and rendering bottlenecks, delivering a faster, smoother user experience.

How do I diagnose high Cumulative Layout Shift (CLS) and Large Contentful Paint (LCP) issues?

Diagnose high CLS and LCP issues by running performance assessments on your web interface. This measures core web vitals directly, allowing you to pinpoint rendering and loading bottlenecks before applying concrete optimization steps.

Can I validate frontend performance improvements with repeatable checks?

Yes, you validate frontend performance improvements by measuring metrics before and after optimizations. This applies repeatable checks to your web interface, ensuring that loading, rendering, and bundle size changes result in actual improvements.

Why does my web app have a large bundle size and how can I optimize it?

Your web app has a large bundle size due to unoptimized JS and CSS. You can optimize bundle size by applying targeted code-splitting and rendering improvements, which minimizes loading times and ensures smoother web app performance.