skills.rest
Dazlarus
DazlarusCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

web-performance

Optimizes Core Web Vitals, bundle sizes, and lazy loading for web applications.

Updated Sep 2, 2026
Search Tags:#react#lighthouse#lazy loading#web performance#code splitting#core web vitals#bundle optimization
One-click install
npx skills add https://github.com/Dazlarus/karl-code --skill web-performance-dazlarus
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-performance
Source: https://github.com/Dazlarus/karl-code/tree/main/.agents/skills/web-performance
Command: npx skills add https://github.com/Dazlarus/karl-code --skill web-performance-dazlarus

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Slow page loads, bloated JavaScript bundles, and poor Core Web Vitals scores hurt user experience and search rankings. This Skill provides concrete patterns for diagnosing and fixing frontend performance issues. ## Core Features & Use Cases - Code Splitting & Lazy Loading: Implement dynamic imports, route-based splitting, and React.lazy/Suspense patterns to shrink initial bundles. - Core Web Vitals Optimization: Improve LCP with resource preloading, reduce FID with deferred scripts and Web Workers, and prevent CLS with aspect-ratio reservations and skeleton loaders. - Bundle & Asset Optimization: Apply tree shaking, compression, cache headers, Service Worker caching, and responsive image techniques. - Use Case: Your Next.js landing page has a 4-second LCP and a 2MB bundle. Use this Skill to preload the hero image, split route-level code, tree-shake lodash imports, and add web-vitals tracking to verify improvements. ## Quick Start Ask the agent to analyze your page's Core Web Vitals and apply code splitting, image optimization, and caching improvements to reduce load time.

Frequently Asked Questions about web-performance

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

FAQPage Schema
How do I improve Core Web Vitals on my website?▼

Improve Core Web Vitals by preloading critical resources for LCP, deferring non-critical JavaScript and using Web Workers for FID, and reserving space with aspect-ratio CSS and skeleton loaders for CLS. Track results with the web-vitals library.

How to reduce JavaScript bundle size with code splitting?▼

Use dynamic imports with React.lazy and Suspense to split components and routes into separate chunks. Combine this with tree shaking by importing only specific functions (e.g., from lodash-es) and enabling usedExports in webpack production mode.

Does lazy loading images help page load time?▼

Yes, lazy loading defers offscreen image downloads until needed, reducing initial page weight. Use the loading="lazy" attribute with responsive srcset images, or the Next.js Image component with priority only for above-the-fold hero images.

When should I not apply web performance optimization?▼

Avoid premature optimization before measuring actual bottlenecks. This Skill covers frontend concerns only; use backend profiling for server issues, database query optimization for data layers, and API-level fixes for network problems.

How do I prevent Cumulative Layout Shift (CLS)?▼

Prevent CLS by reserving space for dynamic content using CSS aspect-ratio properties, setting explicit width and height on images, and rendering skeleton placeholders while content loads. This stops elements from shifting as assets arrive.

Related Skills

Explore More Software Engineering Skills→
LucasMalessaLucasMalessa

ring:dev-frontend-performance

Coordinate QA analysts to measure Core Web Vitals and Lighthouse scores for frontend tasks.

Community
Advanced
hopeoverturehopeoverture
6

performance-budget-enforcer

Enforce performance budgets on bundle sizes, Lighthouse scores, and Web Vitals in CI/CD pipelines.

Community
Advanced
logo-solutionslogo-solutions

performance-optimization

Profile applications with Lighthouse and web-vitals to identify and fix performance bottlenecks.

Official
Advanced
armanzeroeightarmanzeroeight
29

ssr-ssg-advisor

Advise on Next.js rendering strategies for SSR, SSG, ISR, and CSR.

Community
Intermediate