Juicer feeds can be very heavy, and no matter the optimization we do on our end (trust us, we’ve done all of them) it still has the possibility to slow down your page if you are loading 100+ images! Here’s a few things you can do to speed up your Juicer feed.
Lazy Load the 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 check the checkbox in your feed settings:
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 less posts. The easiest way to handle this is to add the data-per attribute to your embed code <ul> like so.
The less posts, the faster your page will load.
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 actually visible on the page (when the user has scrolled down to it)! If the user never scrolls down, then there’s no point to loading all those posts needlessly! Here’s a javascript snippet that should get you started Lazy Loading Juicer:
First you’ll want to remove the javascript and css lines from your site, just include the Juicer <ul> from your embed code.
Basically you should be able to add this javascript code to your page and it should work.
<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>
