Do I need a specific browser to use this skill?

Yes, this skill requires a Playwright session using a Chromium-based browser because it relies on the Chrome DevTools Protocol (CDP) to collect coverage data.

How is the 0-100 score weighted?

The score is weighted toward resource efficiency: JS usage (25%), Render-blocking (20%), and Transfer size (20%) are the highest contributors, followed by CSS usage and timing metrics.

What metrics are included in the efficiency score?

The score combines six key categories: JS unused percentage, CSS unused percentage, render-blocking resource count, total transfer size, Time to First Byte (TTFB), and DOMContentLoaded timing.

Can this skill help reduce my bundle size?

While it doesn't edit code directly, it identifies exactly what percentage of your JS and CSS is unused on a per-page basis, helping you target specific bundles for tree-shaking or code-splitting.

Page Efficiency Score

Name: Page Efficiency Score
Author: anouar1991

byanouar1991

•

Analytics & Monitoring

Calculates a comprehensive 0-100 performance metric for web pages by analyzing resource usage and load timings via Playwright.

This skill provides a holistic view of web page performance by calculating a weighted composite score based on six critical metrics: JavaScript and CSS coverage, render-blocking resources, total transfer size, Time to First Byte (TTFB), and DOMContentLoaded timing. By leveraging the Chrome DevTools Protocol (CDP) through Playwright, it identifies specific bottlenecks—such as code bloat or network inefficiencies—allowing developers to prioritize optimizations and track efficiency improvements over time during development or QA cycles.

Key Features

01Deep JavaScript and CSS coverage analysis to pinpoint unused code

02Detailed network performance tracking including TTFB and transfer sizes

031 GitHub stars

04Composite 0-100 efficiency scoring based on weighted industry benchmarks

05Automatic identification of render-blocking resources and their impact

06Actionable ratings ranging from Excellent to Critical for quick QA assessments

Use Cases

01Identifying primary load bottlenecks like JS bloat versus network latency

02Comparing frontend efficiency across different routes or deployments

03Performing automated performance audits during CI/CD or QA phases

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add anouar1991/binarypetsclaude page-efficiency-score

For use in Claude.ai and ChatGPT

Download Skill