skills.rest
LinCie
LinCieCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

optimize

Diagnose and fix web interface performance issues across loading, rendering, animations, and bundle size.

Updated Mar 20, 2026
Search Tags:#performance#react#optimization#bundle size#lighthouse#lazy loading#core web vitals
One-click install
npx skills add https://github.com/LinCie/bearuang --skill optimize-lincie
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: optimize
Source: https://github.com/LinCie/bearuang/tree/main/.agents/skills/optimize
Command: npx skills add https://github.com/LinCie/bearuang --skill optimize-lincie

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Slow load times, janky animations, and bloated bundles degrade user experience and hurt Core Web Vitals scores. This Skill provides a systematic workflow to measure, diagnose, and fix frontend performance problems instead of guessing at optimizations. ## Core Features & Use Cases - Measurement-First Diagnosis: Assess Core Web Vitals (LCP, FID/INP, CLS), bundle size, runtime performance, and network waterfalls before changing any code. - Loading & Bundle Optimization: Apply image optimization (WebP/AVIF, srcset, lazy loading), code splitting, tree shaking, font subsetting, and critical CSS strategies. - Rendering & Animation Fixes: Eliminate layout thrashing, use GPU-accelerated transform/opacity animations, virtualize long lists, and apply React memoization patterns. - Use Case: A React app's product page has a 6-second LCP and layout shifts on mobile. Use this Skill to measure the bottlenecks, then apply responsive images, route-based code splitting, and aspect-ratio reservations to hit green Core Web Vitals. ## Quick Start Ask the AI to analyze your page's performance bottlenecks and optimize the slowest parts, for example: "Optimize the landing page — LCP is 5s on mobile and the bundle is over 1MB."

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 scores on my website?▼

Improve Core Web Vitals by optimizing LCP with hero image compression and preloading, reducing INP by breaking up long JavaScript tasks, and fixing CLS by setting explicit image dimensions and aspect-ratio. Always measure with Lighthouse before and after each change.

How to reduce JavaScript bundle size in a React app?▼

Reduce bundle size with route-based code splitting, dynamic imports for heavy components, tree shaking unused code, and removing unused dependencies. Use a bundle analyzer to identify the largest contributors first.

What is layout thrashing and how do I fix it?▼

Layout thrashing happens when JavaScript alternates between reading layout properties and writing styles, forcing repeated reflows. Fix it by batching all reads first, then performing all writes together.

Should I use transform or left/top for CSS animations?▼

Use transform and opacity for animations because they are GPU-accelerated and skip layout and paint stages. Animating left, top, width, or height triggers expensive layout recalculations and causes jank.

When should I not lazy load images?▼

Never lazy load above-the-fold content like hero images, since it delays LCP and hurts perceived speed. Reserve lazy loading for below-fold images and use loading="lazy" with proper srcset sizing.

Related Skills

Explore More Software Engineering Skills→
SPeeDoA1SPeeDoA1
6

performance-audit

Audit web application performance with Lighthouse, WebPageTest, and Chrome DevTools.

Community
Intermediate
openaiopenai
5.3k

observability

Configure Vercel logging, Drains, Web Analytics, and Speed Insights for application monitoring.

Official
Advanced
cwpete61cwpete61

geo

Analyze websites for AI search visibility and GEO optimization.

Community
Advanced
gauravb4875-uxgauravb4875-ux

programmatic-seo

Generate SEO-optimized pages from data and templates.

Community
Advanced