skills.rest
Objective-Arts
Objective-ArtsOFFICIAL
Explore all skills by this author →
GitHub

js-perf

Optimize JavaScript performance by applying code splitting, tree shaking, and image optimization.

Updated Feb 17, 2026
Search Tags:#performance#web vitals#optimization#javascript#code splitting#bundling
One-click install
npx skills add https://github.com/Objective-Arts/lens-dist --skill js-perf
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: js-perf
Source: https://github.com/Objective-Arts/lens-dist/tree/main/canon/js-perf
Command: npx skills add https://github.com/Objective-Arts/lens-dist --skill js-perf

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses the critical need to improve the performance of JavaScript-heavy web applications, leading to faster load times, better user experience, and improved Core Web Vitals scores.

Core Features & Use Cases

  • Performance Optimization: Apply Addy Osmani's JS performance philosophy and patterns.
  • Core Web Vitals Improvement: Focus on LCP, FID/INP, and CLS.
  • Code Splitting & Bundling: Implement strategies to reduce JavaScript payload size.
  • Image Optimization: Utilize modern formats and responsive techniques.
  • Use Case: Optimize a slow-loading e-commerce product page by implementing route-based code splitting, optimizing images with AVIF/WebP, and ensuring critical CSS is inlined.

Quick Start

Use the js-perf skill to analyze the current JavaScript bundle size and identify opportunities for tree shaking.

Frequently Asked Questions about js-perf

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

FAQPage Schema
How do I optimize JavaScript performance for better Core Web Vitals?▼

Improve Core Web Vitals by optimizing JavaScript performance through code splitting, tree shaking, and image loading strategies. Focus on reducing bundle size and applying established patterns to enhance LCP, FID/INP, and CLS scores for faster load times.

What's the best way to reduce JavaScript bundle size with code splitting?▼

Reduce JavaScript bundle size by implementing route-based code splitting and tree shaking. Analyze your current bundle to identify opportunities for removing unused code and loading JavaScript payloads dynamically only when needed.

How does tree shaking work to remove unused JavaScript code?▼

Tree shaking removes unused JavaScript code from bundles by statically analyzing import and export statements. This reduces payload size by excluding dead code, ensuring only executed code is included in the final bundle.

Can I use this approach to optimize images with AVIF and WebP formats?▼

Yes, optimize images using modern formats like AVIF and WebP alongside responsive loading techniques. This reduces payload size and improves load times, directly contributing to better Core Web Vitals scores for web applications.

Do I need performance budgets to measure real-user metrics for JavaScript optimization?▼

Yes, performance budgets are required to measure real-user metrics effectively. Adhering to these budgets ensures JavaScript optimizations maintain acceptable load times and Core Web Vitals scores as the web application scales.

Related Skills

Explore More Software Engineering Skills→
MFS-codeMFS-code
8

benchmark

Measure page load performance and compare metrics against saved baselines.

Community
Advanced
hopeoverturehopeoverture
6

performance-budget-enforcer

Enforce performance budgets on bundle sizes, Lighthouse scores, and Web Vitals in CI/CD pipelines.

Community
Advanced
Kinfe123Kinfe123
35

build-pipelines-bundling

Explains bundling, code splitting, tree shaking for Webpack, Vite, esbuild.

Community
Advanced
7a336e6e7a336e6e
1

Bundling Frontend — Optimisation & Deployment

Optimizes JavaScript and CSS bundles for Next.js applications via code splitting and Tailwind CSS tuning.

Community
Advanced