performance

Optimize web performance by addressing rendering, networking, and runtime bottlenecks.

Updated Mar 3, 2026
One-click install
npx skills add https://github.com/createtree2017/createtree-office --skill performance-createtree2017
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: performance
Source: https://github.com/createtree2017/createtree-office/tree/main/.agents/skills/performance
Command: npx skills add https://github.com/createtree2017/createtree-office --skill performance-createtree2017

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Slow loading pages waste attention, increase bounce rates, and hurt user experience by delaying rendering, interactivity, and key metrics like Core Web Vitals.

Core Features & Use Cases

  • Performance audit–driven optimization: Targets the biggest Lighthouse bottlenecks first and prioritizes changes by impact on Core Web Vitals.
  • Faster critical rendering: Improves server response timing, compression, caching, and the critical rendering path (TTFB, preload/preconnect, render-blocking resources).
  • Smaller and smarter assets: Optimizes JavaScript loading (defer/async, code splitting, tree shaking), images (modern formats + responsive delivery), and fonts (preload and font-display strategy).
  • Run-time smoothness improvements: Reduces layout thrashing, improves event handling via debouncing, and uses requestAnimationFrame patterns; supports virtualizing long lists.
  • Real-world use case: If your internal manual portal feels sluggish on first load, apply this guidance to reduce page weight, speed up LCP, and cut main-thread work until users perceive the site as immediate.

Quick Start

Use the performance skill to diagnose why your page is slow and apply targeted changes based on Core Web Vitals targets and Lighthouse findings.

Frequently Asked Questions about performance

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

FAQPage Schema
How do I improve Core Web Vitals and fix slow loading pages?

Improve Core Web Vitals by addressing bottlenecks in rendering, networking, and runtime execution. Target the biggest Lighthouse findings first, such as slow first paint, heavy images, and render-blocking scripts, to prioritize changes by impact.

What's the best way to optimize the critical rendering path for faster LCP?

Optimize the critical rendering path by improving server response timing, applying compression, enabling caching, and using preload or preconnect directives. Fixing these render-blocking issues directly reduces Time to First Byte and speeds up Largest Contentful Paint.

How do I reduce JavaScript bundle size and main-thread execution time?

Reduce JavaScript bundle size and main-thread execution time by applying code splitting, tree shaking, and defer or async script loading. These targeted runtime optimizations cut unnecessary code execution and improve page interactivity.

How can I optimize images and fonts to reduce page weight?

Optimize images and fonts to reduce page weight by adopting modern image formats with responsive delivery and implementing font preloading alongside a font-display strategy. This prevents invisible text and delays in rendering visual assets.

Why does my web app feel sluggish during scrolling and interaction?

Your web app feels sluggish due to layout thrashing and inefficient event handling. Fix this runtime smoothness issue by reducing layout shifts, debouncing event handlers, using requestAnimationFrame patterns, and virtualizing long lists.