core(image-elements): cache naturalSize results

[paulirish]

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... 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

[patrickhulce]

great find! LGTM

[brendankenny]

25s to 1s on selfridges

that doesn't seem possible, fwiw, or the protocol timeout is broken :)

lighthouse/lighthouse-core/gather/gatherers/image-elements.js

Lines 141 to 142 in 6d56a70

	// We don't want this to take forever, 250ms should be enough for images that are cached
	driver.setNextProtocolTimeout(250);

I get like 8s -> 250ms, which is still 👍

[brendankenny]

25s to 1s on selfridges

that doesn't seem possible, fwiw, or the protocol timeout is broken :)

oh, I take it back. It's because they all share a network record so we just repeatedly fetch the same images 2000 times? Dear lord, yeah, good find.

[brendankenny]

LGTM2