Pagespeed

Question

有很多 CSS 框架，这可能也适用于 js，但我将使用 twitter bootstrap 作为示例。

是否建议编译框架的自定义版本（例如使用 sass），它将托管在您的网站上
或者
使用框架 cdn 和小型主题样式表来覆盖您网站上托管的默认样式？

例如

<!-- bootstrap cdn -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<!-- custom theme -->
<link rel="stylesheet" href="mysite/css/custom-bootstrap-theme.min.css">

或

<!-- custom boostrap -->
<link rel="stylesheet" href="mysite/css/custom-bootstrap.min.css">

Answer 1

一般来说，您希望尽量减少浏览器为获取资源而必须发出的请求数，因此一个脚本（或样式）优于两个。

但是，您使用的 CDN 可能会提供比您自己的服务器更好的延迟和下载速度，在这种情况下，分块获取样式可能会更快（从 CDN 快速下载大部分内容）内容以及从您的服务器下载较少内容的速度较慢）。

最佳选项是使用单个脚本（"bundle"），该脚本已缩小（就像您所做的那样）和 CDN 化（即您想要自己的从 CDN 提供的脚本，例如 Amazon CloudFront）。

Pagespeed - cdn.com/framework.css + mysite.com/custom.css VS mysite.com/customframework.css

Pagespeed - cdn.com/framework.css + mysite.com/custom.css VS mysite.com/customframework.css

performance

cdn

twitter-bootstrap