如何装入社会的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一样,但它不会在移动设备上加载,如果你打开这个网站。

上一篇文章:
下一篇文章: