skills.rest
ftnilsson
ftnilssonCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

Frontend Performance

Measure and diagnose frontend performance using Core Web Vitals and Lighthouse.

Updated Feb 15, 2026
Search Tags:#performance#frontend#web vitals#optimization#responsiveness#loading speed
One-click install
npx skills add https://github.com/ftnilsson/agent-cli --skill frontend-performance-ftnilsson
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Frontend Performance
Source: https://github.com/ftnilsson/agent-cli/tree/main/frontend/skills/05-performance-and-core-web-vitals
Command: npx skills add https://github.com/ftnilsson/agent-cli --skill frontend-performance-ftnilsson

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses slow loading times and unresponsiveness in web applications, directly impacting user satisfaction, engagement, and search engine rankings.

Core Features & Use Cases

  • Performance Measurement: Utilizes Core Web Vitals (LCP, INP, CLS) and tools like Lighthouse for diagnostics.
  • Optimization Strategies: Guides on critical rendering path, JavaScript bundling, image optimization, and layout shift reduction.
  • Use Case: Improve a website's Lighthouse performance score from 50 to 85 by implementing code splitting, optimizing image formats, and ensuring proper dimension attributes for all media.

Quick Start

Analyze the current frontend performance using Lighthouse and identify the top three areas for optimization.

Frequently Asked Questions about Frontend Performance

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

FAQPage Schema
How do I improve my website's Core Web Vitals and Lighthouse score?▼

Improve Core Web Vitals by measuring LCP, INP, and CLS with Lighthouse, then optimizing the critical rendering path, JavaScript bundling, and layout shifts. This diagnostic approach systematically raises performance scores.

What is the best way to optimize frontend loading speed and runtime responsiveness?▼

Optimize frontend loading speed by refining the critical rendering path, minimizing JavaScript execution, and handling images properly. Reducing layout shifts further improves runtime responsiveness for web applications.

Why does my web application have high CLS and how do I fix layout shifts?▼

High CLS occurs when media elements lack dimension attributes. Fix layout shifts by ensuring proper dimensions for all media and minimizing dynamic content injection during frontend rendering.

How do I diagnose slow web application performance using browser DevTools?▼

Diagnose slow web application performance by using browser DevTools to analyze the rendering pipeline and Lighthouse to identify top optimization areas like JavaScript bottlenecks and unoptimized images.

Do I need to understand the browser rendering pipeline to optimize frontend performance?▼

Yes, understanding the browser rendering pipeline is required for effective implementation. You must also use DevTools to measure Core Web Vitals and diagnose runtime responsiveness issues accurately.

Can code splitting and image optimization fix unresponsiveness in web applications?▼

Code splitting and image optimization directly fix unresponsiveness by reducing JavaScript bundling size and improving loading speed. These strategies minimize layout shifts and enhance critical rendering paths.

Related Skills

Explore More Software Engineering Skills→
Sir-chawakornSir-chawakorn
9

optimize-core-web-vitals

Diagnose and remediate Core Web Vitals metrics using Lighthouse audits and performance traces.

Community
Advanced
SoborboSoborbo
4

speed-monitoring

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

Community
Advanced
PatternsDevPatternsDev
235

compression

Apply Gzip and Brotli compression to JavaScript assets in build pipelines.

Official
Advanced
ic-facetic-facet

angular-performance

Implements NgOptimizedImage, @defer blocks, and SSR with client hydration in Angular applications.

Official
Intermediate