歡迎光臨
每天分享高質量文章

值得收藏!Web開發的各種性能工具

嗨,各位,又到了周末總結時間!得益於大量的 Grunt 和 Gulp 插件,我們可以輕鬆實現網站資料的可視化,雖然深入理解這些工具還比較困難,但分門別類的將它們列出來,也是很有幫助的。

內容分髮網絡(CDN)

CDN 可以幫你把網站的資源分發到世界各地,有助於提高網站的響應速度,當然,這對於那些特殊地區的用戶是收效甚微的。

CloudFlare

CloudFlare 的強大之處在於它可以成為你的 DNS 服務器(CDN 只是它所有服務的一個組成部分),這樣對你的網站發起的所有請求都會經過它。

CloudFlare 的 CDN 在過去十五年的設計和發展中,並沒有一味的守舊和固步自封。我們的專利技術中充分利用了最新的技術進步,包括並不限於硬體、web 服務器和網絡路由。換言之,我們創新的建設了下一代的 CDN。新的 CDN 配置簡單、價格低廉,其性能也一定比你使用過的任何傳統 CDN 都要優秀。

MaxCDN

CSS-Tricks 當前就在使用 MaxCDN 托管所有的靜態資源。它可以無縫地融合 WordPres 和 W3 的所有快取資源,所以我們無需做什麼特別處理,即可將資源移入 CDN,並能保證鏈接的準確性。

對於一個博客來說,考慮到其中的大檔案主要是 JavaScript、CSS 和圖片,而不是視頻等型別,這貸款占用的可真多。

我們的 CDN 服務同樣是一個網站加速器和實時控制中心。創建它,就是為了讓網站的用戶和運維都能從下一代 CDN 中獲得最大收益。

CloudFront

亞馬遜網絡服務(AWS)版本的 CDN。

亞馬遜 CloudFront 是一個內容分髮網絡服務。它可以無縫融合入其他的亞馬遜網絡服務產品,為開發者和企業分發內容到最終用戶手中提供了一種簡單的方式,整個過程都具有低延遲、高轉換速度的特點,也沒有最小使用量的強制要求。

CDNperf

上述的 CDNs 並不能托管你任意的資源,它們往往只是托管最頻繁用到的檔案。雖然對於線上產品來說將資源和服務器托管到私有的 CDN 上並不是最好的方式,但這種方式對於分發資源來說仍然是快速和簡單的。

CDNperf 可以幫你找出最快和最可信賴的 JavaScript CDNS,讓你的網站更快更有朝氣。

性能測試

下麵的這些性能測試工具,使用了量化的方式測試了網站中諸如首位元組加載時間(time to first byte)或者渲染時間等表現。有些工具還會檢查特別檢查資源是否被快取,多個 CSS 或 JS 檔案是否值得合併。

WebPagetest

WebPagetest 是性能測試的黃金標準,它提供了多方面的量化指標用於性能測試,比如有一個基本的評分,用於評價當前頁面優化的水平;有一個截圖,顯示頁面加載後的視覺效果;還有一個瀏覽器加載資源的瀑布流…

根據用戶瀏覽器真實的連接速度,在全球範圍內進行網頁速度測試,並提供詳細的優化建議。

通過使用 API wrapper,也可以將 WebPagetest 的相關服務添加到 NPM 模塊和命令列工具中。

webpagetest-mapper:將 WebPageTest 的測試資料轉換為可讀的文件格式。

WPT Bulk Tester:使用 Google Docs 測試多個 URLs(如果你擁有 API key,也可以使用 webpagetest.org 來做這件事,或者其他公開可訪問的實體)。

Yslow

Yslow 基於 Yahoo 的高性能網頁教條,分析網頁的性能並給出響應緩慢的原因。

Google PageSpeed

PageSpeed 根據網頁最佳實踐分析和優化測試的網頁。

PageSpeed 也有一個 CLI(Command Line Interface)工具:PSI(PageSpeed Insights with reporting)

在構建行程中,可以使用 PSI 測試移動端和桌面端的性能,最終得到可讀性良好的測試結果。

我的網站都開銷到哪裡去了?

評估網站在世界各地為每個移動端用戶支出的維護成本。

Pingdom 網站速度測試

輸入 URL 地址,即可測試頁面加載速度,分析並找出性能瓶頸。

SpeedCurve

SpeedCurve 既可以讓你追蹤競爭對手的性能表現,也可以追蹤自己的性能表現。使用 SpeedCurve 時,你可以查看某個因素在不同站點的速度表現。對於移動用戶來說,他們希望網站在手機上加載起來要快於電腦,如果感到加載遲緩,往往會迅速關上網頁,所以,網站的響應速度對他們很重要。

Calibre

Calibre 可以幫你追蹤頁面的加載時間,以及頁面大小。問題頁面(Janky page)?是的,Calibre 會直接告訴你哪些頁面有問題。

GT Metrix

GT Metrix 結合了 Google PageSpeed 和 YSlow,幫助開發者創建快速、高效和全面優化的網頁瀏覽體驗。

perf.js

在開發過程中,將性能的時序情況顯示在頁面上。

perf bar

一種簡單的方式,用於快速收集和查看網頁性能,提供預置的量化標準,也支持自定義的量化標準。

grunt-perfbudget

用於評估性能的 Grunt task。 grunt-perfbudget 使用 WebPagetest 的公有或私有實體在特定的 URL 進行測試。它會將測試結果和你預期的性能期望做比較,如果小於預期,那麼這個 task 就順利完成了,如果超過了你預期的性能期望,那麼就會報告失敗,並且會幫助你分析超出預期的原因。

Sitespeed

Sitespeed.io 是一個基於最佳實踐以及一些加載時序等量化標準的開源工具,有助於開發者分析網頁的加載速度和渲染性能。它會從開發者的站點收集多個頁面的資料,根據最佳實踐等規則來分析這些網頁,並將結果以 HTML 的形式輸出,或者以數值的形式發送到 Graphite。

speedgun

該網站允許你使用 Speedgun.js 收集任意公開站點的性能資料。它會運行五次,並顯示一個友好的示圖,幫助開發者瞭解當前頁面的加載過程。

gulp size

顯示專案大小。

瀏覽器工具盒插件

Chrome 開發者工具

在 Chrome 的開發者工具中,對於評估性能有兩個非常有用的標簽:Audits 和 Network。

Audit 面板用於分析加載的頁面。它可以提供優化建議,減少頁面加載時間,加快頁面的響應速度。

Network 面板以動態的方式實時地展示了資源的請求和下載。雖然辨析和定位這些請求會比純粹的加載頁面多花一些時間,但這些消耗對於指導頁面的性能優化是非常重要的。

火狐開發者瀏覽器

該瀏覽器是為開發者而創造的,專註於服務開發者的工作流。這是有史以來第一次,將構建、測試和擴展等服務集中於一體。

更多信息請查看 MDN 上的 Network Monitor。

Page performance

這個擴展插件應用於 Chrome 瀏覽器,可以開速分析當前頁面的性能。如果瀏覽器打開了多個標簽,那麼該插件會自動分析當前頁面的性能表現。

審查

PerfAudit

我們審查頁面的加載和渲染性能。對於令人反感的響應緩慢和問題頁面,我們有義不容辭的使命提供快速、穩定和準確的頁面。

Perfmonkey

PerfMonkey 讓追蹤頁面的渲染性能變得無比簡單。

SVG 和圖片

ImageOptim

ImageOptim 是一個免費的應用,它在減少圖片體積、提高加載速度的同時,還不會犧牲圖片質量。它優化了壓縮引數、移除了無用的頭信息和非必要的顏色配置信息。

它也可以被集成到 Grunt 和 Gulp 中。

SVGO

SVG Optimizer 是一個基於 Nodejs 的 SVG 矢量圖形優化工具。

如果你需要的是交互界面的操作,而不是 CLI,那麼可以下載這個 APP。

SVGOMG

SVGOMG 是 SVGO’s Missing GUI 的縮寫,旨在揭露 SVG 檔案的主要問題,而不具有 SVGO 的完整可配置項。

手動優化 SVGs

類似於其他的圖形檔案,SVG 也應該在上線前被優化。雖然有許多類似 Raymond 的工具可以幫你做這種優化,但最好的方式還是深入理解其細節並做一些手動的優化。

Triamge

Triamge 是一個擴平臺的 GUI 和 CLI 工具,用於優化網站的圖片檔案。它組合使用 optipng、pngcrush、advpng 和 jpegoptim,並根據檔案型別做優化(最新版本中,已經支持 PNG 和 JPG)。

CSS

CSS Triggers

該網站用於展示哪些 CSS 屬性可以影響瀏覽器的佈局、渲染和其他組合操作。

更多有關 CSS-triggers 的訊息,可以點擊這裡查看。

CSS Stats

該網頁應用以可視化的形式展示了開發者專案中有關 CSS 的統計信息。

CSS Shrink

CSS 壓縮工具。由於 CSS 是頁面渲染的核心檔案,所以必須保持輕巧,便於快速響應和渲染。

uncss

UnCSS 是一個用於移除腳本中無用 CSS 的工具。它可以審查多個檔案,也可以審查由 JavaScript 註入的 CSS。

它也可以被集成到 Grunt 和 Gulp 中。

Critical path

提取和整合 HTML 中關鍵的 CSS。

HTML

HTMLMinifier

HTMLMinifier 是一個高度可配置、經過完善的測試、基於 JavaScript 的 HTML 壓縮工具,並且內置了代碼審查類的工具。

gulp-htmlmin

用於壓縮 HTML 的 gulp 插件。

grunt-contrib-htmlmin

用於壓縮 HTML 的 grunt 插件。

JavaScript

uglifyjs

JavaScript 解析器、混淆、壓縮和美化工具集。

它也可以被集成到 Grunt 和 Gulp 中。

你也許並不需要某些 jQuery 插件

jQuery 及其附屬工具都是非常優秀的專案,使用它們往往使開發工作輕鬆而又快捷。

另一方面,如果你正在開發一個庫,那麼你需要思考一下是否真的需要依賴於 jQuery。也許你只需要引入幾行代碼,就可以放棄引入一個庫實現某些功能。如果你的庫只是針對於高級瀏覽器,那麼可能直接呼叫瀏覽器的內置函式就可以實現相關功能了。

擴展閱讀

  • Usertiming API
  • Jank Free
  • Scrolling performance
  • Mobile web performance auditing
  • Gone in 60 frames per second
  • Udacity course on rendering performance

原文出處:Robin Rendle

譯文出處:南北

鏈接:http://www.w3cplus.com/performance/performance-tools.html

赞(0)

分享創造快樂