Magento 1.9 – Asynchronous Loading of CSS File (prototype default.css)

csslayoutmagento-1.9

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

Best Answer

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>
Related Topic