skills.rest
Thiritin
ThiritinCOMMUNITY
Explore all skills by this author →
GitHub

optimize

Identify and fix web performance issues across loading, rendering, and interactions.

Updated Aug 23, 2026
Search Tags:#performance#frontend#optimization#lighthouse#web-performance#core-web-vitals
One-click install
npx skills add https://github.com/Thiritin/skills --skill optimize-thiritin
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: optimize
Source: https://github.com/Thiritin/skills/tree/main/optimize
Command: npx skills add https://github.com/Thiritin/skills --skill optimize-thiritin

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Performance is a core constraint for modern interfaces. Slow load times, janky rendering, and heavy bundles degrade user experience and engagement.

Core Features & Use Cases

  • Assess performance metrics (LCP, FID/INP, CLS, TTI) to understand where to focus.
  • Optimize assets and bundles (images, JavaScript, CSS, fonts) to reduce payloads and render time.
  • Apply targeted rendering and animation optimizations to maintain smooth interactions.
  • Implement robust measurement and verification with before/after comparisons to prove improvements.

Quick Start

Identify the top three performance bottlenecks and implement the simplest, high-impact optimizations to improve load and render speed.

Frequently Asked Questions about optimize

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

FAQPage Schema
How do I fix core web vitals issues like high LCP and layout shift?▼

Frontend performance optimization requires evaluating LCP, INP, and CLS metrics to locate bottlenecks, then reducing bundle size and optimizing images and fonts to achieve faster load times and smoother rendering.

What's the best way to reduce web bundle size for media-rich dashboards?▼

To reduce web bundle size for media-rich dashboards, optimize JavaScript, CSS, and image assets to shrink payloads, which directly decreases network requests and improves initial loading speed.

How do I measure and verify frontend performance improvements?▼

Measure frontend performance improvements by implementing before and after comparisons of metrics like LCP and TTI, which delivers verifiable proof that your optimizations created a faster user experience.

Does frontend optimization work for both single page apps and static pages?▼

Frontend optimization works across web interfaces including single page apps, dashboards, and media-rich pages by applying targeted rendering and animation optimizations to maintain smooth interactions.

Why does my web interface have janky rendering during scroll and animation?▼

Janky rendering during scroll and animation occurs when frontend rendering is unoptimized, requiring targeted animation optimizations to maintain smooth interactions and eliminate visual stutter on web interfaces.

Related Skills

Explore More Software Engineering Skills→
Insik-HanInsik-Han
16

web-perf

Analyzes web performance metrics and generates actionable improvement recommendations via ChromeDevTools MCP and Lighthouse scoring.

Community
Advanced
ZainEldeen-Ashraf-Ibrahim-Ibrahim-SamakZainEldeen-Ashraf-Ibrahim-Ibrahim-Samak

optimize

Diagnose and fix UI performance issues using Core Web Vitals measurements.

Community
Advanced
hughescrhughescr
1

hugo-asset-pipeline

Automate Hugo asset processing with Hugo Pipes for SCSS, JS, and images.

Community
Advanced
simoabidsimoabid
1

nextjs-best-practices

Guide Next.js App Router development with component, data fetching, and routing best practices.

Community
Intermediate