1

I decided to test my site for speed (google check speed). And he caught this warning:

Eliminate render-blocking JavaScript and CSS in above-the-fold content Your page has 1 blocking CSS resources. This causes a delay in rendering your page. None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML. Optimize CSS Delivery of the following:

https://www.example.com/js/prototype/windows/themes/default.css

I implement this file in the layout:

<reference name="head">
            <action method="addItem"><type>js_css</type><name>prototype/windows/themes/default.css</name></action>
 </reference>

And this css :

.overlay_dialog {
    background-color: #666666;
    filter:alpha(opacity=60);
    -moz-opacity: 0.6;
    opacity: 0.6;
}

.overlay___invisible__ {
  background-color: #666666;
    filter:alpha(opacity=0);
    -moz-opacity: 0;
    opacity: 0;
}

.dialog_nw {
    width: 9px;
    height: 23px;
    background: transparent url(default/top_left.gif) no-repeat 0 0;        
}

.dialog_n {
    background: transparent url(default/top_mid.gif) repeat-x 0 0;  
    height: 23px;
}

.dialog_ne {
    width: 9px;
    height: 23px;
    background: transparent url(default/top_right.gif) no-repeat 0 0;       
}

.dialog_e {
    width: 2px;
    background: transparent url(default/center_right.gif) repeat-y 0 0; 
}

.dialog_w {
    width: 2px;
    background: transparent url(default/center_left.gif) repeat-y 0 0;      
}

.dialog_sw {
    width: 9px;
    height: 19px;
    background: transparent url(default/bottom_left.gif) no-repeat 0 0;         
}

.dialog_s {
    background: transparent url(default/bottom_mid.gif) repeat-x 0 0;       
    height: 19px;
}

.dialog_se {
    width: 9px;
    height: 19px;
    background: transparent url(default/bottom_right.gif) no-repeat 0 0;            
}

.dialog_sizer {
    width: 9px;
    height: 19px;
    background: transparent url(default/sizer.gif) no-repeat 0 0;   
    cursor:se-resize;   
}

.dialog_close {
    width: 14px;
    height: 14px;
    background: transparent url(default/close.gif) no-repeat 0 0;           
    position:absolute;
    top:5px;
    left:8px;
    cursor:pointer;
    z-index:2000;
}

.dialog_minimize {
    width: 14px;
    height: 15px;
    background: transparent url(default/minimize.gif) no-repeat 0 0;            
    position:absolute;
    top:5px;
    left:28px;
    cursor:pointer;
    z-index:2000;
}

.dialog_maximize {
    width: 14px;
    height: 15px;
    background: transparent url(default/maximize.gif) no-repeat 0 0;            
    position:absolute;
    top:5px;
    left:49px;
    cursor:pointer;
    z-index:2000;
}

.dialog_title {
    float:left;
    height:14px;
    font-family: Tahoma, Arial, sans-serif;
    font-size:12px;
    text-align:center;
    width:100%;
    color:#000;
}

.dialog_content {
    overflow:auto;
    color: #DDD;
    font-family: Tahoma, Arial, sans-serif;
    font-size: 10px;
    background-color:#123;
}

.top_draggable, .bottom_draggable {
  cursor:move;
}

.status_bar {
  font-size:12px;
}
.status_bar input{
  font-size:12px;
}

.wired_frame {
    display: block;
  position: absolute;
  border: 1px #000 dashed;
}

/* DO NOT CHANGE THESE VALUES*/
.dialog {
    display: block;
    position: absolute;
}

.dialog table.table_window  { 
  border-collapse: collapse; 
  border-spacing: 0; 
  width: 100%;
    margin: 0px;
    padding:0px;
}

.dialog table.table_window td , .dialog table.table_window th { 
  padding: 0; 
}

.dialog .title_window {
  -moz-user-select:none;
}                                                    

May be anybody know what this warning can be and how to spill it. Perhaps assisting the asynchronous loading.

Thanks in advance

1

I think that this has to do with the order of your layout updates being added (local.xml is always parsed last), which would cause this asset to be lower than other assets and potentially be a render-blocking issue. I implemented asynchronous/deferred loading for some of the assets on my site similar to what you are looking to do, and you should test to be sure things are loaded correctly before pushing to a production environment because some of the files that I tried applying it to had to be reverted. For your example, you can use the following xml in place of yours:

<reference name="before_body_end">
    <block type="core/text" name="yourblockname">
            <action method="setText"><text><![CDATA[<script type="text/javascript" src="/js/prototype/windows/themes/default.css" async="async"></script>]]></text></action>
    </block>
</reference>

To add JS or CSS with deferred, it is considerably easier:

<reference name="head">
    <action method="addItem">
        <type>js_css</type>
        <name>prototype/windows/themes/default.css</name>
        <params>defer="defer"</params>
    </action>
 </reference>
  • If I add a css file with method="addJs", this will not be an error ? – Павел Кушнеревич Apr 5 '18 at 19:18
  • @ПавелКушнеревич, in the second example, it has to be an addItem method to be able to send defer="defer" as a param. In the first example, the setText and CDATA is somewhat of a workaround, but it is the only way I was able to add JS asynchronously with XML – mtr.web Apr 5 '18 at 19:20
  • @ПавелКушнеревич, sorry about the confusion. The example I pulled from was wrong, it should be addItem. I will update the answer accordingly – mtr.web Apr 5 '18 at 19:22
2

For defer js I use the next extension, it's quite good in my opinion: https://bsscommerce.com/magento-defer-js-extension.html

Regards, Pablo

0

Please refer this extension, It helps you optimize your Magento website and Increases the Speed score.

https://marketplace.magento.com/bitware-speedenginedeferjs.html

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.