This PR adds two new runtime warnings, which are only enabled in development environments, and which can be turned off with the existing config.warnings mechanism. The warnings are:
oversizedImage: This warning triggers when an image is finished loading, if it's detected that the rendered image is more than 500px smaller in either dimension that the image's intrinsic size. Oversized images are a common contributor to lower LCP scores.
lazyLCP: This triggers at runtime when the performanceObserver API identifies an image as potentially being the LCP element , and that image also has the loading="lazy" attribute. This combination is terrible for LCP, and is an easy fix, so I expect this warning to show up infrequently but be useful when it does.
Testing for this feature is integration-only, because both features rely on runtime functionality (image loading callback for oversizedImage and performanceObserver for lazyLCP).
Note: Because of the way the integration testing suite is currently set up, where each test appends a new component to the global document, it's a bit difficult to test initial page load behavior. Rather than make any fundamental changes to the integration test architecture, I simply placed the LCP test (which is the only one affected by this) first in the list of tests.
CC: @luqven, who I spoke to earlier about these proposed warnings.
[x] Update or add any necessary API documentation (if applicable)
[x] All existing unit tests are still passing (if applicable).
[x] Add some steps so we can test your bug fix or feature (if applicable).
[x] Add new passing unit tests to cover the code introduced by your PR (if applicable).
[x] Any breaking changes are specified on the commit on which they are introduced with BREAKING CHANGE in the body of the commit.
[x] If this is a big feature with breaking changes, consider opening an issue to discuss first. This is completely up to you, but please keep in mind that your PR might not be accepted.
This PR adds two new runtime warnings, which are only enabled in development environments, and which can be turned off with the existing
config.warnings
mechanism. The warnings are: oversizedImage: This warning triggers when an image is finished loading, if it's detected that the rendered image is more than 500px smaller in either dimension that the image's intrinsic size. Oversized images are a common contributor to lower LCP scores. lazyLCP: This triggers at runtime when theperformanceObserver
API identifies an image as potentially being the LCP element , and that image also has theloading="lazy"
attribute. This combination is terrible for LCP, and is an easy fix, so I expect this warning to show up infrequently but be useful when it does.Testing for this feature is integration-only, because both features rely on runtime functionality (image loading callback for oversizedImage and performanceObserver for lazyLCP).
Note: Because of the way the integration testing suite is currently set up, where each test appends a new component to the global document, it's a bit difficult to test initial page load behavior. Rather than make any fundamental changes to the integration test architecture, I simply placed the LCP test (which is the only one affected by this) first in the list of tests.
CC: @luqven, who I spoke to earlier about these proposed warnings.
Checklist
BREAKING CHANGE
in the body of the commit.