GoogleChrome / GoogleChrome/lighthouse

ImageElements doesn't include CSS images in pseudo-elements

Open
#14,350 1 comment 0 reactions 1 assignee View on GitHub

@paulirish is already working on this.

Since Sep 18, 2023.

needs-investigation P1.5
Dominant language
JavaScript
Stars
30.8k
Forks
9.8k
Avg merge
1d 14h
Merged PRs (30d)
20

Description

ImageElements loops over all elements in the page looking for computed styles looking for elements with a background-image style, but pseudo-elements can't be accessed via the DOM like that.

As a result, any image in a ::before, ::after, etc isn't included in the artifact and missed in the image audits that rely on it (OptimizedImages does pick up on them because it filters network records on resource/mime types instead, but then an audit like modern-image-formats can't join the results with ImageElements so the details don't include a node for the images)

Example page: https://earthy-picayune-albertonykus.glitch.me/ (lighthouse logo not in ImageElements despite being the only image in the page)

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.