-
Posts
-
Hi
I am working on a website that relies heavily on visuals. I did a slider for homepage that uses a lot of png like the one on Enfold demo site.
I then made an alternate slider for mobile devices with no transparent png, less animation, smaller images, and other things to better suit the mobile dimensions and technicals. First is hidden on mobile and hidden under 768px (just to be sure), the second is hidden over 767px.Here is the problem : every images from both sliders are loaded on page load. All of them. You can guess how bad this is for mobile devices (even for desktop, it is not performance-friendly to load additional unused images).
Well, I can understand that the smaller slider is made ready in case the windows shrinks under 768px. But it is not OK that images are loaded on mobile device for a slider I explicitly chose to hide on mobile.
All of this would not be a real issue if lazy loading was effective, but according to browser console, it is not.
Or am I mistaking how it works?
Please advise.
ThanksI am posting this here because LayerSlider is bundled with Enfold, but maybe last LayerSlider version (5.6.3) fixes these issues?
If I am not wrong, I cannot update LayerSlider by myself, can I?Hey!
Thank you for using Enfold.
We cannot configure the layer slider plugin ourselves, unfortunately. A workaround is to create a duplicate of the page with the mobile layer slider and do a 301 redirect. There’a a lot of plugin that can do this automatically:
https://wordpress.org/plugins/simple-mobile-url-redirect/
https://wordpress.org/plugins/equivalent-mobile-redirect/
https://wordpress.org/plugins/mobile-redirect-plus-lite/Cheers!
IsmaelDear Ismael
Thank you for these links. I have contacted Kreatura because of LayerSlider lazyload option not working. They say it works as intended. I am puzzled. If I test my website or even yours (http://kriesi.at/themes/enfold/), browser console clearly shows no lazyload. Maybe it is not enabled on Enfold Demo site, but it is on my website, and I can see no lazyload at all. Link to my site is in private details.
Could you please confirm there is no lazyload?
ThanksI think there is a browser compatibility issue with LayerSlider lazyload.
Lazyload works on Google Chrome, but not on Firefox (44) nor IE (11).
Do you see the same issue?Hey!
The lazy load in the theme demo is disabled. And I think you slightly misunderstood the function of the lazyload script. It will still load the images but it will not load them until it is visible in the viewport. In this case, since the layer slider section is always visible in the viewport or above the fold on page load, the image will still be loaded.
Lazy Load is delays loading of images in long web pages. Images outside of viewport are not loaded until user scrolls to them. This is opposite of image preloading. Using Lazy Load on long web pages will make the page load faster. In some cases it can also help to reduce server load.
Please try the suggested redirect workaround above.
Regards,
IsmaelActually, LayerSlider lazyload option says it will only load images when they are needed, and will only load current and next slide assets (if the options are enabled). So images from #3 ou #4 slides should not be loaded at slide #1, even if the slider section is in the viewport. You can see it happen in the browser console.
Anyway, Kreatura just confirmed it was a compatibility issue with Firefox (at least, I think it also concerns IE11). But it works on Chrome.
I hope they come up with a fix soon and Kriesi will update the theme accordingly in no time.I will nevertheless try your redirect for mobile workaround, thank you.
Hi,
Ok, thanks for letting us know. Please let us know if you should need any more help on the topic.
Regards,
RikardHi!
What happens if you disable the “Image preload” option? This is the option above the lazyload optino.
Regards,
IsmaelHi Ismael,
disabling “Image preload” had no visible effect on the lazyload issue.
Waiting for Kreatura to fix Firefox issue (and Kriesi to report this fix in next Enfold update), I have tried other lazy load functions. None really worked (including WP-Rocket whose lazyload works on the slider but prevents images to be really visible…).Hi!
Alright. Thank you for info. Do let us know if there are any updates with this. :)
Regards,
IsmaelHi Emil
Unfortunately, to this day, LazyLoad on LayerSlider (Enfold’s version at least) still doesn’t work on Firefox. I hadn’t check in months but I did just after your message.
I also confirm it works on Chrome.Since Kreatura never went back to me (and they didn’t seem particularly willing to fix this IMO…), I followed Ismael’s advice to set a redirection for this specific page for mobile devices to a mobile optimized version. On this page, I set a new LayerSlider with much less images, so it would be much lighter.
Of course, this workaround forces me to maintain 2 different versions of the page (without mentionning localizations…) but that’s all I got.After all this time, I’d like Enfold team to check with Kreatura if their latest versions have fixed this bug and update Enfold accordingly (latest Enfold has LayerSlider 5.6.8 whereas LayerSlider is now announced at 6.1.16)
Hi,
The new version of the theme will have the latest version of the plugin. It’s going to be release this week or the next. However, I’m not sure if they included a patch for this issue.
Best regards,
IsmaelHey,
Thanks! I just tried it out, and it does feature a somewhat patch – the images are still being loaded, but for the right screen size – not the largest size it can find, which is great news :)
Hi,
Glad we could help!
Please take a moment to review our theme and show your support https://themeforest.net/downloads
To know more about enfold features please check – http://kriesi.at/documentation/enfold/
Thank you for using Enfold :)Best regards,
Andy
- The topic ‘Performance issue with LayerSlider (hidden assets loading and no lazyloading)’ is closed to new replies.