前端性能核對錶Checklist-20181. 計劃與度量 Get Ready: Planning and Metrics☐ Establish a performance culture.☐ Choose the right metrics.☐ Be 20% faster than your fa... ...
前端性能核對錶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 file size budget < 170Kb
3.環境定義 Defining 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 Zopfli 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 workflow 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 file 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 Zopfli 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
安全
仔細檢查那些與安全相關的 HTTP 頭部，看是否設置正確
使用一些工具來排除已知漏洞
使用一些網站來檢查證書是否失效
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
今天先到這兒,希望對您在系統架構設計與評估，團隊管理, 項目管理, 產品管理,團隊建設 有參考作用 , 您可能感興趣的文章:
國際化環境下系統架構演化
微服務架構設計
視頻直播平臺的系統架構演化
微服務與Docker介紹
Docker與CI持續集成/CD
互聯網電商購物車架構演變案例
互聯網業務場景下消息隊列架構
互聯網高效研發團隊管理演進之一
消息系統架構設計演進
互聯網電商搜索架構演化之一
企業信息化與軟體工程的迷思
企業項目化管理介紹
軟體項目成功之要素
人際溝通風格介紹一
精益IT組織與分享式領導
學習型組織與企業
企業創新文化與等級觀念
組織目標與個人目標
初創公司人才招聘與管理
人才公司環境與企業文化
企業文化、團隊文化與知識共用
高效能的團隊建設
項目管理溝通計劃
構建高效的研發與自動化運維
某大型電商雲平臺實踐
互聯網資料庫架構設計思路
IT基礎架構規劃方案一(網路系統規劃)
餐飲行業解決方案之客戶分析流程
餐飲行業解決方案之採購戰略制定與實施流程
餐飲行業解決方案之業務設計流程
供應鏈需求調研CheckList
企業應用之性能實時度量系統演變
如有想瞭解更多軟體設計與架構, 系統IT,企業信息化, 團隊管理 資訊，請關註我的微信訂閱號：
![MegadotnetMicroMsg_thumb1_thumb1_thu[2]](https://images0.cnblogs.com/blog/15172/201503/211054051419485.jpg "MegadotnetMicroMsg_thumb1_thumb1_thu[2]")
作者：Petter Liu
出處：http://www.cnblogs.com/wintersun/
本文版權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接，否則保留追究法律責任的權利。
該文章也同時發佈在我的獨立博客中-Petter Liu Blog。
