如何装入社会的Widgets,有条件地提高你的网站的性能
日期:2013-07-24 08:44:00 现在所有的移动操作系统平台紧密集成到社会共享。这意味着如果有人在Android手机上查看网页,或内部的移动Safari浏览器的iPhone,他们可以共享该网页在Twitter和Facebook上使用,而无需依靠的bookmarklet系统范围内的共享菜单或那些微小社会共享的部件。
这些“推特”和“喜欢”按钮到您的网页添加一些额外字节,如果移动用户不太可能使用它们,你可能会考虑***去除社交按钮,当你的网站从手机访问。这减少杂波,也提高了速度得分,这是现在在谷歌搜索排名的一个因素。
删除移动设备上的社交按钮
如果你是那种坚信,社会共享部件是您的成都网页制作移动网站上的那么有用,在这里你可以做什么,以防止它们装在小屏幕上。请记住,我们不只是隐藏的按钮,而是***移除它们,以便相关的JavaScript和CSS文件不会对用户的移动设备下载。
对于一个快速演示,打开社会widgets.html,在你的桌面浏览器,然后在移动设备上。桌面视图将加载社会的部件,但不移动设备。
如何装入社会的Widgets有条件
该技术是简单的。我们计算用户的屏幕/浏览器的宽度,如果宽度超过一个特定的值(例如480像素),我们将载入相关的社会的部件。
为了实现条件加载在您的博客/网站,首先所有必要的社会部件添加到您的博客,使用通常的程序。例如,您可以访问facebook.com“喜欢”按钮生成代码,而dev.twitter.com将提供代码的鸣叫,并按照Twitter的部件。
这些生成的代码 - ***的之间的<script>标签 - 删除了JavaScript的***添加到您的网站模板。然后复制粘贴下面的代码片段之前结束</ body>标记您的网站模板。
<script type="text/javascript">
(功能(DOC,脚本***){
/ /计算用户的屏幕宽度
VAR browserWidth = window.innerWidth
| | doc.documentElement.clientWidth的
| | doc.body.clientWidth;
/ /加载JavaScript只有在网站上观看宽(非移动)屏幕
如果(browserWidth***){
VAR的js碎片= doc.createDocumentFragment()
/ /贷:斯托扬斯特凡phpied.com
js_queue =功能(URL,ID){
(doc.getElementById(ID)){
JS = doc.createElement(脚本);
js.src = URL;(js.id = ID);
frag.appendChild(JS);
}
};
/ /这是最常见的社会部件,删除那些你不需要
js_queue(“https://apis.google.com/js/plusone.js,挖掘机,js的”,“”);
js_queue(/ /“platform.twitter.com / widgets.js的,”叽叽喳喳-WJS“);
js_queue(“/ / /下行connect.facebook.net中/ all.js#XFBML = 1的”,“脸谱jssdk”);
js_queue(“/ /”platform.linkedin.com / in.js的,“LinkedIn-JS”);
js_queue(“/ / assets.pinterest.com / JS / pinit.js的”,“Pinterest的JS”);
VAR FJS = doc.getElementsByTagName(脚本)[0];
fjs.parentNode.insertBefore(FRAG,FJS);
}
/ /这里设置的***宽度(默认为480像素)
}(文件,“脚本”,480));
</ SCRIPT>
以上的JavaScript代码异步加载所有流行的社交部件 - 的Twitter,Facebook,LinkedIn,Google+和Pinterest的 - 但你可能会删除部件js_queue电话,你不打算使用您的网站。保存更改,然后你做。
我已经实现了上面的代码在我的网站上的变化。有一个框右侧栏的Facebook一样,但它不会在移动设备上加载,如果你打开这个网站。