performance

Optimize frontend performance by improving Core Web Vitals and reducing bundle size.

Updated Mar 8, 2026

Search Tags:#performance #frontend #web vitals #optimization #bundle size #loading speed

Ready to run

npx skills add https://github.com/messeb/skills --skill performance-messeb

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: performance
Source: https://github.com/messeb/skills/tree/main/plugins/frontend-developer/skills/performance
Command: npx skills add https://github.com/messeb/skills --skill performance-messeb

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill addresses the critical need to improve frontend performance, ensuring faster load times, smoother interactions, and better user engagement by optimizing Core Web Vitals and resource loading.

Core Features & Use Cases

Core Web Vitals Optimization: Provides guidance on improving LCP, INP, and CLS metrics.
Bundle Size Reduction: Offers strategies for code splitting, tree-shaking, and eliminating large dependencies.
Loading & Rendering Performance: Details techniques for preloading, script loading strategies, and avoiding layout thrashing.
Image & Font Optimization: Covers modern image formats, responsive images, and font loading best practices.

Quick Start

Analyze the current frontend performance of the project and suggest immediate optimizations.

Frequently Asked Questions about performance

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

FAQPage Schema

How do I improve Core Web Vitals like LCP, INP, and CLS for my website?▼

To improve Core Web Vitals, optimize LCP, INP, and CLS by focusing on resource loading and rendering strategies. This Skill provides actionable insights and code examples for these specific frontend metrics.

What is the best way to reduce frontend bundle size?▼

The best way to reduce frontend bundle size is implementing code splitting, tree-shaking, and eliminating large dependencies. This Skill offers specific strategies to minimize bundle size and improve overall loading speed.

How can I optimize image loading to prevent layout shifts?▼

Optimize image loading by adopting modern image formats, implementing responsive images, and applying lazy loading techniques. These frontend optimizations prevent layout shifts and improve rendering performance.

Why does my webpage experience slow loading speed despite small bundle size?▼

Slow loading speed despite a small bundle size often stems from inefficient loading strategies like render-blocking scripts or layout thrashing. This Skill details script loading strategies and preloading techniques to resolve these rendering bottlenecks.

Does this Skill provide code examples for frontend performance optimization?▼

Yes, this Skill provides code examples for modern image formats, lazy loading, and script optimization. It analyzes your project's frontend performance and suggests immediate optimizations with actionable code snippets.