New to the community? Start here

[Smush Pro] Having trouble with Lazy Loading

Hi, my website is filled with quite a few items on the landing page. Hence Lazy Loading is required to decrease load times. However, the images are all loading at once. Seems like lazy loading is not working.

Tue, 16 Jun 2020 11:03:22
More Smush Pro discussions
Smush Pro
  • Ouissal Aouinti
    • Support-Woman

    Hello Kavan !

    Hope you are doing well today!

    I checked your site from the front-end and I could notice that your site images are lazy loaded, but they are on FireFox, but not on Chrome, so, I will need to take a further look at this.

    Would you please grant us support access so I can check your site further, you can enable Support access by going to your WordPress Dashboard > WPMU DEV > Support > Support Access > Grant Support Access.
    You can take a look at our documentation for more details about support access: https://wpmudev.com/docs/getting-started/getting-support/#enabling-support-access

    Please once you enable support access, leave a reply so I can check your site as we don’t get notified when members grant us support access.

    I hope you have great day ahead!

    Kind regards,
    Ouissal

  • Ashikur Rahman
    • Ex Staff

    Hello Kavan ,

    Hope you’re doing well.

    I’ve checked your site and I could see Lazy Load is enabled for your site by Smush Pro.

    [attachments are only viewable by logged-in members]

    I assume we’re not noticing the delay loading because of less animation time. I would ask you to go Smush Pro > Lazy Load and look for “Display & Animation” settings. If it’s Fade-in effect, increasing the loading “Delay” time and check.

    [attachments are only viewable by logged-in members]

    Let us know how it goes. For further investigation, we’ll need your site login access. Please grant support access for us following this doc https://wpmudev.com/docs/getting-started/getting-support/#enabling-support-access

    Let us know here once you’ve granted support access. So we can check further.

    Feel free to reply here if you’ve any more questions or concerns about it. Have a great day ahead.

    Regards,
    Ashik

  • Ouissal Aouinti
    • Support-Woman

    Hello Kavan !

    I hope you are doing well today!

    I have checked your site further and I was able to replicate the same issue with the theme that you are using ( Kava Theme ), as I could notice before, Lazy Loads was working fine on Firefox, but nit working well on Chrome, I have done as well as my friend suggested above, but still getting the same issue as well.

    This issue has been flagged for our SLS/Dev Team so that they can dig into it further for you. We will post an update here as soon as more information is available.

    Also, For SLS/DEV to be able to check your site further and provide a better help, I will need your FTP/SFTP or Hosting credentials and WordPress Admin credentials access as well, as this is a public forum, you should send us your details through our safe contact form
    https://wpmudev.com/contact/#i-have-a-different-question
    using this template:

    Subject: Attn: Ouissal Aouinti

    – link back to this thread for reference (e.g. https://wpmudev.com/forums/topic/smush-pro-having-trouble-with-lazy-loading/)

    WordPress Admin login:
    – Admin username
    – Admin password
    – Login url
    And
    Hosting Control Panel Login
    – Admin username
    – Admin password
    – Login url
    OR
    FTP credentials
    – host
    – username
    – password
    – (and port if required)

    Keep in mind the subject line as ensures that it gets assigned to me.
    Thank you for your patience while we look into this further.

    I hope you have a great day ahead!

    Kind regards,
    Ouissal

  • Kavan
    • WPMU DEV Initiate

    Hi! Something seems to have gone wrong. The website does not LOAD anything currently. I am upset Lazy Load troubleshooting has led to the website being completely inaccessible since we have high traffic on our platform. It would have been good to be notified about this guys! :slight_frown:

    Anyways, as requested I have shared the WP credentials. We’re hosted on AWS along with our parent site, hence I’m afraid I cannot give you access to it right away. I’d urge you to troubleshoot via WordPress first, in case you need to vet our servers I can loop in my tech team.

    PS all content is hosted on your CDN which seems to be in a loading loop. The server seems to be fine.

    Request your urgent attention please. We need to website to load, the lazy loading can be tackled later on. Relying on you Ouissal! :pray:

  • Ouissal Aouinti
    • Support-Woman

    Hello Kavan !

    Hope you are doing well!

    Sorry to hear that your site is not loading fine, however, I assure you that we haven’t touch anything other than Smush Pro.

    We basically tried to activate/deactivate Smush Lazy Load and tried check the site front-end to see if it is lazy loading or not, however, as I checked your site issue today, I could see that there maybe a JavaScript file is running and making it hard to the site to load content.

    I suspect it maybe Elementor as well, however, I could notice that jQuery is one of the files that are not loading fine… please check the screenshot:
    [attachments are only viewable by logged-in members]

    Furthermore, this could be happening due plugin conflict, could you please perform a plugin conflict and see the result.

    As this is a live website with traffic, I’d rather advise to create a staging environment, meaning a complete and exact copy of this installation into another location /folder in the same server, using a separate database, and perform the test in there instead without worrying about the live site.

    Reference: https://wpmudev.com/docs/getting-started/getting-support/#chapter-2

    Then deactivate all plugins apart from WPMU DEV Dashboard and Smush Pro, clear all caches and check again if the issue is still there.
    If NOT, it means that something is conflicting, so start activating the remaining plugins, one by one this time, checking every time for the reported issue, until you reproduce the issue, thus finding the conflicted combination.

    The following flowchart image can assist you during this test:
    https://wpmudev.com/wp-content/uploads/2015/09/Support-Process-Support-Process.gif

    Once you have done this, please reply here with the result you get so I can help further.

    I hope you have a great day!

    Kind regards,
    Ouissal

  • glaubersilva
    • Ex Staff

    Hi Kavan

    What happens is that Smush’s lazy load feature has a preloading and prioritization resource that works intelligently.

    To be clearer, read the excerpt below…

    Intelligent prefetch/Intelligent resource prioritization: lazysizes prefetches/preloads near the view assets to improve user experience, but only while the browser network is idling. This way in view elements are loaded faster and near of view images are preloaded lazily before they come into view.

    And as my colleague Ouissal said, different from firefox, the other browsers mentioned also load the nearby images horizontally. And since your home page has several carousels, these images are loaded too – precisely because they are close to the main view.

    But we can try a workaround for this problem…

    This feature that allows intelligent loading works with the following different options:

    loadMode 0 = don’t load anything
    loadMode 1 = only load visible elements
    loadMode 2 = load also very near view elements
    loadMode 3 = load also not so near view elements.

    IMPORTANT: after the onload (browser event) the loadMode is automatically set to 3.

    Smush uses “loadMode 2” by default and this works well for most cases, but if you want to optimize for a faster onload event in the browser, you can change this default value to “loadMode 1” – to do this, just copy this snippet:

    <?php

defined( 'ABSPATH' ) || exit;

/**
 * Page is optimized for fast onload event.
 */
function wpmudev_change_lazy_load_mode() {

	wp_add_inline_script( 'smush-lazy-load', 'lazySizes.cfg.loadMode = 1' );
	//wp_add_inline_script( 'smush-lazy-load', 'console.log("loadMode: ", lazySizes.cfg.loadMode);' );

}
add_action( 'wp_enqueue_scripts', 'wpmudev_change_lazy_load_mode', 999 );

    Then paste this snippet in a file with the .php extension (e.g: wpmudev-smush-change-lazy-load-mode.php ), after that upload the file to your site’s wp-content/mu-plugins directory.

    If you need more help on installing this custom plugin please read our detailed guide here:
    https://wpmudev.com/docs/getting-started/download-wpmu-dev-plugins-themes/#installing-mu-plugins

    IMPORTANT: We strongly recommend first try this out on a staging/testing site and then move it to a production site.

    That’s all! After that, the loading time of your website should improve, but the images nearby should continue to be loaded because as I said just above, after the “onload” event of the browser the Smush will switch to “loadMode 3” automatically – this exchange happens to improve the user experience that does not have to wait for the image to load while scrolling.

    Let us know if this worked for you. :slight_smile:

    Kind regards,
    Glauber silva

    P.S: remember to disable the “Native lazy load” option in Smush because if not chrome itself will try to load the images nearby and the snippet above may not work.