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.
An example or Google's rich results for recipes.