skills.rest
Dzakiamriz22
Dzakiamriz22COMMUNITY
Explore all skills by this author →
GitHub

performance

Optimize React and Next.js frontend performance by addressing Core Web Vitals.

1|Updated Jul 15, 2026
Search Tags:#performance#caching#frontend#web vitals#optimization#rendering
One-click install
npx skills add https://github.com/Dzakiamriz22/frontend-pack --skill performance-dzakiamriz22
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: performance
Source: https://github.com/Dzakiamriz22/frontend-pack/tree/main/skills/performance
Command: npx skills add https://github.com/Dzakiamriz22/frontend-pack --skill performance-dzakiamriz22

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill addresses slow web application performance by identifying and resolving bottlenecks in rendering, asset loading, and execution, ensuring your site meets modern speed standards.

Core Features & Use Cases

  • Core Web Vitals Optimization: Automatically audit and improve LCP, FID/INP, and CLS scores.
  • Resource Management: Implement code-splitting, lazy loading, and image optimization strategies.
  • Use Case: If your landing page has a high Cumulative Layout Shift (CLS) score, use this skill to audit your image dimensions and font loading strategies to stabilize the layout and improve user experience.

Quick Start

Run the performance skill to audit the current page and provide a list of actionable optimizations for Core Web Vitals.

Frequently Asked Questions about performance

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

FAQPage Schema
How do I optimize Core Web Vitals for a slow React or Next.js application?▼

To optimize Core Web Vitals, you audit rendering bottlenecks, implement asset delivery improvements, and apply caching strategies. This process improves LCP, FID/INP, and CLS scores to ensure your frontend meets modern speed standards.

Why does my landing page have a high Cumulative Layout Shift and how do I fix it?▼

A high Cumulative Layout Shift is often caused by unstable image dimensions or improper font loading. You can fix CLS by auditing your image dimensions and implementing proper font loading strategies to stabilize the layout.

What is the best way to implement code-splitting and lazy loading for frontend optimization?▼

Frontend optimization through code-splitting and lazy loading reduces bundle size and execution time. By implementing these resource management strategies alongside image optimization, you achieve high-performance and responsive web interfaces.

Can I use modern React and Next.js patterns to improve web application rendering efficiency?▼

Yes, you can use modern React and Next.js patterns to improve rendering efficiency. By addressing asset loading and execution bottlenecks, these patterns help satisfy requirements for high-performance, accessible, and responsive web interfaces.

How do I audit my current page performance and get actionable optimizations?▼

You can audit your current page performance to receive a list of actionable optimizations for Core Web Vitals. This audit identifies bottlenecks in rendering, asset loading, and execution to resolve slow web application performance.

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
pixels-and-codepixels-and-code

Performance optimisation

Analyze Lighthouse audits to optimize website loading and runtime performance.

Official
Advanced
yuhle-qugyuhle-qug

react-performance

Profile React apps with React DevTools and web-vitals to optimize rendering and bundles.

Community
Advanced
HieubkavHieubkav

web-performance-audit

Measure Core Web Vitals and identify web performance bottlenecks.

Community
Advanced