2014年11月28日

[教學]將範本中的 HTML/Javascript/CSS 最佳化處理﹍優化網站效能(2)

A+

(Pic from: mybloggertricks.com)
過去寫了不少篇屬於優化網站效能的基礎知識,如果都曾讀過、打好基礎後,那麼現在可以開始挑戰實作演練了。本篇以 Blogger 範本為例,說明如何整理程式碼、讓範本最佳化,也就是能夠減少體積、執行有效率,同時又易於維護。

不過動手之前,最好先確認對 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 標籤內容

範本中每產生一個多餘的標籤,都是浪費瀏覽器的運算時間,如果可以只花費一次的時間來產生 style 標籤,那麼範本中就不需要製作 10 個 style 標籤 。

從「如何讓 CSS 執行有效率」我們知道 css 的內容要放在 </head> 之前,讀取速度才會快。除了檢查範本、所有的小工具內容,是否都將 css 移到 </head> 之前,也得檢查 style 標籤是否四散各處。如果有的話,請將所有標籤的字串內容,集中在一個標籤即可。


3. 註釋 css 區段

集中在一個 style 標籤之後,衍生的問題為,如果原本個別的標籤使用各自的註釋,那麼需要特別處理這部分的問題。

例如原本四散的 css 內容可能為以下:

<!-- 下拉選單 start-->
<style>
.dropMenu {
xxxxx
}
其餘 css
</style>
<!-- 下拉選單 end-->

<!-- 浮動導覽列 start-->
<style>
.float {
xxxxx
}
其餘 css
</style>
<!-- 浮動導覽列 end-->


集中為單一個 style 處理後,註釋改成以下模式即可:

<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 就會失去作用。所以請詳讀前述的參考文章,確定知道哪些可還原、哪些不可還原。


優化網站效能 相關文章:

沒有留言:

↑TOP

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。