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

Ready to run

npx skills add https://github.com/Objective-Arts/lens-dist --skill js-perf

💬 Prompt for ChatGPT / Claude Chat▼

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.