隐性等待_社会共享的隐性成本

隐性等待

I recently worked on a small RWD site which was intended as a replacement for a multi-megabyte monstrosity. The original site had reached almost 3.5Mb in size, crashed certain browsers and was unusable on mobiles. I squeezed every byte out of the new site…

我最近在一个小型RWD网站上工作，该网站旨在替代数兆字节的怪物。 原始站点的大小已接近3.5Mb，使某些浏览器崩溃，并且无法在手机上使用。 我把每个字节都挤出了新站点……

• minimal, clean HTML5 was adopted
  最小，干净HTML5被采用
• the only shim added was for HTML5 on oldIEs
  唯一添加的填充是oldIE上HTML5
• the trend for clean, flat, square design reduced the quantity of CSS code and graphics
  整洁，扁平，方形设计的趋势减少了CSS代码和图形的数量
• CSS3 transitions and animations were used in favor of JavaScript alternatives
  使用CSS3过渡和动画来替代JavaScript
• CSS3 effects and a small set of webfonts replaced many images
  CSS3效果和一小组网络字体替换了许多图像
• JavaScript wasn’t necessary, but a little progressive enhancement was implemented without relying on a large library.
  不需要JavaScript，但是在不依赖大型库的情况下实现了一些渐进式增强。

The result: a home page total of less than 300Kb and all other pages were less than 90Kb — that included all images and no code compression or minification. The site loaded quickly on all devices irrespective of connectivity.

结果是：首页总计少于300Kb，所有其他页面均少于90Kb，其中包括所有图像，并且没有代码压缩或压缩。 不管连接如何，该站点都能在所有设备上快速加载。

The client loved it … but there was one thing missing: social network sharing buttons. I was indulged with several monologues from media marketing managers to the importance of these key elements on the modern web.

客户喜欢它……但是缺少一件事： 社交网络共享按钮 。 我沉迷于媒体营销经理的几篇独白，讲述了这些关键元素在现代网络上的重要性。

社会骗局 (The Social Swindle)

Social media gurus neglect to mention that very few pages go viral. For every internet phenomenon, there are billions of people and companies who have never achieved cult status. Adding social buttons to all pages seems a good idea, but no one is going to ‘Like’ your company’s ethical statement or ‘Share’ photographs of the CEO.

社交媒体专家忽略了很少的页面具有病毒性。 对于每种互联网现象，都有数十亿人和公司从未获得过崇拜。 在所有页面上添加社交按钮似乎是一个好主意，但是没人会“喜欢”您公司的道德声明或“分享” CEO的照片。

“Ahh”, claim the media masters, “but what’s the harm in making it easy to share content?”. I’ll give you a few reasons…

媒体负责人声称， “啊” ， “但让内容轻松共享有何害处？” 。 我会给你一些理由...

带宽节省按钮 (Bandwidth-Busting Buttons)

Search for “Facebook like button” and you’ll soon find their useful Get the code tool. Fill in the details, copy ten lines of script, paste it into your page and it’s job done.

搜索“类似于Facebook的按钮”，您很快就会发现它们有用的“ 获取代码”工具。 填写详细信息，复制十行脚本，将其粘贴到页面中，即可完成工作。

While it may look like a few insignificant lines, it’s loading various resources in the background. That tiny Facebook ‘Like’ button requires an excessive 270Kb of compressed code and several HTTP requests. Why? And let’s not forget the other popular social networks…

尽管看起来有些微不足道，但它正在后台加载各种资源。 那个很小的Facebook“赞”按钮需要270Kb的压缩代码和多个HTTP请求。 为什么？ 而且，别忘了其他流行的社交网络…

Facebook ‘Like’ button:	270Kb
Google+ Share button:	135Kb
Twitter Share button:	95Kb
LinkedIn Share button:	80Kb

Facebook“赞”按钮：	270Kb
Google+分享按钮：	135Kb
Twitter分享按钮：	95Kb
LinkedIn分享按钮：	80Kb

Want all four? That’ll be 580Kb, please — or more than 10 seconds on a good mobile connection. Those tiny buttons were almost seven times larger than the pages I required them on.

想要全部四个吗？ 请达到580Kb，或者在一个良好的移动连接上超过10秒。 这些小按钮几乎比我要求的页面大七倍。

Admittedly, some of the scripts will be cached in the browser because the user has visited another site using similar buttons. But that doesn’t equate to zero cost; the scripts must still be parsed and executed by the browser before it can download or render other content. Facebook even suggests adding their code immediately after the opening body tag — before any of your content is shown.

不可否认，某些脚本将被缓存在浏览器中，因为用户已使用类似的按钮访问了另一个站点。 但这不等于零成本。 脚本仍必须由浏览器解析并执行，然后浏览器才能下载或呈现其他内容。 Facebook甚至建议在显示body之前，在body标签后立即添加代码。

Who’s going to ‘Like’ a page which has become less responsive?

谁会“喜欢”响应速度较慢的页面？

测试时间 (Testing Times)

Several of the social buttons fail if they’re not added to a publicly-available web page. In other words, they won’t appear when you’re testing a site on your local PC or intranet. To ensure the buttons don’t break your layout, you must upload the pages to a live server — probably your real website. Do you put other code live before it’s tested?

如果未将某些社交按钮添加到可公开访问的网页，则会失败。 换句话说，当您在本地PC或Intranet上测试站点时，它们不会出现。 为了确保按钮不会破坏您的布局，您必须将页面上传到实时服务器(可能是您的真实网站)。 您是否在测试之前将其他代码投入使用？

社会保障 (Social Security)

Would you permit any developer to access your site and do what they like? No? Social buttons insert JavaScript into your page and that code has the same rights as yours. It can do anything: replace content, deface images, hijack links, show advertising, redirect elsewhere, etc.

您会允许任何开发人员访问您的网站并做他们喜欢的事情吗？ 没有？ 社交按钮会将JavaScript插入您的页面，并且该代码具有与您相同的权限。 它可以做任何事情：替换内容，破坏图像，劫持链接，显示广告，重定向到其他位置等。

While none of the social networks would engage in such activity, do you:

尽管没有一个社交网络会参与此类活动，但您是否：

1. understand what all this bloated code is doing across all social networks?
   了解所有这些social肿的代码在所有社交网络中的功能吗？
2. trust that all social networks have protocols to prevent indirect or deliberate attacks from internal employees and external crackers?
   是否相信所有社交网络都具有防止内部员工和外部黑客进行间接或蓄意攻击的协议？
3. test all code on all devices when it changes?
   更改时在所有设备上测试所有代码？
4. know that all code will work on all browsers at all times? A single error raised by one of these buttons could prevent subsequent JavaScript execution and break your pages.
   知道所有代码始终可以在所有浏览器上运行吗？ 这些按钮之一引发的单个错误可能会阻止后续JavaScript执行并破坏您的页面。

您可以吃社交蛋糕，也可以吃！ (You Can Have Social Cake and Eat it!)

Social networks only survive if they’re being used. They provide simple-to-use share buttons in order to become a more valuable resource and entice people to join. Your site may enjoy parasitic benefits, but don’t forget it’s the networks which have most to gain.

社交网络只有在被使用时才能生存。 它们提供了易于使用的共享按钮，以成为更有价值的资源并吸引人们加入。 您的站点可能会带来寄生的好处，但是请不要忘记，受益最大的是网络。

Fortunately, it’s possible to implement sharing buttons without the ludicrous bandwidth or security overheads. The techniques aren’t always well publicized, but I’ll illustrate how to do it my next SitePoint article…

幸运的是，可以实现共享按钮而不会产生可笑的带宽或安全性开销。 这些技术并不总是广为人知，但我将在下一篇SitePoint文章中说明如何做到这一点……

翻译自: https://www.sitepoint.com/social-sharing-hidden-costs/

隐性等待