skills.rest
SL-A-SH
SL-A-SHCOMMUNITY
Explore all skills by this author →
GitHub

optimize

Diagnose Core Web Vitals and optimize front-end loading, rendering, and bundle size.

Updated Jan 22, 2025
Search Tags:#performance#frontend#optimization#images#web-performance#bundle-size#core-web-vitals
One-click install
npx skills add https://github.com/SL-A-SH/my-portfolio --skill optimize-sl-a-sh
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: optimize
Source: https://github.com/SL-A-SH/my-portfolio/tree/main/.claude/skills/optimize
Command: npx skills add https://github.com/SL-A-SH/my-portfolio --skill optimize-sl-a-sh

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams identify and fix front-end performance bottlenecks so users experience faster page loads, smoother interactions, and fewer visual disruptions across devices and network conditions.

Core Features & Use Cases

  • Performance measurement & diagnosis: Collect Core Web Vitals, TTI, FCP, runtime CPU/memory, and network waterfalls to pinpoint slow areas.
  • Loading and asset optimization: Recommendations for image formats, responsive sizing, lazy loading, CDNs, font loading, and bundle reduction via code-splitting and tree shaking.
  • Rendering and animation improvement: Techniques to avoid layout thrashing, use GPU-accelerated animations, apply CSS containment, and virtualize long lists.
  • Monitoring and verification: Guidance for using Lighthouse, WebPageTest, RUM, and bundle analyzers to measure before/after impact and prevent regressions.
  • Use case: Audit a marketing site's homepage to reduce LCP, cut JavaScript payloads, and eliminate CLS while preserving accessibility and UX.

Quick Start

Run a performance audit of the homepage, identify the top three user-impacting bottlenecks (LCP, JS bundle, CLS), and produce a prioritized optimization plan with concrete fixes and verification steps.

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 like LCP and CLS for a web front-end?▼

To improve Core Web Vitals, you diagnose LCP, INP, and CLS by collecting runtime CPU, network waterfalls, and rendering metrics, then apply targeted fixes like asset lazy loading and JavaScript code-splitting to reduce bottlenecks.

What is the best way to reduce JavaScript bundle size in a single-page application?▼

The best way to reduce JavaScript bundle size is implementing code-splitting and tree shaking, which eliminates dead code and breaks payloads into smaller chunks loaded on demand.

How do I fix layout thrashing and slow rendering in component-heavy front-ends?▼

Fix layout thrashing and slow rendering by applying CSS containment, using GPU-accelerated animations, and virtualizing long lists to minimize DOM reflows and boost runtime performance.

How do I optimize images and web assets to increase page load speed?▼

Optimize images and web assets by adopting modern image formats, implementing responsive sizing, applying lazy loading, and configuring font loading strategies to decrease payload size.

Can I verify web performance improvements using Lighthouse and real-user monitoring?▼

Yes, you can verify web performance improvements by using Lighthouse, WebPageTest, and real-user monitoring to measure before and after impact, ensuring regressions are actively prevented.

Does front-end performance optimization work for marketing sites and single-page applications?▼

Front-end performance optimization works for marketing sites, single-page applications, and component-heavy front-ends, diagnosing Core Web Vitals and reducing payloads across varying network conditions.

Related Skills

Explore More Software Engineering Skills→
bluebricks-nlbluebricks-nl

performance

Analyze web performance and optimize loading speed, runtime efficiency, and resource utilization.

Official
Advanced
djkloopdjkloop

optimize

Diagnose and fix UI performance issues in web applications using Lighthouse and bundle analyzers.

Community
Intermediate
JordiNodeJSJordiNodeJS

performance-optimization

Optimize Next.js 16 performance by targeting Core Web Vitals and caching.

Community
Advanced
oliverjone01-devoliverjone01-dev
1

optimize

Identify and fix web performance bottlenecks in loading, rendering, and animations.

Community
Intermediate