Does this skill work with non-Chrome browsers?

While Playwright supports multiple browsers, the Lighthouse integration specifically requires Chromium-based browsers to utilize the Chrome DevTools Protocol for auditing.

Can I use this in my GitHub Actions pipeline?

Yes, the skill includes specific implementation patterns and YAML configurations for integrating performance checks directly into GitHub Actions and other CI environments.

How does this help with Core Web Vitals?

It provides code snippets to observe and report on Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS) using the PerformanceObserver API.

Can I simulate mobile device performance?

Yes, the skill includes configurations for mobile emulation, allowing you to define specific screen dimensions, network latency, and CPU throttling rates.

Performance Testing & Web Vitals

Name: Performance Testing & Web Vitals
Author: adaptationio

byadaptationio

セキュリティとテスト

Measures and enforces web performance standards using Lighthouse audits and Core Web Vitals within Playwright test suites.

概要

This skill integrates Lighthouse and Core Web Vitals monitoring directly into Playwright workflows, allowing developers to automate performance auditing and enforce performance budgets. It provides comprehensive patterns for measuring metrics like LCP, CLS, and TTFB, simulating various network and CPU conditions, and generating detailed reports. By incorporating these checks into a CI/CD pipeline, teams can prevent performance regressions and ensure a high-quality user experience across both mobile and desktop environments.

主な機能

Real-time Core Web Vitals measurement including LCP, FID, and CLS
Network and CPU throttling to simulate real-world mobile and desktop conditions
Detailed HTML/JSON report generation for historical tracking and CI integration
0 GitHub stars
Automated Lighthouse audits with customizable scoring thresholds
Performance budget enforcement for resource sizes and request counts

ユースケース

Benchmarking application performance on simulated 3G networks or low-end mobile devices
Automated regression testing to ensure new deployments don't degrade Core Web Vitals
Enforcing strict performance budgets for JavaScript, CSS, and image assets during development

概要

主な機能

Real-time Core Web Vitals measurement including LCP, FID, and CLS
Network and CPU throttling to simulate real-world mobile and desktop conditions
Detailed HTML/JSON report generation for historical tracking and CI integration
0 GitHub stars
Automated Lighthouse audits with customizable scoring thresholds
Performance budget enforcement for resource sizes and request counts

ユースケース

Benchmarking application performance on simulated 3G networks or low-end mobile devices
Automated regression testing to ensure new deployments don't degrade Core Web Vitals
Enforcing strict performance budgets for JavaScript, CSS, and image assets during development