Go to Juicer

Juicer.io Support Center

Search for any help questions or topics.

What to do if Juicer is slowing down your website's loading speed

Optimize load times of your Juicer feed
Avatar
Mario
Updated 3 weeks ago


Understanding the Challenge

Juicer feeds can impact page performance, especially when displaying multiple images. While we continuously optimize our software's loading speed, feeds with numerous images can still affect page performance. Here are effective strategies to improve loading speeds.

Lazy Loading Images

When your feed appears below the initial viewport ("below the fold"), the simplest optimization is to use Juicer's built-in "Lazy Loading" feature. This prevents images from loading until they become visible in the user's browser window, significantly reducing initial page load time.

To enable lazy loading:

  1. Open Juicer dashboard
  2. Go to "Feed Settings"
  3. Check "Lazy-load images"

Reduce Initial Post Count

By default, Juicer loads 100 posts into your feed. Considering both post images and author avatars, this could add up to 200 images on your page.

To optimize:

  • Use the data-per attribute to display fewer posts initially
  • Add a "Load More" button for additional content
  • View detailed instructions

Script Loading Optimization

Move the embed.js line from your Juicer embed code to the bottom of your <body> tag. This ensures your browser loads all other content before processing the Juicer script.

Advanced: Lazy Loading the Entire Feed

If Juicer is way below the fold on your site, it's probably best not to load Juicer until it is visible on the page (when the user has scrolled down to it).

This requires:

  1. Removing JavaScript and CSS from the embed code
  2. Keeping only the Juicer <ul> element
  3. Implementing the following lazy loading script:
 $(window).scroll(lazyLoadJuicer);

var feed = $('.juicer-feed');
 var juicerFeedScrollDistance = feed.offset().top;
 var juicerLoaded = false;

function lazyLoadJuicer() {
 var scrollDistance = $(window).scrollTop();
 var windowHeight = $(window).height();

if ((scrollDistance >= (juicerFeedScrollDistance - windowHeight)) && !juicerLoaded) {
 $.getScript('//assets.juicer.io/embed.js');
 $('head').append('<link rel="stylesheet" type="text/css" href="//assets.juicer.io/embed.css">');
 juicerLoaded = true;
 }
 };

lazyLoadJuicer();
</script>

⚠️ Note: This advanced implementation requires developer expertise. While we provide the code as a starting point, you may need to adapt it for your specific website. Juicer support cannot assist with custom implementation details.

If you have any questions or need any help please email us at hello@juicer.io.

Did this answer your question?
😞 😐 😃