網站性能優化(WPO)已經成為一個非常重要的話題了,越來越多的互聯網公司開始有WPO的職位,而相關技能也是對前端開發工程師的重要技術要求之一。國外大牛Steve Souders在參加WebPerfDays London期間,收集了大量常用的網站性能優化工具,這里和大家分享下。
常用的網站性能優化工具:
WebPagetest
Cuzillion
Chrome Dev Tools
Speed Tracer
Performance Analyzer (收費)
SPOF-O-Matic, 3PO for YSlow
Wireshark
PageSpeed, YSlow
HttpFox
dynaTrace Ajax Edition 和 SpeedoftheWeb
HTTP Archive
關鍵路徑瀏覽—— PageSpeed Insights的一部分
PhantomJS
移動設備同步調試:Weinre, jsconsole.com, Opera Dragonfly, Chrome for Android
Apache Bench (ab)
Show Slow
Browserscope
Tilt, DOM Monster
Mobileperf Bookmarklet
chrome://net-internals
Redbot
SpriteMe
Boomerang, Episodes
wget, telnet
Wappalyzer
Netalyzer
Shunra NetworkCatcher Express
Packet Flight
Fiddler, Charles
CSS Lint, JSLint
GTMetrix
Torbit Insight
Grunt.js
sitespeed.io
SSL Server Test
SPDY 指示器 (Firefox, Chrome), SPDYCheck.org
KITE, MITE
Compass (CSS)
Soke, Seige, Tsung (加載測試)
SpeedCheckr
當然這些不是全部,還有很多工具是目前所缺少的:
當分析一個網站時需要一個計算last-modified時間和今天之間的平均變化并和過期時間來對比的工具。目的是告訴開發者過期時間和資源變化頻率是否一致。這個功能可以和PageSpeed、YSlow和HTTP Archive整合。
檢測一個網站是否在可以使用異步片段(async snippet)的時候使用阻塞的片段(blocking snippet)。比如PagaSpeed實現了但是只能用于Google Analytics。
診斷渲染被延遲的根本原因的工具。
更容易的可視的DNS TTLs的工具,內置到Chrome Dev Tools或者WebPagetest。
爬去文件目錄并優化圖片的后端工具。候選: Yeoman, Wesley.
Safari(Mobile)中的導航計時。
更好的檢測和診斷內存泄露的工具。
網頁計時規范,計算Javascript、CSS、reflow等環節花費的時間。
可視、可修改網絡存儲(LocalStorage、APP cache等)的工具。
可視、可清理DNS緩存的工具。
專注于性能建議的JSLint版本。
對比兩個HAR文件的工具。
總結:
網站性能優化除了雅虎的34條黃金準則之外,分析和優化工具是必備的,希望這些工具能夠對大家有所幫助。但是性能優化并不僅僅這些,還有很多技術是實踐中積累發現的,比如元彥同學最近整理的幾篇:
【高性能前端1】高性能HTML
【高性能前端2】高性能CSS
【高性能前端3】高性能JavaScript
【高性能前端4】Appcache Facts 中譯版
恩,如果你有一些好的前端性能優化經驗或者工具,歡迎分享給我們。
閱讀"[網站優化工具] 網站優化工具對排名的影響"的人還閱讀
上一篇:返回列表