CSS 文件的异步加载（原型 default.css）

Question

我决定测试我的网站速度（google 检查速度）。他发现了这个警告：

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

我在布局中实现了这个文件：

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

还有这个 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;
}

可能有人知道这个警告是什么以及如何泄露它。或许可以辅助异步加载。

提前致谢

Answer 1

确保您没有在 CSS 文件中的任何地方使用 @import 并确保您设置了 rel 属性，因为这会导致渲染阻塞。

您还可以将所有其他 CSS 文件合并为一个文件，您甚至可以更进一步，通过删除空格在线 最小化 您的 CSS 文件, 但也要保留原始嵌套 CSS 的备份。

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

CSS 文件的异步加载（原型 default.css）

Asynchronous loading of CSS file (prototype default.css)

css

layout

prototype

magento-1.9

提前致谢