不過動手之前,最好先確認對 html/js/css 有基本的認識,瞭解 debug(除錯) 的方法,以免不小心操作錯誤之時,能夠還原事先的範本內容。對範本進行任何變更之前,建議先閱讀「備份範本的訣竅」系列文章,備份需要有版本控制的觀念。
一、整理 HTML
1. 提醒事項
因為很重要,所以再提醒一下,如果要動 Blogger 範本中的 HTML 內容,最好知道那部分程式碼的作用為何,段落的開頭、結尾分別在何處,建議確認已經讀過了「Blogger 範本」系列文。
本篇以下提到需要使用的所有線上工具,均請參考「活用 HTML/Javascript/CSS 格式化及壓縮工具」。
2. 壓縮 HTML
如果確定某個區塊的 HTML 永遠都不會去動他、不會修改,那麼可以將該區段壓縮,以節省網路傳輸的字元數。
可參照「Blogger 標頭區塊的程式碼」,上圖以範本中標頭區塊的一部分程式碼為例:
- 未壓縮前縮排使用的皆為空白字元,佔用許多位元數
- 如果不會去動標頭區塊的話,那麼紅框部分的英文註釋內容也不會有機會去看,可以刪除後再進行壓縮。
經以上處理後,範本中 html 碼部分可節省非常可觀的容量。
3. HTML 格式化
如果標頭部分有可能會修改,那麼進行格式化除了維持程式的可讀性,也可縮減體積。因為如前所述,Blogger 範本使用的縮排為空白字元,佔用太多體積。
上圖使用同樣區段的程式碼,經格式化工具處理後,選擇 Tab 縮排,一樣可以縮減一些體積。
而最搞剛的作法是,判斷標頭那個部分可壓縮(都不會去讀他)、那個部分格式化(有可能會修改),達到最佳化處理。
二、整理 CSS
1. 處理外連
範本中任何一個 http 請求,也就是進行外連的動作,都會花費很多時間,如果範本中有很多 css 外連的話,建議將多個外連合併為一個。
例如安裝過「fancybox」的話,會看到類似以下的 css 檔外連:
<link href='https://googledrive.com/host/0BykclfTTti-0UENiUFpueXBHZUk/fancybox-thumb-min.css' media='screen' rel='stylesheet' type='text/css'></link>
如果是官方外連的檔案(原始的範本內容)就請不要動了,而非官方的外連檔案(自己後來新增的內容),可用記事編輯軟體,將所有 css 檔內容合併為一個檔案,再上傳到網路空間取得外連路徑(可參考「Google Drive 檔案自行分流教學」),如此將只會花費一個 http 請求。
2. 合併 style 標籤內容
範本中每產生一個多餘的標籤,都是浪費瀏覽器的運算時間,如果可以只花費一次的時間來產生
從「如何讓 CSS 執行有效率」我們知道 css 的內容要放在
3. 註釋 css 區段
集中在一個
例如原本四散的 css 內容可能為以下:
<!-- 下拉選單 start-->
<style>
.dropMenu {
xxxxx
}
其餘 css
</style>
<!-- 下拉選單 end-->
<!-- 浮動導覽列 start-->
<style>
.float {
xxxxx
}
其餘 css
</style>
<!-- 浮動導覽列 end-->
集中為單一個
<style>
/* 下拉選單 start */
.dropMenu {
xxxxx
}
其餘 css
/* 下拉選單 end */
/* 浮動導覽列 start */
.float {
xxxxx
}
其餘 css
/* 浮動導覽列 end*/
</style>
4. 壓縮 css
無論是外連 css、或範本中的 css 內容,如果確定不常修改的部分,就請利用 css 壓縮工具,來減少體積。
5. 官方 css
官方範本中 <b:skin>~</b:skin> 這個區間,建議對語法熟悉、且不會去動這部分內容的話再進行壓縮處理。上半段是 Blogger 自己的語法,屬於 HTML 的格式;下半段才是 CSS 的格式。
另一個區間 <b:template-skin>~</b:template-skin>,也是類似格式,有把握的話可進行壓縮。
三、整理 JS
1. 一般性的 js 處理
這裡所謂的一般性,是指「非 Blogger 平台」、「非 Blogger 範本之中的 js 內容」,包含了 Blogger 「側邊欄小工具的 js 內容」。處理的原則大致依循本文有關 CSS 的處理方式即可:
- 官方外連的 js 檔案不要動,而非官方的外連檔案,可用記事編輯軟體,將所有 js 檔內容合併為一個檔案,再上傳到網路空間,如此將只會花費一個 http 請求。
- 合併多個 script 標籤內容為一個 script 標籤
- 註釋 js 區段,但 js 註釋方式與 css 略有不同,請參考這篇「Blogger 範本 (1)各種註解方式」
- js 確定不常修改的部分,利用壓縮工具來減少體積;可能修改的部分利用格式化工具處理。
2. Blogger 範本中的 js
放在 Blogger 範本中的 js,要處理是一件很複雜的事,首先必須詳讀「Blogger 範本裡為何這麼多亂碼?」,才能有基礎的概念。
Blogger 範本的內容經過系統的解析之後,有太多種字元會被轉換,對程式碼不熟的讀者,看起來就像是亂碼一般。當 js 內容加入這些編碼後,拿去餵給 js 壓縮工具就會產生錯誤訊息。
如果不是對 Blogger 範本非常熟練的使用者,我的建議會是「不要貿然對範本中的 js 進行處理」,否則遲早埋下未爆彈;如果有信心、很想對範本中的 js 最佳化的話,以下是幾個可行的方案:
- 自行將編碼還原,可使用這個網頁的工具「HTML unescape」。
- 某些編碼是不可進行還原處理的,否則 js 就會失去作用。所以請詳讀前述的參考文章,確定知道哪些可還原、哪些不可還原。
優化網站效能 相關文章:
沒有留言:
張貼留言注意事項:
◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器,否則無法登入 Google 帳號留言(只能匿名留言)!
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」;或參考「Blogger 行動版範本修改技巧 」,或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢」
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。