探討 JS 對於 web.dev 分數的影響

最近 Google 推出讓客戶可以折磨（？開發者的好東西，尤其是那嚴苛到不行的評分標準，更是讓人哀哀叫。為此我拿了之前進行測速的網站進行測試，網站採用了 CentOS 7、Nginx 1.15.6、PHP 7.12.2、Varnish 4.0.5、MySQL 5.7.24，放在 GCP 台灣機房 1Core 3.75G 的規格。

所有分數中最常問的就屬於性能，先進行首次測試，可以看到性能的部分高達 93 分，非常高。

PDF 文件

這樣的分數幾乎就是為了衝高分數而做，已經偏離實際網站運行時常見的狀況，既沒有 Google Analytics、沒有 Facebook、也沒有其他豐富網站內容的 js。

為此就做了個測試，我們來試試看，如果一個高達 93 分的網站，放了 Google Analytics、Adsense、Facebook、Tag manager、Jetpack 等語法後分數會變成多少。

首先第一個放置的莫過於大家常用的 Google Analytics，並進行測試，為了避免過多的圖片導致內容冗長，比較會作為表格並附上 PDF 報表。

經營部落格為了有些收益，就會放置 Google Adsense，本次放置的語法有自動廣告語法放在 Head 及側邊欄放置兩個 Adsense 語法，分數蠻淒慘的馬上從放了 GA 的 92 分掉到剩 73 分。

接著是常見的 Facebook 粉絲專頁語法，透過放置這些 js 讓網站內容越來越豐富，也越來越貼近正常網站會擁有的內容。

一步一步豐富了網站的內容，這時候進階一點的人會放置 Tag manager，我們放置了 console.log(‘hi’);，分數居然多了 1 分，蠻神奇的。

除了 Google Analytics 外，不少人也會使用 Jetpack 內建的瀏覽量功能來統計瀏覽量，而這也是因為 Jetpack 幫你放好了他們的 JS 語法，這次我們只開啟瀏覽量功能，其他都關閉，扣了 4 分。

其實測到這邊就能知道，越來越多的 js 語法，會讓你的分數越來越低，除了 js 外還有圖片，這個網站的圖片都經過特別壓縮，大概在 100~200KB 之間，如果上傳的圖片高於這個值，分數會再繼續被扣，那麼為了壓縮到很小，圖片品質慘不忍睹，沒有 js 豐富網站的內容，圖片看起來還霧霧的這樣的網站是你想給別人看的嗎？

分數僅供參考不要沈迷其中，你的網站不會因為分數 100 分流量就變台灣前 10 名。