使用 Lazy Load 方法可以按需/延时加载文章中的图片,可如果实现 Lazy Load 的 JavaScript 代码没有加载完毕的话,页面首屏的图片就不会及时显示。现在页面上的 JavaScript 都让我用 JavaScript to Footer 插件放在了页面最后,而页面上的广告(Google AdSense 和百度推广)却提前加载了 JavaScript 请求,影响了后续的 Lazy Load 加载。实际上即便不使用 Lazy Load 方式加载图片,也需要考虑选择合适的百度推广加载方式。
也许是因为我使用了 Google 的公共 DNS 来解析域名,使得百度服务器不能很好的判断我的位置而提供最快速的响应,经常发现页面卡在百度推广那里,也就是页面渲染被阻塞。
我想在不做较大变动的情况下克服这一困境,就去找了找百度推广广告代码的投放方式,希望将它处理好,不至于影响页面的加载速度和效果。我是宁愿广告显示很晚或者没有显示出来,也不愿意页面卡在中间。
下面说说我是怎么评价百度推广广告代码的各种投放方式的。
1. 网盟推广合作广告位代码 —— 直接投放¶
从百度联盟 —— 网盟推广合作 —— 获取广告位代码那里得到的代码类似于下面的形式,
<script type="text/javascript">/*300*250, 2011-12-16*/ var cpro_id = 'u713995';</script><script src="http://cpro.baidu.com/cpro/ui/c.js" type="text/javascript"></script>
虽然是两段 JavaScript 代码,却需要放在一起才管用。通常页面加载到这个位置的时候,如果从百度服务器下载 js 文件的速度不够快,页面就卡在这里了。
注意这个代码是不能做任何修改的,否则会就违反规定了。
2. 通过百度广告管家投放网盟广告¶
百度广告管家看名字就知道是干什么的了。我们可以利用其网盟推广合作补余功能来使用百度广告管家投放百度推广(网盟)的广告。
百度广告管家的代码投放方式灵活多了,有很多种。下面简单介绍一下,需要的话可以点击相应链接看百度的营销文档。
A. 直接投放:一段式JS、两段式JS两种¶
从百度广告管家 —— 广告位 —— 获取代码那里生成代码后,可以选择两种形式的投放方式:一段式JS、两段式JS。
一段式JS投放方式类似于上面 1 中介绍的网盟推广广告位代码的投放方式。优点是简单、直接投放,支持 JS 调用,即使用类似 document.write()
的方法写入广告位代码。
两段式JS生成的广告位代码包含<head></head>
和<body></body>
两部分。将百度广告管家的 JavaScript 放到页头(<head>
)中,然后另一段表示代码位的代码放到要显示广告的位置。特点是 JS 请求次数少,执行效率高。两段式代码还支持高级接口一次请求多个广告位的方式。
这两种方式要么是在页头中加载相应的 JavaScript,要么是在广告位置加载,如果百度服务器稍忙,就会影响页面的加载效果和速度了。
B. iframe 方式投放¶
在一段式JS和两段式JS投放代码选择框的最右边还有个关于 iframe 方式投放的提示。
使用 iframe 类型的广告位代码,广告的加载与网页内容无关,因此无需等候网页内容的依次载入,即可直接展示广告。如果网络速度较慢,iframe 代码也不会影响网页自身的加载速度。但缺点是:
- 在系统中修改尺寸无效,需修改线上代码;
- 不支持漂浮与弹窗类型的广告位;
- 广告不支持原窗口打开,已经设置为原窗口打开的广告将在 iframe 中打开;
- 广告位上投放富媒体类型的广告物料,则无法与主页面的内容进行直接交互;
- 不支持来源域和被访 url 定位。
如果不是有上述缺点,这种方式无疑是最不影响网页加载速度和效果的。
C. 广告后加载方式¶
广告后加载的方式相当变态,看看其说明文档吧,估计没什么人愿意用。
3. 异步加载方式¶
异步加载广告也不会影响页面自身的加载速度,且同时支持固定位置的百度广告管家和百度推广(网盟)。Google 也很早就支持异步加载了,包括 AdSense 和统计。
广告位异步加载代码的方式介绍出现在百度管家的帮助中。虽然挺好的,可是不支持的情况也很多:
- 不支持漂浮和弹窗广告位
- 不支持富媒体类型广告物料
- 不支持除固定网盟之外的其他富媒体类型广告物料
- 不支持网盟主题悬浮
- 不支持从百度联盟获取网盟代码粘贴到广告管家中
因为我仅仅通过百度广告管家投放网盟的广告,且方式为固定位置,所以就选择了这种投放方式。
操作起来也很简单,当然广告位异步加载页面有详细介绍,这里就不多啰嗦了。在百度广告管家 —— 广告位那里创建广告位,勾选上空闲时启用网盟推广合作,然后从百度广告管家 —— 广告位 —— 获取代码那里生成代码后,选择两段式 JS,再按照广告位异步加载页面的介绍进行改造就可以了。
综上,我认为 iframe 或异步加载的方式加载百度广告是挺好的,而我考虑到方便和实用,选择了异步加载方式。
不过我也不是这方面的专家,只是好好研究了一下百度的说明文档,也许还有不少理解错误的地方,希望有兴趣的朋友多多留言交流。©
本文发表于水景一页。永久链接:<http://cnzhx.net/blog/lazyload-and-baidu-cpro-js/>。转载请保留此信息及相应链接。
原封不动或异步加载…
同感
wp原生主题自定义的?还不错。呵呵
异步诟病多,3 4年了 还这样。百度没救了,喜欢仿谷歌的东西 ,还仿个缺胳膊少腿儿的。
你这评价挺准确的 :D
博主有没有研究过百度广告管家管理界面的写法?对这个一直有兴趣,但是没完全琢磨透,对前端了解的不是那么多,故询问。
很早的时候琢磨了不少,后来账号被停就没弄过了。看当时的趋势,应该跟Google的double click 服务差不太多。