Juicer feeds can affect page-load times when they render many images. The strategies below — lazy-loading, fewer initial posts, deferred script loading, and (for the legacy embed) lazy-loading the entire feed — reduce that impact.
Understanding the challenge
Feeds with many posts can carry hundreds of images (post images plus author avatars). We continuously optimize Juicer's runtime, but optimizing the embed for your specific page placement is still the biggest single lever.
Lazy-loading images
When the feed sits below the initial viewport ("below the fold"), enable Juicer's built-in Lazy-load images option. Images then load as they scroll into view, which significantly reduces initial page load.
To enable lazy loading:
Open the Juicer dashboard and open your feed.
Open the Feed Settings panel.
Turn on
Lazy-load images.
Reduce the initial post count
By default, Juicer loads 100 posts into your feed. With post images and author avatars combined, that can be 200 images on the page.
To reduce the initial load:
Use the
data-perattribute on the feed embed to display fewer posts up front.Add a Load more button so visitors can request additional content on demand.
Script loading optimization
Move the Juicer embed script line to the bottom of your <body> tag. The browser will then load all other content before processing the Juicer script.
Advanced — lazy-load the entire feed (legacy embed)
💡 This snippet is for the legacy 3-piece embed (jQuery + embed.js + embed.css). The newer Feeds 2.0 single-line embed (embed-code.js) already defers most of its work and uses HTMX to load content lazily, so this script isn't needed there.
If Juicer is far below the fold on a page using the legacy embed, you can avoid loading any Juicer assets until the user scrolls down to the feed.
This requires:
Removing the JavaScript and CSS lines from the embed code.
Keeping only the Juicer
<ul class="juicer-feed">element.Adding the following lazy-load script to 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>
⚠️ This advanced implementation requires developer expertise. The snippet is a starting point — you'll likely need to adapt it for your site. Juicer support cannot assist with custom implementation details.
If page speed still suffers after lazy-loading images and reducing the initial post count, send us the live URL, the embed code you're using (legacy or Feeds 2.0), and a PageSpeed or Lighthouse report through contact us — we'll point at the specific lever to tune.