[译] 前端 2017 性能优化清单

[MRwaite]

这两天翻译的一篇,讲 2017 年网页性能进行优化指南的文章. 完整版的译文: github 或者 个人博客

初次翻译,翻译不好的地方,请予以指正. 以下是文章中具体 33 个优化点:

1. 比你的最快的竞争对手快 20% 。
2. 100 毫秒的响应时间，每秒 60 帧。
3. First meaningful paint 时间小于 1.25 秒， SpeedIndex 小于 1000
4. 选择和设置构建工具
5. 渐进增强
6. Angular ， React ， Ember 和 co
7. AMP or Instant Articles
8. 选择 CDN
9. 设置资源优先级
10. 使用 “ cutting-the-mustard ” 技术
11. 考虑微优化和渐进式启动
12. 正确设置 HTTP cache 头部
13. 限制第三方库和异步加载的 JavaScript
14. 正确的图片优化
15. 让图像优化提高到下一个水平
16. web fonts 优化
17. 快速推送 critical CSS 样式
18. 使用 tree-shaking 和 code-splitting 减少有效负载
19. 提高渲染性能
20. 通过预热连接加速传输
21. 准备好迎接 HTTP/2
22. 正确部署 HTTP/2
23. 确保服务的安全性
24. 服务和 CNDs 支持 HTTP/2 ?
25. Brotli or Zopfli compression
26. 启用了 OCSP stapling 吗？
27. 你已经采用 IPv6 了？
28. 启用了 HPACK 压缩？
29. 为缓存和网络降级启用 service workers 了？
30. 监控混合内容的警告
31. 在 DevTools 中优化了你的开发工作流吗？
32. 你在代理浏览器和旧版浏览器中测试过吗？
33. 建立了持续的监控？

[yfgeek]

赞

[imxieke]

国内支持 ipv6 就景安一家貌似 少的可怜。

[isCyan]

博客主题很好看，文章也赞

[MRwaite]

@isCyan 感谢。博客主题是 hexo-theme-apollo ，初次翻译很多翻译不到位的见谅。

[MRwaite]

@imxieke 这篇文章只是作为 2017 年性能优化指南性的文章嘛，还有有一定超前性的（ AMP ， RAIL performance model ， HTTP/2 都是未来的趋势啊），作者在最后也这么说了。