[译] 前端 2017 性能优化清单
这两天翻译的一篇,讲 2017 年对网页性能进行优化指南的文章. 完整版的译文: github 或者 个人博客
初次翻译,翻译不好的地方,请予以指正. 以下是文章中具体 33 个优化点:
- 比你的最快的竞争对手快 20% 。
- 100 毫秒的响应时间，每秒 60 帧。
- First meaningful paint 时间小于 1.25 秒， SpeedIndex 小于 1000
- 选择和设置构建工具
- 渐进增强
- Angular ， React ， Ember 和 co
- AMP or Instant Articles
- 选择 CDN
- 设置资源优先级
- 使用 “ cutting-the-mustard ” 技术
- 考虑微优化和渐进式启动
- 正确设置 HTTP cache 头部
- 限制第三方库和异步加载的 JavaScript
- 正确的图片优化
- 让图像优化提高到下一个水平
- web fonts 优化
- 快速推送 critical CSS 样式
- 使用 tree-shaking 和 code-splitting 减少有效负载
- 提高渲染性能
- 通过预热连接加速传输
- 准备好迎接 HTTP/2
- 正确部署 HTTP/2
- 确保服务的安全性
- 服务和 CNDs 支持 HTTP/2 ?
- Brotli or Zopfli compression
- 启用了 OCSP stapling 吗？
- 你已经采用 IPv6 了？
- 启用了 HPACK 压缩？
- 为缓存和网络降级启用 service workers 了？
- 监控混合内容的警告
- 在 DevTools 中优化了你的开发工作流吗？
- 你在代理浏览器和旧版浏览器中测试过吗？
- 建立了持续的监控？
