imgix / react-imgix

React component to display imgix images
https://www.npmjs.com/package/react-imgix
Other
360 stars 64 forks source link

feat: add performance warnings #954

Closed atcastle closed 4 weeks ago

atcastle commented 1 month ago

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.

Checklist

imgix-git-robot commented 4 weeks ago

:tada: This PR is included in version 9.10.0 :tada:

The release is available on:

Your semantic-release bot :package::rocket: