Merge pull request #11 from treosh/core-web-vitals

Core Web Vitals

Author: alekseykulikov

.github/workflows/ci.yml

@@ -11,7 +11,7 @@ jobs:
           node-version: '10.x'
       - name: Install, link plugin locally, and test
         run: |
-          npm install
-          npm link
-          npm link lighthouse-plugin-field-performance
-          npm test
+          yarn install
+          yarn link
+          yarn link lighthouse-plugin-field-performance
+          yarn test

CONTRIBUTING.md

@@ -6,21 +6,21 @@ We'd love to accept your patches and contributions!
 #### 1. Install dependencies
 
 ```bash
-npm install
+yarn install
 ```
 
 #### 2. Run plugin
 
 ```bash
-npm install # install deps
-npm link # create a global link for lighthouse-plugin-field-performance
-npm link lighthouse-plugin-field-performance # add symlink to test the plugin locally
+yarn install # install deps
+yarn link # create a global link for lighthouse-plugin-field-performance
+yarn link lighthouse-plugin-field-performance # add symlink to test the plugin locally
 
-npm run mobile-run https://www.apple.com # test plugin with a real PSI API response
-npm run desktop-run https://www.google.com
+yarn mobile-run https://www.apple.com/ # test plugin with a real PSI API response
+yarn desktop-run https://www.booking.com/
 
-npm run mobile-run https://treo.sh # empty response
-npm run desktop-run https://treo.sh # just origin
+yarn mobile-run https://treo.sh/ # empty response
+yarn desktop-run https://treo.sh/ # just origin
 ```
 
 `lighthouse-plugin-field-performance` folder is made of symlinks for a simple local testing.
@@ -42,10 +42,10 @@ We use [JSDoc](http://usejsdoc.org/) with [TypeScript](https://github.com/Micros
 
 ```bash
 # https://github.com/GoogleChrome/lighthouse/issues/9050#issuecomment-495678706
-npm link && npm link lighthouse-plugin-field-performance # install plugin locally
+yarn link && yarn link lighthouse-plugin-field-performance # install plugin locally
 
-npm test # run all linters && tests
-npx tsc -p . # run typescript checks
-npx ava test/index.js # run just AVA tests
-npx ava test/index.js -u # update AVA snapshots
+yarn test # run all linters && tests
+yarn tsc -p . # run typescript checks
+yarn ava test/index.js # run just AVA tests
+yarn ava test/index.js -u # update AVA snapshots
 ```

README.md

@@ -1,19 +1,20 @@
 # lighthouse-plugin-field-performance
 
-> Lighthouse plugin that displays "field" performance of your page using real-world data from by Chrome UX Report.
+> A Lighthouse plugin that displays the field performance of your page.
+> It uses real-world data from Chrome UX Report and Core Web Vitals to estimate the score.
 
-[An example report](https://googlechrome.github.io/lighthouse/viewer/?gist=d9072ab8ccb30622deab48e6d5ee229c):
+[An example report for github.com](https://googlechrome.github.io/lighthouse/viewer/?gist=d9072ab8ccb30622deab48e6d5ee229c):
 
 <a href="https://googlechrome.github.io/lighthouse/viewer/?gist=d9072ab8ccb30622deab48e6d5ee229c">
-  <img width="1138" alt="Lighthouse Field Performance Plugin" src="https://user-images.githubusercontent.com/158189/82894895-a5252b80-9f53-11ea-80ea-cb27f2897728.png">
+  <img width="1087" alt="Lighthouse Field Performance Plugin" src="https://user-images.githubusercontent.com/158189/83190516-d3ad2d00-a132-11ea-9f4a-68ead5b6a1b9.png">
 </a>
 
 <br />
 <br />
 
-This plugin adds a field performance section with the real-world data from [Chrome UX Report](https://developers.google.com/web/tools/chrome-user-experience-report/). It's similar to [PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/), with an addion of overall score.
+This plugin adds a field performance category with real-world data from [Chrome UX Report](https://developers.google.com/web/tools/chrome-user-experience-report/). It's exactly like [PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/), but for your local run and with a field performance score.
 
-The scoring algorithm uses [PSI recommendations](https://developers.google.com/speed/docs/insights/v5/about#faq) and applies estimation for First Contentful Paint and First Input Delay. (_Note_: the origin values does not affect score).
+The scoring algorithm uses [Core Web Vitals](https://web.dev/vitals/). It weigths values for Largest Contentful Paint, First Input Delay, and Cumulative Layout Shift. (_Note_: FCP and the origin values do not affect the score, [see the source](./src/index.js))
 
 Check out the parity between Field & Lab performance on mobile:
 
@@ -23,7 +24,7 @@ And on desktop:
 
 <img width="974" alt="Field & lab performance on desktop" src="https://user-images.githubusercontent.com/158189/65246645-4a4b5280-daef-11e9-92aa-e3495aebfa4b.png">
 
-Sometimes field data is missing because the URL doesn't have enough anonymous traffic. In this case, the lab data is the only available measurement. Optimize, get more traffic, and measure again.
+Sometimes field data is missing because a URL doesn't have enough anonymous traffic. In this case, the lab data is the only available measurement.
 
 ## Install
 
@@ -35,17 +36,13 @@ $ npm install lighthouse lighthouse-plugin-field-performance
 
 ## Usage
 
-Use the plugin with [Lighthouse CLI](https://github.com/GoogleChrome/lighthouse) or Node.js.
-
-### CLI
-
-Pass plugin to Lighthouse:
+Use the plugin with [Lighthouse CLI](https://github.com/GoogleChrome/lighthouse):
 
 ```bash
 $ npx lighthouse https://www.apple.com/ --plugins=lighthouse-plugin-field-performance
 ```
 
-Pass your [PageSpeed Insights token](https://developers.google.com/speed/docs/insights/v5/get-started) with a custom config:
+Provide your [PageSpeed Insights token](https://developers.google.com/speed/docs/insights/v5/get-started) to run more requests (in production) with a custom config:
 
 ```bash
 $ npx lighthouse https://www.apple.com/ --config-path=./config.js
@@ -63,18 +60,6 @@ module.exports = {
 }
 ```
 
-### Node.js
-
-```js
-const { runLighthouse } = require('lighthouse/lighthouse-cli/run')
-
-runLighthouse('https://www.apple.com', {
-  plugins: ['lighthouse-plugin-field-performance'],
-}).then((result) => {
-  console.log(result)
-})
-```
-
 ## Credits
 
 Sponsored by [Treo.sh - Page speed monitoring made simple](https://treo.sh).