【翻譯】前端性能優化必備工具清單

日期: 19/06/2017

前言

在網頁開發的世界裡,尤其是前端開發,我們會用很多時間尋找最好的設計,以及最好的內容。雖然這是沒有錯的,但是,我們會忘記去優化我們的網頁。。。這會讓用戶需要很久的時間,比如說,瀏覽器需要六秒到十秒以上才能完成整個渲染過程。。。

在這篇文章,我會分享優化網頁的檢查清單。如果你覺得我有錯漏的地方,請在下面留言。這張清單會包含一些優化搜尋引擎排名 (SEO) 的技巧,以及減少網頁加載時間的最佳實踐。

編者按:很多都是我聽過或從來沒有用過的工具,我還是要學習一個。。。

馬上開始!

那些我們忘記的基本功

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。你可以透過命令行來運用它。

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 文檔大小。

安裝方法:

npm install -g purify-css

使用方法:

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,並讓你的用戶享受飛一般的感受,下圖是節省流量的效果圖。

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

另外,你也可以在GZIP COMPRESSION CHECKER 這個工具測試你的網站。(謝謝讀者 Karen 提供)

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 代碼。

<iframe width="100%" height="300" src="https://www.youtube.com/embed/KRvbFpeZ11Y" frameborder="0" allowfullscreen></iframe>

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 💚 button, tweet and share the post. Remember to follow me on Medium so you can get notified about my future posts.

譯者的話

這次翻譯英文文章,真的是很有趣呢,不過要寫起來感覺沒有自己從零開始寫一篇那麼流暢。

一開始我是去問問人家,可不可以翻譯一下他們的文章?結果就取得同意了。

這次翻譯這一篇文章,讓我了解到很多對我來講是新的工具,比如說 Sentry 以及Google Tag Manager。我還是一個萌新,感覺前端的路還有很長要走啊。。。


原文鏈接: Frontend Performance Check-list For Production - Medium

原作者:Youssouf El Azizi <small>(Founder http://picsrush.com , React js developer)</small>

如果你覺得我的文章對你有幫助的話,希望可以推薦和交流一下。歡迎關注和 Star 本博客或者關注我的 Github