skills.rest
dembrandt
dembrandtOFFICIAL
Explore all skills by this author →
Website𝕏@dembrandtcomGitHub

performance-and-web-vitals

Audit Lighthouse scores and optimize Core Web Vitals for frontend applications.

33|6|Updated Apr 19, 2026
Search Tags:#lighthouse#web performance#core web vitals#lcp#inp#cls#frontend optimization
One-click install
npx skills add https://github.com/dembrandt/dembrandt-skills --skill performance-and-web-vitals-dembrandt
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: performance-and-web-vitals
Source: https://github.com/dembrandt/dembrandt-skills/tree/main/skills/performance-and-web-vitals
Command: npx skills add https://github.com/dembrandt/dembrandt-skills --skill performance-and-web-vitals-dembrandt

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps identify and fix slow page loads, layout shifts, delayed interactions, and poor Lighthouse scores that undermine user experience and search performance.

Core Features & Use Cases

  • Lighthouse Audits: Evaluate performance, accessibility, best practices, and SEO with targeted or full audits.
  • Core Web Vitals Optimization: Diagnose and improve LCP, CLS, and INP through image, font, layout, and JavaScript optimizations.
  • Production Readiness: Configure responsive images, font loading, deferred scripts, and Lighthouse CI checks to prevent regressions.
  • Use Case: When a product page has a slow hero image, shifting content, and sluggish interactions, use this Skill to identify the causes and apply targeted fixes.

Quick Start

Ask the performance-and-web-vitals skill to audit this page and recommend fixes for its Lighthouse score, LCP, CLS, and INP.

Frequently Asked Questions about performance-and-web-vitals

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

FAQPage Schema
How do I improve Core Web Vitals like LCP, CLS, and INP?▼

Improve Core Web Vitals by optimizing page loads with responsive image sizing, reserving layout space to prevent CLS, and using efficient font loading with non-blocking scripts to reduce INP and LCP.

What causes poor Lighthouse performance scores on frontend applications?▼

Poor Lighthouse performance scores stem from slow page loads, unoptimized images, delayed JavaScript execution, and layout shifts. Auditing these elements helps identify and fix frontend optimization issues.

How do I prevent layout shifts from delayed image and font loading?▼

Prevent layout shifts by reserving layout space for images and fonts before they load. Apply responsive image sizing and efficient font loading techniques to stabilize visual layout during page rendering.

What's the best way to automate Lighthouse audits for production readiness?▼

Automate Lighthouse audits by configuring Lighthouse CI checks within your pipeline. This prevents performance regressions by continuously evaluating page loads, accessibility, and SEO before production deployment.

Does deferring JavaScript execution improve interaction latency for web pages?▼

Deferring JavaScript execution improves interaction latency by using non-blocking scripts. This ensures the main thread remains available for user interactions, directly optimizing your INP target.

Related Skills

Explore More Software Engineering Skills→
SPeeDoA1SPeeDoA1
6

performance-audit

Audit web application performance with Lighthouse, WebPageTest, and Chrome DevTools.

Community
Intermediate
abzhawabzhaw

performance-profiling

Run Lighthouse-based audits to measure web performance metrics like LCP, INP, and CLS.

Community
Intermediate
svssdevasvssdeva
1

perf-astro

Optimize Astro sites by inlining critical CSS and compressing builds.

Community
Intermediate
ofelixdevofelixdev

performance-profiling

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

Community
Intermediate