While Juicer has worked to optimize the speed our software loads, Juicer feeds can still be quite heavy, particularly when many images appear in your feed. Here are a few ways you can improve the loading speed on your side. 

Lazy-load images

The easiest way to combat this problem, especially if your feed is below the fold, is to use Juicer's built in "Lazy Loading" functionality, which won't load the images until your feed is visible on the page. To turn this on, simply click the "Lazy Load Images" checkbox in the "Feed Settings" panel of your Juicer dashboard.

Load fewer posts

By default, Juicer loads 100 posts into your feed. Between the post images and the images from the authors, you could be looking at 200 additional images on your page.

The easiest way to combat this is to load fewer posts, followed by a "Load More" button. You can do this by using the data-per attribute to your embed code. Instructions for this are outlined here.

Wait to load Juicer

Move the embed.js line of your Juicer embed code to the very bottom of your <body></body>tag. This will make it so the browser won't try to load the Juicer script until everything above it is loaded first.

Lazy-load Juicer itself

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). 

First you'll want to remove the Javascript and CSS lines from the Juicer embed code on your site, and only include the Juicer <ul>from your embed code.

Here is some example Javascript that can providing a starting point. This specific code may not work on your website, in which case development support would be needed by an outside programmer. 

<script type="text/javascript">
  $(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>
Did this answer your question?