Easily lazy-load JS, CSS, images, iframes A demo using @shinsenter / defer.js

Getting started

You only need to load this library (*) once on a page, ideally right after the opening <head> tag:


Code:<head>
    <title>My awesome page</title>
    <script src="https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@1.1.7/dist/defer_plus.min.js"></script>

    <!-- You may want to add small polyfill for IE 9~11 -->
    <script>deferscript('https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@1.1.7/dist/polyfill.min.js', 'polyfill-js', 1)</script>
</head>

Because the minified version of defer.js is super tiny, you can inline its content directly into the HTML document and avoid the network request.

(*) Examples on this page are using extended version of defer.js.

The easiest way to defer JavaScript

The easiest way to delay the execution of the existing <script> tags on your site is to modify the type attribute of the tag to deferjs (except the one which contains defer_plus.min.js or defer.min.js).

For example: if we have 2 script tags like this.

Code:<script type="text/javascript">/* my inline script */</script>
<script type="text/javascript" src="path/to/my/script.js"></script>

Just change `type="text/javascript"` to `type="deferjs"`, like this:

Code:<script type="deferjs">/* my inline script */</script>
<script type="deferjs" src="path/to/my/script.js"></script>

Note: This method can only be used since version 1.1.5.

You can use browser's Developer Tool (press F12 key) to watch how requests are sent.

Looking for a complex demo? Check this Wordpress demo.

Or slowly scroll down to view how images and video are lazy-loaded.

But wait. Do you notice that there is a share buttons block on the top?

Your browser loaded it after 3 seconds since your page fired the 'load' event. There is a Facebook widget at the bottom, too. Here is how to load them without blocking page load speed:


Code:<script type="text/javascript">
deferscript('https://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5c68e61cf456f1cb', 'social-buttons', 3000);
deferscript('https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2', 'facebook-sdk', 3000);
</script>

You may reload the page and find it out your self.

I also lazy-loaded 3rd-party library's JavaScript and CSS.

Thanks to highlightjs for a lightweight, extensible syntax highlighter.


Code:<script type="text/javascript">
deferstyle('https://highlightjs.org/static/demo/styles/tomorrow.css', 'highlightjs-css', 1000);
deferscript('https://highlightjs.org/static/highlight.site.pack.js', 'highlightjs-api', 1000, function() {
    var code_blocks = [].slice.call(document.querySelectorAll('pre code'));
    code_blocks.forEach(function(block) {
        hljs.highlightBlock(block);
    });
});
</script>

Easiest way to lazy-load images

Random image
Random image
Random image
Random image
Random image
Random image
Code:<img class="basic"
    data-src="https://picsum.photos/400/300/?image=314"
    width="400" height="300" alt="Random image" />

<script type="text/javascript">
deferimg('img.basic', 100);
</script>

Lazy-load images with CSS effect

Random image
Random image
Random image
Random image
Random image
Random image
Code:<style type="text/css">
.fade {
    transition: opacity 500ms ease;
    opacity: 0;
}

.fade.show {
    opacity: 1;
}
</style>


<img class="fade"
    data-src="https://picsum.photos/400/300/?image=314"
    width="400" height="300" alt="Random image" />


<script type="text/javascript">
deferimg('img.fade', 100, 'lazied', function(img) {
    img.onload = function() {
        img.className+=' show';
    }
});
</script>

Lazy-load iframe (Youtube video) with CSS effect

Code:<style type="text/css">
.fade {
    transition: opacity 500ms ease;
    opacity: 0;
}

.fade.show {
    opacity: 1;
}
</style>

<iframe class="video fade"
    data-src="https://www.youtube.com/embed/Uz970DggW7E"
    width="560" height="315" allowfullscreen
    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"></iframe>

<script type="text/javascript">
deferiframe('iframe.video', 100, 'lazied', function(frame) {
    frame.onload = function() {
        frame.className+=' show';
    }
});
</script>

Wordpress demo

I added Wordpress demo of using defer.js. You should open both of demo links in Private Mode, or make sure browser caches were cleared.

Sponsored:
In this demo, I only used one HTML template of Wayfarer Theme. Thanks Phát Bùi for the HTML source.

Disclamers:
I did not minify HTML, CSS and JS files. You can not get the perfect score on Pagespeed Test with this demo.

And it's SEO friendly

defer.js is SEO friendly
Archive perfect Google PageSpeed score

Thank you

Like us on Facebook!

@shinsenter/defer.js A SUPER TINY library for web to efficiently load JavaScript. Extended version supports CSS files, images and iframes. They are all easy to use.

Posted by AppSeeds.

Follow the project on Github


defer.js is released under the MIT license.

Copyright (c) 2019 Mai Nhựt Tân.

From 🇻🇳 with love.