• Hi, we have 3 sliders on our homepage and it’s exceptionally slow (almost 1 second delay).

    The affected file is /wp-content/plugins/woo-product-slider-and-carousel-with-category/assets/js/public.js

    Bottleneck:

    wcpscwc_product_slider_init @ public.js:199 (~930 ms)
    3 x i.fn.slick @ slick.min.js:1 (~310 ms)

    What can we do?

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Contributor Ketan Patel

    (@patelketan)

    Hello,

    Thanks for reaching here…

    Please share your website link so we will check.

    Thanks,

    Thread Starter Martin Braun

    (@martinbraun)

    Hi @patelketan. Just place three sliders on your page from three different categories. I bypassed the problem by coding a specialist solution that prevents your plugin from initializing at page load, so it makes no sense to share the URL now, since I bypassed the issue.

    You can see my problem-solving of the performance issues here: https://stackoverflow.com/questions/65726894/lazy-load-elementor-section-with-javascript/70371885#70371885

    Don’t get me wrong, the issue is not resolved, I just bypassed it. Your plugin is nightmare for any SEO due to slow page speeds. The reason for that is your wcpscwc_product_slider_init function which is called after the page is load and it iterates all sliders on the page and slicks it (slick.js). My current bypass is not SEO friendly in a sense that the contents of the DOM are preloaded in a JS object until you scroll close to view, but it decreased the page loading time by 1 second. I still hope you will do something about it.

    Here is my suggestion:

    Introduce an optional lazy load approach (option on the shortcode). Load all slider contents in the DOM at initialization, but don’t have a wcpscwc_product_slider_init call that iterates all sliders and initializes slick. Instead, make sure the content in the DOM is hidden (visibility: hidden, width: 0, height: 0), so any indexing service will pick-up the slider content. Then listen to the scroll event and check for the position of all elements at the same time as well as when the user scrolls. Once the element is close to viewport, initialize the slider using slick.js. It’s simply, I just don’t do it, because I’d need to hack to prevent your plugin from initializing too early. My current bypass is an universal solution, so it justified my effort as well.

    Please engage with me and my ideas and please don’t refuse to look into it, just because I don’t share an example. I don’t want to remove my optimizations on our live website just to demonstrate the issue to you, this is productive environment. Thanks for your understanding.

    Best regards,
    Martin

    I’d love to see a solution for this also as the site I work on uses multiple product sliders also and they do indeed impact page load times. It would be great to see a solution based on the suggestions above. I’m interested in the approach you’ve taken here to improve performance but i completely agree it makes sense for the plugin to have a lazyload function built in to mitigate this issue.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Performance problems’ is closed to new replies.