[網站優化]延遲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 則留言

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

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

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

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

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

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

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

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

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

發佈留言

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

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