延遲Javascript載入來提升網站速度

最近部落格一直覺得很慢，當然拜訪的人數有逐漸增加是其中的緣故，但仔細查看發覺每個頁面都會有卡卡的感覺，然而發現常常在左下角會出現「正在等候"http://js1.bloggerads.net/」訊息。猜想，是不是Javascript或bloggerads網站的問題題，結果拿掉就比較正常，速度也不錯，於是找了一種方法可以讓JavaScript延遲載入方式，這樣網站掛載廣告才不會載入太慢而造成訪客的流失。

阿正老師的軟體王家上有描述網頁開啟速度被一堆Javascript拖垮了？的文章，也找了相關Javascript載入速度的問題，覺得延遲Javascript的載入方法是不錯的方案，雖然也有許多種方式，所以找出最容易且最適合目前使用的佈景主題方式，為了方便以後查詢，所以將整理後記錄下來。

常常逛部落格的人都會看到人數、統計等流量或廣告與各式各樣的擴充元件，因為這些的處理都是來自遠端的伺服器的運作，一般站長都很難掌控，因此常常必須等到遠端的服務完成後，才會繼續顯示網頁的資訊，然而訪客一般都是很難有耐心的，即是再好的文章，大概都會因此而遭到中斷離開。於是最後決定在網頁內容都顯示後，才開始載入類似廣告、統計等的內容，也就是將廣告延遲載入啦！

其實說難不難，癥結點就是擺放的位置與載入執行的時間點，講到擺放的位置當然是跟佈景主題有關囉！所以就以挨踢路人甲的的Blog做例子，因為我是在側邊欄顯示BloggerAds廣告，且每次遇到LAG時都出現「正在等候"http://js1.bloggerads.net/」訊息，因此研判BloggerAds廣告造成網頁顯示慢的主因之一，因此決定將BloggerAds廣告延遲載入。

首先將原本放置BloggerAds廣告的地方修改成一段<span></span>，自行命名一個「id」名稱，並顯示一段延遲的文字，其語法如下：

<span id="BloggerAds">Bloggerads載入中~</span>

接下來就要處理廣告的程式碼，其實延遲載入就是將執行程式碼放到最後執行啦！因為希望文章顯示完後再載入廣告，所以將程式碼放在頁尾的footer.php上，先寫一段id為「show_BloggerAds」（可自訂）的<span></span>，並將BloggerAds廣告語法放入。

<span id="show_BloggerAds" style="display: none">
<div align="center">

  放上Javascript語法(如BloggerAds廣告語法）

</div>

</span>

放入footer.php後，因BloggerAds廣告是要顯示在側邊攔，故接著再來一段javascript，主要是將這個<span id="show_BloggerAds">取代在側邊攔上的<span id="BloggerAds">，這樣就可以達成廣告延遲載入的效果，亦可在指定的位置上顯示。

<script type="text/javascript">

var no_show=document.getElementById("BloggerAds");

var show=document.getElementById("show_BloggerAds");

no_show.innerHTML=show.innerHTML;

show.innerHTML="";

</script>