Magento Expert Forum - Improve your Magento experience

Results 1 to 4 of 4

Eliminate render-blocking JavaScript and CSS

  1. #1
    New member
    Join Date
    Jun 2016
    Location
    Bangalore
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Eliminate render-blocking JavaScript and CSS

    Hi geeks,

    I have been trying to speed up one of my latest website www.spicytrendz.in using google speed test
    https://developers.google.com/speed/...2F&tab=desktop

    if you go to the above url you will see google suggestion to fix blocking JavaScript and CSS on page load.

    I have tried quite a few things but failed. one of the link I found in this link
    http://magento.stackexchange.com/que...the-fold-conte

    saying add <action method="addJs"><script>prototype/prototype.js</script><params>async</params></action> in app\design\frontend\base\default\layout\page.xml

    in my page.xml I can see the below entry:
    <block type="page/html_head" name="head" as="head">
    <action method="addJs"><script>prototype/prototype.js</script></action>
    <action method="addJs"><script>mage/translate.js</script></action>
    <action method="addJs"><script>lib/ccard.js</script></action>
    <action method="addJs"><script>prototype/validation.js</script></action>
    <action method="addJs"><script>varien/js.js</script></action>

    <action method="addCss"><stylesheet>css/styles.css</stylesheet></action>
    <action method="addItem"><type>skin_css</type><name>css/styles-ie.css</name><params/><if>lt IE 8</if></action>
    <action method="addCss"><stylesheet>css/widgets.css</stylesheet></action>
    <action method="addCss"><stylesheet>css/print.css</stylesheet><params>media="print"</params></action>

    <action method="addItem"><type>js</type><name>lib/ds-sleight.js</name><params/><if>lt IE 7</if></action>
    <action method="addItem"><type>skin_js</type><name>js/ie6.js</name><params/><if>lt IE 7</if></action>

    </block>

    I am not sure what the about code is doing. Can some one please tell me if there is any way I can call all my css and js on page load. Thank you for looking into this.

    warm regards,
    Saif

    View more threads in the same category:


  2. #2
    Junior Member
    Join Date
    Jun 2016
    Location
    Bhavnagar, Gujarat, India
    Posts
    1,125
    Thanks
    0
    Thanked 2 Times in 2 Posts

    Default

    Hello,
    the stack-exchange link you have followed is showing the example of real process. In your case, you need to the same with following extension file.
    1. magestore/bannerslider/jquery-1.7.min.js
    2. magestore/bannerslider/jquery.flexslider.js

    Both these files are from the extension of bannerslider. So you need to check layout file of this extension.

  3. #3
    New member
    Join Date
    Jun 2016
    Location
    Bangalore
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    How should I load these Js file asynchronously ?

    bannerslider/jquery-1.7.min.js
    /bannerslider/jquery.flexslider.js

    I am not sure where is the .xml file like page.xml where we can add a code <params>async</params> which load these file asynchronously.
    I have a related blocking css file too. I have no idea how to make this work. Any help is appreciated... Thanks a lot.

  4. #4
    Junior Member
    Join Date
    Sep 2018
    Location
    Oman, Muscat
    Posts
    2,084
    Thanks
    0
    Thanked 4 Times in 4 Posts

    Default

    Go to Performance -> General Settings.
    You will see a few options under this heading.
    In the Minify mode option, choose Manual, and then click Save all settings button.
    At this point, you must fetch all the JS and CSS scripts causing render-blocking.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •