wp-media / wp-rocket

Performance optimization plugin for WordPress
https://wp-rocket.me
GNU General Public License v2.0
688 stars 215 forks source link

Webp caching could target the inline CSS background images #3511

Open piotrbak opened 3 years ago

piotrbak commented 3 years ago

Is your feature request related to a problem? Please describe. When using WebP caching we are targeting most HTML images. We're not targeting the images set as background images of the HTML elements.

Describe the solution you'd like We could find them in the source and replace them with Webp version if exists

NataliaDrause commented 3 years ago

Related: https://secure.helpscout.net/conversation/1605936940/288558?folderId=3864740

vmanthos commented 2 years ago

Related: https://secure.helpscout.net/conversation/1626925839/293695/

NataliaDrause commented 2 years ago

Related: https://secure.helpscout.net/conversation/1717395030/312699?folderId=3864740

DahmaniAdame commented 2 years ago

Related - https://secure.helpscout.net/conversation/1716689123/312583/

DahmaniAdame commented 2 years ago

We should do the same for Used CSS as well.

Tabrisrp commented 2 years ago

This one will be difficult to implement without a big rewrite of the existing code in my opinion. It's also still in the old architecture, so we would take the opportunity to move it to the new one at the same time.

Maybe we can work on it, but it would fit more for a major version to be safer?

camilamadronero-zz commented 2 years ago

Related https://secure.helpscout.net/conversation/1802271345/329008?folderId=2675957

DahmaniAdame commented 2 years ago

@piotrbak @Tabrisrp if we move convert_to_webp buffer priority after lazyload, and add data-bg to the target markup, we should be able to achieve that without requiring any major overhaul of the code. 

I tested that by moving covert_to_web to 19 as a buffer priority (lazyload has a buffer priority of 18), and added data-bg to rocket_attributes_for_webp. The conversion worked properly.

But it will be dependent of the images lazyload feature though.

DahmaniAdame commented 2 years ago

Related - https://secure.helpscout.net/conversation/1816270290/331688?folderId=3864735

DahmaniAdame commented 2 years ago

Related - https://secure.helpscout.net/conversation/1968899781/359935/

joejoe04 commented 2 years ago

Related - https://secure.helpscout.net/conversation/1999551773/366195/

girlie commented 1 year ago

Related: https://secure.helpscout.net/conversation/2334688098/438069/

rosamillan commented 2 weeks ago

Related https://secure.helpscout.net/conversation/2686905809/508828/