如何修复“在首屏内容中消除渲染阻止JavaScript和CSS”

时间:2016-06-23 11:53:30

标签: javascript php css zend-framework socialengine

我使用Social Engine 4.8.11,当我使用Google PageSpeed Insights时,我收到了以下消息:

  

消除上层内容中的渲染阻止JavaScript和CSS

     

您的页面有36个阻止脚本资源和11个阻止CSS   资源。这会导致呈现页面的延迟。

如何使用我的所有插件在Social engine中执行此操作?

1 个答案:

答案 0 :(得分:1)

如何在WordPress的折叠内容上方Fix render blocking JavaScript and CSS

使用W3总缓存修复渲染阻止JavaScript

首先解决最重要的问题。您还可以使用W3 Total Cache插件异步加载脚本。请尝试以下步骤以异步方式加载JavaScripts。

修复问题的解决方案!

第1步:我认为你已经安装了W3 Total Cache WordPress插件。导航到效果>缩小。选择Minify Mode to Manual。

启用Minify Option,如下所示。选择Before Embed type to“Non-blocking using”async“。

修复渲染阻止JavaScript和CSS在折叠内容之上。 [W3总缓存设置] [2]

步骤2:在JS文件管理下选择当前使用的WordPress主题。您可以注意到添加了无JS文件的文本。

步骤3:点击添加脚本按钮。

在Google PageSpeed Insights中点击>显示如何修复。你可以看到类似下面的东西。

渲染阻止javaScript和CSS传递

这是JS脚本和CSS文件呈现阻止的列表。您只需轻松复制JavaScript文件即可。 [Google PageSpeed Insights] [2]

步骤4:返回wordpress管理面板并粘贴它。确保添加了所有JavaScript文件。

步骤5:现在添加JS文件后,转到CSS文件。使用相同的过程来执行此操作。 [CSS缩小设置] [3]

表现>缩小并查找CSS Minify设置。 CSS缩小设置

在CSS缩小设置下:启用该选项。之后添加CSS文件的方式与我们在JavaScript文件中的方式相同。

使用Speed Booster插件修复阻止JavaScript和CSS在折叠内容上方的渲染

在上面的步骤中,W3 Total Cache WordPress插件异步加载Scripts文件。但借助WordPress Speed Booster Plugin,可以加载两个文件Java脚本& CSS文件异步。借助此插件,我们可以消除渲染阻塞问题。

但这项技术并没有提高Google智能思科的速度得分。

逐个执行以下步骤。

步骤1:从WordPress插件目录安装Speed Booster插件。

第2步:激活插件。

第3步:导航至设置>速度助推器包。 [Speed Booster Pack] [2]

Speed Boost插件

步骤4:在“常规选项”下启用“将脚本移动到页脚”和“推迟解析JS文件”。

Speed Boost插件 - 异步加载CSS

步骤5:在页面结束时,选择“仍然需要更多速度”并启用“异步加载CSS”。这将解决CSS渲染问题。

就是这样! 全部完成 !重新运行PageSpeed测试并享受结果。