消除折叠内容中的阻止渲染的JavaScript和CSS


30

我正在建立一个Drupal 7网站。这些是我使用的一些模块:自适应主题(主题),视图和内容窗格,面板,迷你面板,无处不在的面板,页面管理器,菜单的Superfish,Addthis,选择(下拉)。

为了提高网站性能以及处理CSS和JS文件,我使用了Advagg模块

在运行GooglePagespeed测试时,出现以下错误,提示为“ Should Fix”:

在首屏内容中消除渲染阻止JavaScript和CSS
您的页面有6个阻止脚本资源和8个阻止CSS资源。这会导致页面渲染延迟。
如果不等待以下资源加载,则无法呈现页面上的首屏内容。尝试延迟或异步加载阻塞资源,或直接在HTML中内联这些资源的关键部分。

这是Google提供的信息:

有什么办法可以更改Advagg模块或Drupal核心的设置并解决此问题?

还有另一种方法可以实现这个目标吗?

更新 -根据mikeytown2答案实施更改后,我在Google的Pagespeed测试中收到以下消息:

在首屏内容中消除渲染阻止JavaScript和CSS
您的页面有6个阻止脚本资源和4个阻止CSS资源。这会导致页面渲染延迟。
如果不等待以下资源加载,则无法呈现页面上的首屏内容。尝试延迟或异步加载阻塞资源,或直接在HTML中内联这些资源的关键部分。


不确定advagg,但对于核心而言,这是不可行的,没有这样的设置。对于advagg,我看不到它们,但是无论如何我很快就停止使用它。也许现在有这样的设置。我个人将支持请求发布到他们的问题队列中,询问有关此问题,如果维护人员说他们不可用,则会更改为功能请求。
Mołot

您的问题太笼统了。您的网站使用CSS和JS-互联网上的所有其他网站也是如此。只要保持CSS的级联顺序,就几乎没有理由不能将所有CSS聚合为1个文件。只要将JS封装好,就没有理由不能将其合并为1个文件(作为一个极端示例)。如果您可以提供有关页面所需的CSS和JS文件/资源​​的详细信息,请参见 您也许能够获得更明智的答案。
tenken 2014年

@tenken太宽泛了吗?他以渲染阻止方式链接了CSS和JS,并且希望它们以非阻止方式进行链接。这些方式已得到充分解释(例如由Google提出,因为OP指的是Google Pagespeed推荐)。您的评论与OP提出的问题无关。
Mołot

除非async旧浏览器不支持它们的内联代码或使用,否则所有链接的css和js文件都会被阻止。例如,默认的Drupal聚合包含<link>所有CSS的标签。如果您的网站CSS或JS过于复杂,则始终会出现此问题。如果您正确构建网站,则可以安全地聚合文件。没有关于文件依赖关系的信息,问题的细节太广泛了-模块永远无法解决他的问题;这都是关于CSS和JS的编写方式以及其包含顺序和复杂性的。他从未说过他要不阻塞,而你以为那就是他想要的。
tenken 2014年

@tenken我更新了我的问题,并提供了有关模块的更多信息-希望能帮助您了解我使用的CSS和JS。
EB84 2014年

Answers:


42

README提供了有关如何做到这一点使用电流的导7.x的2.31 +版本AdvAgg的。另请参阅“高性能”组上的此Wiki页面。大多数网站都可以在https://developers.google.com/speed/pagespeed/insights/上获得100/100的满分。以下是如何重新安装AdvAgg的说明。

确保在每个部分之后都检查该站点,以确保所做的更改不会使您的站点混乱。AdvAgg Modifier下的更改通常是最有问题的,但它们提供的改进最大。

高级CSS / JS聚合

admin/config/development/performance/advagg

  • 选择“使用推荐的(优化的)设置”
AdvAgg压缩Javascript

如果未启用,请安装AdvAgg Compress Javascript,然后转到 admin/config/development/performance/advagg/js-compress

  • 选择JSMin(如果可用);否则选择JSMin +
  • 选择全部剥离(最小文件)
  • 单击批处理压缩链接以处理这些文件
AdvAgg异步字体加载器

如果未启用,请安装AdvAgg异步字体加载程序,然后转到 admin/config/development/performance/advagg/font

  • 选择聚合中包含的本地文件(版本:XXX)。如果此选件不可用,请按照选件正下方的说明进行安装。
  • 选中“使用localStorage,以使未样式化文本(FOUT)的闪烁仅发生一次。”
  • 选中“设置Cookie,使无样式文本(FOUT)的闪烁仅发生一次。”
AdvAgg Bundler

如果未启用,请安装AdvAgg Bundler,然后转到 admin/config/development/performance/advagg/bundler

HTTP / 2.0设置

  • 在“每页CSS捆绑包的目标数量”下,选择25
  • 在“每页JS包目标数量”下,选择25
  • 在“分组逻辑”下,选择“文件大小”

HTTP / 1.1设置(默认)

  • 在“每页CSS捆绑包的目标数量”下,选择2
  • 在“每页JS包目标数量”下,选择5
  • 在“分组逻辑”下,选择“文件大小”

25个捆绑包与2个捆绑包和5个捆绑包有关的浏览器缓存。文件更多意味着浏览器在其缓存中具有该组合的机会更大,但是文件更多意味着在HTTP 1.1中建立和打开更多的连接。CSS使用2,因为该数字不会等待任何新的连接;JS为5,因为大多数浏览器的并发连接数限制为6。在HTTP 2.0中,只有一个流连接,几乎不存在对多个CSS和JS文件的惩罚。因此,优化浏览器缓存是最佳选择;因此在提供HTTP / 2.0时,CSS和JS应该使用25。

AdvAgg搬迁

如果未启用,请安装AdvAgg Relocate,然后转到 admin/config/development/performance/advagg/relocate

  • 选择“使用推荐的(优化的)设置”
AdvAgg修改器

如果未启用,请安装AdvAgg Modifier,然后转到 admin/config/development/performance/advagg/mod

  • 选择“使用推荐的(优化的)设置”
生成重要的CSS文件

转到https://www.sitelocity.com/critical-path-css-generator并输入关键CSS所需的尽可能多的登录页面;前10名通常是一个好的开始。如果您拥有Google Analytics(分析),它将向您展示如何找到您的顶部目标网页https://developers.google.com/analytics/devguides/reporting/core/v3/common-queries#top-landing-pages 或Piwik https: //piwik.org/faq/how-to/faq_160/。如果您不知道从哪个页面开始,请访问您网站的主页。您也可以使用此方法生成CSS https://chrome.google.com/webstore/detail/critical-style-snapshot/gkoeffcejdhhojognlonafnijfkcepob?hl=zh-CN

下面的示例文件名和路径是针对“ bootstrap”主题的;他们都开始于sites/all/themes/bootstrap/critical-css/; 在主题中创建critical-css/目录。下一个目录是基于用户的;anonymous/all/authenticated/可以使用。

下一个目录可以是urls/type/。看着urls/; front是首页的特殊情况,所有其他路径都使用current_path()作为目录和文件名,并.css添加到末尾;参见https://api.drupal.org/api/drupal/includes%21path.inc/function/current_path/7.x

type/这是节点类型的一种特殊情况。使用计算机名称并添加.css到末尾。然后,此类型的任何节点都将应用并内联此关键css文件。以下是一些显示其工作原理的示例。

“首页”页面的有效示例文件位置: sites/all/themes/bootstrap/critical-css/anonymous/urls/front.css

“ node / 1” current_path()页面的有效示例文件位置: sites/all/themes/bootstrap/critical-css/anonymous/urls/node/1.css

“页面”节点类型的有效示例文件位置: sites/all/themes/bootstrap/critical-css/anonymous/type/page.css

如果您想要某种自动方式来生成这些CSS文件,fourkitchens上有一篇很棒的文章介绍了如何设置该文件:https ://fourword.fourkitchens.com/article/use-grunt-and-advagg-inline-critical-css -drupal-7-主题


这是如何使用AdvAgg的精彩概述!谢谢。也许这段文字是您项目页面的链接“文档”页面的开始:)
tenken 2014年


@ mikeytown2感谢您的出色回答。我实现了所有更改,并更新了问题。我的分数更高-谢谢!
EB84 2014年

查看输出,您似乎没有选中advagg/mod页面上“优化JavaScript排序”下的所有复选框,并且/或者没有将“所有JS”移到页脚。另外,如果我能看到网页的完整源代码,通常可以为您提供建议(只需链接到您的网站)。
mikeytown2 2014年

感谢您提供该信息。如果您希望页面上的css文件更少,请转到advagg / bundler,然后将css值从4降低到1。这会给您带来更好的成绩,但请记住我在上面所做的评论。看起来像自适应主题使用了drupal_add_html_head()来添加浏览器中的条件js,我需要验证这是怎么回事;意味着超过1个主题需要drupal.org/node/2217451。我也创建了这个问题来解决渲染阻塞的问题css drupal.org/node/2223267
mikeytown2 2014年

2

借助预先构建的drupal模块,您将永远无法获得真正的高分,实现这一目标的唯一方法是参加并仔细分析google速度工具提出的每条建议,并分别解决每条建议。

我在非常活跃的新闻网站上为达到95分而做的一些事情,到我撰写本文时,它的得分比nytimes好(现在还没有):

  • [阻止脚本]延迟执行诸如sharethis,facebook窗口小部件,google plus等第三方脚本,以仅在页面完全呈现后才能运行。这需要对html.tpl.php的输出进行一些简单的字符串替换,以捕获这些脚本并将它们排入队列,以便以后执行。
  • [阻止脚本]将html.tpl.php的$ scripts变量(带有json_encode)存储在javascript变量中,以使它们排队以便在第一页加载后运行。这是不自然的,但有必要。必须解决一些特定于浏览器的问题。
  • [blocking css]实现了类似于Keith Clark的技术,但是使用了rel =“ prefetch”。这引入了解决FOUC的需要。
  • [最小化和压缩]将压缩和最小化外部化到分发服务器,在这里我可以使用imagemagic,yui-compressor,pngoptim和更多的东西克服这些规则,而不会将drupal安装变成难以处理的混乱。
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.