skills.rest
bryanvillamilpragma
bryanvillamilpragmaCOMMUNITY
Explore all skills by this author →
GitHub

frontend-performance

Optimize Angular and React/Next.js frontend performance by improving Core Web Vitals and reducing bundle size.

3|Updated May 5, 2026
Search Tags:#React#Next.js#performance optimization#Angular#Core Web Vitals
One-click install
npx skills add https://github.com/bryanvillamilpragma/power-Pragma --skill frontend-performance-bryanvillamilpragma
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-performance
Source: https://github.com/bryanvillamilpragma/power-Pragma/tree/main/skills-registry/frontend-performance
Command: npx skills add https://github.com/bryanvillamilpragma/power-Pragma --skill frontend-performance-bryanvillamilpragma

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill addresses the challenges of frontend performance optimization for Angular and React/Next.js applications, helping to improve Core Web Vitals, reduce bundle size, and enhance user experience.

Core Features & Use Cases

  • Core Web Vitals Optimization: Improve Largest Contentful Paint (LCP), Interactive Paint (INP), and Cumulative Layout Shift (CLS) metrics.
  • Bundle Size Reduction: Analyze and optimize the size of JavaScript, CSS, and image assets.
  • Rendering Performance: Enhance the rendering speed and efficiency of React and Angular components.
  • Image and Font Optimization: Optimize image and font loading for faster page loads.
  • Caching and Data Fetching: Implement effective caching strategies and efficient data fetching methods.
  • Third-Party Script Impact: Mitigate the impact of third-party scripts on performance.
  • Performance Monitoring: Use Lighthouse CI and Real User Monitoring (RUM) to track performance metrics.

Quick Start

Run the frontend-performance skill to analyze and optimize the performance of your Angular or React/Next.js application.

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 for my React or Angular application?▼

You can optimize Core Web Vitals like LCP, INP, and CLS by enhancing component rendering speed, reducing bundle size, and optimizing image and font loading for your React or Angular application.

What is the best way to reduce JavaScript bundle size in Next.js?▼

The best way to reduce JavaScript bundle size in Next.js is to analyze and optimize your JavaScript, CSS, and image assets while implementing effective caching strategies to minimize delivered payload sizes.

How do I mitigate third-party script impact on frontend performance?▼

Mitigating third-party script impact involves analyzing external script loading behaviors and applying optimization strategies to reduce their blocking effects on rendering and overall page load speed.

Can I use Lighthouse CI to monitor performance metrics for Angular?▼

Yes, you can use Lighthouse CI alongside Real User Monitoring to track performance metrics for Angular, helping you continuously measure rendering speed, Core Web Vitals, and bundle size improvements.

How do I optimize image and font loading for better frontend rendering speed?▼

Optimizing image and font loading requires implementing efficient loading strategies that prioritize critical assets, directly reducing page load times and improving overall rendering performance.

Does this frontend performance optimization work with both React and Next.js frameworks?▼

Yes, this frontend performance optimization provides expert guidance for both React and Next.js frameworks, addressing bundle size reduction, caching strategies, and Core Web Vitals improvements across both ecosystems.

Related Skills

Explore More Software Engineering Skills→
jota-batutajota-batuta

performance-testing

Establish performance baselines and budgets for APIs and web applications.

Community
Advanced
SoborboSoborbo
4

speed-monitoring

Monitor production website performance with Core Web Vitals budgets and alerts.

Community
Advanced
BEIRUXBEIRUX

vercel-react-best-practices

Optimize React and Next.js data fetching and bundle size in code reviews.

Official
Advanced
FlorianBruniauxFlorianBruniaux
88

performance

Analyze web performance bottlenecks and implement Core Web Vitals optimizations.

Community
Advanced