網頁程式設計教學:檢測網站效能

PUBLISHED ON DEC 6, 2018 — WEB

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

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

    開始之前

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

    如果跑分已經到 90 以上了,再衝到 99 或 100 對實際的使用者體驗其實助益不大;反之,如果跑分只有 40 至 50,就代表改善空間較大。跑分本身不一定代表網頁載入速度,有時候是由合格項目的多寡來決定;由於每個檢測軟體所用的準則不同,同樣的網站有時會在跑分上差異很大,仍然要加入自己的判斷,不用過度拘泥在分數高低上。

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

    除非我們手上的網站是臉書 (Facebook)、推特 (Twitter)、水管 (Youtube) 等大型平台,可以把使用者長時間黏在網站上;一般來說,使用者不會在單一網站上停留太久,也不會去記網站的網址,而會透過搜尋引擎來找尋網站。因此,如何增進網站在搜尋結果的排名 (rank),對網站是重要的課題。

    網站的本質 (content) 要顧,像是內容型網站就是以內容本身吸引使用者,應用程式型網站則是滿足某項功能,使用者才會在日後再回來使用網站。相對來說,SEO (搜尋引擎優化) 則是爭取使用者第一次進入網站的機會。刻意操作 SEO 但本質不佳,仍然無法長期經營網站。

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

    常見的網頁效能評估軟體

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

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

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

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

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

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

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

    PageSpeed Insight 應該是所有工具最重要的,因 Google 明確說到 Google 搜尋引擎會參考這個跑分做為網站排名的依據 (參考這裡)。由於 PageSpeed Insight 和 Lighthouse 的向度重疊,筆者認為直接用 Lighthouse 量測應該也可以,畢竟都是同一家公司出的檢測工具。

    在所有的檢測網站中,筆者最常用 WegPageTest,因為這個網站不僅有自己的效能檢測報表,還可以順便跑 Lighthouse。使用起來相當簡單,在 WebPageTest 的測試項目中填入網址,如下:

    WebPageTest 選單

    在此處,我們測試重覆載入所需的時間,並加上 Lighthouse 測試。這些量測項目是選擇性的,如果想節省測試時間,可以把這些選項關掉。

    接下來要等待測試跑完,整個過程約在數分鐘內,會受網站實質的內容所影響:

    WebPageTest 運作中

    以下是筆者的網站跑出來的跑分:

    WebPageTest 跑分

    這個算是比較簡略的跑分,還有其他報表可看。

    以下是筆者的網站跑出來的結果:

    WebPageTest 結果

    這裡面有幾個重要時間指標:

    • First Byte (TTFB, Time to First Byte)
    • Start Render
    • Load Time
    • Speed Index

    前三項是比較傳統的指標,我們逐一來看。First Byte (TTFB) 是指從瀏覽器發出請求 (request) 到接收回應 (response) 所需的時間,這個時間包括很多因素,像網路連線速度、主機效能、網頁程式本身效能等。Start Render 是指解析完網頁,開始輸出的時間點,相當於 DOM ready。Load Time 則是指整個頁面載入的時間,相當於 page loaded。

    至於 Speed Index 則是一個相對新的指標,代表輸出畫面上可見元素所需的時間,這個時間會大於 start render 但小於 load time。為什麼會有這個指標呢?因為現在網頁上有許多不可視的元素,像是在網頁尾端的 JavaScript 命令稿,而這些代碼處理的時間其實不會影響使用者觀看頁面,所以 speed index 不列入這些時間。Speed Index 要高的技巧在於把可視的內容放在網頁前段,把 JavaScript 命令稿等不可視的內容放在網頁尾端。

    對於內容型網站來說,speed index 會比 load time 重要,因為使用者不需等網頁所有的 JavaScript 程式都跑完才開始瀏覽網頁,只要看到網頁內容即可。對於應用程式型網站來說,則要注重 load time,因為網頁需依賴頁面上的 JavaScript 程式才能正常運作。

    按下上方跑分中的「Lighthouse PWA Score」的方框,會秀出 Lighthouse 的跑分:

    WebPageTest 附帶的 LightHouse 跑分

    可看出來本網站己經符合漸進式網頁程式 (Progressive Web App) 的準則,所以讀者可以把本網站安裝在自己的電腦中離線觀看。此外,在其他項目上的跑分也不錯。

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

    GTmetrix 跑分

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

    mobiReady 則是另外一個團隊所製作的檢測軟體,和 PageSpeed Insight 的計分方式無關,行有餘力的話可以試著從其建議改善網頁。Pingdom Tools 則是檢測網頁載入時間的工具,單純想測網頁效能的話可以試一試。dareboost 除了前述的向度外,還會加上安全檢測等其他向度,但免費額度僅每個月 5 次,有需要的讀者可自行付費購買。