wp-rocket icon indicating copy to clipboard operation
wp-rocket copied to clipboard

Excluding single image from a multi-background markup, it will still be lazyloaded

Open hanna-meda opened this issue 1 year ago • 0 comments

Before submitting an issue please check that you’ve completed the following steps:

  • Made sure you’re on the latest version: 3.15.9 ✓
  • Used the search feature to ensure that the bug hasn’t been reported before ✓

Describe the bug Excluded image from multi-background markup, is not excluded in the network view i.e. it's added in source to 'wpr-lazyload-bg-exclusion' but in the network view, it is not loaded until scrolling to it.

To Reproduce Steps to reproduce the behavior:

  1. Have a page template that contains a multi-background markup, i.e.
.internal-css-background-images{
            width: 100%;
            height: 400px;
            background-image: url('https://new.rocketlabsqa.ovh/wp-content/rocket-test-data/image/test3.webp'), url( "/wp-content/rocket-test-data/image/file_example_JPG_100kB.jpg" );
            background-color: #cccccc;
  1. Add one of the images, i.e. 'file_example_JPG_100kB.jpg', in the exclusion field from Media > Excluded images.
  2. Visit the page template and check the Network tab > Img before scrolling on the page.
  3. Notice that the image is not excluded in the Network view. It will appear only upon scroll. Also, checking the Page Source, we can see the image is added under 'wpr-lazyload-bg-exclusion'

Expected behavior Excluding from Lazyload a single image from a multi-background markup should work. The image should be in the Network view right from the start. It should not be lazyloaded.

Screenshots If applicable, add screenshots to help explain your problem.

Acceptance Criteria (for WP Media team use only) Clear instructions for developers, to be added before the grooming

hanna-meda avatar Mar 06 '24 17:03 hanna-meda