Question

因此，我一直在查看Chrome与Chrome的新审核小组，并慢慢改进了我网站的指标。它目前位于95（性能），97（可访问性）和75（最佳实践）。

我开始浏览建议，然后点击了＆＃34;了解详情＆＃34;几个部分的链接。因此，我现在正在阅读Google Developers网站。但是，对我的问题特别重要的两篇文章是Render-Blocking Resources和Render-Blocking CSS。

从渲染阻止资源一文中，这是最重要的摘录（整篇CSS文章基本上都是这样详细介绍的）：

对于关键脚本，请考虑在HTML中内联它们。对于非关键脚本，请考虑使用async或defer属性对其进行标记。请参阅Adding Interactivity with JavaScript了解详情。

对于样式表，请考虑将样式拆分为不同的文件，按媒体查询进行组织，然后在每个样式表链接中添加media属性。在加载页面时，浏览器仅阻止第一个绘制以检索与用户设备匹配的样式表。请参阅Render-Blocking CSS了解详情。

对于非关键HTML导入，请使用async属性标记它们。作为一般规则，async应尽可能与HTML导入一起使用。

现在，为了让我的网站达到目前的分数，这就是目前的情况。（我应该注意到，如果可能的话，我确实计划利用它们。这就像网站目前的情况一样。）

当前实施

该网站100％设计为移动优先，并兼容设备分辨率，范围从240像素到3840像素宽。我正在使用自适应设计，有一些断点。
我正在使用HTTPS。
我正在使用图标精灵。
我使用非缩小的CSS和JavaScript，分成几个文件，因为网站主题仍处于开发阶段。 CSS文件包含媒体查询。
<a>元素正在使用target="_blank"且rel="noopener"缺席。
<script>个元素未使用async或defer属性。
我没有使用HTTP / 2或服务工作者。
我已通过cPanel启用GZIP压缩（＆＃34;优化网站＆＃34;），定位所有内容。（我准备将此限制为仅HTML，PHP，CSS，JavaScript，纯文本和XML，如果平均加载时间更快[我计划运行基准测试以通过为每个加载站点10次测试两种方案 - 我还没有机会对此进行测试]。）

问题

主CSS文件相当大（目前为75 kiB）。最重要的是，jQuery文件已经缩小（95 kiB），还有一些较小的CSS文件，这些文件特定于网站的某些区域。由于我的站点（微处理器信息库）的性质，用户还可以在一次访问中查看多个页面。

为了符合上述指导原则，我正在考虑将CSS文件拆分为不仅依赖于当前网站的部分，而且还依赖于媒体查询，链接到它们与使用<link>属性的media元素与CSS文件本身内的查询相比较。

对于JavaScript，我考虑将所有async个脚本分组在一个文件中，将所有defer个脚本分组在另一个文件中。我假设将jQuery API代码与其他自编函数分组没有问题？

好。有我的计划，但是在退后一步并思考如何实施这个计划时，我引起了一些问题，我希望你们可以帮我决定。这种思维过程对我来说是非常新的（也部分是因为我以前从来没有这样大小的网站），所以任何输入都会很棒。

问题

由于所有CSS文件都是下载的，不管它们是否被使用，我都不确定一个大的主要CSS文件是否是最好的方法，或者是否有更多的HTTP请求并将其拆分媒体类型/查询和网站部分。无论采用何种方法，CSS都会缩小。

<link rel="stylesheet" href="reset-min.css"> <!-- ~ 1.5 kiB; all media types -->
<link rel="stylesheet" href="layout-min.css"> <!-- ~ 50 kiB; internal @media -->
<link rel="stylesheet" href="color-min.css"> <!-- ~ 25 kiB; internal @media -->

<!--
    3 HTTP requests; 76.5 kiB
    Main CSS file split into "layout" and "color" for easy editing in the future.
-->

vs.

<link rel="stylesheet" href="reset-min.css"> <!-- ~ 1.5 kiB; all media types -->
<link rel="stylesheet" href="global-screen.css" media="screen"> <!-- ~ 7 kiB; site-wide elements -->
<link rel="stylesheet" href="color-screen.css" media="screen"> <!-- ~ 10 kiB -->
<link rel="stylesheet" href="database-screen.css" media="screen"> <!-- 20 kiB; not on all pages -->
<link rel="stylesheet" href="global-print.css" media="print"> <!-- ~ 6 kiB; site-wide elements -->
<link rel="stylesheet" href="color-print.css" media="print"> <!-- ~ 7 kiB -->
<link rel="stylesheet" href="database-print.css" media="print"> <!-- ~ 7 kiB; not on all pages -->

<!--
    7 HTTP requests; 58.5 kiB
    CSS files split into "global/database" and "color" for easy editing in the future.
-->

第一个问题也适用于JavaScript文件。我有我的函数的主要JS文件，以及jQuery API文件。但是，由于函数将被async或defer属性拆分，这将导致更多HTTP请求，但规模更小。 JS也将被缩小。

<script src="jquery-min.css"> <!-- ~ 95 kiB; local -->
<script src="scripts-min.css"> <!-- ~ 21.3 kiB -->

<!--
    2 HTTP requests; 116.3 kiB
-->

vs.

<script src="scripts-async-min.css" async> <!-- ~ 108.1 kiB; includes jQuery API -->
<script src="scripts-defer-min.css" defer> <!-- ~ 4.3 kiB -->

<!--
    2 HTTP requests; 112.4 kiB
-->

我的最后一个问题是关于减少网页加载的主要罪魁祸首 - jQuery API文件和网络字体。既然他们无论如何都会接受HTTP请求，你会建议直接从jQuery CDN和Google外包，而不是在本地托管文件吗？我提出这个问题，因为我假设CDN的服务速度更快。但是，我会尽可能利用服务工作者来减少下载文件的需要。

谢谢！

感谢您阅读这篇长篇文章。我知道我可能已经进入了太多的细节，但我并不想留下任何可能重要的东西。

Answer 1

以下是我对您提出的问题的看法：

1）浏览器可以在加载文件时打开与单个服务器的多个并行连接。然而，捕获量取决于这些连接数量的限制。加载76.5 KiB的单个文件通常比加载3个25 KiB的文件慢。由于服务器握手时间'可能'大于实际获取资源所花费的时间，因此不会始终如此，尤其是在您的情况下，文件大小为70Kib且平均Internet速度不断增加。我想最好的解决方案将高度依赖于您所针对的地理区域。下面是关于并行连接限制的讨论：Max parallel http connections in a browser?

2）同样的谓词也适用于js文件。但是，jQuery现在几乎是全球性的。在访问您的网站之前，用户访问所需网站的可能性非常高。因此，使用流行的CDN意味着jQuery文件不会被全部下载并从浏览器缓存中加载。那是你最大的罪魁祸首之一。即使文件在浏览器缓存中不存在，使用CDN也应该是首选做法，因为根据定义，CDN是地理分布式系统，如果访问者不在地理位置，CDN可以提供较低的延迟。与您的服务器相同的区域。

不应立即执行的javascript代码应加载async或deffered。您对这两者的处理方式还取决于您所定位的浏览器。较旧的浏览器不会看到延迟加载的任何优势。请参阅：Script Tag - async & defer

3）同样的理性也适用于字体。如果你使用的是流行字体，很可能它已经存在于缓存中。使用服务工作者来管理jquery和字体似乎对我来说太过分了。您可能希望将它们用于其他资产。

另外，我想补充一点，你应该尝试逐步加载网页。只将所需的代码放在head部分中。在用户交互时执行的JS代码应该在DOM内容之后加载，即刚好在结束体标记之上。

我还建议推迟加载用于设置内容样式的css而不是修复布局。这包括所有颜色，字体和其他花哨的东西。

如果您的目的是在Chrome审核上取得好成绩，我提到的内容可能不正确。但是为了服务实际用户，这就是我个人所做的。

Answer 2

问题1：您可以随身携带单独的css文件以便于编辑。使用vswebessentials捆绑和缩小生产版本。当您在服务器上托管它时，建立一个远期的过期日期或使用缓存清单。然后，您需要在进行更改时重命名捆绑的文件。网站将更快地工作。

如果您通过单一连接下载，今天的75kb css并不大，如果您提供了远期未来的到期日期，并且您的客户在该域的任何其他日期没有提出其他请求。希望你不会每天都改变css。您也可以根据媒体查询规范对其进行细分。

问题2 从cdn加载jquery是一个好主意，但你需要确保它在你的js执行之前可用。不要将服务工作者用于更简单的事情。如果您想查看，请审核www.google.co.in，您的审核数字可能比谷歌更好。因此，不要使用审计编号使开发复杂化。专注于用户体验。这就是谷歌正在做的事情。

问题3 您可以而且应该将CDN用于jquery和字体。如果您可以不使用数字和服务工作者的审核选项卡，请使用缓存清单和远期到期。

Answer 3

我希望免费为我的渐进式网络应用程序（Angular，AWS无服务器）提供高评价。我得到的评分如下图所示。这就是我建议你反对你的问题......

1）将HTML页面本身所需的CSS文件放在HTML页面本身上，对于其余的css文件，让它们异步加载。小心未使用的CSS，我花时间清理并删除未使用的类。

2）你真的使用了很多jquery吗？为了获得最佳效果，您可能希望编写vanilla javascript而不是在上面的内容中使用jquery。在我的网站https://beta.akberiqbal.com我为上面的项目（导航等）编写了简单的javascript。在折叠之下，我有三个Angular5 JS文件。 bundle.css文件很小，所以我也把它作为HTML的一部分。

3）如果你有一个服务工作者应用程序，本地提取应该比CDN快。

网站性能（通过灯塔）：减少HTTP请求或减少渲染阻止？

当前实施

问题

问题

谢谢！

3 个答案: