performance

Audit web performance and apply optimizations for loading speed and runtime efficiency.

5|Updated Feb 6, 2022
One-click install
npx skills add https://github.com/christofferbergj/dotfiles --skill performance-christofferbergj
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: performance
Source: https://github.com/christofferbergj/dotfiles/tree/main/.agents/skills/performance
Command: npx skills add https://github.com/christofferbergj/dotfiles --skill performance-christofferbergj

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Web applications often suffer from slow load times, poor interactivity, and degraded user experience due to unoptimized assets and scripts. This Skill provides a structured approach to identify bottlenecks, apply best-practice optimizations, and improve Core Web Vitals.

Core Features & Use Cases

  • Performance auditing: uses Lighthouse-aligned practices to benchmark and track improvements.
  • Budget-driven optimization: defines and enforces budgets for page weight, JavaScript, CSS, and images.
  • Runtime enhancements: suggests code-splitting, preloading, and resource-loading optimizations to reduce TTI and FID.
  • Use Case: when a site is slow on mobile, apply the Skill to reduce TTFB, optimize images, and shrink CSS/JS payloads to improve LCP.

Quick Start

Audit your site's main page and propose optimizations that reduce load times within two passes.

Frequently Asked Questions about performance

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

FAQPage Schema
How do I improve web performance and Core Web Vitals for a slow loading site?

Improve web performance by identifying bottlenecks and applying best-practice optimizations like code-splitting, image compression, and script reduction to directly enhance Core Web Vitals such as LCP and FID. The Skill audits assets to reduce page weight.

How do I set and enforce performance budgets for JavaScript and CSS payloads?

Set performance budgets to define and enforce strict limits on page weight, JavaScript, CSS, and image sizes. This prevents resource bloat and ensures your web application maintains optimal loading speeds and runtime efficiency.

What is the best way to use Lighthouse auditing to reduce TTI and TTFB?

Lighthouse auditing benchmarks your site using aligned practices to track improvements and identify bottlenecks. Applying its recommendations helps reduce Time to Interactive and Time to First Byte by optimizing resource loading and server response times.

Does this optimization approach work for both SPAs and static sites?

This optimization approach works effectively across modern web apps, Single Page Applications, and static sites. It applies resource loading patterns like preconnect and preload guidance to improve loading speed and runtime efficiency regardless of architecture.

Why does my site have a poor LCP score on mobile devices?

A poor LCP score on mobile often results from unoptimized images, large CSS or JavaScript payloads, and slow server response times. Identifying these bottlenecks allows you to apply code-splitting and image optimization to improve Largest Contentful Paint.