前端性能覈對表Checklist-2018

時間 2019-11-06

標籤前端性能覈對 checklist 欄目系統性能简体版

原文原文鏈接

前端性能覈對表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.javascript

相關LINK:

AMP https://www.ampproject.org/html

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 hoistingjava

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

安全webpack

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
github

今天先到這兒,但願對您在系統架構設計與評估，團隊管理, 項目管理, 產品管理,團隊建設有參考做用 , 您可能感興趣的文章:
國際化環境下系統架構演化
 微服務架構設計
 視頻直播平臺的系統架構演化
 微服務與Docker介紹
 Docker與CI持續集成/CD
互聯網電商購物車架構演變案例
 互聯網業務場景下消息隊列架構
 互聯網高效研發團隊管理演進之一
 消息系統架構設計演進
 互聯網電商搜索架構演化之一
 企業信息化與軟件工程的迷思
 企業項目化管理介紹
 軟件項目成功之要素
 人際溝通風格介紹一
 精益IT組織與分享式領導
 學習型組織與企業
 企業創新文化與等級觀念
 組織目標與我的目標
 初創公司人才招聘與管理
 人才公司環境與企業文化
 企業文化、團隊文化與知識共享
 高效能的團隊建設
 項目管理溝通計劃
 構建高效的研發與自動化運維
 某大型電商雲平臺實踐
 互聯網數據庫架構設計思路
 IT基礎架構規劃方案一(網絡系統規劃)
餐飲行業解決方案之客戶分析流程
 餐飲行業解決方案之採購戰略制定與實施流程
 餐飲行業解決方案之業務設計流程
 供應鏈需求調研CheckList
企業應用之性能實時度量系統演變 web

若有想了解更多軟件設計與架構, 系統IT,企業信息化, 團隊管理資訊，請關注個人微信訂閱號：數據庫

做者：Petter Liu
出處：http://www.cnblogs.com/wintersun/
本文版權歸做者和博客園共有，歡迎轉載，但未經做者贊成必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接，不然保留追究法律責任的權利。
該文章也同時發佈在個人獨立博客中-Petter Liu Blog。緩存

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。