Blogger 如何移除 PageSpeed Insights 禁止轉譯 JavaScript、CSS 資源

使用 Google PageSpeed InsightsBlogger 網站做網頁速度檢測時,會發現有幾筆禁止轉譯JavaScriptCSS 資源,而且是 Blogger 原生的渲染阻塞資源。

CSS 的部份,分別有「css_bundle_v2.css ( 電腦版 )、widget_css_mobile_2_bundle.css ( 行動版 ) 與 authorization.css」。JavaScript 的部份則為「widgets.js、plusone.js 與看不到的 shindig_random.js」。Blogger 導覽列 ( Navbar ) 預設也藏了一筆「plusone.js」。

上列禁止轉譯的 JavaScript 與 CSS 資源,會影響網頁的載入速度,是 Blogger 範本的底層架構,並不在範本裡出現,僅在網站的「網頁原始碼」中顯示。

CSS 的部份負責按鈕漸層、網頁排板、簡單色塊的組成。網站中原生的分享按鈕、小工具則靠「widgets.js」運作。

非必要,其實可以不用註釋掉這些底層資源,資源移除之後影響深遠,等於得全部自己來。「widgets.js」等 JavaScript 的部份,從某些角度操作還有辦法用 if 判斷式解決,CSS 就需要一些基本功才能做調整。

如果你正在規劃設計 Blogger 版型,或是調整設計 Blogger AMP 網頁,總是被速度或這些「禁止轉譯的 JavaScript、CSS」底層資源限制住,那麼本文應該會很適合你。

[教學] Blogger 如何移除 PageSpeed Insights 禁止轉譯 JavaScript、CSS 資源_001

我們這裡做個小實驗,觀察一下清除了禁止轉譯的 JavaScript 與 CSS 資源的 Blogger,底層速度到底有多快。測速時使用 Chrome 擴充「Open SEO Stats」,來觀察瀏覽器載入網頁的即時速度。

實驗時使用官方的「簡單」範本,並將範本中「b:skin」裡面的「CSS」清空,版面配置只清除「導覽列」這個小工具,以當作速度測試時的條件。

這邊可以觀察到,在清除「禁止轉譯 JavaScript、CSS 資源」後,Blogger 網誌首頁開啟速度,最快能到「0.19 秒」。採十次用 F5 重刷網頁,平均數值約在「0.36 秒」。一般僅注釋掉 Navbar 導覽列後,平均網頁開啟速度約為「1 秒」。「0.19 秒」很罕見,剛好想寫這篇的時候被測到。

[教學] Blogger 如何移除 PageSpeed Insights 禁止轉譯 JavaScript、CSS 資源_002

以下是移除 Blogger 禁止轉譯 JavaScript 與 CSS 資源的方式。說是移除,其實不太正確,正確來說是運用 Blogger 系統範本的特性,將這些  JavaScript、CSS 底層資源,從「網頁原始碼」中注釋掉。

移除 Blogger「css_bundle_v2.css、widget_css_mobile_2_bundle.css與 authorization.css」 CSS 資源的方式有四種,這邊提供兩種注釋掉 CSS 的方法。另外兩種是變化型用法,其中一種在使用 HTML5 Validator 時會報錯,一種則操作複雜,所以就不放上來了。

Blogger 中移除「widgets.js、plusone.js、shindig_random.js」JavaScript 的部份則有兩種。這邊提供一種,另外一種也是變化型,取一個方便好用即可。

下面的例子,使用 Blogger 官方簡單版型,做為操作示例。請先自行在範本中,注釋掉 Blogger 預設導覽列 ( Navbar ) 小工具。



設置流程

  1. 觀察網頁原始碼 PageSpeed Insights 測試
  2. 移除禁止轉譯 CSS
  3. 移除禁止轉譯或快取 JavaScript
  4. 解決 CSS 版型位移
  5. 解決小工具失效的方法
  6. 域外資源

設置前準備

若對編譯 Blogger 的 HTML 模板還不太熟悉,建議先執行『備份 Blogger 模板 (範本)』的動作,以防原始模板資料遺失。



操作方式

Step 1

觀察網頁原始碼 PageSpeed Insights 測試

首先可以使用瀏覽器前往自己的 Blogger 網站,按下鍵盤組合鍵「Ctrl+u」,觀察「網頁原始碼」中的 Blogger 系統預設外連 JavaScript 與 CSS 資源。


CSS 資源
CSS 的部份,可以觀察到有「css_bundle_v2.css、authorization.css」兩個外連檔案。如果使用「?m=1」行動版網址,還能看到「widget_css_mobile_2_bundle.css」。

[教學] Blogger 如何移除 PageSpeed Insights 禁止轉譯 JavaScript、CSS 資源_101



JavaScript 資源
JavaScript 的部份,將網頁原始碼的頁面拉到最下面,可以找到「widgets.js 與 plusone.js」這兩個外連資源。

[教學] Blogger 如何移除 PageSpeed Insights 禁止轉譯 JavaScript、CSS 資源_102


上面兩者,就是範本中看不到的 Blogger 預設外連 JavaScript 與 CSS 資源。僅在「網頁原始碼」中顯示。



Google PageSpeed Insights 檢測
使用 Google PageSpeed Insights 檢測時,可以觀察到 Blogger 系統預載入的 CSS 禁止轉譯資源。如下圖:

[教學] Blogger 如何移除 PageSpeed Insights 禁止轉譯 JavaScript、CSS 資源_103




Step 2

移除禁止轉譯 CSS

如果沒有開啟自訂行動範本,「widget_css_mobile_2_bundle.css」會無法注釋掉,使用官方預設行動範本,會自動載入「widget_css_mobile_2_bundle.css」。

開啟自訂行動範本可參考「Blogger 行動版範本與自適應設計原理|STEP 1:使用自訂 Blogger 行動版範本」。


以下兩種方法擇一使用,即可移除「css_bundle_v2.css、widget_css_mobile_2_bundle.css 與 authorization.css」這三個 Blogger 系統預設外連 CSS 資源。

Step2-1 方法一:

使用下面代碼置換掉範本中的「<haed>」與「</haed>」,即可移除外連 CSS 資源。

&lt;head&gt;

&lt;/head&gt;&lt;!--<head/>--&gt;

如下圖:

[教學] Blogger 如何移除 PageSpeed Insights 禁止轉譯 JavaScript、CSS 資源_201



做完以上設置之後,我們按 F5 重刷「網頁原始碼」頁面,可以觀察一下「網頁原始碼」中是否已注釋掉外連 CSS 資源。這邊可以觀察到,除了注釋掉 Blogger 預設「css_bundle_v2.css、與 authorization.css」之外,連同支援瀏覽器「?m=1」型式網址的 JavaScrpit 也一同注釋掉了。

[教學] Blogger 如何移除 PageSpeed Insights 禁止轉譯 JavaScript、CSS 資源_202


Step2-1 原理:
在範本中新增「&lt;head&gt;」及「&lt;/head&gt;」,原型為「<head>」及「</head>」。接著再使用注釋符「&lt;!--  --&gt;」,注釋掉「<head/>」,注釋符原型為「<!-- -->」。

而「<head/>」的原型則為「<head></head>」。原理就像一般的 JavaScript 或 CSS 外連檔的結尾一樣。(* 例如:「<link href='//..../font-awesome.min.css' rel='stylesheet'/>」,或類似版面配置 CSS「<b:template-skin> ~ </b:template-skin>」去除 CSS 後,改為「<b:template-skin/>」的方式儲存一樣。)

由於我們在範本中建立了「<head>」及「</head>」,並將「<head/>」注釋掉之後。在範本中原始「<head> ~ </head>」裡沒出現的原始碼 CSS 外連資料,也連帶會被注釋掉。

而「css_bundle_v2.cssauthorization.css」是範本中「b:skin」的附屬品。Blogger 系統會自動幫「b:skin」加入「css_bundle_v2.css」及「authorization.css」,這兩個外連檔案。

支援瀏覽器「?m=1」型式網址的 JavaScrpit 是 Blogger 系統自帶檔。由於注釋掉「<head/>」,所以會連同「css_bundle_v2.css」及「authorization.css」一起被注釋在新增的「</head>」後面。


Step2-2 方法二:( 推薦 )

使用下面代碼置換掉範本中的「<b:skin>」,即可移除外連 CSS 資源。

&lt;style type=&quot;text/css&quot;&gt;
&lt;!-- /*<b:skin><![CDATA[

]]></b:skin>

如下圖:

[教學] Blogger 如何移除 PageSpeed Insights 禁止轉譯 JavaScript、CSS 資源_203


接著重刷「網頁原始碼」頁面,可以觀察到經過上步驟設置過後,就注釋掉了「css_bundle_v2.css、與 authorization.css」的 Blogger 預設外連 CSS 資源了。而且注釋是被包在「<style type="text/css">」裡面。保留了「?m=1」型式網址的 JavaScrpit。(* 下圖有將 Blogger 預設版型的 b:skin 與 b:template-skin 中的 CSS 清除,以方便觀察。)

[教學] Blogger 如何移除 PageSpeed Insights 禁止轉譯 JavaScript、CSS 資源_204


Step2-2 原理:
css_bundle_v2.cssauthorization.css」是範本中「b:skin」的附屬品。Blogger 系統會自動幫「b:skin」加入「css_bundle_v2.cssauthorization.css」,這兩個外連檔案。

其實僅使用「&lt;!--」一樣可以注釋掉「css_bundle_v2.cssauthorization.css」這兩個檔案。不過,會連帶的將原始「b:skin」裡面整段的 CSS 全部都一起注釋掉。

由於我們還要使用「b:skin」裡面的 CSS,讓網頁能正常顯示,所以這裡使用「&lt;!-- /*」的方式做部署。「&lt;!-- /*」能將原始「b:skin」注釋為 CSS 的一部份。(* 被注釋的「b:skin」,在網頁原始碼中會顯示為「<style id='page-skin-1' type='text/css'>」。)

Blogger 範本編輯器有一個特性,它會將有缺少程式碼的部份自動補齊。由於我們放置了一個「&lt;!-- /*」注釋 CSS 的條件,Blogger 系統會自動在「/b:skin」後面補上一個「</style>」。

</style>」在網頁中由於缺少了「<style type='text/css'>」這個蓋子,是一個不完整的 HTML 標記。所以我們可以在「&lt;!-- /*」之前,加入「&lt;style type=&quot;text/css&quot;&gt;」,讓整段 CSS 變得完整。



接著再到 Google PageSpeed Insights 做檢測,「css_bundle_v2.css、widget_css_mobile_2_bundle.css 與 authorization.css」這三個 Blogger 禁止轉譯外連 CSS 資源,就沒有出現了。

[教學] Blogger 如何移除 PageSpeed Insights 禁止轉譯 JavaScript、CSS 資源_205



Step 3

移除禁止轉譯或快取 JavaScript

早期「widgets.js 與 plusone.js」這兩個 Blogger 系統預載入的 JavaScript 資源,在做 Google PageSpeed Insights 測試時,會一起被歸入在「禁止轉譯」或「使用瀏覽器快取功能」的類別。(* 上個月測試時,也還是。看來 Blogger 有做過優化,目前僅餘「plusone.js」。)

目前 Blogger 系統預載入的 JavaScript 資源,一樣有「widgets.js 與 plusone.js」,不過在做 Google PageSpeed Insights 測試時,少了「widgets.js」卻多出了另一個「網頁原始碼」中也看不到的「shindig_random.js」。

使用以下方式,一樣可以解決「widgets.js、plusone.js 與看不到的 shindig_random.js」。


在範本中找到「</body>」,並用以下代碼置換,即可完成部署。

&lt;!-- </body> --&gt;&lt;/body&gt;

如下圖:

[教學] Blogger 如何移除 PageSpeed Insights 禁止轉譯 JavaScript、CSS 資源_301


接著重刷「網頁原始碼」頁面,將「網頁原始碼」頁面拉到最下方。可以觀察到「widgets.js、plusone.js 」的 Blogger 預設外連 JavaScript 資源,已經被注釋掉了。而且下面整段 JavaScript 也會被注釋掉。

[教學] Blogger 如何移除 PageSpeed Insights 禁止轉譯 JavaScript、CSS 資源_302


Step3-1 原理:
這裡使用的方式與「Step2-1」的原理方式相同。不過在設置時,是先注釋掉「&lt;!-- </body> --&gt;」之後,再到它後面添加一個「&lt;/body&gt;」。


接著再到 Google PageSpeed Insights 做檢測,行動版電腦版的網頁速度優化完整度都會變成「99」。只剩下唯一「壓縮 HTML」的建議事項。

[教學] Blogger 如何移除 PageSpeed Insights 禁止轉譯 JavaScript、CSS 資源_303



Step 4

解決 CSS 版型位移

在「STEP 2」注釋掉「css_bundle_v2.css、widget_css_mobile_2_bundle.css、與 authorization.css」之後,網頁的版型會整個走鐘。如果你是使用官方版型做練習,可以使用以下方法讓它恢復正常。

將「網頁原始碼」中連結檔「css_bundle_v2.css ( 電腦版 )、widget_css_mobile_2_bundle.css ( 行動版 )」的超連結打開,並複制所有 CSS,接著再將 CSS 貼入以下 if 判斷式中,並將它放置在「</b:skin>」之後,即可解決版型跑掉的問題。(* 行動版 css 可在「網頁原始碼」頁面的網址列後面加上「?m=1」找到。)

<b:if cond='data:blog.isMobile'><!-- 如果以下資料在行動版網頁上的話 -->
<style type='text/css'>

/* 這裡放入行動版 widget_css_mobile_2_bundle.css */

</style>
  <b:else/><!-- 如果不是的話 -->
<style type='text/css'>

/* 這裡放入電腦版 css_bundle_v2.css */

</style>
</b:if>



Step 5

解決小工具失效的方法

在「STEP 3」中注釋掉了 Blogger 系統預載入的 JavaScript,有些小工具可能會失效,例如聯絡表單小工具。

如果在「靜態網址頁面 ( /p/contact.html )」,有建立過 Blogger『聯絡表單』,可以使用以下 if 判斷式的方式包住「</body>」,即可讓單一網頁正常運作 Blogger 系統預設的 JavaScript。

<b:if cond='data:blog.url != data:blog.canonicalHomepageUrl + &quot;p/contact.html&quot;'><b:if cond='data:blog.url != data:blog.canonicalHomepageUrl + &quot;p/contact.html?m=1&quot;'><b:if cond='data:blog.url != data:blog.canonicalHomepageUrl + &quot;p/contact.html?m=0&quot;'>&lt;!-- </b:if></b:if></b:if></body><b:if cond='data:blog.url != data:blog.canonicalHomepageUrl + &quot;p/contact.html&quot;'><b:if cond='data:blog.url != data:blog.canonicalHomepageUrl + &quot;p/contact.html?m=1&quot;'><b:if cond='data:blog.url != data:blog.canonicalHomepageUrl + &quot;p/contact.html?m=0&quot;'> --&gt;&lt;/body&gt;</b:if></b:if></b:if>

上列 if 判斷式的部署方式,是讓 Blogger 預設 JavaScript,僅在「/p/contact.html」這個頁面顯示。包含「?m=1、?m=0」兩種型式的網址。



Step 6

域外資源

JavaScript
如果有使用「jquery.min.js」或是「AdSense 廣告的 adsbygoogle.js」等 JavaScript 資源,可使用「非同步載入」的方式做設定。非同步載入的設定方法,可參考「Google PageSpeed Insights 網站速度測試與性能優化建議」的部署方式。


快取
外連 CSS、JavaScript 快取的部份,由於無法設定表頭到期日,所以無法做設定。另外,Blogger 系統使用 Google 伺服,Blogger 提供的是所見所得的範本編輯,速度上應該是不用太擔心的。

Blogger 自訂網域的使用者,如果將網址放到 CloudFlare 做 DNS 代管,套用 CloudFlare CDN 即可使用 CloudFlare 的快取功能。



小結

「widgets.js 及 plusone.js」這兩個 Blogger 系統預載入的 JavaScript 資源,目前已經被排除在 Google PageSpeed Insights 禁止轉譯 JavaScript 的項目裡。如果沒有特殊需求,「STEP 3」的部份可依自己的情況斟酌使用。



相關文章

Blogger 使用 HTML5 Validator 解決 xmlns 與 border 錯誤的方式

Blogger 如何完全刪除「版面配置」範本 CSS b:template-skin


留言

  1. Hi 你好,我的後台主題 "編輯HTTP" 出現

    "如果你的主題經過編輯後同時含有 HTTP 和 HTTPS,當訪客透過 HTTPS 瀏覽你的網誌時,網誌的安全性和使用者體驗可能會受到影響。"

    但是卻無法儲存修改,修改好按了儲存之後,離開時會出現

    "變更尚未儲存,您更新的內容將會遺失。"

    等於無法修改,該怎麼辦?有反應給google意見回饋可是沒有任何回音....T~T...謝謝你

    回覆刪除
    回覆
    1. 不好意思,現在才看到留言~
      你是說,你編輯 Blogger 後台裡的「編輯 → 編輯 HTML」的時候,出現『"如果你的主題經過編輯後同時含有 HTTP 和 HTTPS,當訪客透過 HTTPS 瀏覽你的網誌時,網誌的安全性和使用者體驗可能會受到影響。" 』。

      並在儲存離開時,發現會有『"變更尚未儲存,您更新的內容將會遺失。"』的字句嗎?

      另外,你是依照本文來做設置的嗎;如果是的話,建議,非必要的情況下,不必追求這種極端的速度設置方式,本文其實是我的記錄筆記。

      剛好近半年,Blogger 有新的自適應版型推出,如果是使用新的版型,可能會無法使用本文的方式做修改,因為我還沒在新的版型上做過實驗喔!

      如果有需求,一定需要本文的設定方式,來幫自己的網誌做佈屬。可以說明一下,是在做到第幾步驟的時候卡住了,我們再一起研究解決。

      刪除
  2. Hello, you have a great tutorial here..I'm just wondering why these codes does not work on Awesome Templates? After replacing all the codes and commented out all the external CSS, I still got low score on speed test.

    But when I paste all my css bundle codes on the Advance Template Designer, then commented out the b:skin, I got 100/100 score on desktop but really low on mobile....the mobile bundle.css is still appearing...

    What seems to be the problem?

    回覆刪除
◎ 留言板中提問「代碼」問題,可至『留言代碼轉換器』轉換代碼。

張貼留言

繼續閱讀:

這個網誌中的熱門文章

[教學] LINE 電腦版行動條碼登入設定

[外掛] Chrome 擴充:ColorPick Eyedropper 網頁色碼擷取器

[教學] 使用 PuTTYgen 產生 SSH 連線 RSA、DSA 公鑰與私鑰

Line 分享按鈕:文章分享語法相容網頁版、行動裝置、APP

[教學] Twitter 手機簡訊、APP 兩步驟驗證設定

[教學] Google Compute Engine ( GCE ) 使用 PuTTY SSH 登入實例

[外掛] Chrome 擴充:Window Resizer 瀏覽器視窗大小調整比例

[教學] Blogger 自訂網址綁定自有域名

[密技] Windows OneDrive Dropbox 移至 SD 卡,讓 SSD 使用壽命更長久

[教學] Facebook APP ID 申請,建立應用程式取得 APP 密鑰