skills.rest
johwer
johwerCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-performance

Optimize Core Web Vitals and resource loading in React/SPA projects.

Updated Mar 5, 2026
Search Tags:#performance#caching#frontend#react#bundle-analysis#image-optimization#core-web-vitals
One-click install
npx skills add https://github.com/johwer/marketplace --skill frontend-performance-johwer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-performance
Source: https://github.com/johwer/marketplace/tree/main/skills/frontend-performance
Command: npx skills add https://github.com/johwer/marketplace --skill frontend-performance-johwer

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend performance bottlenecks slow user experiences; this skill provides a structured approach to optimize Core Web Vitals, resource loading, and rendering efficiency.

Core Features & Use Cases

  • Core Web Vitals optimization (LCP, INP, CLS)
  • Bundle size reduction and code-splitting
  • Image optimization and caching strategies
  • Use Case: Improve a React SPA's perceived performance on mobile

Quick Start

Apply a performance assessment to a React project to identify top bottlenecks and implement recommended fixes.

Frequently Asked Questions about frontend-performance

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 in a React SPA?▼

Improve Core Web Vitals in a React SPA by optimizing render efficiency, inlining critical CSS, lazy loading images, and applying bundle analysis to reduce LCP, INP, and CLS metrics.

What is the best way to reduce bundle size and optimize resource loading in modern web apps?▼

Reduce bundle size in web apps by performing bundle analysis, implementing code-splitting, and applying resource loading strategies like lazy loading to minimize unnecessary JavaScript execution.

Why does my frontend performance bottleneck on mobile, and how can I measure it?▼

Frontend performance bottlenecks on mobile due to large bundles and render-blocking resources; measure user-perceived speed by running a performance assessment to identify top bottlenecks and apply targeted fixes.

Can I use image optimization and caching strategies to speed up my frontend?▼

Yes, you can speed up your frontend by applying image optimization and caching strategies, which improve resource loading efficiency and directly boost user-perceived speed across modern web apps.

Does this performance optimization approach work for React and other SPA projects?▼

Yes, this performance optimization approach is designed for React and other SPA projects, specifying practical requirements for measurement, analysis, and implementation of render efficiency improvements.

Related Skills

Explore More Software Engineering Skills→
tropekstropeks

benchmark

Measure web performance metrics and compare them against baselines.

Community
Advanced
FlorianBruniauxFlorianBruniaux
77

core-web-vitals

Identify and optimize LCP, INP, and CLS metrics in Next.js and React projects.

Community
Advanced
irizqiirizqi

react-vite-best-practices

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

Community
Advanced
HollowvynHollowvyn

server-side-rendering

Generate complete HTML on the server for React applications.

Official
Intermediate