[網站優化]延遲Javascript載入,加快網站速度

很多網站其實善加優化後,可以開啟很快、很順,因為大部分拖垮網站載入的都是一些外部元素造成的,其中以Javascript最為嚴重。在網站上掛的廣告想賺賺廣告費,卻常飽受廣告載入太慢而造成訪客流失,實在是不划算,如果能將一些外部的Javascript物件延遲載入,讓網站變得更順暢,不再因為Javascript載入太慢而網頁卡住。

這樣的延遲方式主要的作法是先讓網頁其他的部分先載入,並將Javascript放到網頁全部載入完成後才載入,好處是可以讓訪客看到主要的內容,而不因為卡住而造成要等整個網頁載入完成後,才能看到內容部分,就是讓網頁有個載入的先後次序而已。


這個延遲Javascript的載入方法網路上都有,應該有不少種,我也忘記我從哪邊去找到這個語法的,因為已經使用很久了,效果上還不錯,因為之前掛BlogAD,如果沒有延遲載入的話,常常因為廣告卡住,造成網頁下半部永遠載入不完,用了這個之後,就可以把網頁全部載入完成後再去載入廣告部分,算是一種對網站優化速度的作法。

延遲載入Javascript

第1步 首先在您要顯示廣告的地方加入以下語法,例如你要顯示在側邊欄位,那就請到後台自行建立文字模組,把以下語法貼上。

<span id="MYAD"></span>

第2步 再來請將以下語法張貼到網頁最下方,在</body>標籤之前就可以了。

<span id="show_MYAD" style="display: none">
  這裡請放上Javascript語法
</span>
<script type="text/javascript">
 var no_show=document.getElementById("MYAD");
 var show=document.getElementById("show_MYAD");
 no_show.innerHTML=show.innerHTML;
 show.innerHTML="";
</script>
  • 兩個標示紅色的「show_MYAD」名稱可以改,但請保持相同,請勿和標示藍色的相同。
  • 兩個標示藍色的「MYAD」名稱可以改,但請保持相同,請勿和標示紅色的相同。

其實這只是先將ID名稱為show_MYAD的語法先隱藏,然後透過Javascript的語法去將show_MYAD內的廣告語法載到ID名稱為MYAD的欄位去做顯示,簡單說就是將原本要載入的語法放到最下方,等網頁全部載完讀到最下方後,在將讀到的語法載入到網頁上方的ID名稱為MYAD的部分。

雖然說這樣的方式並不是完全解決網站載入太慢的問題,但至少可以稍微優化一下網站不再因為廣告而害得網頁載入太久,以至於訪客等待不及就把網頁關閉了。或許還有其他更棒的延遲載入方法,像Discuz的廣告欄位載入延遲就蠻不錯的,只是我不清楚他用的方法是什麼,不知道有沒有人清楚他的運作原理呢?