網站小小加速。廣告延遲載入

網站小小加速。廣告延遲載入

「綠色工廠怎麼那麼慢?」「Bloggerads怎麼老是卡住?」以上兩句是我自己的心聲,一直想克服網頁很慢的問題,於是最近把背景改成七彩背景了,但是改善效果不是很好,真正的瓶頸應該還是廣告載入過慢的問題,尤其我常常Bloggerads和抱怨,抱怨到我感覺自己好像奧客,也好像只有綠色工廠慢的感覺@@a,是這樣嗎?

很忙的企鵝阿呆老是沒時間教我如何把廣告最後載入(都忙在睡覺吃飯打電動),於是我只好自己來找解決方式了,之前就在google找過幾次了,只是一直沒有找對關鍵字,譬如說「廣告 最後顯示」「廣告 最後讀取」之類的字眼,到昨天才發現有答案的關鍵字是「廣告延遲載入」。

在此也感謝寫了篇「延遲廣告載入,避免廣告拖慢你網站的速度」教學的demo小鋪,昨天在睡前終於讓我發現了方法,於是再晚睡都要把廣告延遲載入的技術好好實做一次,雖然說對懂javascript的學長們不是什麼大技術,但是對我來說還真是大還丹一顆!

簡單的記錄一下方法吧!在原本放置廣告的地方先改成一段<span></span>,並且命名id,中間可以寫上讀取中的字樣,或是空白。
<span id="BloggerAds">等等 Bloggerads 就來了</span>
那麼廣告程式碼到底寫在哪裡呢?既然是最後讀取當然是放在網頁最後方,當然也可以視狀況放到不影響正常文章讀取之後方。這時候也是寫一段<span></span>並命名id,再把該寫的廣告程式碼放到中間。
<span id="show_BloggerAds" style="display: none">
會拖慢網頁瀏覽的廣告程式碼
</span>
接著就是來一段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>
再測試之後終於把我覺得會卡的Bloggerads搞定,超級感動的啦!後來發現原來拖慢的不只這樣,在追求速度的快感之下,把很多廣告都一樣畫葫蘆搞定了,終於有把網頁一次展開的感覺了!

網站小小加速.廣告延遲載入

網站小小加速.廣告延遲載入 相關文章

糟糕!怎麼會沒有~會努力加油的!

參考內容推薦

加速(Speed UP)你的Blog讀取速度- 更新I am here. 心得分享!

2010年1月14日 - 加速(Speed UP)你的Blog讀取速度- 更新I am here. 心得分享 ... 不要讓JavaScript 拉長你網站的反應時間 &middot; 網站小小加速。廣告延遲載入. 工具推薦&nbsp;...

jQuery Image Lazy Load WP 延遲載入網站圖片,省流量、加快網頁載入 ...

2013年9月7日 - 如果你的網站是圖很多的那種,可能每次一開啟網頁就會自動載入幾百KB 甚至幾MB 的圖檔,但並不是每個人一開啟網頁後就會完整看完全部內容&nbsp;...

網站與網頁技術 - 最近瀏覽 Yahoo 的速度變慢了!? - 電腦討論區

廣告 抗漲!年省萬元4.5G上網費 送愛奇藝12個月 分享抽經典賽自由行機加酒 67000元入主年度CP值冠軍 ... Yahoo台灣首頁,與Yahoo拍賣都是建在台灣,仍都用IPv4網路. 所以關閉IPv6或者開Proxy瀏覽Yahoo就沒問題了. Yahoo新聞用IPv4遊覽是決對沒問題,但若用 ...

CloudFlare 架站者必備免費 CDN、DNS 網站加速分流服務

CloudFlare 架站者必備免費 CDN、DNS 託管服務設定教學,網站載入加速 、節省流量防止惡意攻擊 ... 來改善頁面載入速度,不過程式碼部分可能會被調動,若你有使用 Google AdSense 之類的廣告服務建議不要開啟,否則可能會因為修改程式碼而違反 使用規則 ...

網頁加速的14條黃金法則

只要了解大型網站 的經驗法則,就可以指引你優化網頁效能的方向。 移至主內容 新聞 產品評測 ... 雖然網頁可以串連不同網站來源的內容,但是不同網站來源的內容一旦太多,便會延遲頁面載入速度;如果能夠減少網頁內不同網站來源的內容 ...

圖片壓縮不失真 加速網頁載入速度

網頁文件檔案當中通常以圖片檔案的尺寸佔據流量的最大部份,為了因應加快網頁載入的需求,所以會採行圖片延遲載入的 JavaScript,或是直接將圖片檔案予以壓縮,而 圖片壓縮 成適合網頁型態對於網頁載入速度有很大的幫助。本篇介紹另一種不失真的 ...

Google Adsense 非同步廣告程式碼,省略重複的 Async Script,加速網頁載入

這裡介紹如何使用 Google AdSense 的非同步廣告程式碼,讓網頁載入速度更快。 新的 Google AdSense 廣告程式碼支援非同步載入之後,可以改善網頁延遲 ...

延遲載入 JavaScripts 的實務作法,加速網頁顯示速度

網站 架設 程式設計 統計 素食 特價優惠 物聯網 網站架設 程式設計 統計 素食 特價優惠 ... 特價優惠 延遲載入 JavaScripts 的實務作法,加速網頁顯示速度 2016/04/19 0 Comments 這裡介紹實務上延遲載入各種 JavaScript 的作法,包含 facebook、Google+ 與 ...

BLOGGER ADS載入太慢的解決辦法

2013年10月7日 - 這個問題也是困擾我很久,一直挺堵爛他載入的速度. 經過在網路上搜索 ... 順便給記下來. 首先,我們在blogger ads拿到的廣告碼,應該是長這個樣子,我們要把下面黃底的字給複製起來 ... 網站小小加速。廣告延遲載入 &middot; 網頁開啟速度&nbsp;...

網站小小加速。廣告延遲載入

「綠色工廠怎麼那麼慢?」「Bloggerads怎麼老是卡住?」以上兩句是我自己的心聲,一直想克服網頁...