Close

Copyright © RebelMouse 2019

Follow Us:

Page Load Optimizations (Lazy Loading)

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.

RebelMouse CEO: Reimagining Diversity “Starts in the Office”

Why women, minorities, and the LGBTQ+ community will restructure workplace norms

Entering a new decade means a new opportunity to change how we approach diversity. In a joint interview alongside Leanne Pittsford of Lesbians Who Tech, RebelMouse founder and CEO Andrea Breanna said that the only way to fight patriarchal dominance is to encourage and nurture more women, minorities, and members of the LGBTQ+ community in the workplace, particularly in tech.

Over half of RebelMouse's employees are women or identify as LGBTQ. Read our full diversity and inclusion report here.

Check out the full video below.

Related Articles

Publishers No Longer Have to Submit Their Site to Google News

Google's Publisher Center creates new opportunities for audience growth

Just before the start of the next decade, Google announced an important change to its Google News offering with the launch of Google Publisher Center. The new interface merges Google News Producer and Google News Publisher into one to streamline the partnership process for publishers.

Overall, the change should make it easier for publishers to manage their Google News settings, including updating themes, directing URLs to section pages, and configuring user permissions. Read the full list of features here.

Keep reading...

How to Find Work-Life Balance as a Remote Employee

Tips from our CEO on making the most of an office-free lifestyle

Working from home is becoming increasingly popular, with an estimated 66% of companies now allowing remote work and 16% operating completely office-free. RebelMouse is one of those fully remote companies, and over the years we've mastered how to stay close to each other despite being spread across more than a dozen countries. We believe working remotely is good for both our personal lives and our productivity. Read more about this here.

Still, working free from the shackles of an office environment doesn't mean every day is a dance party in your pajamas from 9 to 5. Working from home comes with its own set of challenges just like any other job.

Keep reading...
Subscribe to Our Newsletter