网站的 <head> ？你最多希望在 <head> 中有一个 CSS 文件
框架提供的所有 CSS 是否都经过了压缩？这是必须的。
可能需要多少 CSS 覆盖？如果您使用多个覆盖来对抗大量默认样式，这可能会很快使您的 CSS 变得臃肿，并且使将来更难管理。
您是否需要在 HTML 级别添加大量选择器？HTML 膨胀也是一个重要的性能因素，您需要尽可能避免在 HTML 标记中使用多个重复的 CSS 选择器。
是否可以删除网站上未使用的 CSS 类？数百个未使用的 CSS 选择器将严重影响性能。
是否可以在页面级别仅为该页面上使 法国号码 用的块和组件生成和输出 CSS？页面级别不需要的全局 CSS 将需要不必要的带宽和处理。
是否可以分离出首屏内容所需的关键 CSS，并推迟其他所有内容？最小化 <head> 中加载的 CSS 将加快 FCP、LCP 和速度指数指标。
与任何覆盖结合使用时，服务器上缩小和压缩的首屏 CSS 文件大小是否在 14KB 以内？14KB 是有效内联关键 CSS 的阈值
大多数 CSS 框架不太可能满足上述所有标准。出于这些原因，我们不使用 CSS 框架，而是倾向于使用 SASS 和编译的 CSS 的更自定义的方法，如下所述。
2. 分离首屏、全局和组件级 CSS
我们的基础主题利用了 SASS 部分，这些部分映射到我们底层设计系统使用的块和组件。这些部分被编译和输出，以便：
有一个 CSS 文件处理所有全局的折叠内容，其中包括标题元素、导航和英雄单元。
各个 CSS 文件在块级别加载，位于 <head> 之外，仅在使用特定的各个块的页面上加载
其余所有折叠下方的全局 CSS 均由加载在 <head> 外部的单独 CSS 文件处理。这包括页脚导航、全局页脚 CTA 单元和屏幕外元素（例如汉堡包和下拉导航样式）。
然后应该通过异步加载样式表来延迟折叠下