Analyze the impact of a browser extension on web performance.
When measuring real user performance engineers take to the account factors like device and network conditions. But there is one more factor, that is not in direct control - web extensions. They add additional scripts, DOM manipulations, and impact the user experience.
Exthouse is a tool powered by Lighthouse that provides a report about web extension impact on web performance. It measures an extension performance score that helps developers to improve the performance of their extensions and web in general.
Goals:
Exthouse performs several steps to do analysis:
Launches a browser without extension to evaluate the default performance and store results ./exthouse/result-default-1.json
Launch a browser with installed extension using Puppeteer and stores results to ./exthouse/MY_EXTENTION-1.json
Extends Lighthouse performance categories with additional audits to estimate the impact of the extension:
exthouse-new-long-tasks
- The value represents a sum of Long Tasks. Long Tasks (weight: 1).exthouse-max-potential-fid-change
- The change for the longest task duration highlights the impact on potential First Input Delay (weight: 1).exthouse-extension-files
- Extension files add extra CPU consumption for every URL visit. Bundle resources into one and leverage hot chaching. Learn more (weight: 1).exthouse-default-metrics
- All metrics collected from the default run (without extension) (weight: 0).Generates Lighthouse style report using the Lighthouse scoring algorithm.
Environment conditions:
Chromium
desktop
2
Most of the extensions add tasks to the main thread and affect interactivity metrics:
This analysis evaluates the top 10 extensions from Chrome Web Store by users count. Extensions are manually filtered to exclude login requirement, not relevant extensions in categories like PLATFORM_APP, or related to specific URLs like *://*.google.com/*
.
Name | Score | Users Count | FID Δ ( ms ) | Scripting Δ ( ms ) |
---|---|---|---|---|
Grammarly for Chrome | 50 | 10M | 114 | 530 |
Adblock Plus | 59 | 10M | 118 | 760 |
Skype | 82 | 10M | 150 | 120 |
Avira Browser Safety | 94 | 10M | 60 | 30 |
Avast SafePrice | 99 | 10M | 62 | 0 |
AdBlock | 100 | 10M | 0 | 0 |
Google Translate | 100 | 10M | 0 | 0 |
Pinterest Save Button | 100 | 10M | 0 | 0 |
Tampermonkey | 100 | 10M | 0 | 0 |
uBlock Origin | 100 | 10M | 0 | 0 |
Install CLI using npm
:
npm install --global exthouse
exthouse --help
Usage: exthouse [path/to/extension.crx] [options]
Options:
--runs <number> amount of runs to evaluate median performance value (default: "1")
--url <url> url to evaluate extension performance (default: "https://example.com/")
--format <format> output format options: [json,html] (default: "html")
--disableGather disable gathering and use /exthouse to produce results
-V, --version output the version number
-h, --help output usage information
CLI usage examples
# Evaluate extensions with several runs.
# It performs do 3 runs, get median value and generate a report.
exthouse Grammarly-for-Chrome.crx --runs=3`
# Generate a report based on existing data:
# It reads results from `/exthouse` folder and generate report.
exthouse Grammarly-for-Chrome.crx --disableGather
# Output report in json format
exthouse Grammarly-for-Chrome.crx --format=json`
Evaluate any extension
MY_EXTENTION.crx
and pass to cli exthouse MY_EXTENTION.crx --runs=3
exthouse
folder.Find downloaded examples extensions folder.
browserBinaryPath
This tweet has kick-started the initial research and this project.
Development is sponsored by Treo.sh - Page speed monitoring made easy.