Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closes #6137: remove unnecessary exclusions css background images' lazyload #6210

Merged
merged 1 commit into from
Oct 17, 2023

Conversation

Miraeld
Copy link
Contributor

@Miraeld Miraeld commented Oct 8, 2023

Description

We deleted the unnecessary filters for css exclusions for background images' lazyload.
We also deleted linked tests.

Fixes #6137

Type of change

  • Enhancement (non-breaking change which improves an existing functionality).

Is the solution different from the one proposed during the grooming?

No

Checklists

Generic development checklist

  • My code follows the style guidelines of this project, with adapted comments and without new warnings.
  • [] I have added unit and integration tests that prove my fix is effective or that my feature works.
  • The CI passes locally with my changes (including unit tests, integration tests, linter).
  • Any dependent changes have been merged and published in downstream modules.
  • If applicable, I have made corresponding changes to the documentation. Provide a link to the documentation.

Test summary

  • I triggered all changed lines of code at least once without new errors/warnings/notices.
  • I validated all Acceptance Criteria of the related issues. (If applicable, provide proof).
  • I validated all test plan the QA Review asked me to.

This commits removes unnecessary exclusions for CSS background images' lazyload.
@Miraeld Miraeld added type: enhancement Improvements that slightly enhance existing functionality and are fast to implement priority: medium Issues which are important, but no one will go out of business. module: defer JS module: delay JS labels Oct 8, 2023
@Miraeld Miraeld requested a review from a team October 8, 2023 23:12
@Miraeld Miraeld self-assigned this Oct 8, 2023
@Mai-Saad Mai-Saad self-requested a review October 10, 2023 05:44
Copy link
Contributor

@wordpressfan wordpressfan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice job.

I don't think that we need to deprecate those public methods as it's not used by any of our helpers (I checked that)

Also just an explanation, in backend we exclude rocket_lazyload_css_data which is a keyword that is contained inside #rocket_lazyload_css-js-after script, so we are fine.

Copy link
Contributor

@Mai-Saad Mai-Saad left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Working as expected
testrail-report-532.pdf
Note (problems already on 3.15.2)
1- Images using this markup will be removed from the page => agreed as edge case
<style>.test-new-class{background-image: url("https://new.rocketlabsqa.ovh/wp-content/rocket-test-data/images/test_internal2.jpg");}.test-new-class{background-image: url("/wp-content/rocket-test-data/images/wp-rocket.svg)");} </style>
Thanks to @vmanthos investigations

The syntax of the following is incorrect:
background-image: url("/wp-content/rocket-test-data/images/wp-rocket.svg)");
There is a ) before " and that results in WP Rocket picking up the whole thing until the last parenthesis.

2- Problem when LL BGI is enabled while WPML is on (under investigation to gather reproducible steps)(happening with CSS absolute URL files)

  • Using rocketlabs env, if we have WPML activated on domain base setup, then install /activate WPR, then cache LL BG template, then enable LL BG I then access the sub language FE and hardrefresh => We will have console error for some images
    Screenshot from 2023-10-12 09-03-03
  • Console error when trying to switch language in the following steps:
    1- WPML is domain base
    2- cache the page in both languages
    3- WPML changed to a directory
    4- access the main language page and click on language switch to sub-lang
    Screenshot from 2023-10-11 16-25-12
    if we clear the whole cache then repeat step 4 it will work fine

@vmanthos
Copy link
Contributor

vmanthos commented Oct 13, 2023

@Mai-Saad I was able to reproduce the issue on rocketlabsqa.ovh. However, clearing the cache won't fix it.

For CSS files processed by the lazyload for background CSS images feature, we set the wrong path, resulting in error 404 for those files. This is because we are adding the language code before the domain name.

For example:
https://ar.rocketlabsqa.ovh/wp-content/cache/background-css/ar.ar.rocketlabsqa.ovh/wp-content/cache/min/1/wp-content/rocket-test-data/styles/lazyload_css_background_images.css?ver=1697180904&wpr_t=1697180904

has an extra ar. before the TLD ar.rocketlabsqa.ovh.

The URL should be:

https://ar.rocketlabsqa.ovh/wp-content/cache/background-css/ar.rocketlabsqa.ovh/wp-content/cache/min/1/wp-content/rocket-test-data/styles/lazyload_css_background_images.css?ver=1697180904&wpr_t=1697180904
https://ar.rocketlabsqa.ovh/wp-content/cache/background-css/ar.ar.rocketlabsqa.ovh/

Update

I believe this should be on a new GitHub issue.

@Mai-Saad
Copy link
Contributor

@vmanthos Thanks for the confirmation, added GH here #6224

However, clearing the cache won't fix it.

This was for the second scenario, related to xdomaindata console error when switching language

@Mai-Saad Mai-Saad added this pull request to the merge queue Oct 17, 2023
Merged via the queue into develop with commit c2e79cf Oct 17, 2023
8 checks passed
@Mai-Saad Mai-Saad deleted the enhancement/6137-remove-unnecessary-exclusions branch October 17, 2023 09:13
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
module: defer JS module: delay JS priority: medium Issues which are important, but no one will go out of business. type: enhancement Improvements that slightly enhance existing functionality and are fast to implement
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Lazyload for CSS background images unnecessary exclusions are in WP Rocket's code
4 participants