檢測網站效能

    前言

    本文介紹一些檢測網頁效能的方式,藉此可知要優化網站的那個部分,對效能的提升幫助較大。

    註:本文所指的網頁效能不僅僅是網頁載入速度,還包括其他向度,像是行動式網頁、網站可近性等。

    [2020/07/05] 更新 修改優化工具的說明,移除不合時宜的內容。

    開始之前

    優化 (optimization) 沒有最好,只有更好,因此,如何在有限的時間內進行最大的優化就是重要的課題。這類檢測軟體有時候跑出來的建議事項很多,但不一定要全盤接收。偶爾還會看到不同檢測軟體給予相衝突的建議,所以還是要自己判斷一下那些項目值得去改。

    如果跑分已經到 90 以上了,再衝到 99 或 100 對實際的使用者體驗其實助益不大,這時候就不需花太多時間在優化網站上。反之,如果跑分只有 40 至 50,就暗示網站還有一些改善空間。

    跑分本身不一定代表網頁載入速度,有時候是由合格項目的多寡來決定;由於每個檢測軟體所用的準則不同,同樣的網站有時會在跑分上差異很大,仍然要加入自己的判斷,不用過度拘泥在分數高低上。

    一切都是為了搜尋引擎優化 (SEO)

    除非我們手上的網站是臉書 (Facebook)、推特 (Twitter)、水管 (Youtube) 等大型平台,可以把使用者長時間黏在網站上;一般來說,使用者不會在單一網站上停留太久。

    此外,一般使用者不太會去記網站的網址,而會透過搜尋引擎來找尋網站。因此,如何增進網站在搜尋結果的排名 (rank),對網站是重要的課題。

    雖然很多書籍會強調 SEO (搜尋引擎優化),網站的本質 (content) 還是要顧。像是內容型網站就是以優質的內容吸引使用者,應用程式型網站則是滿足某項使用者的實際需求,使用者才會在日後回訪同一網站。相對來說,加強 SEO 是為了爭取使用者第一次進入網站的機會。刻意操作網站的 SEO 但網站本質不佳,仍然無法長期經營網站。

    目前 Google (谷哥) 仍是搜尋引擎的龍頭 (參考這裡),除非我們要經營大陸 (Mainland China) 等市場,我們仍然要優先考慮 Google 對 SEO 的意見來優化我們的網站。而 Google 已經在近幾年明確說出行動優先 (mobile first) 是其 SEO 的參考依據 (參考這裡),我們就可依此來改善網站。

    常見的網頁效能評估軟體

    以下是常見的網頁效能評估軟體:

    在這些軟體中,Lighthouse 是最重要的,因為 Lighthouse 是 Google 官方出的網頁效能評估軟體。目前 Lighthouse 評估的面向不僅僅是網站載入速度,而是綜合以下向度:

    • 效能 (performance)
    • 漸進式網頁程式 (progressive web application)
    • 可近性 (Accessibility)
    • 最佳實務 (Best Practice)
    • 搜尋引擎優化 (SEO)

    從 Lighthouse 所評估的向度,可窺見目前 Google 注重的項目有那些,就可以做為我們改善網站的目標。在 Lighthouse 的跑分結果頁面上就會有其監測 (audit) 的項目,這裡不重覆列出。

    如果行有餘力的話,還可以去試其他的網頁效能評估軟體,像是本文所列的 YSlow 和 coach,雖然必要性沒那麼高,但依照其建議,的確可以進一步改善使用者體驗。

    常見的網頁效能評估線上工具

    前述的工具需要安裝到自己的電腦上,不過,也有一些線上軟體,可在免安裝的情形下檢測自己的網頁,像是以下的檢測網站:

    PageSpeed Insight 應該是所有工具最重要的,因 Google 明確說到 Google 搜尋引擎會參考這個跑分做為網站排名的依據 (參考這裡)。由於 PageSpeed Insight 和 Lighthouse 的向度重疊,筆者認為直接用 Lighthouse 量測應該也可以,畢竟都是同一家公司出的檢測工具。但 PageSpeed Insight 和 Lighthouse 所測量的向度有些差異,時間允許的話,最好兩個優化工具的指標都去完成。時間不足的話,則以 PageSpeed Insight 的項目優先處理。

    在所有的檢測網站中,筆者最常用 WegPageTest,因為這個網站不僅有自己的效能檢測報表,還可以順便跑 Lighthouse。

    動手做時間:實際使用 PageSpeed Insight

    PageSpeed Insight 使用起來相當簡單,在該程式的輸入框填入網址即可。如下:

    PageSpeed 的輸入框

    這個程式執行的時間不會太久,稍微等一下無妨。

    以下是筆者的網站跑出來的桌面環境跑分:

    PageSpeed Insight 桌面環境跑分

    PageSpeed Insight 的指標每隔一陣子會改版。在筆者撰寫這篇文章的時候,PageSpeed Insight 著重的是網站使用者核心指標。這些指標大抵上都和網頁效能相關。

    Google 官方管理員部落格會不定期更新文章,這算是第一手資料。或是追蹤一些 SEO 專家的剖落格,這些部落格的文章會有整理過的重點。不論如何,得根據這些注意事項,時時更新自己的網站。

    筆者在寫這篇文章的時候,剛把網站改版過。頁面上的廣告比先前少很多,所以可以跑到還不錯的分數。

    以下是筆者的網站跑出來的行動環境跑分:

    PageSpeed Insight 行動環境跑分

    行動環境要跑到高分很難。筆者拿幾個正體中文的技術部落格來跑,分數都落在 30 至 40 分之間。

    除了優化網頁外,不要放太多網頁廣告也是重點之一。其實網頁廣告所用的 JavaScript 命令稿往往比網頁本身所用的多。如果網頁優化碰到瓶頸,不妨把點擊率低或獲利低的廣告去掉看看。

    動手做時間:實際使用 LightHouse

    原本 WebPageTest 有 LightHouse 的跑分,但這個部分已經壞掉了。所以筆者已經改用 LightHouse 的 Chrome 外掛,並且改寫了這篇文章的部分內容。

    由於 LightHouse 是 Chrome 外掛,不會有網頁可用。請讀者自行到 Chrome Web Store 抓 LightHouse 的外掛

    安裝完後,在工具列上會多一個 LightHouse 的啟動按鈕。以 Chrome 瀏覽目標網頁時,開啟 LightHouse,按下「Generate report」(產生報表) 即可:

    LightHouse 的主程式

    產生報表的時間不會太久,請稍候。以下是筆者針對同一頁面的 LightHouse 跑分:

    LightHouse 的跑分 (節錄)

    Performance (效能) 的部分很難拉高。筆者查了一下,發現廣告的 JavaScript 命令稿吃掉不少效能跑分。

    另外,筆者把這個網站做成漸進式網頁應用程式 (progressive web application)。所以這個大項是及格的。對於內容型網站來說,使用漸進式網頁程式的話,回訪的速度會相當快,因為 CSS 樣式表、JavaScript 命令稿等靜態資源都預存好了,只要重跑網頁和廣告的部分即可。

    其他的網頁檢測指標

    筆者將同樣的網頁去跑 GTmetrix,雖然載入時間還過得去,但跑分並不漂亮:

    GTmetrix 跑分

    這主要是因為 GTmetrix 採用不同的指標所造成的,GTmetrix 不使用網頁載入速度,而採用舊版 PageSpeed 和 YSlow 為指標,和目前的 PageSpeed Insight 相異。不過,GTMetrix 提供的建議項目較 Lighthouse 多,可以做為改善網頁的參考。

    由於 GTmetrix 並不是 Google SEO 的評分項目,行有餘力再來做 GTmetrix 的 SEO 即可。

    mobiReady 則是另外一個團隊所製作的檢測軟體,和 PageSpeed Insight 的計分方式無關,行有餘力的話可以試著從其建議改善網頁。

    Pingdom Tools 則是檢測網頁載入時間的工具,單純想測網頁效能的話可以試一試。

    dareboost 除了前述的向度外,還會加上安全檢測等其他向度。但免費額度僅每個月 5 次,有需要的讀者可自行付費購買。

    【分享本文】
    Facebook Twitter LinkedIn LINE Skype EverNote GMail Yahoo Yahoo
    【追蹤本站】
    Facebook Facebook Twitter Parler