RebelMouse Talk to Us

How does Lazy loader work?

The Lazy loader is a JS library that renders content in front of visitors as quickly as possible. Lazy loader allows browser to load only the main content (the first post) and the minimal set of stylesheets.

All the rest content must be marked as lazy-objects so that browser can ignore it at the first rendering.

When the main content will be loaded, Lazy loader will find all marked lazy-objects and load them gradually (by downloading stylesheets and javascripts asynchronously, processing DOM elements to prevent them from blocking page rendering).

 

How to mark page objects as lazy-objects:


Above-the-fold content first

Browser should render the critical part of the page (the first post) immediately and defer the rest of them. Add lazy-loading class to the rest content sections that will hide these elements.

Before: 

<div class="search">    <form action="/core/search/">        ...    </form></div>

After: 

<div class="search lazy-loading">    <form action="/core/search/">        ...    </form></div>

Including CSS

This method of loading CSS will deliver usable content to visitors much more quicker than the standard approach. Critical CSS can still be served with the usual blocking approach (or you can inline it for ultimate performance) and non-critical styles can be progressively downloaded and applied later in the parsing / rendering process.

Before:

{% css_include 'frontpage_features' %}

Afer:

{% lazy_css_include 'frontpage_features' %}

Including inline Javascript

The loading and execution of scripts that are not necessary for the initial page render may be deferred until after the initial render or other critical parts of the page have finished loading.  Just change type attribute from text/javascript to text/lazy-javascript, so browser can ignore it at the first rendering. You can insert inline script in any part of the page, all lazy-scripts will be sorted by their priority attributes upwards.  For non-critical scripts 4 and higher priority is recommended. 

Script loading sequence:

Priority | Scripts      0  | require.js, amd_config, sprintf      1  | Settings, userSettings, Bootstrap, etc      2  | JS Templates, site features      3  | Analytics      4  | Third-party JavaScript      5  | Facebook API, Twitter API      6..| Any custom javascripts

Before:

<script type="text/javascript">    alert("example");</script>

After:

<script type="text/lazy-javascript" priority="5">    alert("example);</script>

Including external Javascript

External blocking scripts force the browser to wait for the JavaScript to be fetched,
which may add one or more network roundtrips before the page can be rendered.
Just change src attribute to data-src.

Before:

<script type="javascript" src="https://www.rebelmouse.com/embed/Huffpostgreen/elite.js"></script>

After:

<script type="text/lazy-javascript" priority="5" data-src="https://www.rebelmouse.com/embed/Huffpostgreen/elite.js"></script>

 

By default our pages are structured on they way that we can disable or enable Lazy loader in engine_settings, but we highly recommend to keep it enabled. It helps at achieving higher page speed scores.

Interested in a Free Website Health Check?Check Your
Website's Health
Get Your Free Analysis Now
The Most Secure CMS of 2022
Featured

The Most Secure CMS of 2022

Why RebelMouse Is the Most Secure CMS on the Web

Delivering a secure, high-performing environment with extreme reliability is essential to all of our clients at RebelMouse. We only use industry-leading, reliable approaches to host our infrastructure. This ensures maximum stability and security for all of our clients’ data. Here are just some of the reasons we’re able to maintain a hard-bodied product that’s flexible, too.

Most websites get hacked. RebelMouse has never been hacked.

Keep reading... Show less
Google Made Major Changes to Its Formula for Page Speed. Here’s What to Do About It in 2022.
Rebel Insights

Google Made Major Changes to Its Formula for Page Speed. Here’s What to Do About It in 2022.

Make sure your site is set up for success in 2022.

In the spring of 2020, Google let the world know that its Core Web Vitals would become the new benchmark for measuring a site's performance in its search results, known as the page experience update. Fast forward to more than a year later in August 2021 when, after much anticipation, Google's page experience update became official.

Since its rollout, developers have felt the impact of how their publishing platforms stack up against the new standard. Important decisions around the architecture of your site can now make or break your site's performance in the eyes of Google.

HTTP Archive, a tracking platform that crawls the web to identify trends and record historical patterns, has revealed how top content management systems (CMS) have weathered the page experience update through the creation of its Core Web Vitals Technology Report. RebelMouse consistently outperforms major CMS platforms on Google's most critical metrics since its rollout and into January 2022:

Luckily, performing well on Core Web Vitals is possible with thoughtful, strategic changes to your site’s codebase. Here's what you need to know and how we can help.

Keep reading... Show less
Build on a Better PlatformReady to See More?
Request a Proposal
Google’s Latest Product Reviews Update Is Causing Late-Stage Search Volatility
Rebel Insights

Google’s Latest Product Reviews Update Is Causing Late-Stage Search Volatility

Here’s what you need to know about Google’s latest update

In case you missed it, Google released a new algorithm update in March 2022 that focused on product reviews and their rankings in search returns. Officially called the March 2022 Product Reviews Update, Google began rolling out the changes on March 23, 2022, and said that the update would take about three weeks to complete.

Some site owners experienced peak volatility around their search traffic on March 31, but Barry Schwartz at SEO Roundtable noticed some late-stage volatility a week later. He wasn’t alone either:

Keep reading... Show less
Build on a Better PlatformReady to See More?
Request a Proposal