performance-checklist

# Performance Checklist - Passive Assessment Comprehensive, actionable checklist for passive web performance assessment. This skill guides the agent through systematic checks of Core Web Vitals, images, fonts, JavaScript, CSS, caching, compression, and resource hints. --- ## 1. Core Web Vitals Measure key performance metrics using Playwright's browser evaluation capabilities. ### Largest Contentful Paint (LCP) ```javascript const lcpEntries = performance.getEntriesByType('largest-contentful-paint'); const lcp = lcpEntries.length > 0 ? lcpEntries[lcpEntries.length - 1].startTime : null; ``` | Rating | Threshold | |--------|-----------| | Good | < 2.5s | | Needs Improvement | 2.5s - 4.0s | | Poor | > 4.0s | ### Cumulative Layout Shift (CLS) Use PerformanceObserver to collect `layout-shift` entries and sum their values: ```javascript const clsEntries = performance.getEntriesByType('layout-shift'); const cls = clsEntries .filter(entry => !entry.hadRecentInput) .reduce((sum, entry) => sum + entry.value, 0); ``` | Rating | Threshold | |--------|-----------| | Good | < 0.1 | | Needs Improvement | 0.1 - 0.25 | | Poor | > 0.25 | ### Interaction to Next Paint (INP) Estimation Check event timing entries via `performance.getEntriesByType('event')` and look at processing time: ```javascript const eventEntries = performance.getEntriesByType('event'); const maxProcessingTime = eventEntries.length > 0 ? Math.max(...eventEntries.map(e => e.processingEnd - e.processingStart...