Question

Please create JS and CSS minify plugin. Such Plugins exists for WordPress. I'm nervous about minifying the origin files which could cause errors.

Answer 1

There is no need to create a plugin for that. Just minimize it yourself, if you want. You will have to minimize the .js and .css files in your theme and qa-content/qa-global.js.

Comments

But the minification may turn the code into error.

---

For example, I minified the following code but it turns into error:-

Original code:-

    echo '<script>(function(w, d){
    var b=d.getElementsByTagName("body")[0],s=d.createElement("script");s.async=!0;
    s.src = !("IntersectionObserver" in w) ? "' . ROCKET_LL_FRONT_JS_URL . 'lazyload-8.11' . $suffix . '.js" : "' . ROCKET_LL_FRONT_JS_URL . 'lazyload-10.11.1' . $suffix . '.js";
    w.lazyLoadOptions = {
        elements_selector: "' . esc_attr( implode( ',', $elements ) ) . '",
        data_src: "lazy-src",
        data_srcset: "lazy-srcset",
        data_sizes: "lazy-sizes",
        skip_invisible: false,
        class_loading: "lazyloading",
        class_loaded: "lazyloaded",
        threshold: ' . esc_attr( $threshold ) . ',
        callback_load: function(element) {
            if ( element.tagName === "IFRAME" && element.dataset.rocketLazyload == "fitvidscompatible" ) {
                if (element.classList.contains("lazyloaded") ) {
                    if (typeof window.jQuery != "undefined") {
                        if (jQuery.fn.fitVids) {
                            jQuery(element).parent().fitVids();
                        }
                    }
                }
            }
        }
    };
    b.appendChild(s);
}(window, document));

// Listen to the Initialized event
window.addEventListener(\'LazyLoad::Initialized\', function (e) {
    // Get the instance and puts it in the lazyLoadInstance variable
    var lazyLoadInstance = e.detail.instance;

    var observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            lazyLoadInstance.update();
        } );
    } );
   
    var b      = document.getElementsByTagName("body")[0];
    var config = { childList: true, subtree: true };
   
    observer.observe(b, config);
}, false);
</script>';
--------------------------------------------------------------------------------------------------------------------
I have minified it to:

    echo '<script>(function(w,d){var b=d.getElementsByTagName("body")[0],s=d.createElement("script");s.async=!0;s.src=!("IntersectionObserver"in w)?"' . ROCKET_LL_FRONT_JS_URL . 'lazyload-8.11' . $suffix . '.js":"' . ROCKET_LL_FRONT_JS_URL . 'lazyload-10.11.1' . $suffix . '.js";w.lazyLoadOptions={elements_selector:"' . esc_attr( implode( ',', $elements ) ) . '",data_src:"lazy-src",data_srcset:"lazy-srcset",data_sizes:"lazy-sizes",skip_invisible:false,class_loading:"lazyloading",class_loaded:"lazyloaded",threshold:" . esc_attr( $threshold ) . ",
callback_load:function(element){if(element.tagName==="IFRAME"&&element.dataset.rocketLazyload=="fitvidscompatible")if(element.classList.contains("lazyloaded"))if(typeof window.jQuery!="undefined")if(jQuery.fn.fitVids)jQuery(element).parent().fitVids()}};b.appendChild(s)})(window,document);

window.addEventListener(\'LazyLoad::Initialized\',function(e){var lazyLoadInstance=e.detail.instance;var observer=new MutationObserver(function(mutations){mutations.forEach(function(mutation){lazyLoadInstance.update()})});var b=document.getElementsByTagName("body")[0],config={childList:!0,subtree:!0};observer.observe(b,config)},!1);
</script>';

---

That didn't work because you did not minimize .css and .js files, as I mentioned in my answer. You are minimizing PHP code, which makes no sense at all

---

Since the above code has <script> tag, I thought it as Javascript. Will it work if I use the php minify? - http://www.cuho.eu/php-minify/

Answer 2

You can minify JS files manually using https://closure-compiler.appspot.com/
Click Reset, then paste the code on the left, then click Compile. Then you can download the code on the right.

As Pupi said you should do this with the .js files themselves, not PHP code. There are also online minifiers for CSS, they’re easy to find.

I’ve considered adding minification to Q2A itself, but it adds a bit of complexity from a development perspective. If people make changes they’d also have to minify the files manually to test. In general it’s better to not have minified files in source control which would solve that problem, but that means adding an additional build process when people install Q2A.

I should also add, minification does not make a huge amount of difference to download time when the files are gzipped.

Comments

When I test my q2a website with Chrome's Lighthouse extension, it gave the score of 22. My WordPress websites get a score of around 80.

I like to convert my q2a website to PWA. But Lighthouse extension suggests my q2a site responses very slow.

"Your page loads too slowly and is not interactive within 10 seconds. Look at the opportunities and diagnostics in the "Performance" section to learn how to improve.
Interactive at 14 s"

Page speed matters for mobile users from developing countries. Every millisecond counts.

---

Since the above code has <script> tag, I thought it as Javascript. Will it work if I use the php minify? - http://www.cuho.eu/php-minify/

---

What is your website?

---

www.ιнaveѕolved.coм

---

@Scott, don't use closure-compiler. Sometimes it causes an error on the minified JS file.  http://lisperator.net/uglifyjs/ is the best and safe Javascript minifier, as of I know.