Chrome Dev Summit 2018-怎样使网站更快

2018-12-02

来自Chrome Dev Summit 2018，在此做一个记录。
怎样使你的网站更快？我们将关注三件事情

web

图片
网络字体
JavaScript

图片

图片通常是我们网站中最大的资源。
对于图片来说我们应该：

选择合适的格式

GIF的画质通常看起来都很糟糕，但是实际上它们的尺寸非常大。一个1.4秒的GIF图像，大小可能达到6.8M，同样内容的mp4视频只有其1/16的大小，为420K。

由于压缩算法的差异，GIF的大小通常是相同内容视频的5-20倍。

使用视频代替GIF
转换GIF到视频

1	ffmpeg -i dog.gif dog.mp4

1
2
3

<video autoplay loop muted playsinline>
  <source src="dog.mp4" type="video/mp4">
</video>

WebP

尺寸比JPEG PNG小25%到35%。
不是所有的浏览器都支持WebP格式的图片。但是可以用picture标签来兼容。

<picture>
  <source type="image/webp" srcset="flower.webp">
  <source type="image/jpeg" srcset="flower.jpg">
  <img src="flower.jpg">
</picture>

适当压缩

有损压缩：建议尝试80-85的质量水平，大小可以减少30%-40%。

选择合适的展现尺寸

我们有各种各样的设备可能访问网站，但是我们只提供一种尺寸的图片，不仅增大了传输成本，也为CPU产生了额外的工作。

图片尺寸修改工具：Sharp、Jimp

1
2

<!-- srcset属性可以列出同一个图片的不同版本，包括文件路径和图片宽度，使浏览器不用下载图像就知道它有多大 size告诉浏览器图片将显示在多宽的屏幕中 -->
<img srcset="flower-small.jpg 480w, flower-large.jpg 1080w" size="50vw" src="flwer-large.jpg">

仅在必要时展示

Lazy Loading

<head>
  <!-- lazy loading script -->
  <script src="lazysize.min.js" async></script>
</head>
<body>
  <img data-src="flower.jpg" class="lazyload">
</body>

Chrome将提供原生的懒加载，无需添加脚本。
如果想要控制懒加载。可以在标签上增加lazyload属性。否则浏览器会自动决定。

1 2	<!-- 还有on/off属性值 --> <img src="flower.jpg" lazyload="auto">

自定义字体

在加载的时候使用系统字体，当下载好自定义字体时再应用。
可以在css中声明属性：

@font-face {
  font-family: 'Pacifico';
  src: url(...woff2) format('woff2');
  /* 使用交换行为 */
  font-display: swap;
}

JavaScript

我们为什么产生越来越多的JavaScript代码 —— 依赖越来越多。
我们需要做的是，在用户只访问第一页的时候，只是向他们发送他们初始状态所需的东西。
代码拆分，使用动态导入。

Preload预加载，告诉浏览器优先下载重要代码

1	<link rel="preload" as="script" href="critical.js"></link>

使用babel将我们用新语法写的代码编译成老浏览器也可以识别的旧语法代码。但是在新浏览器中，实际是不需要的。
我们可以针对不同浏览器版本提供不同的脚本。

<!-- 理解模块的浏览器会下载第一个文件，不支持的浏览器会忽略第一个，而下载第二个文件 -->
<script type="module" src="main.mjs"></script>
<script nomodule src="legacy.js"></script>
<!-- 预加载和module -->
<script type="modulepreload" src="critical.mjs"></script>

devTool的coverage面板可以看到每个资源实际使用到的比例。