Diagnose and fix web performance issues across loading, rendering, animations, and bundle size.
npx skills add https://github.com/WeWake1/BSOMS --skill optimize-wewake1
Please help me install this Agent Skill. Skill: optimize Source: https://github.com/WeWake1/BSOMS/tree/main/.agents/skills/optimize Command: npx skills add https://github.com/WeWake1/BSOMS --skill optimize-wewake1
High-intent search queries and answers about installing and using this skill.
Improve Core Web Vitals by optimizing LCP with compressed hero images and critical CSS, reducing INP by breaking up long JavaScript tasks, and fixing CLS by setting explicit dimensions on images and embeds. Measure with Lighthouse before and after each change.
Reduce bundle size with route-based and component-based code splitting, tree shaking unused exports, removing unused dependencies, and lazy loading heavy components via dynamic imports like lazy(() => import('./HeavyChart')).
Layout thrashing happens when JavaScript alternates DOM reads and writes, forcing repeated reflows. Fix it by batching all reads first, then all writes, so the browser performs a single layout pass.
Animate only transform and opacity, which are GPU-accelerated and skip layout and paint. Animating width, height, top, or left triggers expensive reflows and drops frames.
Never lazy load above-the-fold content like hero images, since it delays LCP and hurts Core Web Vitals. Reserve lazy loading for below-fold images and use responsive srcset with modern formats like WebP or AVIF.
SPeeDoA1Audit web application performance with Lighthouse, WebPageTest, and Chrome DevTools.
FairArenaCollect application metrics and trigger alerts via configurable thresholds.
CertChain-IUHPlans cross-context layout and interaction adaptations for mobile and desktop.
HollowvynPre-generate HTML at build time for non-personalized pages and dynamic routes.
