Diagnose and fix web performance issues across loading, rendering, animations, and bundle size.
npx skills add https://github.com/Ssrrb/cerramos-codebase --skill optimize-ssrrb
Please help me install this Agent Skill. Skill: optimize Source: https://github.com/Ssrrb/cerramos-codebase/tree/main/.codex/skills/optimize Command: npx skills add https://github.com/Ssrrb/cerramos-codebase --skill optimize-ssrrb
High-intent search queries and answers about installing and using this skill.
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. Measure with Lighthouse before and after each change.
Reduce bundle size with route-based and component-based code splitting, tree shaking unused code, removing unused dependencies, and lazy loading heavy components via dynamic imports. Use a bundle analyzer to identify the largest contributors first.
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 in a separate pass.
Animate only transform and opacity, which are GPU-accelerated and skip layout and paint stages. Avoid animating width, height, top, or left, since they trigger expensive layout recalculations on every frame.
Never lazy load above-the-fold content such as hero images, since it delays LCP and hurts perceived speed. 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.
racciolyRun Lighthouse audits and analyze Core Web Vitals to identify performance bottlenecks.
summarybotngTest web applications across browsers, platforms, and devices using BrowserStack and Playwright.
akashic-devkitOptimize React and Next.js apps with prioritized performance-improvement rules.
