【第685期】如何运用最新的技术提升网页速度和性能

markdown 文件:

图片传输

平均一个 2406kb 的网页中 1535kb 是图片。就因为图片在网站中占据了这么大的一个比例，所以它也是性能优化的重点之一。

WebP格式

WebP是一种现代图片格式，为网页图片提供了出色的低损耗、有损压缩。WebP格式的图片实质上比其它格式的小，有时可以比同样的 JPEG 图片小 25%。 WebP被大多数人所忽略，也没被经常使用。截止到写这篇文章的时候，WebP 仅支持Chrome, Opera 和 Android (仍超过了我们50%的用户)，但我们可以优雅降级为 JPG/PNG。

使用

元素我们可以把图片从 WebP 优雅地降级到其它被广泛支持的图片格式，如JPEG:

我们使用Scott Jehl 的 picturefill 来使那些不支持

元素的浏览器获得支持，在各个浏览器中达到一致的效果

我们使用

作为那些不支持

或者 JS 的浏览器的后备元素。使用图片的最大实例确保了它在后备方案中的可行性。

生成

尽管图片传输方式已经确定了，我们仍需要思考该怎样有效地执行。我喜欢

元素的功能，但不喜欢写上面那些代码段，尤其是写内容时必须把它加进去。我们不想做这么费力的事情：每张图片都要写 6 个实例，所以优化这些图片并且把它们写在markdown文件的

里面。所以：

生成图片

在构建过程中，原图片的多个实例，包括JPG, PNG和WebP格式，我们使用 gulp responsive 来生成。

最小化图片

在markdown文件中写[图片描述](image.jpg).

在构建过程中使用自定义Markdown渲染器来为已经完全成熟的

元素编译传统的markdown图片声明。

SVG动画

我们为自己的网站选择了特定的图标类型，其中SVG插图占了主要地位。这样做有以下几个原因：

首先，SVG的图片比位图更小；

其二，SVG图片本身就是响应式的，有很棒的伸缩性, 所以不需要图片生成及

元素；

最后也是很重要的一点，就是我们可以通过CSS来不断改变它，赋予它新的活力！我们所有的组合页面都有一个自定义的动态SVG图, 可以被概述页面所复用。这张图片作为我们所有组合页面的一种循环风格，使得页面设计一体化，同时又几乎不会对性能造成影响。请看这张动画，看看我们是如何用CSS来改变它的。

自定义网页字体

在深入之前二级网页最大化设置，这里有一个关于在浏览器设置自定义字体的简短介绍。当浏览器发现CSS里面有@font-face 的定义，但是用户的电脑并不支持该字体时，它会尝试下载该字体文件。在下载时，多数浏览器根本不会用这种字体来展示文本。这种现象称为“不可见文本的闪现” 或者 FOIT。如果你有留意，你会发现网页上都有这种情况存在。如果你问我，我会告诉你这会影响用户体验。它延迟了用户读取他们所需内容的时间。我们可以迫使浏览器改变这种行为二级网页最大化设置，变成 “无样式内容闪现” 或者称为 FOUT。我们告诉浏览器先使用普通字体，像 Arial 或者 Georgia。当自定义的字体下载完成后，再代替标准字体并且重新渲染。这样，即使自定义字体下载失败，仍然不会影响内容的可读性。然而，有人会认为这是一种妥协的做法，但我们认为自定义字体只是一种优化。尽管没有自定义字体，网页看起来也完好，也能百分百的正常运行。勾选/不勾选复选框来切换我们的网页字体，来自己体验一下：

切换下载的字体类 使用自定义网页字体可以改善我们的用户体验，只要你能够优化他们，并且负责任地为之服务。

字型子集设定

到目前为止，子集设定以最短的时间在改善网页字体性能方面取胜。我将会向每个使用自定义字体的网页开发者推荐子集设定。如果你能完全控制网页内容，并且知道它将要展示哪些特性的话，你可以完全使用子集设定。但是，即使是仅仅把字体设为西方语言，也会对文件大小造成很大的影响。例如，我们的 Noto Regular WOFF 字体，默认是246KB，将其设为西方语言后，大小下降到31KB。我们使用 Font squirrel webfont, 这种字体真的很易用。

字体监听器

Bram Stein 推出的字体监听器是一个很了不起的脚本，可以帮助检查字体是否已被加载。至于你是如何加载字体的，是通过一个网页字体服务，还是自己上传就不可知了。在这个监听器告诉我们所有自定义的字体已经下载完毕后，我们就可以在 元素上添加一个字体加载完毕的类，我们的页面就会重新用新的字体：

注意： 为了简短，我没有给上面CSS中的 Noto 加上 @font-face 的声明。

我们可以设定一个cookie来记住所有的字体已经被加载过，就可以让他们缓存在浏览器里面了。我们使用这个cookie来替代重复的视图，这个我后续会解释。

在不久的将来，我们或许不需要 Bram Stein 的脚本来监听这个行为。CSS开发团队已经提案一个新的 @font-face 描述器，也叫 font-display。它的属性值控制着一个可下载的字体是如何在还没加载出来时就渲染页面的。这是CSS对font-display的描述：它将带给我们像上面方法一样的行为效果。你可以读读更多关于 font-display 的属性。

JS和CSS懒加载

一般来讲，我们都是尽可能快的加载需要的资源。我们移除一些堵塞的请求来加快页面渲染，优化首屏，用浏览器缓存来处理重复的页面。

JS懒加载

设计上，我们的网站并没有很多JS。我们发展了一个JavaScript工作流来处理我们目前已有的js, 以及未来会用到的js资源。

JS在 块里面渲染，这是我们想要的。JS应该只是用来提高用户体验，不应该是访问者需要的关键。处理JS堵塞渲染的简单方法就是把脚本放在页面的尾部。这样网页就会在整个HTML 渲染完毕后才去加载JS。

另一种可以把脚本放在 head 执行的方案是在