Blogger 如何移除PageSpeed Insights 禁止轉譯JavaScript ... | 排除禁止轉譯的資源
使用GooglePageSpeedInsights幫Blogger網站做網頁速度檢測時,會發現有幾筆禁止轉譯的JavaScript與CSS資源,而且是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範本的底層架構,並不在範本裡出現,僅在網站的「網頁原始碼」中顯...
使用 Google PageSpeed Insights 幫 Blogger 網站做網頁速度檢測時,會發現有幾筆禁止轉譯的 JavaScript 與 CSS 資源,而且是 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」底層資源限制住,那麼本文應該會很適合你。
我們這裡做個小實驗,觀察一下清除了禁止轉譯的 JavaScript 與 CSS 資源的 Blogger,底層速度到底有多快。測速時使用 Chrome 擴充「Open SEO Stats」,來觀察瀏覽器載入網頁的即時速度。實驗時使用官方的「簡單」範本,並將範本中「b:skin」裡面的「CSS」清空,版面配置只清除「導覽列」這個小工具,以當作速度測試時的條件。
這邊可以觀察到,在清除「禁止轉譯 JavaScript、CSS 資源」後,Blogger 網誌首頁開啟速度,最快能到「0.19 秒」。採十次用 F5 重刷網頁,平均數值約在「0.36 秒」。一般僅注釋掉 Navbar 導覽列後,平均網頁開啟...