该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-主题