While Juicer has worked to optimize the speed of our software loading, 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 a Javascript example that can provide a starting point. This specific code may not work on your website, in which case development support would be needed by an outside programmer. Juicer cannot assist in helping lazy load a feed on your page.
<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>
If you have any questions or need any help please email us at hello@juicer.io