Empty style blocks and critical path CSS

The commit is in v3.4.3-rc4.

This is a major change to CSS/JS optm. Prolly will result in a major release v3.5.

Some other changes to the page optm settings are done in the same time.

Please let me know if the issue is fixed or not.

Big thanks!

The site looks a lot more like without caching now, except for images, which are missing, and some code refers to jQuery, which the browser claims is undefined.

My guess is that the jQuery issue also explains why the EWWW Image Optimizer lazy loader code isn’t working properly and the images remain with the style display: none !important;.

I’ve checked this without any JS optimisation, and the problem is still there. In fact, it gets worse. Same when excluding jquery, jquery-core.

Please take a look at the site again and you’ll see.

The header menu style issue seems fixed. Great!

I can’t see the image style when having JS optm off. Can you turn all JS optm off to get CSS debug easier?

For JS optm issues, better create a new topic.

I’ve updated the plugin to v3.4.3-rc6 and turned off all of the JS optimisation features. There are no errors in the browser console anymore.

The style that’s hiding the images is this:

.lazyload[data-src] { display: none !important; }

It’s in the combined stylesheet, but refers to a class that should be replaced by lazyloaded once the image is loaded, which it isn’t.

Otherwise, CSS is sweet!

Good to know CSS fix is good.

We are working on JS improvement now. Will give the fix and let you know here.

v3.4.3-rc7 combined inline JS. Please give it a try.

Updated, cleared CSS/JS cache and tested. No images.

I’ve tried turning “Inline JS Minify” on and off. No difference.

Latest rc12 improved JS combine/defer compatibility. Please give it a try.

Updated. Still the same.

Tested with all JS optimisation settings OFF. Same.

Tested without HTML minify, with synchronous loading of CSS and with CSS HTTP/2 Push off. Same.

I’m out of ideas and front-end stuff is not my forte, sorry.

Apologize for the issue you are still encountering.

May I know why you use the other plugin for placeholder lazyload while not ours?

For faster response and help, you can find me from our slack channel @hai.

From experience, the EWWW Image Optimizer placeholders were the only thing I could work with when equalising the heights of elements, such as product blocks on the shop page, home page tiles, etc.

I’ve now switched to your lazy loading method, and it seems to be working OK. However, when I view a page for the first time since enabling this feature, the images don’t load.

After reloading the page (with browser caching turned off), images appear, and continue to appear on subsequent page loads. Since I can’t afford to load every page on every site manually to enable their images, and my hosting provider doesn’t permit LS preloading, this is a (minor) issue.

There may still be something going on with the order of resources on the page.

I’m only on the WP Australia Slack workspace, and I can’t see you there. My sites are currently cached by another plugin, so it’s not urgent, but I would like to be able to trust your plugin and switch all my sites to it, because it’s faster and my sites are all on LiteSpeed servers, so I’m still keen to make everything work.

Appreciated for your trust.

I have a close todo check about image lazyload. Will give it a test and see.

I will assume this issue can be marked as resolved. Later if any new issue you have, don’t hesitate to leave a new topic, and @ me to notify. Thanks.