前端性能核对表Checklist-2018

1. 计划与度量 Get Ready: Planning and Metrics

☐ Establish a performance culture.

☐ Choose the right metrics.

☐ Be 20% faster than your fastest competitor.

☐ Share the checklist with your colleagues.

2. 设置务实的目标 Setting Realistic Goals

☐ 100-millisecond response time, 60 frames per second

☐ SpeedIndex < 1250, Time-To-Interactive < 5s on 3G.

☐ Critical payload chunk = 15Kb, critical ﬁle size budget < 170Kb

3.环境定义 Deﬁning the Environment

☐ Choose and set up your build tools.

☐ Progressive enhancement. 

☐ Choose a strong performance baseline. 

☐ Will you be using AMP or Instant Articles? 

☐ Choose your CDN wisely. 

4. 构建优化 Build Optimizations

☐ Set your priorities right. 

☐ Consider the “cutting-the-mustard” technique. 

☐ Parsing JavaScript is expensive, so keep it small. 

☐ Use tree-shaking and code-splitting to reduce payloads. 

☐ Do you constrain the impact of third-party scripts? 

☐ Are HTTP cache headers set properly? 

5. 资产优化 Assets Optimizations

☐ Is Brotli or Zopﬂi text compression in use?

☐ Are images properly optimized?

☐ Are web fonts optimized?

6. 交付优化 Delivery Optimizations

☐ Push critical CSS quickly.

☐ Using babel-preset-env to only transpile ES2015+ features.

☐ Improve rendering performance.

☐ Lazy-load expensive scripts with Intersection Observer.

☐ Have you optimized rendering experience?

☐ Warm up the connection to speed up delivery.

7. HTTP/2

☐ Get ready for HTTP/2.

☐ Properly deploy HTTP/2.

☐ Are you saving data with Save-Data?

☐ Make sure the security on your server is bulletproof.

☐ Do your servers and CDNs support HTTP/2?

☐ Is OCSP stapling enabled?

☐ Have you adopted IPv6 yet?

☐ Is HPACK compression in use?

☐ Are service workers being used for caching and network fallbacks?

8. 测试与监控 Testing and Monitoring

☐ Monitor mixed-content warnings.

☐ Is your development workﬂow in DevTools optimized?

☐ Have you tested in proxy browsers and legacy browsers?

☐ Is continuous monitoring set up?

9. 快既赢 Quick wins

1. Measure the real world experience and set appropriate goals. A good goal to aim for is First Meaningful Paint < 1 s, a SpeedIndex value < 1250, Time to Interactive < 5s on slow 3G, for repeat visits, TTI < 2s. Optimize for start rendering time and time-to-interactive.

2. Prepare critical CSS for your main templates, and include it in the <head> of the page. (You budget is 14 KB.) For CSS/JS, operate within a critical ﬁle size budget of max. 170Kb gzipped (0.8-1Mb decompressed).

3. Defer and lazy-load as many scripts as possible, both your own and third-party scripts — especially social media buttons, video players and expensive JavaScript.

4. Add resource hints to speed up delivery with faster dns-lookup, preconnect, prefetch and prelo

5. Subset web fonts, and load them asynchronously (or just switch to system fonts instead).

6. Optimize images, and consider using WebP for critical pages (such as landing pages).

7. Check that HTTP cache headers and security headers are set properly.

8. Enable Brotli or Zopﬂi compression on the server. (If that’s not possible, don’t forget to enable Gzip compression.)

9. If HTTP/2 is available, enable HPACK compression, and start monitoring mixed-content warnings. If you’re running over LTS, also enable OCSP stapling.

10. If possible, cache assets such as fonts, styles, JavaScript and images — actually, as much as possible! — in a service worker cache.

相关LINK:

AMP https://www.ampproject.org/

instant articles https://instantarticles.fb.com/
Brotli https://en.wikipedia.org/wiki/Brotli

OCSP https://www.digicert.com/enabling-ocsp-stapling.htm
如何处理设计与性能开销之间的关系（guide on how to approach designs with a performance budget）
性能开销（performance budgets）

性能监控
PWMetrics ， Calibre ， SpeedCurve ， mPulse ， Boomerang ， Sitespeed.io
cutting-the-mustard 技术
 ahead-of-time compiler(编译器)
Tree-shaking scope hoisting

Heroku’s primer on HTTP caching headers、缓存之最佳实践 HTTP caching primer
Pragmatist's Guide to Service Workers
BrowserStack
性能回归自动报警（automated performance regression alerts）
WebPageTest
k6 SpeedTracker、Lighthouse 以及 Calibre

安全

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

今天先到这儿,希望对您在系统架构设计与评估，团队管理, 项目管理, 产品管理,团队建设有参考作用 , 您可能感兴趣的文章:
国际化环境下系统架构演化
 微服务架构设计
 视频直播平台的系统架构演化
 微服务与Docker介绍
 Docker与CI持续集成/CD
互联网电商购物车架构演变案例
 互联网业务场景下消息队列架构
 互联网高效研发团队管理演进之一
 消息系统架构设计演进
 互联网电商搜索架构演化之一
 企业信息化与软件工程的迷思
 企业项目化管理介绍
 软件项目成功之要素
 人际沟通风格介绍一
 精益IT组织与分享式领导
 学习型组织与企业
 企业创新文化与等级观念
 组织目标与个人目标
 初创公司人才招聘与管理
 人才公司环境与企业文化
 企业文化、团队文化与知识共享
 高效能的团队建设
 项目管理沟通计划
 构建高效的研发与自动化运维
 某大型电商云平台实践
 互联网数据库架构设计思路
 IT基础架构规划方案一(网络系统规划)
餐饮行业解决方案之客户分析流程
 餐饮行业解决方案之采购战略制定与实施流程
 餐饮行业解决方案之业务设计流程
 供应链需求调研CheckList
企业应用之性能实时度量系统演变

如有想了解更多软件设计与架构, 系统IT,企业信息化, 团队管理资讯，请关注我的微信订阅号：

作者：Petter Liu
出处：http://www.cnblogs.com/wintersun/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
该文章也同时发布在我的独立博客中-Petter Liu Blog。