数据API 案例 开发者 关于
掌握聚合最新动态了解行业最新趋势
API接口,开发服务,免费咨询服务
新闻动态 > 媒体报道

前端性能测试必备工具清单

那些我們忘記的基本功

Favicon

請不要忘記為你的網站加上它,它就好像是你的網站的 ID。無論你有沒有 favicon.ico ,用戶的瀏覽器依然會請求它。如果你忘記加上這個檔案,你的網站就會返回 404 Not Found,這會讓瀏覽器面紅。。。所以你要小心一點,避免給予用戶負面的第一印象。要解決這個問題,你可以透過 Favicon Generator 生成 favicon 和 manifest 檔案。

Open Graph

加上社交媒體的 meta 標籤,用戶更好地分享你的文章,同時 Google Ranking 也會提高,你可以使用 Meta Tags 產生 Social meta tags。

譯者按:產生 Open Graph Meta Tags,我的博客也加上了 Open Graph。

圖片優化

壓縮圖像

載入圖片會大幅地延長網頁的加載時間,甚至達到整體網頁載入時間的七成。如果可以的話,請使用 SVG,以及壓縮你的那些精緻圖像。你可以使用 Compress PNG 來幫忙壓縮圖像。

CSS 優化

Autoprefixer

解決跨瀏覽器上的 CSS 問題。我們都會在自己喜歡的瀏覽器下寫 CSS 的規矩,而我則是使用 Chrome。雖然如此,你依然需要為這些規矩加上 prefix 來支持所有類型的瀏覽器。 Autoprefixer 會使用現在瀏覽器熱度,對各種屬性支持度的資料,來提供你所需要的 prefix。你可以透過命令行來運用它。

1
2
npm install -g postcss-cli autoprefixer
postcss *.css use autoprefixer -d build

你也可以使用 Webpack 設置,或者使用 Autoprefixer CSS online 。

Purifycss

刪除項目內沒有用到的 CSS 規矩。它會讀取內容 (HTML/JS/PHP) 和 CSS,然後返回必須的 CSS。它是一個非常有用的工具,如果你是在用 CSS 框架比如說 Bootstrap,這個能夠減少很多的 CSS 文檔大小。

安裝方法:

1
npm install -g purify-css

使用方法:

1
purifycss src/css/main.css src/css/bootstrap.css src/js/main.js — min — info — out src/dist/index.css

你可以在 purify-css 的 Github Page 中獲得更多資訊。

minify CSS

你可以使用 purify-css 或使用網上的CSS Compressor

減少載入時間

PageSpeed Insights

PageSpeed Insights 可以用來檢查載入網頁速度,它會分別在手提電話和電腦運行測試。它會使用手提電話的 user-agent,以及 Desktop 的 user-agent。PageSpeed 會檢查網頁時候已經應用網頁的最佳實踐,並提供一個 0﹣100 的分數,同時提供如何提高分數的意見。

GZIP

開啟 GZIP 壓縮,是其中一個減少網頁載入速度的最快改善方法。Just Do IT,設置 GZIP,並讓你的用戶享受飛一般的感受,下圖是節省流量的效果圖。

PICSrush GZIP 測試圖

你可以在Check GZIP compression 網站中測試你的網站是否已經開啟 GZIP 壓縮功能。

CDN

根據維基百科,內容傳遞網路(CDN)是指一種透過互聯網互相連接的電腦網絡系統,利用最靠近使用者的伺服器,更快地傳送檔案。簡單來說,CDN 就是一種網絡上的緩存系統。你可以使用免費的 CloudFlare 來達到這個效果。

編者按:你可以用 cdnjs 或其他 cdn。

優化平台

Sentry

對於前端工程師來說,它是一個非常正的工具。Sentry 檢查在瀏覽器環境下,是否存在任何 uncaught JavaScript exceptions,主動追蹤發生的錯誤,並提供報告。它提供豐富的 API,使得你可以自定義如何在其他地方顯示這些數據。

它會透過 Email, SMS 或 Slack 通知你,當前端環境發生錯誤時,它亦會提供用戶回應。

Google Tag Manager

Google Tag Manager 可以一站式管理你所有會傳送到第三方,例如 Facebook 和 Twitter 的 JavaScript 代碼。透過使用它,你減少網頁的載入時間,以及更加方便地在同一個地方管理 JavaScript 代碼。

Thanks for reading! feel free to leave a comment if you think I miss something.

If you think other people should read this, press the

原文来自:Calpa's Blog

掌握聚合最新动态了解行业最新趋势
API接口,开发服务,免费咨询服务
新闻动态 > 媒体报道
前端性能测试必备工具清单
发布:2017-06-28

那些我們忘記的基本功

Favicon

請不要忘記為你的網站加上它,它就好像是你的網站的 ID。無論你有沒有 favicon.ico ,用戶的瀏覽器依然會請求它。如果你忘記加上這個檔案,你的網站就會返回 404 Not Found,這會讓瀏覽器面紅。。。所以你要小心一點,避免給予用戶負面的第一印象。要解決這個問題,你可以透過 Favicon Generator 生成 favicon 和 manifest 檔案。

Open Graph

加上社交媒體的 meta 標籤,用戶更好地分享你的文章,同時 Google Ranking 也會提高,你可以使用 Meta Tags 產生 Social meta tags。

譯者按:產生 Open Graph Meta Tags,我的博客也加上了 Open Graph。

圖片優化

壓縮圖像

載入圖片會大幅地延長網頁的加載時間,甚至達到整體網頁載入時間的七成。如果可以的話,請使用 SVG,以及壓縮你的那些精緻圖像。你可以使用 Compress PNG 來幫忙壓縮圖像。

CSS 優化

Autoprefixer

解決跨瀏覽器上的 CSS 問題。我們都會在自己喜歡的瀏覽器下寫 CSS 的規矩,而我則是使用 Chrome。雖然如此,你依然需要為這些規矩加上 prefix 來支持所有類型的瀏覽器。 Autoprefixer 會使用現在瀏覽器熱度,對各種屬性支持度的資料,來提供你所需要的 prefix。你可以透過命令行來運用它。

1
2
npm install -g postcss-cli autoprefixer
postcss *.css use autoprefixer -d build

你也可以使用 Webpack 設置,或者使用 Autoprefixer CSS online 。

Purifycss

刪除項目內沒有用到的 CSS 規矩。它會讀取內容 (HTML/JS/PHP) 和 CSS,然後返回必須的 CSS。它是一個非常有用的工具,如果你是在用 CSS 框架比如說 Bootstrap,這個能夠減少很多的 CSS 文檔大小。

安裝方法:

1
npm install -g purify-css

使用方法:

1
purifycss src/css/main.css src/css/bootstrap.css src/js/main.js — min — info — out src/dist/index.css

你可以在 purify-css 的 Github Page 中獲得更多資訊。

minify CSS

你可以使用 purify-css 或使用網上的CSS Compressor

減少載入時間

PageSpeed Insights

PageSpeed Insights 可以用來檢查載入網頁速度,它會分別在手提電話和電腦運行測試。它會使用手提電話的 user-agent,以及 Desktop 的 user-agent。PageSpeed 會檢查網頁時候已經應用網頁的最佳實踐,並提供一個 0﹣100 的分數,同時提供如何提高分數的意見。

GZIP

開啟 GZIP 壓縮,是其中一個減少網頁載入速度的最快改善方法。Just Do IT,設置 GZIP,並讓你的用戶享受飛一般的感受,下圖是節省流量的效果圖。

PICSrush GZIP 測試圖

你可以在Check GZIP compression 網站中測試你的網站是否已經開啟 GZIP 壓縮功能。

CDN

根據維基百科,內容傳遞網路(CDN)是指一種透過互聯網互相連接的電腦網絡系統,利用最靠近使用者的伺服器,更快地傳送檔案。簡單來說,CDN 就是一種網絡上的緩存系統。你可以使用免費的 CloudFlare 來達到這個效果。

編者按:你可以用 cdnjs 或其他 cdn。

優化平台

Sentry

對於前端工程師來說,它是一個非常正的工具。Sentry 檢查在瀏覽器環境下,是否存在任何 uncaught JavaScript exceptions,主動追蹤發生的錯誤,並提供報告。它提供豐富的 API,使得你可以自定義如何在其他地方顯示這些數據。

它會透過 Email, SMS 或 Slack 通知你,當前端環境發生錯誤時,它亦會提供用戶回應。

Google Tag Manager

Google Tag Manager 可以一站式管理你所有會傳送到第三方,例如 Facebook 和 Twitter 的 JavaScript 代碼。透過使用它,你減少網頁的載入時間,以及更加方便地在同一個地方管理 JavaScript 代碼。

Thanks for reading! feel free to leave a comment if you think I miss something.

If you think other people should read this, press the

原文来自:Calpa's Blog

×
企业用户认证,
可获得1000次免费调用
注册登录 > 企业账户认证 > 领取接口包
企业用户认证领取接口包 立即领取
× 企业用户认证,
可获得1000次免费调用,立即领取>
数 据 驱 动 未 来
Data Drives The Future