关键 CSS 和 Webpack : 减少阻塞渲染的 CSS 的自动化解决方案

2019-12-01 11:09栏目:龙电竞官网
TAG:

快速提升前端性能

2015/09/26 · HTML5, JavaScript · 1 评论 · 性能

本文由 伯乐在线 - cucr 翻译,唐尤华 校稿。未经许可,禁止转载!
英文出处:Jonathan Suh。欢迎加入翻译组。

去年,我写了一篇文章Need for Speed,分享了在开发我的网站中使用的工作流程和技术(包含工具)。从那时起,我的网站又经过了一次重构,完成了很多工作流程和服务器端改进,同时我对前端性能也给与了额外关注。以下就是我做的工作,为什么我要这么做,以及我在网站上用来优化前端性能的工具。

今天看的是之前保存的一篇前端优化的相关文章。但是人家写了禁止转载,我这边学习的话就不抄太多东西了。

关键 CSS 和 Webpack : 减少阻塞渲染的 CSS 的自动化解决方案

2017/10/12 · CSS · webpack

原文出处: Anthony Gore   译文出处:iKcamp   

图片 1“消除阻塞渲染的CSS和JavaScript”。 这一条Google Page Speed Insights的建议总让我困惑。当一个网页被访问时,Google希望它仅加载对初始视图有用的内容,并使用空闲时间来加载其他内容。这种方式可以使用户尽可能早地看到页面。

图片 2

我们可以做很多事情来减少阻塞渲染的JavaScript,例如code splitting、tree shaking,缓存等。

但是如何减少阻塞渲染的CSS?为此,可以拆分并优先加载首次渲染所需要的CSS(关键CSS),然后再加载其它CSS。

可以通过编程的方式筛选出关键CSS,在本文中,我将向你展示如何通过Webpack的自动化流程来实现该方案。

最小化请求

所有在你的网站加载时用来渲染页面(外部CSS或JS文件、web字体、图片等等)的资源,都是不同的HTTP请求。一般的网站平均有 93个请求!

我的目标是减少HTTP请求。一种方法是分别编译或连接(组合、合并)CSS和javascript到一个文件中。让这个过程自动化(例如使用构建工具 Grunt 或 Gulp)是理想的效果,但至少也应该在生产环境下手动完成。

第三方脚本是增加额外请求最常见的罪魁祸首,很多获取额外的文件如脚本、图像或CSS的请求都不止1个。浏览器内置的开发者工具可以帮助你发现这些元凶。

图片 3
Google Chrome开发者工具的网络选项卡

例如,Facebook的脚本发起3次请求。测试环境中使用一些来自著名社交网站的社交分享脚本,可以看到他们快速增加:

站点 文件 大小
Google+ 1 15.1KB
Facebook 3 73.3KB
LinkedIn 2 47.7KB
Pinterest 3 12.9KB
Tumblr 1 1.5KB
Twitter 4 52.7KB
Total 14 203.2KB

来源:更有效的社会分享链接

这有额外的14个HTTP请求,共203.2KB。相反,我看看 “share-intent” 这个url,它基本上是通过传递和构建数据来生成一个共享,可以只使用HTML来创建社交共享链接。它让我丢掉用于共享的第三方脚本,这些脚本需要7次请求。我在Responsible Social Share Links这篇文章有更多的阐述。

评估每一个第三方脚本并确定其重要性。也许存在一种不依赖第三方的方法来完成它。你可能会失去一些功能(例如like、tweet、分享数量),但是请问一下自己:“像数量统计就那么重要吗?”

文章是这篇 快速提升前端性能。

什么是阻塞渲染

如果资源是“阻塞渲染”的,则表示浏览器在资源下载或处理完成之前不会显示该页面。

通常,我们在html的head标签中添加CSS样式表,这种方式会阻塞渲染,如下所示:

JavaScript

<head> <link rel="stylesheet" href="/style.css"> ...</head><body> <p>在style.css下载完之前,你看不到我!!!</p></body>

1
2
3
4
<head>
  <link rel="stylesheet" href="/style.css">
  ...</head><body>
  <p>在style.css下载完之前,你看不到我!!!</p></body>

当这个html页面被网络浏览器加载时,它将从上到下被逐行解析。当浏览器解析到link标签时,它将立即开始下载CSS样式表,在完成之前不会渲染页面。

对于一个大型网站,尤其是像使用了Bootstrap这种庞大框架的网站,样式表有几百KB,用户必须耐心等待其完全下载完才能看到页面。

那么,我们是否应该把link标签放到body中,以防止阻塞渲染?你可以这么做,但是阻塞渲染也不是全无优点,我们实际上可以利用它。如果页面渲染时没有加载任何CSS,我们会遇到丑陋的”内容闪现”。

图片 4

我们想要的完美解决方案就应该是:首屏相关的关键CSS使用阻塞渲染的方式加载,所有的非关键CSS在首屏渲染完成后加载。

压缩、优化

现在我找到了减少请求的方法,我开始寻找各种方法来减重。文件越小,加载速度越快。通常平均的页面大小为1950KB。按照内容分类:

图片:1249KB HTML:58KB CSS:60KB JS:303KB 字体:87KB Flash:67KB 其它:126KB

我使用这些数据作为参考和比较的起点,同时找到我可以用来为网站减负的方法。 我的网站耗费的流量有多少?是一个由Tim Kadlec编写的很棒的工具,可以用来帮助你测试和可视化,来自世界各地的访问在你的网站上消耗的流量。

文章主要介绍了如下一些需要关注的点:

关键CSS

这里是我用Webpack和Bootstrap编写的一个简单的网页, 下面的截图是首次渲染后的样式。

图片 5

点击Sign Up today按钮会弹出一个模态框, 模态框弹出时的样式如下:

图片 6

首次渲染需要的样式包括导航条的样式、超大屏幕样式、按钮样式、其它布局和字体的公用样式。但是我们并不需要模态框的样式,因为它不会立即在页面中显示。考虑到这些,下面是我们拆分关键CSS和非关键CSS的可能的方式:

critical.css

.nav { ... } .jumbtron { ... } .btn { ... }

1
2
3
4
5
6
7
8
9
10
11
.nav {
  ...
}
 
.jumbtron {
  ...
}
 
.btn {
  ...
}

non_critical.css

.modal { ... }

1
2
3
.modal {
  ...
}

如果你已经有这个概念,那么你可能会提出两个疑问:

  1. 我们如何用程序区分关键CSS和非关键CSS?
  2. 如何让页面在首次渲染之前加载关键CSS,之后加载非关键CSS?

CSS和JavaScript

压缩样式表和JavaScript文件可以明显减少文件大小,我仅在压缩上就从一个文件上节省了56%的空间。

压缩前 压缩后 节省比例
CSS 135KB 104KB 23.0%
JS 16KB 7KB 56.3%

我使用 BEM (代码、元素、修饰符) 方法论编写CSS,这将导致冗长的类名。重构我的一些代码变得更简短(“navigation”为 “nav”, “introduction” 为 “intro”),这让我节省了一些空间,但和我期望的后期压缩相比并不是那么明显。

冗长的类 精简后 节省比例
104KB 97KB 6.7%

我也重新评估了使用jQuery的必要性。对于压缩的135KB的JavaScript,大约96KB是jQuery库——71%之多!这里并没有很多需要依赖于jQuery,所以我花时间重构了代码。我通过剥离jQuery和在Vanilla重写它,去除了122KB,最终压缩后的文件大小减少到13KB。

jQuery Vanilla JS 节省比例
135KB 13KB 122KB (90%)

从那时起,我设法去掉更多空间(压缩后7KB),最后脚本在压缩和gzipped后只有0.365KB。

1、最小化请求

这个是说一般的页面中发的请求过多,会导致页面打开速度变慢。
解决的一种方法是分别编译或连接(组合、合并)CSS和javascript到一个文件中。让这个过程自动化(Grunt 或者 Gulp)是理想的效果,但至少也应该在生产环境下手动完成。

第三方脚本是增加额外请求最常见的罪魁祸首,很多获取额外的文件如脚本、图像或CSS的请求都不止1个。

示例项目

我将简要介绍一下这个项目的基本配置,这样我们在遇到解决方案时,方便快速消化。
首先, 在入口文件中引入Bootsrap SASS。

main.js

require("bootstrap-sass/assets/stylesheets/_bootstrap.scss");

1
require("bootstrap-sass/assets/stylesheets/_bootstrap.scss");

我使用sass-loader来处理sass,与Extract Text Plugin一起使用,将编译出来的css放到单独的文件中。

使用HTML Webpack Plugin来创建一个HTML文件,它引入编译后的CSS。这在我们的解决方案中是必需的,你马上就会看到。

webpack.config.js

module.exports = { module: { rules: [ { test: /.scss$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: ['css-loader', 'sass-loader'] }) }, ... ] }, ... plugins: [ new ExtractTextPlugin({ filename: 'style.css' }), new HtmlWebpackPlugin({ filename: 'index.html', template: 'index.html', inject: true }) ] };

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
module.exports = {
  module: {
    rules: [
      {
        test: /.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader', 'sass-loader']
        })
      },
      ...
    ]
  },
  ...
  plugins: [
    new ExtractTextPlugin({ filename: 'style.css' }),
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true
    })
  ]
};

运行构建之后,这里是HTML文件的样子。请注意,CSS文件在head标签里引入,因此将会阻塞渲染。

index.html

JavaScript

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>vuestrap-code-split</title> <link href="/style.css" rel="stylesheet"> </head> <body> <!--App content goes here, omitted for brevity.--> <script type="text/javascript" src="/build_main.js"></script> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>vuestrap-code-split</title>
    <link href="/style.css" rel="stylesheet">
</head>
<body>
  <!--App content goes here, omitted for brevity.-->
  <script type="text/javascript" src="/build_main.js"></script>
</body>
</html>

图片

图片通常占到一个网站的大头。通常网站平均有1249 KB的图片。

我抛弃了图标字体,取而代之的是内联SVG。此外,任何可以矢量化的图片都使用内联SVG替换。我的网站先前版本的一个页面仅仅图标web字体就加载了145KB,同时对于几百个web字体,我只使用了一小部分。相比之下,当前网站的一个页面只加载10KB内联SVG,这可是93%的差异。

SVG sprites看起来很有趣,它可能是我在整个网站使用普通内联SVG图标的一个可行的替代解决方案。

在可能的情况下使用CSS代替图片,现在的CSS能做的已经很多了。然而,浏览器兼容性可能是现代CSS使用的一个问题;因此,充分利用 caniuse.com 和逐步改进。

你也可以通过优化图片来压缩字节。有两种方法来优化图片:

  1. 有损压缩:降低图像的质量
  2. 无损压缩:不影响质量

要同时使用两种方法取得最好的效果,顺序是很重要的。首先使用有损图像压缩方法,比如在不超过必要大小的情况下调整图像大小然后在略低质量且不压缩太多的情况下导出如我通常在82 – 92%下导出JPG图片

图片 7

ImageOptim是OS X下的一个图像优化工具

接下来,使用无损图像优化工具比如 ImageOptim进行处理,从而通过删除不必要的信息,如元数据或颜色配置文件来进一步减少图像文件大小。

2、压缩、优化

现在找到了减少请求的方法,然后就可以开始寻找各种方法来减重。文件越小,加载速度越快。

编程识别关键CSS

手动区分关键CSS维护起来会非常痛苦。以编程方式来实现的话,我们可以使用Addy Osmani的Critical。这是一个Node.js模块,它将读入HTML文档,并识别关键CSS。Critical能做的还不止这些,你很快就能体会到。

Critical识别关键CSS的方式如下:指定屏幕尺寸并使用PhantomJS加载页面,提取在渲染页面中用到的所有CSS规则。

以下为对项目的设置:

const critical = require("critical"); critical.generate({ /* Webpack打包输出的路径 */ base: path.join(path.resolve(__dirname), 'dist/'), src: 'index.html', dest: 'index.html', inline: true, extract: true, /* iPhone6的尺寸,你可以按需要修改 */ width: 375, height: 565, /* 确保调用打包后的JS文件 */ penthouse: { blockJSRequests: false, } });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const critical = require("critical");
 
critical.generate({
  
  /* Webpack打包输出的路径 */
  base: path.join(path.resolve(__dirname), 'dist/'),
  src: 'index.html',
  dest: 'index.html',
  inline: true,
  extract: true,
 
  /* iPhone6的尺寸,你可以按需要修改 */
  width: 375,
  height: 565,
  
  /* 确保调用打包后的JS文件 */
  penthouse: {
    blockJSRequests: false,
  }
});

执行时,会将Webpack打包输出文件中HTML更新为:

JavaScript

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Bootstrap Critical</title> <style type="text/css"> /* 关键CSS通过内部样式表方式引入 */ body { font-family: Helvetica Neue,Helvetica,Arial,sans-serif; font-size: 14px; line-height: 1.42857; color: #333; background-color: #fff; } ... </style> <link href="/style.96106fab.css" rel="preload" as="style" onload="this.rel='stylesheet'"> <noscript> <link href="/style.96106fab.css" rel="stylesheet"> </noscript> <script> /*用来加载非关键CSS的脚本*/ </script> </head> <body> <!-- 这里是App的内容 --> <script type="text/javascript" src="/build_main.js"></script> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Bootstrap Critical</title>
  <style type="text/css">
    /* 关键CSS通过内部样式表方式引入 */
    body {
      font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
      font-size: 14px;
      line-height: 1.42857;
      color: #333;
      background-color: #fff;
    }
    ...
  </style>
  <link href="/style.96106fab.css" rel="preload" as="style" onload="this.rel='stylesheet'">
  <noscript>
      <link href="/style.96106fab.css" rel="stylesheet">
  </noscript>
  <script>
    /*用来加载非关键CSS的脚本*/
  </script>
</head>
<body>
  <!-- 这里是App的内容 -->
  <script type="text/javascript" src="/build_main.js"></script>
</body>
</html>

它还将输出一个新的CSS文件,例如style.96106fab.css(文件自动Hash命名)。这个CSS文件与原始样式表相同,只是不包含关键CSS。

版权声明:本文由龙竞技官网发布于龙电竞官网,转载请注明出处:关键 CSS 和 Webpack : 减少阻塞渲染的 CSS 的自动化解决方案