well, there’s a tradeoff there; if you want people who for whatever reason don’t have javascript active to have an optimal experience, you need that CSS even if W3C’s validator frowns upon it.
but if you insist you can make that CSS disappear with this code snippet;
add_filter( 'autoptimize_filter_imgopt_lazyload_cssoutput', '__return_empty_string' );hope this clarifies/ helps,
frank
Thanks for the revert. Need some clarification on two points:
- should I add this code snippet in functions.php?
2. Alternatively , if I add the noscript lazyload css script in <head> and remove from here in the plugin – would it solve the issue – while at the same time not hampering user experience?
1. functions.php indeed or you can use the code snippets plugin.
2. no, as at that point the CSS is applied also for users that do have JS 🙂
Thanks for the revert
Continuing on pt-2 above: What if I add the below code to <head> section?
<noscript><style>.lazyload{display:none;}</style></noscript>
I *think* the W3 validator might frown upon <noscript being in <head, but why not give it a try? 🙂
Here’s the final approach I’ve implemented and it seems to be working fine without any errors from w3 validator
1. Added below to functions.php
add_filter( 'autoptimize_filter_imgopt_lazyload_cssoutput', '__return_empty_string' );2. Added the below code to <head> section?
<noscript><style>.lazyload{display:none;}</style></noscript>