轻松实现Web性能：Google I / O 2018 版

[gaoryrt]

原文在 Web Performance Made Easy: Google I/O 2018 edition，作者基于 lighthouse extension 提出了很多前端优化的建议。

[gaoryrt]

原文大纲如下：

• 启用 js 和 css 压缩，移除不必要的内容：空格、注释；
• 启用内容压缩：Gzip、Zopfli 或者 Brotli；
• 善用缓存策略；
• 使用 Chrome DevTools 中的 Coverage 检查并删除未使用的代码；
• 使用 Webpack Bundle Analyzer、Visual Code 的 import-cost 插件、BundlePhobia 审核依赖大小，减小网络负载；
• 使用 code-splitting 加速首屏展示；
• 使用 ImageOptim、XNConvert、imagemin 或是后端解决方案优化图片大小；
• 使用 ffmpeg 将 GIF 替换成静音 mp4 和 webm 文件；
• 使用 Lazysizes 延迟加载首屏外图像；
• 使用 rel=preconnect/preload 预连接/预加载关键资源；
• 使用 font-display: swap 避免字体加载前的空白；

[gaoryrt]

优化首屏还有个骨架屏方案，貌似文中没有提到，关键字 Skeleton Screen 可以研究一下。 然后 font-display: swap 如果兼容有问题的话，可以用 Web Font Loader。

[gaoryrt]

webpack 4.6.0 开始已经支持生成 rel=preload/preconnect 的 link 了，vue-cli3 也默认打开了这个功能。

通过 @font-face 嵌入的字体一般会在使用时开始加载（相关讨论），js 一般放在 </body> 之前加载执行，后面才轮到 FontFace 加载。

而 rel=preload/preconnect 的 font 和 script 可以提前到解析 head 时开始加载，不会阻塞 html 加载，也不会影响 js 执行时间。

相关阅读： Getting started with CSS Font Loading Implementing @font-face