7

My website in Production Mode & I set Javascript to be Merged. So we have only one JS file.

On Speed related website it keep saying F grade on Defer Parsing of Javascript. I'm using CDN.

<script type="text/javascript"  src="cdn.domain.com/pub/static/_cache/merged/0285dfa79816d33a235c33875d3d2e57.min.js"></script>

How to achieve mostly A Grade in this?

Need to add async in Script Tag but How & Where?

Already followed Defer parsing of JavaScript in Magento

sv3n
  • 11,657
  • 7
  • 40
  • 73
Jackson
  • 9,909
  • 29
  • 128
  • 217

4 Answers4

5

In Observer method 

        $response = $observer->getEvent()->getData('response');
        if (!$response)
            return;
        $html = $response->getBody();
        if ($html == '')
            return;
        $conditionalJsPattern = '@(?:<script type="text/javascript"|<script)(*)</script>@msU';
        preg_match_all($conditionalJsPattern, $html, $_matches);
        $_js_if = implode('', $_matches[0]);
        $html = preg_replace($conditionalJsPattern, '', $html);
        $html = $_js_if;
        $response->setBody($html);

let me know if you have any issue with this module @AnkitShah

Pratik
  • 3,805
  • 6
  • 31
  • 49
2

Magento 2: How to add css and js in custom module in magento 2?

Add defer attribute in javascript solve some level of my issue

<script type="text/javascript" defer="defer" src="js/myjs.js"></script>
Community
  • 1
Ketan Borada
  • 2,603
  • 2
  • 33
  • 77
0

basically it means that you should load all (or rather most) of your js after the page dom is rendered.

In Magento2 there are still some problems with the js merging and bundling (we had the problem, that all js files were merged into the cached file instead of only those that are needed on the page).

Until this is fixed (I'm not 100% sure if it has been fixed in 2.1.2), I would recommend enabling the js minify but disabling bundling and merging.

Then the files will be loaded through require js asynchronously after the page dom is rendered and make the page speed tools more happy. The site itself will load faster but you may have some sideeffects (like jumping elements) when some elements are loaded rather late.

To optimize that you want to load all js and css that is responsible for those elements, a customer is seeing directly after the page is loaded (without scrolling) pretty early (e.g. in the header)

Just btw, we had a similar problem in Magento 1 recently where it can be quite tricky to get the js in the footer. We found a module that worked really well for our project: https://github.com/bobbyshaw/magento-footer-js

David Verholen
  • 6,312
  • 1
  • 20
  • 38
  • I would recommend enabling the js minify but disabling bundling and merging. will lead to performance Issue – Jackson Dec 14 '16 at 07:15
  • so, how big is your merged js file? We had the Problem that it was over 1MB after enabling merging and bundling. Loading 1MB in the head section is an absolute performance killer. – David Verholen Dec 14 '16 at 07:22
  • searching the issues it seems that the problem still exists: https://github.com/magento/magento2/search?q=bundling&type=Issues&utf8=%E2%9C%93 – David Verholen Dec 14 '16 at 07:26
  • 1
    This Extension may help you :https://marketplace.magento.com/bsscommerce-defer-js.html – Ketan Borada Dec 14 '16 at 07:29
  • Thanks @KetanKpBorada i already seen that Extension, but we don't wanna purchase & as per David told don't know weather it's gonna solve issue – Jackson Dec 14 '16 at 07:33
  • Hi @DavidVerholen do we have this for Magento 2 https://github.com/bobbyshaw/magento-footer-js? – Jackson Dec 14 '16 at 07:42
  • I do not know about something like this yet (except the one posted above). I'm still hoping for magento to fix the bundling (there should be a new release in the next 1-2 weeks). If you can easily spend the 50$, I would give the module above a try. – David Verholen Dec 14 '16 at 07:47
  • 1
    this extension help you https://github.com/pratikmage/magento2-defer-javascript and it's free. – Pratik Dec 19 '16 at 13:14
  • pls accept my answer if you find useful resource @AnkitShah – Pratik Dec 20 '16 at 06:52
  • Still checking. If gonna work. Definately Accept & Up Vote. Don't worry – Jackson Dec 20 '16 at 06:54
0

Defer JS, it means that you should load all of your js after the page dom is rendered. you can do it by Event and Observer in Magento 2. Let me explain how you can create Event and Observer for that.

Create events.xml inside etc folder in your custom module, Like-

/app/code/Vishal/DeferJS/etc/frontend/events.xml

and paste the below code

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Event/etc/events.xsd">
    <event name="controller_front_send_response_before">
        <observer name="vishal_deferjs" instance="Vishal\DeferJS\Model\Observer" shared="false" />
    </event>
</config>

Now create Observer for that. Like-

/app/code/Vishal/DeferJS/Model/Observer.php

and paste the below code

<?php

namespace Vishal\DeferJS\Model;

use Magento\Framework\Event\ObserverInterface;    

class Observer implements ObserverInterface
{    
    public function execute(\Magento\Framework\Event\Observer $observer)
    {
        $response = $observer->getEvent()->getData('response');
        if (!$response)
            return;
        $html = $response->getBody();
        if ($html == '')
            return;
        $conditionalJsPattern = '@(?:<script type="text/javascript"|<script)(.*)</script>@msU';
        preg_match_all($conditionalJsPattern, $html, $_matches);
        $if_js = implode('', $_matches[0]);
        $html = preg_replace($conditionalJsPattern, '', $html);
        $html .= $if_js;
        $response->setBody($html);
    }
}

That's it... Now Clear/Flush the cache and refresh your page. you can check the source code of that page by (ctrl + U). and you will see all your JS file/code will be placed at the bottom of body.

Vishal Thakur
  • 742
  • 6
  • 19