最后加载一些 CSS 可以加快页面加载时间吗？答案

【问题标题】：Can loading some CSS last speed up page load time?最后加载一些 CSS 可以加快页面加载时间吗？
【发布时间】：2016-12-02 00:05:54
【问题描述】：

我有一个想法可以让我的网站加载得更快，但我想知道它是否真的会有所帮助。

我有一个使用 HTML、CSS 和 jQuery 制作的网站。它在桌面浏览器上运行良好，并且超级动态。不幸的是，它在移动浏览器上相当滞后。

这是我提出的 HTML 布局模型。

标题部分加载

现在 rapid.css 文件中将只有 1/3 的 CSS。只是字体、基本的正文设置等。

结束部分加载

main.css 文件将包含我的其他 2/3 的 CSS。这样，网站就不必在加载页面的最初几秒钟内加载太多 CSS。

我的问题

【问题讨论】：

这不太可能产生任何影响。事实上，如果 CSS 加载/渲染时间是你“滞后”的根源，我会感到非常惊讶，因为 CSS 是硬件加速的。您需要准确调查导致问题的原因并从那里着手。
对如何调查原因有什么建议吗？

【解决方案1】：

为了最快的结果：

CSS 必须，必须首先加载，尽可能多地内联 CSS，而不是在 html 中，而是在 head 部分内联。这是持续快速加载 css 的最快方法。
Bootstrap 很臃肿，多出 1 个以上的服务器请求，如果可以的话就干脆放弃吧，如果不行的话，哦好吧，带有外部文件的 css，jQuery 之后的 js 位。
李>

不要将 JS 文件放在 head 部分（除了modernizr，如果你使用它），将 jQuery 链接放在结束 body 标记之前。 Jquery 必须是要加载的第一个文件，然后引导 js、“main”js 或您的 jQuery 代码可以内联在正文和 html 结束标记之后。

至于字体，如果以性能为目标，我会尽量避免使用它们。从历史上看，浏览器在加载字体之前不会呈现文本。

有一种方法可以使用 JS 承诺首先加载标准字体并显示它，然后在加载时呈现选择的字体。

但这仅适用于 Chrome 和 FF，也许是 MS Edge，但所有其他手机和 esp 手机都有 FOUT。

您也可以将所有 CSS 连接到一个文件中，但如上所述，在 head 部分内联是最快的。只要它小于 4kb，这似乎是一个突破点。

哦，是的，延迟加载或延迟加载图片，如果你有超大图片，像谷歌在搜索结果中那样加载它们，最初带有模糊的小图片。

【讨论】：

【解决方案2】：

有很多规则/提示可以提高速度。其中一些：

一些资源：

【讨论】：