延迟Javascript载入来提升网站速度

最近部落格一直觉得很慢,当然拜访的人数有逐渐增加是其中的缘故,但仔细查看发觉每个页面都会有卡卡的感觉,然而发现常常在左下角会出现「正在等候"http://js1.bloggerads.net/」讯息。猜想,是不是Javascript或bloggerads网站的问题题,结果拿掉就比较正常,速度也不错,于是找了一种方法可以让JavaScript延迟载入方式,这样网站挂载广告才不会载入太慢而造成访客的流失。

 

阿正老师的软体王家上有描述网页开启速度被一堆Javascript拖垮了?的文章,也找了相关Javascript载入速度的问题,觉得延迟Javascript的载入方法是不错的方案,虽然也有许多种方式,所以找出最容易且最适合目前使用的布景主题方式,为了方便以后查询,所以将整理后记录下来。

 

常常逛部落格的人都会看到人数、统计等流量或广告与各式各样的扩充元件,因为这些的处理都是来自远端的伺服器的运作,一般站长都很难掌控,因此常常必须等到远端的服务完成后,才会继续显示网页的资讯,然而访客一般都是很难有耐心的,即是再好的文章,大概都会因此而遭到中断离开。于是最后决定在网页内容都显示后,才开始载入类似广告、统计等的内容,也就是将广告延迟载入啦!

 

其实说难不难,癥结点就是摆放的位置与载入执行的时间点,讲到摆放的位置当然是跟布景主题有关啰!所以就以挨踢路人甲的的Blog做例子,因为我是在侧边栏显示BloggerAds广告,且每次遇到LAG时都出现「正在等候"http://js1.bloggerads.net/」讯息,因此研判BloggerAds广告造成网页显示慢的主因之一,因此决定将BloggerAds广告延迟载入。

 

首先将原本放置BloggerAds广告的地方修改成一段,自行命名一个「id」名称,并显示一段延迟的文字,其语法如下:

 

 

延迟Javascript载入来提升网站速度

 

 

接下来就要处理广告的程式码,其实延迟载入就是将执行程式码放到最后执行啦!因为希望文章显示完后再载入广告,所以将程式码放在页尾的footer.php上,先写一段id为「show_BloggerAds」(可自订)的,并将BloggerAds广告语法放入。

 

 

放入footer.php后,因BloggerAds广告是要显示在侧边拦,故接着再来一段javascript,主要是将这个取代在侧边拦上的,这样就可以达成广告延迟载入的效果,亦可在指定的位置上显示。

 

 

 

延迟Javascript载入来提升网站速度