skills.rest
messeb
messebCOMMUNITY
Explore all skills by this author →
Website𝕏@_messebGitHub

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
One-click install
npx skills add https://github.com/messeb/skills --skill performance-messeb
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
JochenYangJochenYang
21

performance-optimizer

Identify performance bottlenecks and optimize application speed across backend, database, and frontend workflows.

Community
Intermediate
thejordanleopoldthejordanleopold
4

frontend-performance

Diagnose and fix frontend performance bottlenecks across Core Web Vitals and bundle size.

Community
Advanced
irizqiirizqi

react-vite-best-practices

Optimize React application builds with Vite configuration for bundle size reduction.

Community
Advanced
YuDefineYuDefine
45

optimize

Identify and fix frontend performance bottlenecks in web apps and SPAs.

Official
Advanced