使用Socialite.js延迟加载社交按钮
今天,我在Angie's List的网络团队度过了愉快的一天。 Angie's List一直在将其网站开发为令人难以置信的资源库……而他们一直在继续加快其网站的速度。 他们的页面加载速度非常快。 如果您不相信我,请在 车库门.
该页面包含图像,视频和社交按钮……并且仍然以毫秒为单位加载。 比较他们的矿场就像驾驶F-16赛车普锐斯。 他们也都还没有完成,总是在寻找改善客户体验并找到和共享内容的方法。
我们没有专职的开发团队,也没有上市公司的资源,因此我们的进度比Angie's List慢一点。 我们确实有一个令人难以置信的主人 飞轮 –利用它们的高级缓存和CDN,但我们知道仍然有一些事情在伤害我们。 例如,我们的图像没有被优化。 那里有一些服务,您可以将图像转换为图像的一小部分,同时保持其清晰度……我们正在寻找它们。
当我向他们展示我们的网站时,当加载社交按钮时页面冻结时,我畏缩并垂下了头。 我认为是Facebook。 啊……一两秒钟后,按钮出现了,页面的其余部分被加载。 啊。
当我描述问题时,他们的工程师立即找到了解决方案, 社交名流.js。 社交名流提供了一种非常容易的方法,可以随时随地实现和激活大量的社交共享按钮。 无论是在文档加载,文章悬停还是任何情况下! 由于社交名流异步加载按钮,因此在等待50kb的社交媒体时,文档不会挂起。
值得庆幸的是,已经有一个包含Socialite的WordPress插件,称为 WP社交名媛。 今晚,我剥离了所有自定义的代码以加载按钮并实现了WPSocialite。 我能够自定义CSS并修改所需的按钮。 我期待将来再添加一些其他按钮,例如Buffer或Reddit…,但现在非常适合!