1

Google PageSpeed Audits 建议将首屏内容的关键 CSS 添加到 中的<style>标签中<head>，并将其余部分推迟到内容加载后。

虽然我不同意这种做法，但实施它的正确方法是什么？

我对使用它有一些保留意见：

  • FOUC（单个元素或整个页面使用visibility: hidden）
  • 首屏内容过多，无法使用最少的内联 CSS 进行样式设置，以防止看到 FOUC
  • 在到达内容本身之前，额外的页面加载权重
  • 内联 CSS 没有缓存，这意味着每次页面加载时都必须重新下载

我不使用 CSS 框架，所以无论如何也没有臃肿的 CSS 可供下载。

4

1 回答 1

0

实现它的“正确”方式将是一种自动化方式，以确保

  • 你没有额外的工作，一旦设置
  • 你没有犯错（例如缺少个别元素）

作为构建过程的一部分，有一些工具可以识别和提取您的关键 CSS。一种流行的选择是addyosmani/critical：

基本用法： 

critical.generate({
     base: 'test/',
     src: 'index.html',
     target: 'styles/main.css',
     width: 1300,
     height: 900
});

您为它提供一个示例性 HTML 页面和视口大小以定义“首屏”。然后它会为您提供关键 CSS。有可用于 Webpack、Grunt 和 Gulp 的构建插件和配置。

一旦你有了这样一个技术上正确的设置，你就可以权衡你已经知道的利弊。

于 2019-11-25T12:48:48.793 回答