Blogger 圖片大瘦身！官方提供密技轉換成 WebP 格式
前陣子 FB 的 Blogger 社團分享了一篇「 Blogger 圖片無痛轉換 WebP 」，原來 Blogger 圖片網址加上特定參數後，就能直接轉換成 WebP 格式，檔案得以大瘦身，圖片載入時間縮短不少。 這對圖片為主的 Blogger 部落格站長可說是一大幅音，例如美...
繼續閱讀全文2020 Lazy Load 延遲載入圖片原理及實作分析研究
前陣子接到一個需求，客戶網站做完「PageSpeed Insights」檢測後分數很低，於是尋求協助。對客戶網站進行健檢後提供一份報告與建議，客戶詢問「延遲載入畫面外圖片」的部分如何改善。 這個項目「PageSpeed Insights」本身提供了不少參考資料，不過研究後才發...
繼續閱讀全文利用科學數據，決定網頁是否安裝特定外掛，優化網站配置﹍實作範例
過去我們網站擺放的各種外掛、小工具，一開始是如何決定的呢？是因為個人喜好，還是因為別的網站有裝，還是猜測訪客應該需要？ 如果不確定為何而裝，那麼想必站長們都知道，外掛裝越多，網頁載入速度越慢，那麼究竟哪些外掛該移除呢？ 還有，我們會在網站各處擺放各種想推廣的文章連結，你知...
繼續閱讀全文統計歸納網站所有連結的點擊成效﹍GA 事件追蹤器(會員加值文章)
2023.3.27 公告： 從 2023.7.1開始舊版 GA 將失效，請改用 GA4 並閱讀這篇「 GA4 如何追蹤自訂事件的成效及建立報表 」。 上一篇「 GA 事件追蹤器 」的免費版功能比較少，本篇的版本可以做到這些事： 排除 Blogger 站長自己的點擊 對小工...
繼續閱讀全文查詢網站所有連結的點擊成效﹍GA 事件追蹤器
2023.3.27 公告： 從 2023.7.1開始舊版 GA 將失效，請改用 GA4 並閱讀這篇「 GA4 如何追蹤自訂事件的成效及建立報表 」。 我們的網站可能裝了各式各樣的小工具，例如： 首頁的輪播 側邊欄的標籤、熱門文章、精選文章... 文末的相關文章、延伸閱讀...
繼續閱讀全文部落格載入速度太慢，要如何判斷哪些外掛可以移除？
重視 SEO 的站長自然都會關注網頁的載入速度，因為這也是 Google 的排名評分項目之一。過去寫過一系列「 網站效能 」的相關文章，有興趣的站長可以瞭解不同的主題要如何處理。 由於提升「網頁載入速度」的詢問度一直很高，以往就算請讀者看這些相關文章，一段時間後還是可能回頭問...
繼續閱讀全文Picasa 圖床的獨家應用：製作 RWD 自適應圖片，讓手機自動載入小圖，加快網頁讀取速度
過去曾在「 加快 Blogger 行動版圖片載入速度的密技 」告訴讀者，Blogger 使用的圖片只要從後台上傳，也就是使用 Picasa 圖床，行動版就會自動改為載入小尺寸的圖片。 因為有這樣的獨家功能，Picasa 只要上傳一張圖片，就會產生手機版尺寸的圖片，我一直認為 ...
繼續閱讀全文加快你的網頁載入速度實作﹍善用 Google Analytics 報表
之前寫過一篇「 PageSpeed 網站速度檢測心得 」，請讀者別太在意 PageSpeed 的分數，因為先天的限制，Blogger 有些項目是無法處理的。 不過那篇文章大概是說服力不佳，有不少讀者看完後，依然向 WFU 表達對於分數過低的憂慮，也許是我沒有提供 Step b...
繼續閱讀全文Blogger 使用 Pagespeed Insights 網站速度效能檢測心得
經營部落格的站長們，一開始在意的是門面(版面)是否美觀；過一陣子之後，注意力可能會轉移到網站的效能、載入速度能否更快，其中最常使用的檢測工具就是 Google 的「 PageSpeed Insights 」。 這個 Blogger 中文論壇貼文詢問「 Pagespeed In...
繼續閱讀全文網頁圖片該怎麼處理, 顯示效果會比較清楚？
最近有讀者遇到一個狀況，網站使用的圖片都是 640px 寬，但在 Blogger 的文章區塊扣掉 padding 等等的數值後，可顯示寬度為 590px 左右。當圖片從 640px 縮小到 590px 的情況下，圖中某些文字因為變小而顯得比較不清楚(或是說效果比較差)。因此，希望...
繼續閱讀全文加快 Blogger 行動版圖片載入速度的密技
要加快網頁載入速度，最有感的兩個方向就是從「圖片」以及「Javascript」下手，詳細的說明可參考「 優化網站效能該注意哪些事? (1)最關鍵的考量因素 」。 行動版網頁由於螢幕比較小，如果跟網頁版一樣載入相同尺寸的圖片，那麼讀取一定很花時間。一般使用者能做的，最多就是想辦...
繼續閱讀全文[外掛] jQuery 圖片延遲載入﹍Lazy Load 安裝懶人包 (徹底解決圖片 reflow 現象)
![[外掛] jQuery 圖片延遲載入﹍Lazy Load 安裝懶人包 (徹底解決圖片 reflow 現象)](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQeWN_hHMjL1Xv9OTKDnk1GPwTyYhPH0EUUXsRTtzFSPVHgMQeJSPsmlVb4SCXHTS72dIcdnt4WgYCl8CT56o9t8P2ZtetrOrGpKpgYGaQNUI8MBaZJg_HPpmehmvxBh0HkSmhK8IATlHu/s1600/lazyload.jpg)
當網頁圖片多的時候，「 影響效能的最大因素就是圖片載入 」。除了縮減圖片尺寸、壓縮檔案來縮短傳輸時間之外，更好的改善方法是讓圖片能延遲載入，先讓頁面把主要文字內容優先顯示出來──這正是 jQuery 圖片延遲載入外掛「 Lazy Load 」的作用。 好的，本篇的程式正是為了...
繼續閱讀全文[教學]減少網頁 reflow(回流) 的 CSS 實作技巧﹍優化網站效能(3)
![[教學]減少網頁 reflow(回流) 的 CSS 實作技巧﹍優化網站效能(3)](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirXWJJu3DTGEPracZla3uat7_e2KdC715WMD_dUFeZqanwItr41lor48cYutZguMqsNs92ON0ZyGh6HkpPAyJedSSn4FiAYJmOMIiI10RAtUr324OgD1rvc8gpae5TGPDZOdLw8g-OahDD/s1600/avoid-reflow-add-image-size-value.jpg)
在增進網頁效能的執行事項之中，減少瀏覽器回流(reflow)是重要的一環。然而 reflow 這個名詞不常見、且翻譯也不易理解，不如稱之為「瀏覽器重新佈局」、或「網頁區塊重新安排」會來得白話一些。而為何要減少 reflow？因為它會 造成 CPU 無謂的重複運算，消耗瀏覽器效能及...
繼續閱讀全文[教學]將範本中的 HTML/Javascript/CSS 最佳化處理﹍優化網站效能(2)
![[教學]將範本中的 HTML/Javascript/CSS 最佳化處理﹍優化網站效能(2)](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1YeX4Eeairatgevp-unCp1yz3LCZogfXhswqSndqyOYk13A484GtSgeTL6h7CQOs9GyOL05atYstsniitA1SE7beLoQFeKAG-SKKM_X8jvHVfH4k_ZCchmvloZuX2VeJWJJm5STEWupli/s1600/htm-css-js.jpg)
過去寫了不少篇屬於優化網站效能的基礎知識，如果都曾讀過、打好基礎後，那麼現在可以開始挑戰實作演練了。本篇以 Blogger 範本為例，說明如何整理程式碼、讓範本最佳化，也就是能夠減少體積、執行有效率，同時又易於維護。 不過動手之前，最好先確認對 html/js/css 有基本...
繼續閱讀全文優化網站效能該注意哪些事? (1)最關鍵的考量因素
(Pic from: seocorporation.net ) 經營部落格一段時間後，站長可能會將注意力從文章內容的產出、版面的裝潢、外掛小工具等等，轉移到更深的層面，例如網頁載入的速度、手機版的效能、範本程式碼優化等等。 會開始關注這些考量點，代表除了內容以外，也會站在讀...
繼續閱讀全文為何部落格最好避免第三方外掛？(二)如何選擇外部工具
「 上一篇 」詳述了第三方工具可能的不好影響，那麼對於 Blogger 而言，不算第三方的程式，就比較安全了嗎？ 當然不見得，以下先說明原因，並提出針對第三方與非第三方工具，在篩選上的建議。
繼續閱讀全文為何部落格最好避免第三方外掛？(一)拖累網頁速度及其他不良影響
(Pic from: pixelportal.com.au ) 自由度較低的部落格平台(痞客邦、Xuite)，大部分的功能官方會提供；而自由度高的平台(Blogger、Wordpress)，官方提供的功能有限，很多都得仰賴第三方小工具來實現。 然而， 第三方工具就像傭兵一般...
繼續閱讀全文圖片延遲載入外掛 Lazy Load__Blogger 最佳安裝方式
2014.12.17 公告： 本文已有更新版，請前往「 jQuery 圖片延遲載入﹍Lazy Load 安裝懶人包 」 若是圖片很多的部落格，非常有必要安裝 Lazy Load 這個圖片延遲載入的外掛，以改善網頁讀取的效能。不過為了這個功能在網路上奮戰了好久，一直沒有成功，也...
繼續閱讀全文
