skills.rest
hq-opensource
hq-opensourceOFFICIAL
Explore all skills by this author →
WebsiteGitHub

performance

Analyze webpages with Lighthouse and Core Web Vitals to optimize load times.

7|2|Updated Jun 30, 2025
Search Tags:#performance#optimization#lighthouse#website#web-performance#core-web-vitals#loading-speed
One-click install
npx skills add https://github.com/hq-opensource/predictive-control --skill performance-hq-opensource
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: performance
Source: https://github.com/hq-opensource/predictive-control/tree/main/.agent/skills/performance
Command: npx skills add https://github.com/hq-opensource/predictive-control --skill performance-hq-opensource

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Web performance bottlenecks lead to slow page loads and poor user experience. This Skill provides a structured approach to identify, prioritize, and fix performance issues across the critical rendering path to deliver faster, more efficient websites.

Core Features & Use Cases

  • Performance budgeting and measurement: establish budgets for total page weight, JavaScript, CSS, images, fonts, and third‑party resources; compare before/after metrics using Lighthouse and Core Web Vitals.
  • Rendering path optimizations: pinpoint TTFB bottlenecks, render-blocking resources, and optimize CSS/JS delivery, preconnects, and preloads.
  • Use Case: a marketing site or product dashboard reduces load times from several seconds to sub‑2.5 seconds while maintaining UX.

Quick Start

Analyze a given webpage to identify bottlenecks and implement targeted optimizations to improve load times.

Frequently Asked Questions about performance

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

FAQPage Schema
How do I improve website loading speed and fix poor Core Web Vitals?▼

Improve website loading speed by optimizing the critical rendering path, setting performance budgets, and implementing preconnects or preloads to fix Core Web Vitals. This targets render-blocking resources to reduce page load times and enhance runtime efficiency.

What is a performance budget and how does it control total page weight?▼

A performance budget sets strict limits for total page weight, JavaScript, CSS, images, fonts, and third-party resources. Establishing budgets controls page weight and compares before/after metrics using Lighthouse to ensure fast website loads.

How do I reduce TTFB and eliminate render-blocking CSS and JavaScript?▼

Reduce TTFB and eliminate render-blocking CSS and JavaScript by pinpointing bottlenecks and optimizing resource delivery. This approach applies efficient CSS and JS delivery techniques to speed up initial website loads and navigations.

Can I optimize web performance for an ecommerce dashboard without breaking UX?▼

You can optimize web performance for an ecommerce dashboard without breaking UX by applying targeted optimizations. This structured approach reduces load times from several seconds to sub-2.5 seconds while maintaining the user experience.

What is the best way to measure before and after web performance optimizations?▼

The best way to measure before and after web performance optimizations is by comparing Lighthouse and Core Web Vitals metrics. This reporting validates the effectiveness of applied preloads and efficient CSS delivery for your website.

Related Skills

Explore More Software Engineering Skills→
doanchienthangdevdoanchienthangdev
4

profiling-performance

Run Lighthouse audits and analyze Core Web Vitals for browser performance.

Community
Intermediate
mathemagiemathemagie

performance

Audit web pages with Lighthouse and fix performance bottlenecks.

Community
Intermediate
AbdullahMalik17AbdullahMalik17
9

building-chat-widgets

Create interactive AI chat widgets with client/server action handling.

Community
Basic
HouseofmvpsHouseofmvps
115

perf-audit

Automate Lighthouse website performance audits and apply remediation fixes.

Community
Intermediate