6

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

4

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

  • Great code, works like charm!!! Many many thanks bro :) – Himmat Paliwal Feb 17 '17 at 11:52
  • @Pratik where i will add this code i mean on which file – Nadh May 23 '17 at 6:18
  • @Nadh pls check this extension link github.com/pratikmage/magento2-defer-javascript here i describe the main logic for extension. – Pratik May 23 '17 at 10:29
  • I see the link for this on github is down, have you possibly a min to explain a bit more on how to get this working? – harri Jan 2 '18 at 16:28
  • which event you have used? – Ketan Borada Apr 18 '18 at 5:19
1

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>
  • @ketaKpBorada it works with magento 1.9,also it works for 2.0? – Kalpesh Desai Dec 21 '16 at 4:52
  • Of course !!! as js syntax is same for both.Check with GTmatrix after adding this attribute on magento2. – Ketan Borada Dec 21 '16 at 5:19
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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.