2016年8月8日

Blogger 使用 Pagespeed Insights 網站速度效能檢測心得

A+
pagespeed-insights-blogger-test-Blogger 使用 Pagespeed Insights 網站速度效能檢測心得經營部落格的站長們,一開始在意的是門面(版面)是否美觀;過一陣子之後,注意力可能會轉移到網站的效能、載入速度能否更快,其中最常使用的檢測工具就是 Google 的「PageSpeed Insights」。

這個 Blogger 中文論壇貼文詢問「Pagespeed Insight 分數很低怎麼辦 ?」,其實這類問題的詢問度很高,那麼就藉這個機會一併整理回答。

(圖片出處: pixabay.com)


一、Blogger 空白網站測試結果


先來看看一個空白的 Blogger 網站,Pagespeed 會拿到幾分。

這是「WFU BLOG 的備份網站」,用途在於「自動備份主站文章」,網站自從建立後,沒動過任何地方,因此版面十分醜陋。

測試結果如下:

pagespeed-test-result-wfublog-backup-1-Blogger 使用 Pagespeed Insights 網站速度效能檢測心得

上圖可看到,在範本最乾淨的狀態下,電腦版測試結果也只有 87 分,不能再高了...


pagespeed-test-result-wfublog-backup-2-Blogger 使用 Pagespeed Insights 網站速度效能檢測心得

展開需要改善的項目,參照上圖 A~D:

A:並非所有 JS 都適合改成非同步執行,對程式碼不熟的話,這一項最好別亂動。你也可以將 JS 的位置往後移,來修正這個項目。但究竟可以移到哪裡、才不會影響網站相關程式的執行,這需要專業知識,沒把握請不要自己來。

B:這些 CSS 都是 Blogger 會自動載入的檔案,我們動不了

C:Blogger 平台對於這一點,也是動不了

D:唯一可以自行處理的是壓縮 HTML,可參考「將範本中的 HTML/Javascript/CSS 最佳化處理」、「活用 HTML/Javascript/CSS 格式化及壓縮工具」→「三、HTML 推薦的壓縮工具」。

不過壓縮 HTML 帶來的後果,是範本內容難以閱讀,且網站能提升的效果,其實是不足以感覺得出來的。



二、WFU BLOG 測試結果


接著獻醜了,下面是 WFU BLOG 的測試結果。由於本站的性質之故,必須展示多種 Blogger 工具、外掛,很多 JS 實在無法精簡,因此分數比較慘烈:

pagespeed-test-result-wfublog-Blogger 使用 Pagespeed Insights 網站速度效能檢測心得

1. 最佳化圖片

這一項應該扣了很多分,有太多圖片沒有縮小尺寸、或增加壓縮率。(這一點之後在「7. 實驗結果」會有進一步的測試)

我抱持的理由,請參考「網頁圖片該怎麼處理, 顯示效果會比較清楚?」,由於使用者的螢幕越來越大,在網頁效能與顯示清晰的圖片兩者之間,我選擇了後者(當然圖片也有經過一定的壓縮)

另一方面,熱門大站比較需要對伺服器的流量、頻寬斤斤計較(會影響支出成本),所以最好每張圖片都最佳化;而 Blogger 平台沒有流量限制,不會有什麼太大的影響。

為了不影響訪客讀取網頁的順暢度,我採用的對策是安裝「圖片延遲載入﹍Lazy Load 安裝懶人包」,那麼 Pagespeed 這個項目就可以略過了。


2. 清除前幾行禁止轉譯的 JS/CSS

同之前「空白網站測試結果」,這一項有一些 CSS 外連檔案是我們動不到的,而 JS 的部分如自己不能處理,只能選擇忽略。


3. 使用瀏覽器快取功能

同之前「空白網站測試結果」,Blogger 平台對於這一點無能為力。


4. 啟用壓縮功能

Blogger 平台對於這一點也是無能為力。


5. 壓縮 JavaScript

如果是自己的外連 JS,當然可以壓縮;但如果是外部的 JS 連結,我們依然無能為力。

需要壓縮 JS 的話,可參考「活用 HTML/Javascript/CSS 格式化及壓縮工具」,文章有推荐的工具。


6. 減少伺服器回應時間

這個...實在不是我管得著的事...



7. 實驗結果

第 1 項「最佳化圖片」的建議修正作法,看了 Google 列出的圖片連結,發現幾乎都是首頁的輪播圖片。因此我做了一個實驗,暫時將首頁輪播功能關閉,而重新測試的結果如下:

pagespeed-test-result-wfublog-backup-1-Blogger 使用 Pagespeed Insights 網站速度效能檢測心得

真是讓我大吃一驚,分數簡直突破天際,比空白測試網站還多了 1 分!

相信這個結果讀者心理應該都有底了,一些 Blogger 平台無法處理的修正項目,其實遠比不上進行這個項目就好。那麼接著來歸納一下,「網頁效能優化」真正有效的作法與結論。



三、提升網站速度最重要的因素


1. Pagespeed 的參考性

  • Pagespeed Insight 提供的改善建議,具有一定的參考性,可以讓我們多瞭解一些知識。
  • 不過對 Blogger 平台而言,很多項目是我們動不了的。
  • 有些項目就算我們花了時間去改善,其實對效能的增加不一定感覺得出來。
  • 我的結論為,不用花太多時間在設法增加 Pagespeed 的分數。
  • 相對而言比較重要的是,瞭解下面第 2 點的概念就好。


2. 最重要的兩個因素

其實過去我寫了一系列關於提升網站效能的文章,可參考「網站效能」這個標籤。其中最重要的是「優化網站效能該注意哪些事? (1)最關鍵的考量因素」,裡面提到影響網頁載入速度的是:

  • 首要因素為「圖片」
  • 次要因素為「Javascript 外掛」
  • 任何其他因素的影響,只要 CPU、瀏覽器夠力,人體不一定感覺得出來。


3. 圖片

從本篇的實驗結果,相信讀者都看得出來,圖片影響 Pagespeed 測試分數的結果是多麼巨大,跟我相關系列文章的論點是吻合的。

只要網頁少用圖片、少用大圖、適當壓縮,載入速度就可以明顯地感受出來。

網站各處的小圖示,建議使用「Font Awesome 圖示字型」,就可減少大量的 HTTP 連線請求時間

有的站長在 Blogger 首頁沒有設定繼續閱讀、或是設定顯示了幾十篇文章,導致首頁顯示了一大堆圖片的話,那麼載入速度自然就慢了。


4. JS 外掛

網站非必要的外掛盡量不要裝。

廣告能少放就少放,廣告需要 JS 才能執行。有的站長外掛裝的不多,但光是放一大堆廣告,載入速度就有得受了

更多的是站長使用了非官方範本,而範本中內建了一大堆外掛,程式可能還寫得很粗糙,就算站長熟悉程式碼也不一定知道如何刪減。那麼使用了非官方範本的站長,就要有心理準備,提升網站效能是不容易的事



四、小結


看了本站的測試報告,也許 Blogger 站長們可以對 Pagespeed 的分數報告放寬心了,大部分的項目我們改善不了,有些能做的,也不一定可以提升效能。

真正需要做的,圖片的部分,站長們可以參考本篇的建議來自行處理。

而 JS 的部分,能夠自行判斷如何取捨的話就沒問題。如果不清楚如何處理 JS、且有預算的話,可以再跟本站進行諮詢。



相關文章:

2 則留言:

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。