skills.rest
CivicActions
CivicActionsOFFICIAL
Explore all skills by this author →
WebsiteGitHub

performance-frontend

Audit frontend performance by analyzing Core Web Vitals and render-blocking resources.

2|Updated May 24, 2026
Search Tags:#performance#caching#frontend#web vitals#optimization#audit
One-click install
npx skills add https://github.com/CivicActions/ai-runbook-jh --skill performance-frontend-civicactions
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: performance-frontend
Source: https://github.com/CivicActions/ai-runbook-jh/tree/main/skills/performance-frontend
Command: npx skills add https://github.com/CivicActions/ai-runbook-jh --skill performance-frontend-civicactions

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill addresses slow page load times, render-blocking resources, and poor Core Web Vitals by providing a structured, repeatable audit process for frontend performance.

Core Features & Use Cases

  • Comprehensive Auditing: Evaluates asset loading, image optimization, font delivery, and caching strategies.
  • Framework-Aware: Provides specific checks for Drupal-based stacks while remaining effective for vanilla frontend projects.
  • Use Case: Use this skill when a user reports that a specific landing page feels sluggish or fails to meet performance budgets, ensuring all critical rendering paths are optimized.

Quick Start

Invoke the performance-frontend skill to audit the current page for render-blocking resources and Core Web Vitals regressions.

Frequently Asked Questions about performance-frontend

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

FAQPage Schema
How do I audit frontend performance and Core Web Vitals regressions?▼

Auditing frontend performance requires analyzing page load metrics, asset delivery, and caching configurations to identify bottlenecks in Core Web Vitals and render-blocking resources for targeted optimization.

What's the best way to fix render-blocking resources on a sluggish landing page?▼

Fixing render-blocking resources involves auditing the critical rendering path and asset delivery to pinpoint bottlenecks, ensuring font and image loading configurations are optimized to meet performance budgets.

Does this frontend optimization process work with Drupal-based stacks?▼

Yes, the frontend optimization process provides specific framework-aware checks for Drupal-based stacks while remaining effective for vanilla frontend projects to audit asset delivery and caching.

What do I need to validate frontend performance budgets and optimization recommendations?▼

Validating frontend performance budgets requires integration with browser-based inspection tools and project-specific performance budgets to confirm optimization recommendations for asset pipelines and page components.

When should I run a frontend performance audit for web page optimization?▼

Run a frontend performance audit when a specific landing page feels sluggish or fails to meet performance budgets, requiring a structured evaluation of image optimization, font delivery, and caching strategies.

Why does my page load time suffer despite standard asset delivery configurations?▼

Page load time suffers when asset pipelines contain unoptimized images, inefficient font delivery, or poor caching strategies, requiring a comprehensive audit to identify Core Web Vitals regressions.

Related Skills

Explore More Software Engineering Skills→
Ronin15Ronin15
14

hammer-benchmark-regression

Compare SDL3 HammerEngine metrics against baselines to flag performance regressions.

Community
Intermediate
LuisSambranoLuisSambrano
7

performance

Optimize web loading speed and runtime efficiency from Lighthouse audits.

Community
Advanced
roanbrasilroanbrasil
5

web-performance

Diagnose slow page loads and Core Web Vitals issues in frontend workflows.

Community
Advanced
cloudflarecloudflare
2.6k

web-perf

Audit web performance and diagnose Core Web Vitals issues using Chrome DevTools MCP.

Official
Advanced