Repository: GoogleChrome/lighthouse
Pull request #9818 (2019-10-11 00:13:44)

core(image-elements): cache naturalSize results
This url is quite slow to run: https://www.selfridges.com/US/en/cat/womens/newin/

On the CLI, the ImageElements gatherer can take 25-30 seconds to run.

Turns out that gatherer finds ~2000 images, however 99% of them are country flag DOM elements with a css background using the exact same sprite image. 


----------


While we have added [that smart only-do-the-50-most-important-network-images check](https://github.com/GoogleChrome/lighthouse/pull/7274)... we don't handle the case of multiple background images pointing to the same asset that's within the top 50.

But now we do. :)

connorjclark: how much faster tho
paulirish: > how much faster tho

25s to 1s on selfridges

Patch:
diff --git a/docs/releasing.md b/docs/releasing.md
index 51f42e2c9..8c89f0d58 100644
--- a/docs/releasing.md
+++ b/docs/releasing.md
@@ -60,7 +60,7 @@ and that no new PRs should be merged until you are done.
 ```sh
 # Run the tests.
 bash ./lighthouse-core/scripts/release/test.sh
-# Change into the pristine folder.
+# Change into the newly-created pristine folder.
 cd ../lighthouse-pristine
 ```
 
@@ -85,7 +85,7 @@ yarn --cwd ~/chromium/src/third_party/blink/renderer/devtools test 'http/tests/d
 git diff
 
 # Verify that the Audits panel still works. Consider the new features that have been added.
-# If anything is wrong, stop releasing, investigate, and prioritize landing the PR.
+# If anything is wrong, stop releasing, investigate, land a fix and start over.
 
 # For bonus points, add some tests covering new features. Either a new test, or an extra
 # assertion in an existing test.
@@ -105,7 +105,7 @@ Confirm Lightrider integration will work:
 
 # Verify that Lightrider works properly, and is generating reports fully. Consider the new features that have been added.
 # Note: if the changes include proto changes make sure that the API has those new fields.
-# If anything is wrong, stop releasing, investigate, and prioritize landing the PR.
+# If anything is wrong, stop releasing, investigate, land a fix and start over.
 
 # For bonus points, add some tests covering new features. Either a new test, or an extra
 # assertion in an existing test.
@@ -114,10 +114,6 @@ Confirm Lightrider integration will work:
 Now that the integrations are confirmed to work, go back to `lighthouse` folder.
 
 ```sh
-# Run the tests again.
-# Note: you can skip this if you didn't need to land any changes.
-bash ./lighthouse-core/scripts/release/test.sh
-
 # Prepare the commit, replace x.x.x with the desired version
 bash ./lighthouse-core/scripts/release/prepare-commit.sh x.x.x
 
diff --git a/lighthouse-core/gather/gatherers/image-elements.js b/lighthouse-core/gather/gatherers/image-elements.js
index 77b7e566d..f4923e7f5 100644
--- a/lighthouse-core/gather/gatherers/image-elements.js
+++ b/lighthouse-core/gather/gatherers/image-elements.js
@@ -130,6 +130,12 @@ function determineNaturalSize(url) {
 }
 
 class ImageElements extends Gatherer {
+  constructor() {
+    super();
+    /** @type {Map<string, {naturalWidth: number, naturalHeight: number}>} */
+    this._naturalSizeCache = new Map();
+  }
+
   /**
    * @param {Driver} driver
    * @param {LH.Artifacts.ImageElement} element
@@ -137,11 +143,16 @@ class ImageElements extends Gatherer {
    */
   async fetchElementWithSizeInformation(driver, element) {
     const url = JSON.stringify(element.src);
+    if (this._naturalSizeCache.has(url)) {
+      return Object.assign(element, this._naturalSizeCache.get(url));
+    }
+
     try {
       // We don't want this to take forever, 250ms should be enough for images that are cached
       driver.setNextProtocolTimeout(250);
       /** @type {{naturalWidth: number, naturalHeight: number}} */
       const size = await driver.evaluateAsync(`(${determineNaturalSize.toString()})(${url})`);
+      this._naturalSizeCache.set(url, size);
       return Object.assign(element, size);
     } catch (_) {
       // determineNaturalSize fails on invalid images, which we treat as non-visible
diff --git a/readme.md b/readme.md
index 0ade52ab2..efea1341d 100644
--- a/readme.md
+++ b/readme.md
@@ -317,6 +317,8 @@ Other awesome open source projects that use Lighthouse.
 * **[lightcrawler](https://github.com/github/lightcrawler)** - Crawl a website and run each page found through Lighthouse.
 * **[lighthouse-badges](https://github.com/emazzotta/lighthouse-badges)** - Generate gh-badges (shields.io) based on Lighthouse performance.
 * **[lighthouse-batch](https://www.npmjs.com/package/lighthouse-batch)** - Run Lighthouse over a number of sites and generate a summary of their metrics/scores.
+* **[lighthouse-check-action](https://github.com/foo-software/lighthouse-check-action)** - A Github Action to run Lighthouse in a workflow, featuring Slack notifications and report upload to S3.
+* **[lighthouse-check-orb](https://circleci.com/orbs/registry/orb/foo-software/lighthouse-check)** - A CircleCI Orb to run Lighthouse in a workflow, featuring Slack notifications and report upload to S3.
 * **[lighthouse-ci](https://github.com/andreasonny83/lighthouse-ci)** - Run Lighthouse and assert scores satisfy your custom thresholds.
 * **[lighthouse-ci-action](https://github.com/treosh/lighthouse-ci-action)** - A Github Action that makes it easy to run Lighthouse in CI and keep your pages small using performance budgets.
 * **[lighthouse-cron](https://github.com/thearegee/lighthouse-cron)** - Cron multiple batch Lighthouse audits and emit results for sending to remote server.


Test patch:
diff --git a/lighthouse-core/scripts/release/test.sh b/lighthouse-core/scripts/release/test.sh
index fb568567c..7ca22095f 100755
--- a/lighthouse-core/scripts/release/test.sh
+++ b/lighthouse-core/scripts/release/test.sh
@@ -23,9 +23,6 @@ yarn build-all
 echo "Running the standard test suite..."
 yarn test
 
-echo "Running the smoke tests...."
-yarn smoke || yarn smoke || yarn smoke
-
 echo "Testing the CLI..."
 yarn start "https://example.com" --view
 
@@ -39,7 +36,7 @@ cd /tmp/lighthouse-local-test
 
 npm init -y
 npm install "$LH_PRISTINE_ROOT/lighthouse-$VERSION.tgz"
-npm explore lighthouse -- npm run smoke
+npm explore lighthouse -- npm run smoke || npm explore lighthouse -- npm run smoke
 npm explore lighthouse -- npm run chrome # try the manual launcher
 npm explore lighthouse -- npm run fast -- http://example.com