Asynchronous loading of CSS file (prototype default.css)

Question

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

Answer 1

Make sure that you do not use @import anywhere in your CSS files and making sure you have a rel attribute set as this can cause render blocking.

You can also combine all your other CSS files into one and you can even go further and minimize your CSS files online by removing blank spaces, but keep a backup of the original nested CSS as well.

<reference name="head">
    <action method="addLinkRel">
        <rel>stylesheet</rel>
        <href>http://www.example.com/skin/OTHER-theme_name/css/skin.css</href>
    </action>
</reference>