CODEWITHSUNDEEP
javascriptopencartdeferred
Ritesh Kumar
Ritesh Kumar

Reputation: 2223

How can I defer or async javascript in OpenCart

I have OpenCart application. Javascripts are loaded in settings.php inside path '/catalog/controller//settings.php with similar codes as:

 $this->document->addScript('catalog/view/theme/<theme>/lib/lazy/jquery.lazy.1.6.min.js');
    $this->journal2->minifier->addScript('catalog/view/theme/<theme>/lib/actual/jquery.actual.min.js', 'header');
    $this->journal2->minifier->addScript('catalog/view/theme/<theme>/lib/hover-intent/jquery.hoverIntent.min.js', 'footer');

Here, 'theme' means theme name that is installed. I want to defer or async these javascript loading in OpenCart, how can I do it?

I know that addScript syntax has 1s parameter as file, second location, 3rd defer and 4th async where defer and async can be boolean. I have tried statement as below to see defer false and async true:

 $this->journal2->minifier->addScript('catalog/view/theme/<theme>/lib/hover-intent/jquery.hoverIntent.min.js', 'footer', false, true);

but I am not sure if this will work or not. Please suggest

Upvotes: 11

Views: 3635

Answers (2)

phanvugiap
phanvugiap

Reputation: 346

For reducing page load times, you must do two mainly things

  1. Reduce number of requests
  2. Reduce package sizes

For reducing number of requests, you may merge all javascripts & css to one file. You should also applying lazy load images (This helps reduce package size too)

If you are running a VPS, you may try to install mod_pagespeed (developed by google) - It will help decrease a lot page load time.

I am not sure if you have used gtmetrix.com or http://www.webpagetest.org/ for reviewing your site speed yet.

For my experience, lazy load JavaScript will not help you much

Upvotes: 0

Asons
Asons

Reputation: 87251

Here is a script I've been using for quite some time, in the head element.

With this you get good control of your loading of files, and can start loading anything after all the DOM is loaded, just make sure the files is not required anywhere in the DOM upon load.

<head>
    <title></title>
    <link rel='stylesheet' type='text/css' href='css.css' />
    <script type='text/javascript'>         

        var DomLoaded = {
            done: false, onload: [],
            loaded: function () {
                if (DomLoaded.done) return;
                DomLoaded.done = true;
                if (document.removeEventListener) { document.removeEventListener('DOMContentLoaded', DomLoaded.loaded, false); }
                for (i = 0; i < DomLoaded.onload.length; i++) DomLoaded.onload[i]();
            },
            load: function (fireThis) {
                this.onload.push(fireThis);
                if (document.addEventListener) {
                    document.addEventListener('DOMContentLoaded', DomLoaded.loaded, false);
                } else {
                    /*IE<=8*/
                    if (/MSIE/i.test(navigator.userAgent) && !window.opera) {
                        (function () {
                            try { document.body.doScroll('up'); return DomLoaded.loaded(); } catch (e) { }
                            if (/loaded|complete/.test(document.readyState)) return DomLoaded.loaded();
                            if (!DomLoaded.done) setTimeout(arguments.callee, 10);
                        })();
                    }
                }
                /* fallback */
                window.onload = DomLoaded.loaded;
            }
        };

        DomLoaded.load(function () {
            var d = document;
            var h = d.getElementsByTagName('head')[0];
            var s = d.createElement('script');
            s.setAttribute('type', 'text/javascript');
            s.setAttribute('async', true);
            s.setAttribute('defer', true);
            s.setAttribute('src', '/path/to/scripts.js');
            h.appendChild(s);
        });

    </script>
</head>

And here is a good article which describes a few more ways to speed things up, and one of them is combining your js files into 1, or 2-3-4, based on which one needs which. The benefit is less http request.

http://exisweb.net/web-site-optimization-making-javascript-load-faster

And google is filled with articles

https://www.google.com/search?q=speed%20up%20loading%20javascript%20files&rct=j

Upvotes: 3

Related Questions