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

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

Bloggerads載入中~

 

阿正老師的軟體王家上有描述網頁開啟速度被一堆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>

 

 

itwalker

網路改變了眾人的生活模式,雖然離開電腦一陣子,對電腦的熱愛從未間斷過,或許技術與功力已遠遠不及時下年輕人,但試著去畫一個圓,圓不圓沒關係,盡力就好,如果覺得文章不錯的話,請大家按個「讚」或「+1」,感謝您的支持與鼓勵!歡迎加入我的粉絲團 : https://www.facebook.com/itwalker ,更多關於挨踢路人甲的文章: https://walker-a.com

1 個回應

  1. xzymoe 說:

    很不错的方法 可是感觉弄起来有点麻烦 呵呵 懒人飘过~~

發表迴響