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 2 months ago
Juicer feeds often contain many images, which can cause a slowdown on your site. Here are a few workarounds.

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


Did this answer your question?
😞 😐 😃