• Stars
    star
    353
  • Rank 120,322 (Top 3 %)
  • Language
    JavaScript
  • License
    Apache License 2.0
  • Created over 4 years ago
  • Updated about 1 month ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

AutoWebPerf provides a flexible and scalable framework for running web performance audits with arbitrary audit tools including PageSpeedInsights, WebPageTest and more.

AutoWebPerf (AWP)

quicklink

AutoWebPerf provides a flexible and scalable framework for running web performance audits with arbitrary audit tools like WebPageTest and PageSpeedInsights. This library enables developers to collect metrics consistently and store metrics to a preferred data store such as local JSON files, Google Sheets, BigQuery, or an in-house SQL database.

Check out https://web.dev/autowebperf for introduction.

How it works

AutoWebPerf takes a list of Tests from an arbitrary data store platform, such as local JSONs, Google Sheets, BigQuery, or a self-hosted SQL database. With the list of Tests, it executes audits based on each Test config, collects metrics from individual data sources into a list of Results.

The process of running an audit through an measurement tool (e.g. WebPageTest) is defined in the individual Gatherer. The logic of reading and writing with a data platform (e.g. local JSON) is implemented in a Connector.

Feature highlights

  • A library of web audit automation that can be plugged-in to any platforms, like Google Sheets, GCP App Engine, or simply a cron job that writes to JSON file.
  • Providing the ability to run recurring tests with customizable frequency (e.g. daily, weekly, monthly, etc), network conditions, and other audit configs, etc.
  • Metric gatherers are designed as modules that are decoupled with the output data format and automation logic.
  • Connector modules are designed to read Test list and write audit results to specific data format or platforms. e.g. a connector for CSV files. (See src/connectors/csv-connector for details)

How does this compare to the rest of Google's speed measurement tools?

AutoWebPerf serves as a performance audit aggregator that automates the process of performance audit and metrics collection through multiple speed measurement tools including WebPageTest, PageSpeedInsights, and Chrome UX Report. As each individual speed measurement tool provides audit metrics, AutoWebPerf aggregates the results and writes to any preferred data storage platform, such as local JSONs, cloud-based database, or GoogleSheets.

Quickstart

First, clone AWP repo and run npm install:

git clone https://github.com/GoogleChromeLabs/AutoWebPerf.git
npm install

Once finished, check the install by running a single test with the following command:

./awp run examples/tests.json output/results.json

This command uses the example file in examples/tests.json and returns the results to output/results.json.

To start recurring tests, you'll need to include a recurring.frequency property in the test file and set the next trigger in the test file. To setup the next trigger time and to run a one-off test, use this command after adding the recurring.frequency property to your tests:

./awp recurring examples/tests-recurring.json output/results.json

If this was successful, the trigger time will have updated base on your chosen frequency, and a result would have been written to output/results.json.

Once the trigger time is correctly set, you can have your tests auto-run on the next triger time with the continue command:

./awp continue examples/tests-recurring.json output/results.json

This will automatically run each test at the frequency specified. More information can be found below in the "Run recurring tests" section below.

More Examples

Single URL: To test a single URL through PageSpeedInsights:

./awp run url:https://www.thinkwithgoogle.com/ json:output/results.json

Pick Gatherer: to test a single URL with a specific gatherer like PageSpeedInsights or WebPageTest:

./awp run --gatherers=psi url:https://web.dev json:output/results.json

CSV file: To run tests defined in a CSV file and write results to a JSON file:

./awp run csv:examples/tests.csv json:output/results.json

PageSpeedInsights API: To run PageSpeedInsights tests with an API Key:

PSI_APIKEY=SAMPLE_KEY ./awp run examples/tests.json output/results.json

WebPageTest API: To run WebPageTest tests:

WPT_APIKEY=SAMPLE_KEY ./awp run examples/tests-wpt.json output/results.json

Override vs. Append: To run tests and override existing results in the output file

./awp run examples/tests.json output/results.json --override-results

Available gatherers:

Available connectors:

  • JSON connector - reads or writes to local JSON files. This is the default connector if a conenctor name is not specified. For example:
./awp run examples/tests.json output/results.json

Alternatively, to specify using the JSON connector for the Tests path and the Results path:

./awp run json:/examples/tests.json json:output/results.json
  • CSV connector - reads or writes to local CSV files. To specify using the CSV connector for the Tests path and the Results path:
./awp run csv:/examples/tests.csv csv:output/results.csv
  • URL connector - generates just one Test with a specific URL for audit. To run an audit with just one Test with a specific URL:
./awp run url:https://example.com csv:output/results.csv

Please note that this connector only works with Tests path, not for the Results path.

Using AWP with Node CLI

Run tests

You can run the following anytime for printing CLI usages:

./awp --help

To run tests, you can run the following CLI command with given Tests JSON, like examples/tests.json, which contains an array of tests. You can check out the examples/tests.json for the data structure of Tests.

./awp run examples/tests.json output/results.json

This will generate the result object(s) in the given path to results.json.

By default, AWP will use JSON as the default connector for both reading tests and writing results. Alternatively, you can specify a different connector in the format of <connector>:<path>.

E.g. to run tests defined in CSV and write results in JSON:

./awp run csv:examples/tests.csv json:output/results.csv

Retrieve test results

For some audit platforms like WebPageTest, each test may take a few minutes to fetch actual results. For these type of asynchronous audits, each Result will stay in "Submitted" status. You will need to explicitly retrieve results later.

Run the following to retrieve the final metrics of results in the results.json.

./awp retrieve examples/tests.json output/results.json

This will fetch metrics for all audit platforms and update to the Result object in the output/results.json. You can check out examples/results.json for details in Result objects.

Run recurring tests

If you'd like to set up recurring tests, you can define the recurring object that contains frequency for that Test.

./awp recurring examples/tests-recurring.json output/results.json

This will generate the Result object in the results.json and updates the next trigger time to its original Test object in the tests.json. E.g. the updated Test object would look like the following, with the updated nextTriggerTimestamp.

{
  "label": "web.dev",
  "url": "https://web.dev",
  "recurring": {
    "frequency": "Daily",
    "nextTriggerTimestamp": 1599692305567,
    "activatedFrequency": "Daily"
  },
  "psi": {
    "settings": {
      "locale": "en-GB",
      "strategy": "mobile"
    }
  }
}

The nextTriggerTimestamp will be updated to the next day based on the previous timestamp. This is to prevent repeated runs with the same Test and to guarantee that this Test is executed only once per day.

Set up a cron job to run recurring tests

In most Unix-like operating system, you can set up a cron job to run the AWP CLI periodically.

For example, in macOS, you can run the following commands to set up a daily cron job with AWP:

# Edit the cronjob with a text editor.
EDITOR=nano crontab -e

Add the following line to the crontab for a daily run at 12:00 at noon. Note that this is based on the system time where it runs AWP.

0 12 * * * PSI_APIKEY=SAMPLE_KEY cd ~/workspace/awp && ./awp run examples/tests.json csv:output/results-recurring.csv

Run tests with extensions

An extension is a module to assist AWP to run tests with additional process and computation. For example, budgets extension is able to add performance budgets and compute the delta between the targets and the result metrics.

To run with extensions:

./awp run examples/tests.json output/results.json --extensions=budgets

Tests and Results

Define the Tests

The list of tests is simply an array of Tests objects, like the sample Tests below. Or check out src/examples/tests.js for a detailed example of Tests list.

[{
  "label": "Test-1",
  "url": "example1.com",
  "webpagetest": {
    ...
  }
}, {
  "label": "Test-2",
  "url": "example2.com",
  "psi": {
    ...
  }
}]

Each Test object defines which audits to run by defining gatherers property. For example, the first Test has a webpagetest property which defines the configuration of running a WebPageTest audit. The second Test has a psi property that defines how to run PageSpeedInsights audit.

Generate the Results

After running tests, a list of Results is generated like below. Each Result contains its corresponding metrics to the predefined gatherers such as WebPageTest and PageSpeedInsights. See the example below.

[{
  "label": "Test-1",
  "url": "example1.com",
  "webpagetest": {
    "metrics": {
      FirstContentfulPaint: 900,
      ...
    }
  }  
}, {
  "label": "Test-2",
  "url": "example2.com",
  "psi": {
    "metrics": {
      FirstContentfulPaint: 900,
      ...
    }
  }  
}]

Environmental Variables

Some conenctors or gatherers may require one or more environmental variables, such as API keys or the path to service account. For example, running with the CrUX API gatherer requires the CrUX API key.

To pass the environmental variables in the CLI, run the command with the regular usage of environment vars:

CRUX_APIKEY=<YOUR_KEY> ./awp run url:https://wev.dev/ json:output/results.json

Gatherers

AWP supports the following audit gatherers. Please check out the corresponding documentations for details.

WebPageTest

The WebPageTest gatherer runs Tests through either the public WebPageTest endpoints or a custom private WebPageTest instance.

See docs/webpagetest.md for more details for the usage of WebPageTest gatherer.

PageSpeed Insights

The PageSpeed Insights gatherer runs Tests through the public PageSpeed Insights API.

See docs/psi.md for more details for the usage of PSI gatherer.

Chrome UX Report API (CrUX API)

The CrUX API gatherer collects performance metrics through the Chrome UX Report API.

See docs/cruxapi.md for more details for the usage of CrUX API gatherer.

Chrome UX Report History (CrUX via BigQuery)

The CrUX BigQuery gatherer collects performance metrics through the Chrome UX Report with its public Google BigQuery project. Please noet that you would need set up a Google Cloud project in order to query the public BigQuery table.

See docs/cruxbigquery.md for more details for the usage of CrUX API gatherer.

Design

AWP is designed with modules, including modules for running audits with WebPageTest, PageSpeedInsights, or other tools, and modules for reading/writing data from data platforms such as JSON, GoogleSheets or a Cloud service.

In a high-level view, there are three types of modules:

  • Gatherer - A Gatherer runs audits and generates metrics.
  • Connector - A Connector reads test configs from and writes results to a data platform, such as a local JSON file or with Google Sheets.
  • Extension - An Extension adds additional metrics or information, either before or after running audits.

The AWP engine uses two major JavaScript Object structures for running audits and collecting metrics.

  • Test - An object that contains the audit configuration for one test task, such as URL, audit methods, or extension config. You can refer to examples/tests.json for an actual Test object.
  • Result - An object that contains audit configuration, metrics and overall status. You can refer to examples/results.json for an actual Result object.

Audit steps

In order to deal with asynchronous audit tool like WebPageTest, AWP breaks the audit cycle into three steps of actions:

  • Run - This action takes a list of Tests and generates a list of Results objects.
  • Recurring - Similar to Run, this action takes a list of Tests, generates a list of Results, and updates nextTriggerTimestamp for each recurring Test. This action is useful when running with periodic or timer-based tasks such as cron job.
  • Retrieve - This action scans the list of Results, and collects metrics when the results are not in Retrieved status.

AWP Config

To set up modules and their configurations, an overall AWP Config is required as a JavaScript Object.

AWP Config has the following required properties:

  • connector: The name of connector.
  • helper: A helper for a specific connector, including API Handler and other helper functions, which will be used in gatherers and extensions.
  • dataSources: An array of audit sources, such as webpagetest or psi. Each of the data source needs to have a corresponding Gatherer file in the src/gatherers folder.
  • extensions: An array of extensions. Each extension needs to have a corresponding Extension file in src/extensions.

Other optional properties:

  • verbose: Whether to print verbose messages.
  • debug: Whether to print debug messages.

The following config example comes from the examples/awp-config.js:

{
  connector: 'JSON',
  helper: 'Node',
  dataSources: ['webpagetest'],
  json: { // Config for JSON Connector.
    tests: 'tests.json',
    results: 'results.json',
  },
  extensions: [
    'budgets',
  ],
  budgets: { // Config for Budgets extension.
    dataSource: 'webpagetest',
  },
  verbose: true,
  debug: false,
}

With the example config above, it will use JSON connector which reads and writes Tests and Results as JSON files. See examples/tests.json and examples/results.json for examples.

In addition to fundamental properties, there are a few additional properties used by modules:

  • json property as the configuration for JSONConnector.
  • budgets property as the configuration for BudgetsExtension

Usage of AutoWebPerf core

Examples of creating a new instance of AWP:

let awp = new AutoWebPerf({
  connector: 'JSON',
  helper: 'Node',
  dataSources: ['webpagetest'],
  extensions: extensions,
  json: { // Config for JSON connector.
    tests: argv['tests'],
    results: argv['results'],
  },
  verbose: verbose,
  debug: debug,
});

To submit all tests:

awp.run();

To submit specific tests using filters: This will run the test which has id=1 and selected=true properties.

awp.run({
  filters: ['id="1"', 'selected'],
});

To retrieve all pending results, filtering with status !== "Retrieved".

awp.retrieve({
  filters: ['status!=="Retrieved"'],
});
  • For more advanced usage of PatternFilter, please check out src/utils/pattern-filter.js with more examples.

To run recurring tests:

// This will run the actual audit and update the nextTriggerTimestamp.
awp.recurring();

To run tests with specific extensions:

// This will override the extension list defined in the awpConfig.
awp.run({
  extensions: ['budgets']
})

Gatherer Modules

A Gatherer class extends src/gatherers/gatherer.js and overrides the following methods:

  • constructor(config, apiHelper, options):

    • config: The config defined in a property with this gatherer's name in the AWP config. Some audit tools like WebPageTest or PageSpeedInsights require API keys. The API key for the gatherer is located in the config.apiKey.
    • options: Additional settings like verbose and debug.
  • run(test, options):

    • test: A Test object for this audit run. The data required for this gatherer (e.g. settings or metadata) will be in the property with the gatherer's name. E.g. the data for WebPageTest will be in webpagetest of this Test object.
    • options: Additional settings.
  • retrieve(result, options):

    • result: A Result object to retrieve metrics with. The data required for this gatherer will be in the property with the gatherer's name. E.g. the data and metrics will be in webpagetest of this Result object.
    • options: Additional settings like verbose and debug.

Connector Modules

A Connector class extends src/connectors/connector.js and overrides the following methods:

  • constructor(config, apiHandler):

    • config: The config defined in a property with this connector's name in the AWP config.
    • apiHandler: The API handler instance used for making API calls.
  • getConfig(): The method to return the Connector's additional config object. This config object depends on where this Connector stores its additional settings including API keys for gatherers. For example, JSONConnector uses the tests.json and reads additional settings from the config property, including API keys for each gatherers.

  • getTestList(options): The method to return the list of Tests as an array.

  • updateTestList(newTests, options): The method to update Tests list, given the list of new Tests.

  • getResultList(options): The method to return the list of Results as an array.

  • appendResultList(newResults, options): The method to append new Results to the end of the current Results list.

  • updateResultList(newResults, options): The method to update existing Results in the current Results list.

Extension Modules

A Extension class extends src/extensions/extension.js and overrides the following methods:

  • constructor(config):
    • config: The config defined in a property with this extension's name in the AWP config.
  • beforeRun(context): The method before executing Run step for a Test.
    • context.test: The corresponding Test object.
  • afterRun(context): The method after executing Run step for a Test.
    • context.test: The corresponding Test object.
    • context.result: The corresponding Result object.
  • beforeAllRuns(context): The method before executing Run step.
    • context.tests: All Test objects in this Run.
  • afterAllRuns(context): The method after executing Run step.
    • context.tests: All Test objects in this Run.
    • context.results: All Result objects in this Run.
  • beforeRetrieve(context): The method before executing Retrieve step for a Result.
    • context.result: The corresponding Result object.
  • afterRetrieve(context): The method after executing Retrieve step for a Result.
    • context.result: The corresponding Result object.
  • beforeAllRetrieves(context): The method before executing Retrieve step.
    • context.result: The corresponding Result object.
  • afterAllRetrieves(context): The method after executing Retrieve step.
    • context.result: The corresponding Result object.

Test Object

A standard Test object contains the following properties:

(You can refer to examples/tests.json for an example.)

  • selected : Whether to perform Run for this Test.
  • label : Name of this Test.
  • url : URL to audit.
  • recurring: Settings for recurring audit.
    • frequency : The frequency string defined in src/common/frequency.js. E.g. 'Daily', 'Weekly' or 'Monthly'.

Gatherer-specific settings will be in their own property with the Gatherer's name in lower case. For example, the settings for WebPageTests will be:

  • webpagetest
    • settings: Setting object contains audit location, connection, etc.
    • metadata: Metadata object contains WebPageTests's ID, JSON URL, etc.

Result Object

A standard Result object contains the following properties:

  • selected : Whether to perform Retrieve for this Result.
  • id : Auto-generated unique ID for this Result.
  • type : Single or Recurring audit.
  • status : Submitted, Retrieved or Error. Refer to src/common/status.js for details.
  • label : String label for this Result. This label inherits from its original Test object.
  • url : Audited URL.
  • createdTimestamp : When this Result is created.
  • modifiedTimestamp : When this Result is last modified.

Standardized Metrics

All metric names used in AWP are required to follow the names, case sensitive. See the full list of standardized metrics in src/common/metrics.js

  • Timing metrics

    • TimeToFirstByte
    • FirstPaint
    • FirstMeaningfulPaint
    • FirstContentfulPaint
    • VisualComplete
    • SpeedIndex
    • DOMContentLoaded
    • LoadEvent
    • TimeToInteractive
    • TotalBlockingTime
    • FirstCPUIdle
    • FirstInputDelay
    • LargestContentfulPaint
  • Resource Size

    • HTML
    • Javascript
    • CSS
    • Fonts
    • Images
    • Videos
  • Resource Count

    • DOMElements
    • Connections
    • Requests
  • Resource Scores

    • Performance
    • ProgressiveWebApp

Source Folder Structure

All source codes for major functions are located in src folder. Files are organized into the following subfolders:

  • common: Common classes and definitions, such as Status, Frequency, Metrics, etc.
  • connectors: Connector classes.
  • extensions: Extension classes.
  • gatherers: Gatherer classes.
  • utils: Utilities and tools.

Unit Test

Run the following commands to run unit test:

npm test

To run individual test spec, you can install Jest NPM module to your local machine:

npm install -g jest
jest test/some-module.test.js

Unit Test Design

The Unit Test is based on Jest unit test framework. All unit tests are located in the ./test folder, and are organized into its own corresponding subfolders, as the same structure as in the src folder.

More Repositories

1

squoosh

Make images smaller using best-in-class codecs, right in the browser.
TypeScript
21,605
star
2

comlink

Comlink makes WebWorkers enjoyable.
TypeScript
11,198
star
3

quicklink

⚡️Faster subsequent page-loads by prefetching in-viewport links during idle time
JavaScript
11,024
star
4

ndb

ndb is an improved debugging experience for Node.js, enabled by Chrome DevTools
JavaScript
10,913
star
5

carlo

Web rendering surface for Node applications
JavaScript
9,313
star
6

ProjectVisBug

FireBug for designers › Edit any webpage, in any state https://a.nerdy.dev/gimme-visbug
JavaScript
5,452
star
7

sw-precache

[Deprecated] A node module to generate service worker code that will precache specific resources so they work offline.
JavaScript
5,236
star
8

react-adaptive-hooks

Deliver experiences best suited to a user's device and network constraints
JavaScript
5,097
star
9

ui-element-samples

A collection of prototyped UI elements
JavaScript
4,101
star
10

sw-toolbox

[Deprecated] A collection of service worker tools for offlining runtime requests
JavaScript
3,621
star
11

webpack-libs-optimizations

Using a library in your webpack project? Here’s how to optimize it
3,365
star
12

critters

🦔 A Webpack plugin to inline your critical CSS and lazy-load the rest.
JavaScript
3,330
star
13

psi

PageSpeed Insights Reporting for Node
JavaScript
3,100
star
14

bubblewrap

Bubblewrap is a Command Line Interface (CLI) that helps developers to create a Project for an Android application that launches an existing Progressive Web App (PWAs) using a Trusted Web Activity.
TypeScript
2,375
star
15

lighthousebot

Run Lighthouse in CI, as a web service, using Docker. Pass/Fail GH pull requests.
JavaScript
2,235
star
16

preload-webpack-plugin

Please use https://github.com/vuejs/preload-webpack-plugin instead.
JavaScript
2,162
star
17

worker-plugin

👩‍🏭 Adds native Web Worker bundling support to Webpack.
JavaScript
1,914
star
18

prerender-loader

📰 Painless universal pre-rendering for Webpack.
JavaScript
1,912
star
19

simplehttp2server

A simple HTTP/2 server for development
Go
1,735
star
20

jsvu

JavaScript (engine) Version Updater
JavaScript
1,698
star
21

size-plugin

Track compressed Webpack asset sizes over time.
JavaScript
1,672
star
22

clooney

Clooney is an actor library for the web. Use workers without thinking about workers.
JavaScript
1,419
star
23

browser-fs-access

File System Access API with legacy fallback in the browser
JavaScript
1,383
star
24

proxx

A game of proximity
TypeScript
1,315
star
25

dark-mode-toggle

A custom element that allows you to easily put a Dark Mode 🌒 toggle or switch on your site:
JavaScript
1,174
star
26

application-shell

Service Worker Application Shell Architecture
JavaScript
1,169
star
27

pwacompat

PWACompat to bring Web App Manifest to older browsers
JavaScript
1,130
star
28

container-query-polyfill

A polyfill for CSS Container Queries
TypeScript
1,127
star
29

idlize

Helper classes and methods for implementing the idle-until-urgent pattern
JavaScript
1,061
star
30

houdini-samples

Demos for different Houdini APIs
JavaScript
974
star
31

jsbi

JSBI is a pure-JavaScript implementation of the official ECMAScript BigInt proposal.
JavaScript
908
star
32

css-triggers

A reference for the render impact of mutating CSS properties.
JavaScript
893
star
33

howto-components

Literate code examples for common UI patterns.
JavaScript
851
star
34

tooling.report

tooling.report a quick way to determine the best build tool for your next web project, or if tooling migration is worth it, or how to adopt a tool's best practice into your existing configuration and code base.
JavaScript
848
star
35

page-lifecycle

PageLifecycle.js is a tiny JavaScript library that allows developers to easily observe Page Lifecycle API state changes cross browser
JavaScript
803
star
36

css-paint-polyfill

CSS Custom Paint / Paint Worklet polyfill with special browser optimizations.
JavaScript
709
star
37

web-audio-samples

Web Audio API samples by Chrome Web Audio Team
JavaScript
686
star
38

chrome-for-testing

JavaScript
667
star
39

picture-in-picture-chrome-extension

JavaScript
667
star
40

estimator.dev

🧮 Calculate the size and performance impact of switching to modern JavaScript syntax.
JavaScript
665
star
41

comlink-loader

Webpack loader to offload modules to Worker threads seamlessly using Comlink.
JavaScript
616
star
42

pwa-wp

WordPress feature plugin to bring Progressive Web Apps (PWA) to Core
PHP
615
star
43

ProgressiveWordPress

A Sample WordPress-based Progressive Web App
JavaScript
570
star
44

web-push-codelab

JavaScript
557
star
45

text-app

A text editor for ChromeOS and Chrome
JavaScript
552
star
46

gulliver

A PWA directory, focusing on collecting PWA best practices and examples.
JavaScript
549
star
47

wasm-feature-detect

A small library to detect which features of WebAssembly are supported.
JavaScript
546
star
48

progressive-tooling

A list of community-built, third-party tools that can be used to improve page performance
JavaScript
546
star
49

svgomg-twa

A sample that project Trusted Web Activities technology to wrap SVGOMG in an Android Application
Shell
519
star
50

web-vitals-report

Measure and report on your Web Vitals data in Google Analytics
JavaScript
503
star
51

text-editor

A text editor build on the Native File System APIs
JavaScript
501
star
52

pptraas.com

Puppeteer as a service
JavaScript
455
star
53

progressive-rendering-frameworks-samples

Samples and demos from the Progressive Rendering I/O talk
JavaScript
411
star
54

wasm-bindgen-rayon

An adapter for enabling Rayon-based concurrency on the Web with WebAssembly.
JavaScript
403
star
55

MiniMobileDeviceLab

A mini mobile web device lab
Objective-C
396
star
56

webm-wasm

webm-wasm lets you create webm videos in JavaScript via WebAssembly.
C++
394
star
57

link-to-text-fragment

Browser extension that allows for linking to arbitrary text fragments.
JavaScript
390
star
58

cronet-sample

A sample for the Cronet library
Java
390
star
59

buffer-backed-object

Buffer-backed objects in JavaScript.
JavaScript
372
star
60

pinch-zoom

TypeScript
370
star
61

webpack-training-project

A training project for learning Webpack optimizations
JavaScript
368
star
62

samesite-examples

Examples of using the SameSite cookie attribute in a variety of language, libraries, and frameworks.
HTML
366
star
63

airhorn

Air horn
JavaScript
361
star
64

first-input-delay

A JavaScript library for measuring First Input Delay (FID) in the browser.
JavaScript
347
star
65

tti-polyfill

Time-to-interactive polyfill
JavaScript
333
star
66

react-shrine

"Shrine" Progressive Web App sample built with React
JavaScript
330
star
67

dynamic-import-polyfill

A fast, tiny polyfill for dynamic import() that works in all module-supporting browsers
JavaScript
320
star
68

wasi-fs-access

This is a demo shell powered by WebAssembly, WASI, Asyncify and File System Access API.
TypeScript
312
star
69

native-url

Node's url module implemented using the built-in URL API.
JavaScript
284
star
70

two-up

TypeScript
281
star
71

adaptive-loading

Demos for Adaptive Loading - differentially deliver fast, lighter experiences for users on slow networks & devices
JavaScript
264
star
72

so-pwa

A progressive web app to read Stack Overflow content.
JavaScript
255
star
73

import-from-worker

It’s like import(), but runs the module in a worker.
JavaScript
249
star
74

sample-pie-shop

Example e-commerce site to explore PWA (Progressive Web App) use cases.
JavaScript
237
star
75

file-drop

A simple file drag and drop custom-element
TypeScript
232
star
76

serial-terminal

Demo application for the Web Serial API.
TypeScript
226
star
77

form-troubleshooter

TypeScript
215
star
78

postcss-jit-props

A CSS custom property helper based on PostCSS. Supply a pool of variables and this plugin will add them to the stylesheet as they are used.
JavaScript
215
star
79

audioworklet-polyfill

🔊 Polyfill AudioWorklet using the legacy ScriptProcessor API.
JavaScript
190
star
80

http2-push-manifest

Generate a list of static resources for http2 push.
JavaScript
187
star
81

pointer-tracker

Track mouse/touch/pointer events for a given element.
TypeScript
184
star
82

pr-bot

🤖 Compare your base branch to a pull request and run plugins over it to view differences
JavaScript
179
star
83

discovery

Discoveries on Sustainable Loading research
177
star
84

imagecapture-polyfill

MediaStream ImageCapture polyfill. Take photos from the browser as easy as .takePhoto().then(processPhoto)
JavaScript
176
star
85

tasklets

JavaScript
176
star
86

telnet-client

TypeScript
166
star
87

extension-manifest-converter

Python
164
star
88

credential-management-sample

Credential Management Sample
HTML
157
star
89

wadb

A TypeScript implementation of the Android Debug Bridge(ADB) protocol over WebUSB
TypeScript
156
star
90

extension-update-testing-tool

Tool for testing the update flow for Chrome Extensions during development, including permission grants.
JavaScript
154
star
91

wasm-av1

Port of the AV1 Video codec to WebAssembly
C
154
star
92

houdini.how

A community-driven gathering place for CSS Houdini worklets and resources.
JavaScript
152
star
93

pwa-workshop-codelab

JavaScript
152
star
94

perf-track

Tracking framework performance and usage at scale
Svelte
150
star
95

kv-storage-polyfill

A polyfill for the kv-storage built-in module.
JavaScript
146
star
96

http2push-gae

Drop-in HTTP2 push on App Engine
HTML
140
star
97

chromeos_smart_card_connector

Smart Card Connector App for Chrome OS
C++
135
star
98

snapshot

TypeScript
133
star
99

devwebfeed

Firehose of team++ resources
JavaScript
130
star
100

sample-currency-converter

A sample currency conversion Progressive Web App
JavaScript
129
star