Blogger 圖片大瘦身!官方提供密技轉換成 WebP 格式
前陣子 FB 的 Blogger 社團分享了一篇「 Blogger 圖片無痛轉換 WebP 」,原來 Blogger 圖片網址加上特定參數後,就能直接轉換成 WebP 格式,檔案得以大瘦身,圖片載入時間縮短不少。 這對圖片為主的 Blogger 部落格站長可說是一大幅音,例如美...
繼續閱讀全文2020 Lazy Load 延遲載入圖片原理及實作分析研究
![2020 Lazy Load 延遲載入圖片原理及實作分析研究](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5tRXdEpr4ZHcvnApOSlcAKWdE9ivSOM3PgmdPb9obWPHdEKxz5EwiTjy6wCUfj0J1bTn9fe-XKb1wmMqiwJD0QOfbgsd7y3fFWShEVO0qjjVGMBXyJ9HB1OCISL2KSxcsGuH7zCDi5CUC/s1600/lazy-load.jpg)
前陣子接到一個需求,客戶網站做完「PageSpeed Insights」檢測後分數很低,於是尋求協助。對客戶網站進行健檢後提供一份報告與建議,客戶詢問「延遲載入畫面外圖片」的部分如何改善。 這個項目「PageSpeed Insights」本身提供了不少參考資料,不過研究後才發...
繼續閱讀全文利用科學數據,決定網頁是否安裝特定外掛,優化網站配置﹍實作範例
![利用科學數據,決定網頁是否安裝特定外掛,優化網站配置﹍實作範例](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8opOH6vQp8aN6VQtL4o7HxjczslJlOUnezq8BUKAOJB7dXe7qapcy3-XsBRlGtW_8e7eUCkyaQb5VkqyblkywN_YgFJ5fqCw_NqonCJ_qxHmLL3cnihihh9ejyBl_X12dSQbWeHdmwspa/s1600/google-analytics-event-tracking-optimize-web-widget-link.jpg)
過去我們網站擺放的各種外掛、小工具,一開始是如何決定的呢?是因為個人喜好,還是因為別的網站有裝,還是猜測訪客應該需要? 如果不確定為何而裝,那麼想必站長們都知道,外掛裝越多,網頁載入速度越慢,那麼究竟哪些外掛該移除呢? 還有,我們會在網站各處擺放各種想推廣的文章連結,你知...
繼續閱讀全文統計歸納網站所有連結的點擊成效﹍GA 事件追蹤器(會員加值文章)
![統計歸納網站所有連結的點擊成效﹍GA 事件追蹤器(會員加值文章)](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR8NWxeqdbmt_gyBBFeKF77PnPITGLPCbkebyEPBpHmJ8PZWAdJUgXX3rAbRRs2vhwfzf6BhxtTV8JHrlEh3_I4vH1lfpcgDkTsSY669wkchZ6D0qfKF4IqYc6AGoM6e6MM4KfTEtpvSeq/s1600/website-track-google-analytics-event-widget-free.jpg)
2023.3.27 公告: 從 2023.7.1開始舊版 GA 將失效,請改用 GA4 並閱讀這篇「 GA4 如何追蹤自訂事件的成效及建立報表 」。 上一篇「 GA 事件追蹤器 」的免費版功能比較少,本篇的版本可以做到這些事: 排除 Blogger 站長自己的點擊 對小工...
繼續閱讀全文查詢網站所有連結的點擊成效﹍GA 事件追蹤器
![查詢網站所有連結的點擊成效﹍GA 事件追蹤器](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR8NWxeqdbmt_gyBBFeKF77PnPITGLPCbkebyEPBpHmJ8PZWAdJUgXX3rAbRRs2vhwfzf6BhxtTV8JHrlEh3_I4vH1lfpcgDkTsSY669wkchZ6D0qfKF4IqYc6AGoM6e6MM4KfTEtpvSeq/s1600/website-track-google-analytics-event-widget-free.jpg)
2023.3.27 公告: 從 2023.7.1開始舊版 GA 將失效,請改用 GA4 並閱讀這篇「 GA4 如何追蹤自訂事件的成效及建立報表 」。 我們的網站可能裝了各式各樣的小工具,例如: 首頁的輪播 側邊欄的標籤、熱門文章、精選文章... 文末的相關文章、延伸閱讀...
繼續閱讀全文部落格載入速度太慢,要如何判斷哪些外掛可以移除?
![部落格載入速度太慢,要如何判斷哪些外掛可以移除?](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiShyphenhyphenl8IYzl9afIKz4Mn9h7yJAlqeQyM9tolYShyHkJlyjlhhYhb3ICuJzwwd2kj4IQEtTFdcy6oFSRRVxkO3LumgsANUjI4HieV2eQBEmT9rHEbCvXmxmI52A7XUeKYZGXYzpNeKdKj3q0/s1600/pagespeed-slow-remove-plugin.jpg)
重視 SEO 的站長自然都會關注網頁的載入速度,因為這也是 Google 的排名評分項目之一。過去寫過一系列「 網站效能 」的相關文章,有興趣的站長可以瞭解不同的主題要如何處理。 由於提升「網頁載入速度」的詢問度一直很高,以往就算請讀者看這些相關文章,一段時間後還是可能回頭問...
繼續閱讀全文Picasa 圖床的獨家應用:製作 RWD 自適應圖片,讓手機自動載入小圖,加快網頁讀取速度
![Picasa 圖床的獨家應用:製作 RWD 自適應圖片,讓手機自動載入小圖,加快網頁讀取速度](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgK6T96g6ZB0_VZWSyvyo-cA3W8fq-SFREiYCHu4gXiIfWNDT48_5K8awqJlAKdSRbXql5xR6Sy5UHqA-LJXbbkNx0WdDDt68Ep0zBMQx2tKJdKaxlmXulodUg2rHhQYNsT6p5UPOzu80ha/s780/picasa-rwd-image-srcset.jpg)
過去曾在「 加快 Blogger 行動版圖片載入速度的密技 」告訴讀者,Blogger 使用的圖片只要從後台上傳,也就是使用 Picasa 圖床,行動版就會自動改為載入小尺寸的圖片。 因為有這樣的獨家功能,Picasa 只要上傳一張圖片,就會產生手機版尺寸的圖片,我一直認為 ...
繼續閱讀全文加快你的網頁載入速度實作﹍善用 Google Analytics 報表
![加快你的網頁載入速度實作﹍善用 Google Analytics 報表](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_MmQWft-INeQ15NAT3oX4qtM9_a-fF2dz0wH1vwpiF7brle7zyF-U1Soh-kh89BOrdl-cuNyfpypYM1pIZiJK881tNNH2fzuX8OiFTUhlzsZjpJAkNo45jYjyyd-XBFSqgawCEI4QL-Af/s780/speedup-webpage-load-time-ga.jpg)
之前寫過一篇「 PageSpeed 網站速度檢測心得 」,請讀者別太在意 PageSpeed 的分數,因為先天的限制,Blogger 有些項目是無法處理的。 不過那篇文章大概是說服力不佳,有不少讀者看完後,依然向 WFU 表達對於分數過低的憂慮,也許是我沒有提供 Step b...
繼續閱讀全文Blogger 使用 Pagespeed Insights 網站速度效能檢測心得
![Blogger 使用 Pagespeed Insights 網站速度效能檢測心得](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4JsoPZHtw9CNxngTS709ApwZ-xRR2MWFkEaJLkYni7ANg0SM0DvUmI-eqG9H_Tbi_Fc_KJ_vvRuIRlhnCYTGY7Y_7VylRdBKK_jQk9CGajFFdbarWNB0G5FKAjxMZIHGTuMknHRTmwfYa/s640/pagespeed-insights-blogger-test.jpg)
經營部落格的站長們,一開始在意的是門面(版面)是否美觀;過一陣子之後,注意力可能會轉移到網站的效能、載入速度能否更快,其中最常使用的檢測工具就是 Google 的「 PageSpeed Insights 」。 這個 Blogger 中文論壇貼文詢問「 Pagespeed In...
繼續閱讀全文網頁圖片該怎麼處理, 顯示效果會比較清楚?
![網頁圖片該怎麼處理, 顯示效果會比較清楚?](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfZ9b4zlOd5b5rvjkU9t1l097ORUF0gFhlcx2hYhozRwJ4lnL9gcvNAWSLUDpyi74YbECkkY-XZAnBSB9qIrjtKFe6c1nAgk81ZOGaeKPIdzdY2xpRNU-YS5dXyf0r-gEKCCl9UIm6qtYL/s640/how-to-handle-website-image-size-lightbox.jpg)
最近有讀者遇到一個狀況,網站使用的圖片都是 640px 寬,但在 Blogger 的文章區塊扣掉 padding 等等的數值後,可顯示寬度為 590px 左右。當圖片從 640px 縮小到 590px 的情況下,圖中某些文字因為變小而顯得比較不清楚(或是說效果比較差)。因此,希望...
繼續閱讀全文加快 Blogger 行動版圖片載入速度的密技
![加快 Blogger 行動版圖片載入速度的密技](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmY8LnC-Uj-A8lmMpFWkNzt7XRIcwQ4CiEwZAYjNlG3PvMgt25jtROAIQ3TyX4oK35YnE6Rlu3tUntxzEpZhR3FwoBIMAIs1mxiBhmJN8iNRVbQv0tGYFpaFWN9P4nOmxNdBk-kEuhgBNv/s1600/blogger-mobile-image-size-optimize.jpg)
要加快網頁載入速度,最有感的兩個方向就是從「圖片」以及「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)最關鍵的考量因素
![優化網站效能該注意哪些事? (1)最關鍵的考量因素](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimcQ0CrcsGQHqSrnQ8xecrp4JkEoqe54ymnnFbRWcqZJpxkBKQgu0ocD1HlUzdi_96cvaKxXDqc92RTrCN3MP2xsBjdHvqxgtOjtF1qYrVvrG2mpgZiL7VkIbvUXtg2olqBukhXXNep8G1/s1600/website-speed-up.jpg)
(Pic from: seocorporation.net ) 經營部落格一段時間後,站長可能會將注意力從文章內容的產出、版面的裝潢、外掛小工具等等,轉移到更深的層面,例如網頁載入的速度、手機版的效能、範本程式碼優化等等。 會開始關注這些考量點,代表除了內容以外,也會站在讀...
繼續閱讀全文為何部落格最好避免第三方外掛?(二)如何選擇外部工具
![為何部落格最好避免第三方外掛?(二)如何選擇外部工具](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjxLXh5tlK_Q-0G8CpBgS2cNKueE1C73ZLHL8mu4WjJjzOqgzUeRx_kXtGDraaHfi3W4jYih2fAJ37_nEfVGg9nT-EioTsrgHovLX3-5HWQsrnMl1NMNAfh67-2KOaAHHT1GeaqRLh2KUT/s1600/blogger-avoid-third-party-widget.jpg)
「 上一篇 」詳述了第三方工具可能的不好影響,那麼對於 Blogger 而言,不算第三方的程式,就比較安全了嗎? 當然不見得,以下先說明原因,並提出針對第三方與非第三方工具,在篩選上的建議。
繼續閱讀全文為何部落格最好避免第三方外掛?(一)拖累網頁速度及其他不良影響
![為何部落格最好避免第三方外掛?(一)拖累網頁速度及其他不良影響](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXGdV4JPRHJuIkzXIxrpiZiiQ1TRknZfQTRb0NwCon4gFPbezdMbea43rO9i_eeycAEe3vkNZhRbvZxAg_fHrBQvLUvgRmZDCxXGkK3DEQr2qIEZcoC4uUdBD0kIxQgbb2XFdOcruXEr_a/s1600/trojan-horse-1.jpg)
(Pic from: pixelportal.com.au ) 自由度較低的部落格平台(痞客邦、Xuite),大部分的功能官方會提供;而自由度高的平台(Blogger、Wordpress),官方提供的功能有限,很多都得仰賴第三方小工具來實現。 然而, 第三方工具就像傭兵一般...
繼續閱讀全文圖片延遲載入外掛 Lazy Load__Blogger 最佳安裝方式
![圖片延遲載入外掛 Lazy Load__Blogger 最佳安裝方式](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiitMzWPZC8S-VOsioJ8T3oMoa96ebxAVW8PV5XEiu7tiPUVX-7eem7MA94n7GrlOBFnShxved0UpX663sRKofZsKCKqBW2WHfMWv5Q_vb5uVejUuivoM31Og9BJf5ljKHBPLY4O5MiLl3F/s1600/lazyload.jpg)
2014.12.17 公告: 本文已有更新版,請前往「 jQuery 圖片延遲載入﹍Lazy Load 安裝懶人包 」 若是圖片很多的部落格,非常有必要安裝 Lazy Load 這個圖片延遲載入的外掛,以改善網頁讀取的效能。不過為了這個功能在網路上奮戰了好久,一直沒有成功,也...
繼續閱讀全文