optimize

Diagnose and fix web app performance issues using Core Web Vitals and optimization techniques.

9|3|Updated Nov 28, 2025
One-click install
npx skills add https://github.com/get-convex/components-submissions-directory --skill optimize-get-convex
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: optimize
Source: https://github.com/get-convex/components-submissions-directory/tree/main/.codex/skills/optimize
Command: npx skills add https://github.com/get-convex/components-submissions-directory --skill optimize-get-convex

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Performance bottlenecks degrade user experience; this Skill helps identify and fix them to deliver faster, smoother apps.

Core Features & Use Cases

  • Assess and measure: Gather Core Web Vitals data (LCP, FID, CLS), load times, and bundle sizes to locate bottlenecks.
  • Optimization techniques: Apply image optimization, code-splitting, lazy loading, CSS and font optimization, and resource ordering.
  • Use Case: For a slow React app, reduce Time to Interactive from 6s to under 2s by addressing large images and heavy JavaScript.

Quick Start

Run a structured performance audit on your web app and implement the recommended improvements.

Frequently Asked Questions about optimize

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

FAQPage Schema
How do I diagnose Core Web Vitals issues and fix slow loading times?

Diagnose Core Web Vitals issues by measuring LCP, FID, CLS, and load times to locate bottlenecks, then apply image optimization, code-splitting, and lazy loading to fix slow loading and deliver smoother web apps.

What's the best way to reduce JavaScript bundle size in a React app?

The best way to reduce JavaScript bundle size is applying code-splitting, lazy loading, and resource ordering techniques, which minimizes heavy JavaScript payloads and significantly improves Time to Interactive in web applications.

How do I optimize images and fonts to improve frontend rendering performance?

Optimize images and fonts to improve frontend rendering performance by applying structured optimization techniques like resource ordering, which reduces payload sizes and prevents layout shifts, resulting in smoother user interactions.

Can I measure and validate web performance improvements using before and after metrics?

Yes, you can validate web performance improvements by comparing before and after metrics, tracking Core Web Vitals and load times to ensure your optimization techniques effectively reduced bottlenecks and improved overall smoothness.

Why does my web app have poor Core Web Vitals despite having no external dependencies?

Poor Core Web Vitals without external dependencies often stems from unoptimized images, heavy JavaScript bundles, and inefficient CSS or font loading, which can be diagnosed by measuring load times and fixing resource ordering.