[網站優化]延遲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的廣告欄位載入延遲就蠻不錯的,只是我不清楚他用的方法是什麼,不知道有沒有人清楚他的運作原理呢?

在Google News上追蹤我們最新文章
香腸
香腸

喜歡在網路上透過文字與圖片分文章教學,默默地用鍵盤烤了9年的香腸。另外還身兼阿腸接案餬口飯吃。對了,別叫我阿腸,請叫我香腸,這樣我才知道你看我部落格長大的。

文章: 1781

15 則留言

  1. 請問我「第一步」放在側欄
    「第二步」是放在blog裡面的頁尾
    感覺好像沒什麼差別
    還是「第二步」要放在其他的什麼地方呢?
    謝謝^^

    香腸回應:
    就如同教學這樣而已,作用就是延後顯示,不會因為JS沒跑完網站卡住

    • 我不知道是哪一個外掛,不過我本身在用的是高登介紹的Code Autoescape外掛。
      網址是gordon168.tw/?p=199

      香腸回應:
      我只是用pre語法+CSS

  2. 對現在新的瀏覽器而言已經沒有這麼做的必要了

    香腸回應:
    這是針對網站優化,我覺得效果還蠻不錯的,因為有些網站確實會因為有些Javascript載入過慢而卡住

  3. 這個方法不是很確定是否能行得通,因為會ads重覆show 2次,雖然第一次是display:none,但iframe的ads還是會載入。流量大的話可能會被Google Block

    之前是有試過用換位置的方式,不過很麻煩,還要不停計算ads的位置。
    謹供參考。

    香腸回應:
    我想應該是不太會有這種問題吧@@ 讀兩次應該還好 畢竟網頁載入都已經載到快取區域

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料