[译]怎样应用新技术提拔网页速率和机能

作者 Declan

原文链接

近来更新了我们的网站，它是经由了设想上的周全验收的。但现实上，作为软件开辟者，我们会注重许多手艺相干的细碎的东西。我们的目标是掌握机能，注重机能，未来可舒展，为网站增加内容是一种兴致。接着就来通知你，为何我们的网站速率比你们的快吧（抱歉，确切是如许的）。

机能设想

在我们的项目中，我们天天都邑和设想师和产物负责人议论关于均衡雅观和机能的题目。关于我们自身的网站，如许做是很简朴的。简言之，我们以为好的用户体验从疾速的内容传输最先，也就意味着 机能 > 雅观。

好的内容、规划、图片和交互是吸收用户的主要要素。这每一个要素都邑影响页面的加载时刻和终端用户体验。每一步我们都在讨论如安在取得好的用户体验和保证设想美感的同时，最小化对机能的影响。

内容优先

我们想要把核心内容尽快地显现给用户，意味着我们要处置惩罚好基础的 HTML 和 CSS。每一个页面都应当到达基础的目标：传递信息。JS、CSS、网页字体、图片、网站剖析等优化都是位居于核心内容之下的。

可控性

给抱负网站定义了规范后，我们总结出：要想到达预期效果，就要能对网站各方面的掌握都游刃有余。我们挑选构建自身的静态站点天生器，包含资本传输，而且由我们自身操控。

静态站点天生器

我们用 Node.js 完成了静态站点天生器。它是采纳带有简短 JSON 页面形貌标签的 Markdown 文件来天生悉数网站构造和它一切的资本。为了包含特别的页面剧本，也可以附带一个 HTML 文件。以下是一个简朴化的形貌标签和 markdown 文件，用于博客的宣布，用它来天生真正的 HTML。

JSON 形貌标签:

{
"keywords": ["performance", "critical rendering path", "static site", "..."],
"publishDate": "2016-07-13",
"authors": ["Declan"]
}

markdown 文件:

# Why our website is faster than yours
We've recently updated our site. Yes, it has a complete...
## Design for performance
In our projects we have daily discussions...


图片传输

均匀一个 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 推出的字体监听器是一个很了不得的剧本，可以协助搜检字体是不是已被加载。至于你是怎样加载字体的，是经由历程一个网页字体效劳，照样自身上传就不可知了。在这个监听器通知我们一切自定义的字体已下载终了后，我们就可以在 元素上增加一个字体加载终了的类，我们的页面就会从新用新的字体：

html {
font-family: Georgia, serif;
}
html.fonts-loaded {
font-family: Noto, Georgia, serif;
}

注重： 为了简短，我没有给上面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 实行的计划是在

我们把这小段剧本放在页面头部，来检测浏览器是不是支撑原生Javascript的 document.querySelector 和 window.addEventListener 属性。假如支撑，我们经由历程





Apache 效劳端逻辑看起来像一行一行的备注，平常以 假如是true的话，我们就假定这是用户的第一次浏览。

第一次浏览我们增加了

我们增加了一个行内的剧原本懒加载CSS，onloadCSS 回调内里可以设置COOKIEs.

在统一份剧本内里，我们异步加载了整份CSS。

在 onloadCSS的回调内里，我们用版本号来设置COOKIE的值。

在这个剧本背面，我们增加了一行症结CSS的款式。这个会壅塞衬着，但时刻是异常短的，而且可以防止页面展现出来只要地道的HTML而没有款式的状态。

声明（意味着 css-loaded 的COOKIE 已存在）用户反复浏览。由于我们可以从某种程度上来假定，CSS文件之前已被加载过了，我们可以应用浏览器缓存来供应款式表。如许从缓存内里加载速率就很快了。一样的要领也被用来在第一次异步加载字体，后续的反复浏览也是从缓存内里猎取字体。

这就是我们第一次和反复浏览时，我们用来辨别的COOKIEs。

文件级缓存

由于我们在重现页面时很大程度上依赖于浏览器缓存，所以我们须要确认我们的缓存是不是合理。抱负中我们是要永远的存储资本（CSS、js、 字体、图片），只要当这些文件被修改时才须要更新。当要求的URL是唯一时，缓存就会失效。每更新一个版本，我们都邑用 git tag 打个标签。所以最简朴的体式格局就是给我们要求的URL加上一个参数（代码版本号），如 https://www.voorhoede.nl/assets/css/main-8af99277a6.css?v=1.0.4.。

然则，这类做法的瑕玷就是当我们要写一个新的博客post（这也是我们代码库的一部份，并没有永远地存储在CMS），本来缓存的资本将会失效，只管没有转变本来那些资本。

就在我们尝试去改良这类要领时，我们发明了 gulp-rev 和 gulp-rev-replace 。这些剧本会自动合理地在我们的文件名称背面增加一窜hash值。这意味着只要现实上文件被转变时，才会去转变要求的URL，如许每一个文件的缓存就会自动失效。这类做法让我兴奋不已啊！

效果

假如你看到这里，你应当是想要晓得效果的。测试网页的机能可以采纳像 PageSpeed Insights 如许的东西，它有很有用的提醒。也可以运用 WebPagetest来测试，有扩展性的收集剖析。我以为测试网页衬着机能的最好要领就是在猖獗地停止收集通讯时来视察网页的历程。这意味着，用一种不切现实的要领来停止通讯。在谷歌浏览器，你可以如许操纵 (via the inspector > Network tab) 来限定通讯，视察网页构成历程当中，要求是怎样迟缓加载的。

下面是我们的网页在 50KB/s 的状态下的加载状态。

这是 de Voorhoede site 首屏的收集剖析，是网页第一次历程的一个概览。

注重到在50KB/s的网速中，我们是怎样让首屏的衬着只用了 2.27 秒的。也就是第一张幻灯片和瀑布图内里的黄色线所代表的位置。黄线正好绘在就是HTML已加载完的时刻位置。HTML包含了症结CSS，保证页面的可观性。一切其他的CSS都是用懒加载，所以我们可以比及悉数资本加载完时才与页面举行交互。这也是我们想要的效果！

另一个值得注重的就是自定义字体从来不在这迟缓的链接上加载。 font face 视察器会自动注重到这一点。然则，假如我们不异步加载字体，你谛视大多半浏览器，都邑涌现 FOIT(不可见文本的闪现，上文有说起)的状态。

一切的CSS文件仅在8s后就都加载终了。相反，假如我们不采纳加载症结CSS的体式格局，而是采纳加载悉数CSS，我们在前8秒看到的将会是空缺的页面。

假如你觉得猎奇，想与那些不太注重机能的网站对照一下加载时刻，那赶忙尝尝吧。谁人时刻肯定是飞涨啊！

用上面引见的东西测试了我们的网站，效果也是让人惬意的。 PageSpeed insights 在挪动机能方面给了我们100分，何等了不得啊！

PageSpeed insights 对 voorhoede.nl的测试效果! 速率100分！

当我们检察 WebPagetest 时，我们获得下面如许的效果：

WebPagetest 对 voorhoede.nl的检测效果

可以看出，我们的效劳器运转优越，首屏的速率目标是693。 这意味着我们的页面在693毫秒后就可以在宽屏缆线下被运用了。

手艺线路

我们如许还不算完成，还会不停地反复我们的要领。我不久的未来，我们会主要关注以下内容：

HTTP/2

如今我们正在试验HTTP/2。本文所形貌的大多半东西都是基于 HTTP/1.1 权限内的最好实践。简言之，HTTP/1.1 要追述到1999年，当时 table规划和行内款式都热火朝天。HTTP/1.1 从没为 2.6MB的网页要接收200个要求而设想。为了减轻旧版协定带来的痛苦，我们连系JS、CSS、症结性CSS，还为小图片设置数据源URI等。用种种要领来节约要求。自从 HTTP/2 可以在统一个TCP链接上平行地运转多个要求后，一切的这些联络运用和削减要求的做法都可能成为背面形式了。当我们跑完这个试验后，我们将会采纳 HTTP/2 协定。

Service Workers

这是一个在背景运转的当代浏览器的 Javascript API。它具有许多特征，这些特征在之前的网站上都是没有的，如离线支撑、音讯推送、背景同步等。我们如今正尝试用 Service Worker, 但照样得在我们自身的网站上完成先。我向你保证，我们会做到的！

CDN

因而，我们想要自身掌握和布置我们的网站。而且如今我们也要采纳CDN来挣脱由效劳端和客户端现实间隔所带来的收集题目。只管我们的用户基础上都是荷兰的，我们也想向天下的前端社区反应我们在质量、机能和推进收集生长方面做的最好。