(Pic from: css-javascript-toolbox.com)網頁載入速度是影響訪客對網站印象的重要一環(參考「網頁載入速度 黃金三秒」)，而 Javascript(以下簡稱 js) 與 CSS 在範本中如何配置，關係著網頁執行的效率。不過對於初心者而言，這些知識未免太過複雜，為了讓不懂語法的新手站長們都能享受架站的樂趣、順利地安裝各種網頁小工具， WFU 製作了各種懶人包，以期讓安裝過程無腦化。
然而懶人包的缺點就是──執行效率可能稍差。因此本篇的內容主要提供給進階使用者，瞭解 JS/CSS 的執行原理，並據以調整適當的擺放位置，讓網頁載入及執行速度加分。
一、CSS 的正確擺放位置
1. CSS 的寫法
如果將 CSS 樣式寫在標籤之內，那麼將是最快的執行方式，例如：
<div style="font-size: 20px; color: red;">WFU BLOG</div>但是行內樣式一多，除非這些樣式永遠不修改，否則日後管理 CSS 會很麻煩，因此實務上會將樣式放在標籤
<style>
.blog_name {
font-size: 20px;
color: red;
}
</style>
<div class="blog_name">WFU BLOG</div>日後只要在範本中搜尋字串 "blog_name"，就能找到這個 CSS 樣式的位置來修改，可以看出這是較佳的管理方式。
2. 瀏覽器的運作方式
當瀏覽器讀取到
能讓瀏覽器花費較短的時間搜尋 class 樣式的位置，網頁的執行速度就越快，因此我們可以檢查一下範本、以及所有小工具的內容，是否有 "style" 標籤放在執行效率比較差的位置。
3. CSS 外部引用
比較大型的網頁，CSS 的管理會複雜許多，因此 CSS 常使用外部連結的方式引用，例如以下是 Blogger 的官方 CSS 連結：
<link type='text/css' rel='stylesheet' href='https://www.blogger.com/static/v1/widgets/1535467126-widget_css_2_bundle.css' />如果範本中有一部分的 CSS 內容確定不會變更，那麼可將內容打包、壓縮為一個 .css 檔，放在外連空間(例如「Google Drive」)，再用以上語法引用，放在範本中
這麼做的好處是，範本可以比較清爽；而壞處是，需要花費 http 的請求時間，載入速度會稍慢。
二、JS 的正確擺放位置
有關 JS 如何執行能夠最有效率、這個主題太過龐大，有機會再專文討論，本篇只簡要說明一些重要的基本概念。
1. HTML 執行原理
頁面上的 HTML 碼是逐行執行，不過需要載入外部資料時，瀏覽器並不會停下來等待，而是同時執行後續的 HTML 碼，這可確保網頁能先將重要的內容先顯示出來，而未顯示的內容會等外部資料載入完畢後顯示。例如：
<img class="blog_logo" src="http://1.bp.blogspot.com/-vhIWukZmniI/VA3My_ptRfI/AAAAAAAAKM0/DaF4uGRxB0Q/s200/wfublog-logo-8abeb7.png"/>
<div class="blog_name">WFU BLOG</div>
<div class="blog_description">Blogger 調校資料庫</div>雖然第一行的 HTML 代表載入圖片的意思，但瀏覽器並不會等待圖片載入完畢，而會直接執行後面二、三行，先把網站名稱與網站敘述顯示出來，避免頁面的渲染(render)被這張圖片給塞住；等到圖片完整載入後，再回頭將第一行的內容顯示出來。
2. JS 執行原理
JS 一樣是逐行執行，但是瀏覽器一讀到 JS 碼時，整個頁面就凍結住了，完全停止顯示 JS 後面的 HTML 碼。這樣會有什麼缺點呢？例如「部落格廣告(BloggerAds)卡住網頁載入的完整解決方案」，若是 JS 內含外部連結，而不巧外部伺服器不穩，遲遲無法回應時，不但這些 JS 無法執行，連帶其後的所有 HTML 也全部塞車。
3. JS 最佳擺放位置
為了避免以上的窘狀，網頁的 JS 擺放位置，與 CSS 恰恰相反，擺的越後面越好。除了可以防止網頁開天窗，也可加快網頁載入的速度。
如果沒有特殊狀況，所謂 "越後面越好"，就是代表放在範本中
4. 實務上的抉擇
大部分 JS 碼都是有辦法放在範本最後面的位置，只不過需要加工處理，改成 "動態執行" 的形式。然而實務上每個 JS 都寫成動態執行或許不是那麼容易，如果不需要引用外部連結的話，那麼就不一定非得放在後面的位置。
另外有些 JS 碼就是一定得先執行，例如「圖片延遲載入外掛 Lazy Load」，放得太後面就失去 Lazy Load 的效用。因此 JS 該放哪裡沒有一定，還是得視情況而定。
三、懶人包如何調整
說完了大致的概念，以下舉個實例，來看看某些懶人包應該如何最佳化。對於懼怕碰程式碼的讀者而言，使用懶人包沒什麼不好，拿一點點的網頁執行效率，來換取需求的實現。而了解原理的讀者，就可以既實現需求、又增加執行效能。
1. 最新回應懶人包
這篇「Blogger 最新回應＋留言者頭像＋文章標題」為了讓安裝無腦化，將所有的 HTML/CSS/JS 全部擠在一起，只要一個複製貼上的動作，就完成了這個小工具的安裝。
這麼做的好處是，讀者要安裝失敗還真是困難！而其缺點，相信讀完本篇後大家都已經非常清楚了。對於進階的讀者而言，可以做以下的動作：
- 將 CSS 搬到
</head> 之前 → 也就是 D～AB行的部份 - 將 JS 搬到
</body> 之前 → 也就是 AC～AS行的部份
這樣就能讓頁面的執行效率最佳化。
2. JS 的陷阱
將程式碼拆成三個部份、在三個位置安裝，對於初心者而言，出錯的機率一定增加很多；對於熟練的站長而言，應該不會有太大問題，也能增加網頁執行效率。
不過，Blogger 範本的眉角沒有這麼簡單，仍請注意以下兩點：
- 四處散落的程式碼，日後管理一定會出問題，請務必參考「備份範本的訣竅」→「二、如何正確備份範本」→「1. 誤刪程式碼及忘記出處」，將各處的程式碼加上註解。
- 原本在小工具沒問題的 JS 程式碼，改放在範本中八成會有問題，連儲存都會失敗。請參考「Blogger 範本裡為何這麼多亂碼？」→「二、避免字元被轉換的方法」，在 JS 的前後加上 "不解析語法"，否則很多 JS 碼都無法成功儲存。
四、小結
瞭解 HTML / JS / CSS 各自的執行特性後，我們可以讓範本中的內容，藉由擺放到正確的位置，來執行地有效率，到目前為止我們可說是完成了 80% 的工作。
剩下的 20% 會是什麼呢？由於範本中仍有大量不必要的字元，也就是不會去執行的字元、或是可以更精簡的字串、變數等等，系列文最後一篇會介紹各種 HTML / JS / CSS 工具，來讓執行效率達到百分百。
Blogger 範本相關文章：