[unboxing][hrads]

熱門標籤

☆重要訊息:Blogger 官方近期推出的「RWD 自適應範本主題」沒有『行動服務』的設定選項,如果您是觀察「技研可樂」裡的文章做自己網站的設計,使用「自適應範本主題」的使用者可以直接依「技研可樂」文章裡的『電腦版』方式做設定即可完成佈置,不需要開啟『行動服務』。☆

  Blogger 自訂網址應用 CloudFlare HTTPS 系列文章:「CloudFlare

  Blogger HTTPS 相關文章列表:「HTTPS

  Blogger AdSense 廣告放置與相關自適應廣告佈屬文章列表:「AdSense

  Blogger 常用頁面判斷式用法一列表:「Blogger 常用頁面判斷式用法一覽表

Google PageSpeed Insights 網站速度測試與性能優化建議

Google PageSpeed Insights 為 Google 提供的網頁線上速度測試工具,使用時它會掃描網站內的「JS、CSS、圖片、HTML」,依據各個檔案的「壓縮、傳輸、轉譯、快取緩存、網址導向」做性能分析與優化建議

分析時會以「行動裝置「與「電腦桌機平台」,提供相關的性能與優化建議報告。而近幾年來行動裝置盛行,平台中也加入了「行動裝置相容性測試」的測試選項,透過測試可以觀察網頁是否適合透過行動裝置瀏覽。

Google PageSpeed Insights 也許不是網頁速度優化時的絕對指標,但藉由 Google PageSpeed Insights 能方便的觀察或學習,網站整體的資源運用與調整。

Google PageSpeed Insights 網站速度測試與性能優化建議_001



相關連結

Google PageSpeed Insights

行動裝置相容性測試



使用方式

Google PageSpeed Insights 網站速度測試

前往「Google PageSpeed Insights」,輸入網址後即可為單一網頁做優化建議分析。分析結果會以顏色與分數做為區分,分析數據中如果有需要改進的問題,會以紅色與橘色字體顯示出報告。

Google PageSpeed Insights 網站速度測試與性能優化建議_101


(* 項端的「here」連結則可幫自己的網站做「行動裝置相容性測試」報告。)



速度與分數的謎思

清除前幾行內容中的禁止轉譯 JavaScript 和 CSS:
我們以分數直接落差有 30分左右的「禁止轉譯內容」為例,一般情形下將禁止轉譯的 JavaScript 和 CSS 移除之後,整體分數會在 75 分以上。這邊做個小試驗,我們用常見的「jquery.min.js」這個檔案來做示例,觀察速度與分數之間的關係。

觀察使用 Blogger 建站的「demo.techcoke.com」這個網址,在未將「jquery.min.js」移除前分數落在「65:86 ( 行動版:電腦版 )」。

Google PageSpeed Insights 網站速度測試與性能優化建議_102



將「jquery.min.js」移除後,分數則在「93:95 ( 行動版:電腦版 )」。

Google PageSpeed Insights 網站速度測試與性能優化建議_103



比較好的做法是,不以移除的方式來部署「jquery.min.js」。而是可以將「jquery.min.js」以「async='async' 非同步載入」的方式,放置在網站上。 Blogger 為例:

<script async='async' src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js' type='text/javascript'/>

(* 以「async='async' 非同步載入」的方式部署「jquery.min.js」,不會有「禁止轉譯 JavaScript」情形。)



同理,一般常用的 Google Adsense 廣告函式庫,也可以用下面的方式,加入到網站中。

<script async='async' src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js' type='text/javascript'/>



而實際上「demo.techcoke.com」這個網站,並沒有運用到太多「jquery.min.js」函式庫的情況。也就是說,Google PageSpeed Insights 測試出來的性能優化建議,僅就網頁整體規劃來做考量而評定出分數及建議。

評測出來的分數,優化建議分數,並不是實際的速度分數,因為開啟「demo.techcoke.com」這個網站,兩者的實際體感速度是一樣的。



小結

需要留意的部份是,將「jquery.min.js」以「async='async' 非同步載入」的方式部署在網站上,可能會導致某些不支援「非同步載入」的「javascript」無法啟動。而「adsbygoogle.js」環境比較單純,不會有這方面的問題。



相關文章

Google 出品:小型企業網站 Mobile Friendly 速度測試工具

Google 行動裝置相容性測試,網頁手機瀏覽最佳化測試



分享

加入代碼加入代碼

若您在閱覽文章時,於文章頁面找不到相關的應用主題,歡迎移駕到『站內留言』一起研究討論,謝謝!

使用超連結:<a href="https://www.techcoke.com/">技研可樂</a> =『技研可樂

加入圖片 ( https ):支援 HTTPS 網址型式的 .jpg .png 格式圖檔,直接貼入 HTTPS 圖片網址即可在留言時顯示!

支援非嵌入 Youtube 視頻:https://www.youtube.com/watch?v=hdfSISI24Xk (* 瀏覽器網址列中的 Youtube 網址 )

&&amp;'&#039;"&quot;<&lt;>&gt;
技研可樂 © 2013 - 2017

Contact Form

Name

Email *

Message *