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

Can loading some CSS last speed up page load time?

我想尝试让我的网站加载速度更快，但我想知道它是否真的有用。

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

这是我建议的 HTML 布局模型。

Header 部分负载

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

结束部分负载

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

我的问题

  1. 这个想法真的会让我的页面加载速度更快吗？如果是这样，它是否足以计数。

  2. 如何让这种快速加载工作？

为了最快的结果：

  • CSS must , must be loaded first, inline as much CSS can't in the html, but inline it in the head section .这是持续快速加载 css 的最快方法。

  • Bootstrap 非常臃肿，超过 1 个额外的服务器请求，如果可以，请将其完全删除，否则，哦，好吧，带有外部文件的 css， jQuery.

    • 之后的 js 位

不要在 head 部分放置任何 JS 文件（modernizr 除外，如果你使用它的话），将 jQuery link 放在 body 结束标记之前。 Jquery 必须是要加载的第一个文件，然后 bootstrap js、"main" js 或您的 jQuery 代码可以内联在正文和 [=41 之后=] 结束标记。

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

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

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

你也可以把所有的CSS拼接成一个文件，但是上面说了，在head section里面inline的是quickest.As long，小于4kb，好像是断点。

哦，是的，延迟加载或延迟加载图像，如果你有超大图像，加载它们就像 google 在搜索结果中所做的那样，最初是一张模糊的小图片。

有很多rules/tips可以提高速度。其中一些：

  • 启用压缩
  • 使用浏览器缓存
  • 减少资源（HTML、CSS 和 JavaScript）
  • 优化图像
  • 移除渲染阻止JavaScript
  • 使用内容分发网络 (CDN)
  • 列表项

一些资源：