OK, first thing to do is finding out if this is due to CSS optimization, JS optimization or lazyload, can you disable one of each to identify the culprit?
Thread Starter
Buruko
(@buruko)
Thanks for the reply, I missed it when my email sent it to spam.
So I disabled everything and the images re-appeared. From there I re-able each part of the Optimization. When I added ‘Lazy Load’ that is when the images disappeared.
To confirm I left everything but Lazy Load checked and the images re-appeared again.
So it appears that Lazy Load is the culprit.
I have prepared a Dev site to work on config and issues, found here:
http://dev.dolphindiveathens.com
UID: viewer
PWD: godive
It is only password protected to prevent SEO issues.
-
This reply was modified 6 years, 2 months ago by
Buruko.
in that case you’ll probably want to exclude “hero” images from being lazyloaded, maybe give that a try? 🙂
Thread Starter
Buruko
(@buruko)
Is that a setting, I don’t see such an option.
I added ‘hero’ to the exclusion list but that made no difference.
I cannot determine the Class or label to exclude apparently.
-
This reply was modified 6 years, 2 months ago by Buruko.
Thread Starter
Buruko
(@buruko)
So with Lazy Loading turned on the images from FB appear to get wrapped in a tag:
<noscript>
<img src="https://scontent-iad3-1.xx.fbcdn.net/v/t1.0-9/p720x720/78172745_3205487049525020_6587625421334904832_o.jpg?_nc_cat=107&_nc_sid=b386c4&_nc_oc=AQkcoOP7GGNiU3Ks28bKDc_lwnCWCzkBcUCF2cewOy4Eq9lJ5y0zuicf1bcFcHE9HbY&_nc_ht=scontent-iad3-1.xx&_nc_tp=6&oh=2e4a1250c34800f591a2d1e74201d34a&oe=5EFF3A2F" alt="Lake Jocassee" data-querystring="_nc_cat=107&_nc_sid=b386c4&_nc_oc=AQkcoOP7GGNiU3Ks28bKDc_lwnCWCzkBcUCF2cewOy4Eq9lJ5y0zuicf1bcFcHE9HbY&_nc_ht=scontent-iad3-1.xx&_nc_tp=6&oh=2e4a1250c34800f591a2d1e74201d34a&oe=5EFF3A2F" />
</noscript>
After this is a generated URL but that doesn’t load anything, this is the source after:
<img class="lazyload cffFadeIn" src="data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20210%20140%22%3E%3C/svg%3E" data-src="https://scontent-iad3-1.xx.fbcdn.net/v/t1.0-9/p720x720/78172745_3205487049525020_6587625421334904832_o.jpg?_nc_cat=107&_nc_sid=b386c4&_nc_oc=AQkcoOP7GGNiU3Ks28bKDc_lwnCWCzkBcUCF2cewOy4Eq9lJ5y0zuicf1bcFcHE9HbY&_nc_ht=scontent-iad3-1.xx&_nc_tp=6&oh=2e4a1250c34800f591a2d1e74201d34a&oe=5EFF3A2F" alt="Lake Jocassee" data-querystring="_nc_cat=107&_nc_sid=b386c4&_nc_oc=AQkcoOP7GGNiU3Ks28bKDc_lwnCWCzkBcUCF2cewOy4Eq9lJ5y0zuicf1bcFcHE9HbY&_nc_ht=scontent-iad3-1.xx&_nc_tp=6&oh=2e4a1250c34800f591a2d1e74201d34a&oe=5EFF3A2F" style="visibility: hidden; display: none;">
With Lazy Loading turned off it simply loads the following:
<img src="https://scontent-iad3-1.xx.fbcdn.net/v/t1.0-9/p720x720/78172745_3205487049525020_6587625421334904832_o.jpg?_nc_cat=107&_nc_sid=b386c4&_nc_oc=AQkcoOP7GGNiU3Ks28bKDc_lwnCWCzkBcUCF2cewOy4Eq9lJ5y0zuicf1bcFcHE9HbY&_nc_ht=scontent-iad3-1.xx&_nc_tp=6&oh=2e4a1250c34800f591a2d1e74201d34a&oe=5EFF3A2F" alt="Lake Jocassee" data-querystring="_nc_cat=107&_nc_sid=b386c4&_nc_oc=AQkcoOP7GGNiU3Ks28bKDc_lwnCWCzkBcUCF2cewOy4Eq9lJ5y0zuicf1bcFcHE9HbY&_nc_ht=scontent-iad3-1.xx&_nc_tp=6&oh=2e4a1250c34800f591a2d1e74201d34a&oe=5EFF3A2F" style="visibility: hidden; display: none;" class="cffFadeIn">
Inlcuding the class ‘cffFadeIn’ doesn’t seem to stop the noscript tag
can you try excluding fbcdn.net instead?
Thread Starter
Buruko
(@buruko)
And just like that it works with Lazy Load enabled.
Don’t suppose you could explain why that worked? I would never have thought to put the domain as an exclusion.
well, the problem was cffFadeIn was added by JS, so invisible server-side. as the problem was with facebook images, excluding all of those from being lazyload by just using the domain makes sense (excluding can by done by any <img attribute name or value, even partial) 🙂
enjoy your weekend!
frank
