前言
本文介紹一些檢測網頁效能的方式，藉此可知要優化網站的那個部分，對效能的提升幫助較大。
註：本文所指的網頁效能不僅僅是網頁載入速度，還包括其他向度，像是行動式網頁、網站可近性等。
[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 Insights
- WebPageTest
- GTMetrix
- mobiReady
- Pingdom Tools
- dareboost (商業軟體，有免費額度)
PageSpeed Insight 應該是所有工具最重要的，因 Google 明確說到 Google 搜尋引擎會參考這個跑分做為網站排名的依據 (參考這裡)。由於 PageSpeed Insight 和 Lighthouse 的向度重疊，筆者認為直接用 Lighthouse 量測應該也可以，畢竟都是同一家公司出的檢測工具。但 PageSpeed Insight 和 Lighthouse 所測量的向度有些差異，時間允許的話，最好兩個優化工具的指標都去完成。時間不足的話，則以 PageSpeed Insight 的項目優先處理。
在所有的檢測網站中，筆者最常用 WegPageTest，因為這個網站不僅有自己的效能檢測報表，還可以順便跑 Lighthouse。
動手做時間：實際使用 PageSpeed Insight
PageSpeed Insight 使用起來相當簡單，在該程式的輸入框填入網址即可。如下：
{{< figure src="img/web-programming/pagespeed-insight-input.png" alt="PageSpeed 的輸入框" width="85%">}}
這個程式執行的時間不會太久，稍微等一下無妨。
以下是筆者的網站跑出來的桌面環境跑分：
{{< figure src="img/web-programming/pagespeed-insight-desktop.png" alt="PageSpeed Insight 桌面環境跑分" width="85%">}}
PageSpeed Insight 的指標每隔一陣子會改版。在筆者撰寫這篇文章的時候，PageSpeed Insight 著重的是網站使用者核心指標。這些指標大抵上都和網頁效能相關。
Google 官方管理員部落格會不定期更新文章，這算是第一手資料。或是追蹤一些 SEO 專家的剖落格，這些部落格的文章會有整理過的重點。不論如何，得根據這些注意事項，時時更新自己的網站。
筆者在寫這篇文章的時候，剛把網站改版過。頁面上的廣告比先前少很多，所以可以跑到還不錯的分數。
以下是筆者的網站跑出來的行動環境跑分：
{{< figure src="img/web-programming/pagespeed-insight-mobile.png" alt="PageSpeed Insight 行動環境跑分" width="85%">}}
行動環境要跑到高分很難。筆者拿幾個正體中文的技術部落格來跑，分數都落在 30 至 40 分之間。
除了優化網頁外，不要放太多網頁廣告也是重點之一。其實網頁廣告所用的 JavaScript 命令稿往往比網頁本身所用的多。如果網頁優化碰到瓶頸，不妨把點擊率低或獲利低的廣告去掉看看。
動手做時間：實際使用 LightHouse
原本 WebPageTest 有 LightHouse 的跑分，但這個部分已經壞掉了。所以筆者已經改用 LightHouse 的 Chrome 外掛，並且改寫了這篇文章的部分內容。
由於 LightHouse 是 Chrome 外掛，不會有網頁可用。請讀者自行到 Chrome Web Store 抓 LightHouse 的外掛。
安裝完後，在工具列上會多一個 LightHouse 的啟動按鈕。以 Chrome 瀏覽目標網頁時，開啟 LightHouse，按下「Generate report」(產生報表) 即可：
{{< figure src="img/web-programming/lighthouse-button.png" alt="LightHouse 的主程式">}}
產生報表的時間不會太久，請稍候。以下是筆者針對同一頁面的 LightHouse 跑分：
{{< figure src="img/web-programming/lighthouse-report.png" alt="LightHouse 的跑分 (節錄)" width="80%">}}
Performance (效能) 的部分很難拉高。筆者查了一下，發現廣告的 JavaScript 命令稿吃掉不少效能跑分。
另外，筆者把這個網站做成漸進式網頁應用程式 (progressive web application)。所以這個大項是及格的。對於內容型網站來說，使用漸進式網頁程式的話，回訪的速度會相當快，因為 CSS 樣式表、JavaScript 命令稿等靜態資源都預存好了，只要重跑網頁和廣告的部分即可。
其他的網頁檢測指標
筆者將同樣的網頁去跑 GTmetrix，雖然載入時間還過得去，但跑分並不漂亮：
{{< figure src="img/web-programming/gtmetrix-score.png" alt="GTmetrix 跑分" width="85%">}}
這主要是因為 GTmetrix 採用不同的指標所造成的，GTmetrix 不使用網頁載入速度，而採用舊版 PageSpeed 和 YSlow 為指標，和目前的 PageSpeed Insight 相異。不過，GTMetrix 提供的建議項目較 Lighthouse 多，可以做為改善網頁的參考。
由於 GTmetrix 並不是 Google SEO 的評分項目，行有餘力再來做 GTmetrix 的 SEO 即可。
mobiReady 則是另外一個團隊所製作的檢測軟體，和 PageSpeed Insight 的計分方式無關，行有餘力的話可以試著從其建議改善網頁。
Pingdom Tools 則是檢測網頁載入時間的工具，單純想測網頁效能的話可以試一試。
dareboost 除了前述的向度外，還會加上安全檢測等其他向度。但免費額度僅每個月 5 次，有需要的讀者可自行付費購買。