image

當你的網頁或BLOG中嵌入了一些廣告、統計的外掛Javascript程式,常因為這些Javascript載入過慢,造成網頁開啟速度緩慢,網頁內容東缺一塊、西缺一塊的。阿正老師這邊教大家一個小技巧,能讓比較慢的元件放在最後才載入,讓別人開你的網頁能更順暢喔!

前言

許多有網站或部落格的玩家都會遇到一個問題,就是在網頁中插入了外連的Javascript程式,因為這些程式因為伺服器負載較重、或主機放在國外,載入會花較多的時間,造成網頁被該程式拖累,無法很順暢的直接載入完成。

之前在「不要讓 JavaScript 拉長你網站的反應時間 」這篇文章中,學到了Javascript(簡稱JS)的延後載入語法,可以在將整個網頁載入完畢後,才載入特定的JS程式碼。使用方式就是在JS的標籤中,加入defer或defer=”defer”語法,如

<script type="text/javascript" src="test.js" defer="defer"></script>

但是該語法在IE中常會出狀況,會導致整個網頁出錯,網頁中只剩下某個加入defer的Javascript程式執行結果。

 

另一種延遲載入法

阿正老師在這邊介紹另外一種延後載入JS的方法,就在先在畫面中要出現JS的地方(如廣告區塊),先放一個空白的<div>區塊,然後在網頁的最下方,放入含實際內容的<div>區塊使用JS來顯示內容),並且執行一段JS程式,把下面的div內容複製到原來的div區塊中即可。以下就詳細介紹操作步驟:

步驟一、插入空白的DIV區塊

在你要顯示Javascript的地方,先插入一段空白DIV區塊,如:

<div id="ad_space">
</div>

步驟二、將要顯示的內容轉換成Javascript程式碼

首先利用下面的HTML轉Javascript轉換工具,將你本來要顯示的內容轉換成Javascript程式碼:

如果延後載入Bloggerads的程式碼,先複製原本的HTML語法,如下:

<script type="text/javascript" 
src="http://ad2.bloggerads.net/showads.aspx?
blogid=xxxxxxxxxxxxx&amp;charset=utf-8"
></script>

接著用上面的轉換工具(以上方的Chinaz工具為例),將上面的HTML語法貼到上面的格子裡,就可轉成JS代碼了。(Document.wirteln開頭的程式碼)

image

將轉換出來的JS代碼複製起來,用記事本等文書軟體儲存成.js檔(如ad.js),然後上傳到你的網頁根目錄中

步驟三、插入實際內容DIV區塊

完成上述步驟後,接著開啟你的網頁編輯畫面,在最下方加入一段div的區塊,區塊的內容就是執行前面的JS程式,並且設定為隱藏(怕會影響網頁格式)。因為這支Javascript放在網頁最下方,所以會最後才執行。

<div id="ad_content" style="visibility:hidden;">
<script language=JavaScript src='/ad.js'></script>
</div>

步驟四、完成置換程序

在步驟三的div區塊下方,加入一段能置換DIV區塊內容的程式碼,如下:

<SCRIPT type='text/javascript'>
document.getElementById("ad_space").innerHTML=document.getElementById("ad_content").innerHTML;
document.getElementById("ad_content").innerHTML="";
</SCRIPT>

這段程式碼會最後執行將下方隱藏的DIV區塊內容,直接複製到上方預留的DIV區塊中,並將隱藏的DIV區塊清除

如此一來在整個網頁都載入後,才會顯示該DIV區塊,讓你的網頁載入變得更順暢,而不會卡住喔!

 

Q:如何知道網頁中哪支Javascript程式載入最慢?

A:通常你開啟網頁時,會發現會卡在某個地方出不來,那個大概就是載入的癥結所在,如Google Adsense、部落格觀察、部落格廣告…等。如果你要明確一點的數據,可以用Firefox搭配Firebug套件,來查出哪支Javascript跑得最久。(每個長條圖都會顯示檔名及載入花費的時間)

image

你也可以利用Pindom Tools這個免費的測速網站服務,輸入自己的網址來觀察。

image

上方的長條圖,黃色是開始時間,到了綠色是開始連接的時間,到了藍色是開始傳送檔案的時間,藍色的結束表示傳輸完成。

image

只要能利用上面兩個小工具,就很容易地找出網頁開啟速度的癥結點,除了可以將最慢的Javascript丟到最後載入之外,還可以將某些最常出現圖片丟到速度更快的圖庫中,用以改善載入速度喔!

Q:如果我有很多段Javascript要最後載入,難道一段JS就要儲存成一個檔案?

A:如果你對JS稍有認識,可以直接使用switch來做選擇。上方空白的div可自行改名,如ad_space1、ad_space2…,實際存放的內容,可改成ad_content1、ad_content2,然後在ad_content的標籤中,加入一段:

<script type="text/javascript">
id=2;
</script>

 

裡面的id=多少可自行修改,然後修改你的ad.js檔案,改成:

switch (id)
{

case 1:
 document.write("第1段JS程式代碼")
 break
case 2:
 document.write("第2段JS程式代碼")
 break


}
如此一來,就可以利用id這個參數,來控制你要顯示的內容了,很方便吧!

8 意見

  1. […] 以台灣的生態來說,最主要的 Blog 廣告供應商大概是 Google AdSense、Blog AD 跟 Blogger Ads 這三家。在這三家中,屬於台灣本土的 Blogger Ads 跟 Blog AD 的 javascript 廣告,常常是拖慢網站速度的元兇。因此針對這個情形,有專家寫了一些教學,利用延遲載入的方式 ,讓廣告最後載入讓網站保持順暢。 […]

  2. 延遲載入還有個較簡單的寫法

    <div id=”ad” style=”visibility:hidden;”>
    延遲載入內容
    </div>

    網頁最下方
    <script type=”text/javascript”>
    document.getElementById(“ad”).style.visibility=”visible”;
    </script>

  3. 您好~
    我用switch的方式來控制javascript
    HTML的程式片斷如下~

    id=2;

    document.getElementById(“ad_space1”).innerHTML=document.getElementById(“ad_content1”).innerHTML;
    document.getElementById(“ad_content1″).innerHTML=””;

    js的檔案也按照您的說明,將script碼置入switch結構中
    但卻無法顯示?(小弟確定寫在switch結構中的script碼沒有問題)
    不知是不是上方html碼中的撰寫錯誤?
    麻煩阿正老師給個指引~謝謝

發表迴響