PageSpeed-在首屏内容中消除渲染阻止的JavaScript和CSS

我正在运行magento 1.9，并且正在RWD slider主页上使用Magento 1.9附带的。

Google PageSpeed不喜欢这样，并说：

在首屏内容中消除阻止渲染的JavaScript和CSS

如何针对调用滑块的Java脚本文件执行此操作：

http://www.MYDOMAIN/media/js/sdhfksjfhdsjvbskj8e4w.js

我解决了Magento-1.9.x上的Remove render-blocking JavaScript问题，如下所示：

<script src="filename.js"></script>
Replace with Following:  
<script src="filename.js" defer></script>
<script src="filename.js" async="async"></script>

要么

<action method="addJs"><script>prototype/prototype.js</script></action>  
Replace with Following:  
<action method="addJs"><script>prototype/prototype.js</script><params>defer</params></action>  
<action method="addJs"><script>prototype/prototype.js</script><params>async</params></action>

提示：它可能位于基本主题上

关于第38行的app \ design \ frontend \ base \ default \ layout \ page.xml，

如果您使用活动主题，则将rwd的不同路径ex设置为app \ design \ frontend \ base \ default \ layout \ page.xml

“ Mohan Gs”描述的技术在这里不起作用。

由于js路径/media/js/，似乎他使用js合并。这意味着，所有以xml标准方式添加的js文件

• <action method="addJs">...
• <action method="addItem"><type>js</type>..

将合并成一个大的 /media/js/<hash>.js。

Magento核心js文件已添加

• <action method="addJs"><script>prototype/prototype.js</script></action>

也这样

还有许多使用内联js的模板，这取决于head js文件定义的对象/功能。

此时，仅将head js文件移至底部还不够。您必须将所有内联js声明移到头部js之后和之前</body>。

在所有/许多情况下，无法将内联js与模板分开，因为它们正在使用模板特定的变量。

您只能使用一般的方法，例如解析最终的html，然后以正确的顺序将这些内容一起移动。

因此，看看扩展名Pagespeed。

该代码表示​​等待整个文档加载，然后加载外部文件defer.js。

<script type="text/javascript">
    function downloadJSAtOnload() {
        var element = document.createElement("script");
        element.src = "defer.js";
        document.body.appendChild(element);
    }
    if (window.addEventListener)
        window.addEventListener("load", downloadJSAtOnload, false);
    else if (window.attachEvent)
        window.attachEvent("onload", downloadJSAtOnload);
    else window.onload = downloadJSAtOnload;
</script>

这些是您需要遵循的步骤。

1. 复制上面的代码。

2. 将代码粘贴到HTML中的</body>标记之前（靠近HTML文件底部）。

3. 将更defer.js改为您的外部JS文件的名称。

4. 确保文件路径正确。示例：如果仅放置defer.js，则文件defer.js必须与HTML文件位于同一文件夹中。

有关更多详细信息，请参阅本文

这是开放源代码扩展程序，用于解决https://github.com/mediarox/pagespeed

当前功能

• 将所有Javascript标签（head和inline）移到底部。（{stripped_html} {js}）
• 包括条件js单元（{多个js标签}）
• 包括外部js标签，包括“内联” js标签
• 将所有CSS标签（head和inline）移到底部。（{stripped_html} {css}）
• 包括条件CSS单位（{多个CSS标签}）
• 包括外部CSS标签
• 包括内嵌CSS标签

兼容性

从Magento 1.5.x到Magento 1.9.x。

后端配置

默认情况下，所有模块（Pagespeed_Js，Pagespeed_Css）均处于禁用状态。

配置路径：系统>配置>高级> Pagespeed

怎么运行的 ？

简单解析事件“ controller_front_send_response_before”上的最终html流。