统计代码陷阱之无形中影响了网速
http://www.yilingsj.com/xwzj/2016-08-30/435.html
说起网站统计代码,稍微有过了解的看官肯定会想起一堆统计平台,例如:百度统计、51.la统计、友盟统计等等。而这些统计代码中也是存在陷阱的哦!
一、回顾优化网页常识
通常来说,我们会将js代码置于闭合的</body>
前,因为这样做的好处就是:网页是从上往下进行加载的,js放最下面是最后加载,这样可以提升打开网页的速度。
虽然道理看官都懂,不就是将js
放最下面嘛,有什么好说的。可看官真的懂???
二、陷阱一:统计代码放页尾但还是出现在head中
如果看官是一个站长,可以检查下您的网站,看看统计代码有没有出现在head
中。好了,艺灵也不卖关子了,直接用代码说话吧!毕竟语言不太好表达,各位看官可要看仔细看图了!
2.1、百度统计代码
下面是百度最新统计代码,如果看官需要百度统计,可从百度官网获取,登录地址:sitecenter.baidu.com/sc-web/
。
2.1.1、示例代码
- <script>
- var _hmt = _hmt || [];
- (function() {
- var hm = document.createElement("script");
- hm.src = "//hm.baidu.com/hm.js?......";
- var s = document.getElementsByTagName("script")[0];
- s.parentNode.insertBefore(hm, s);
- })();
- </script>
看官生成代码后会看到一个安装说明,配图:可以看到百度是提倡将代码放到
</head>
中的。如果看官愿意,就照百度说的操作吧。下面还是来看艺灵这篇的教程吧!
如果看官将生成的代码放到了</body>
前,按常理来说,统计代码会在我们的意料中,而事实并非如此!为何???
2.2、原因分析
不知道看官有没有注意艺灵代码中黄色高亮部分,一共有两行:
第一行是寻找节点;
第二行是节点前插入内容。
那么问题就来了!如果看官在<head>
中写有<script>
标签的话,百度的统计代码就会蹭的一下跑到这个<script>
标签前。配图一张: 明白???
2.3、解决方案
既然我们知道了原因,那解决就很简单了。解决也分两步:
第一步:更换节点,
第二步:追加内容。
2.3.1、修改代码
- var s = document.getElementsByTagName("body")[0];
- s.appendChild(hm);
- })();
- </script>
上面黄色高亮为修改部分,我们再来刷新下页面看下效果吧,配图: 怎么样,这样乖了吧!
对于其它平台的统计代码,修改方法可参考上面的2.3.1。
下面再说下统计代码中的第二个陷阱。
三、陷阱二:统计代码图片拖慢了网速
下面以51.la为例。
使用过统计代码的站长应该知道统计代码有很多种样式,比如说:图片、文字形式等。来一张51.la的吧!登录地址:www.51.la
配图: 怎么样,看着很多吧,总有一款适合自己的。
前段时间,艺灵的网站因各种因素问题,总是打不开或打开很慢,后来看到除了一些因素外,统计代码也有份!
我们来看下正常情况下加载图标的速度吧,配图: 可以看到,图标加载时间在1min以上,尽管这些还只是一个小小小图标.....
那段时间,51.la这样的一个图标,有时加载了几分钟还没加载完,这也就导航了页面内容无法正常展示。后来换成文字,速度立马快了些,但还是有问题。而这个问题就是各统计代码本身的,比如说51.la的:web.51.la:82/go.asp?
这个请求比较花费时间,但这些是统计平台的问题,我们是无法解决的。
四、最后
好了,关于统计代码,普遍存在的两个陷阱艺灵已经进行了演示和提供了解决的方法,各位站长可查看下自己的网站,如果觉得艺灵说的不靠谱,自己运用测试下时间就知道了,毕竟干这行是要靠数据说话的!
除了统计代码外,各种平台的分享代码、推送代码等等或多或少都存在上面提供的陷阱现象。最明显的又是百度家的百度推送!至于怎么解决,想必看官应该学会了吧!