行业 | 电商加载“速度就是金钱”，用速度来变现！

2016-03-11 11:07·极客君

2016年1月艾瑞咨询发布的15年电商数据显示：

  • 2015年中国电子商务市场交易规模达16.2万亿，增长21.2%。

  • 移动端网购交易额同比暴涨123.2%，在网购总交易额中的占比首次超越PC端达到55%。

移动电商的时候已经来临！

同其他所有互联网行业一样，打造优质用户体验对电商来说重中之重！

移动电商时代，人们的耐心程度正在不断下降。 互联网著名的2秒定律是这样说的：网页加载时间如果超过2秒，很大部分用户将不再愿意继续等待，而是直接关闭网页。你不仅会失去用户，而且更可怕的是你会失去潜在的客户，而那些失望的用户更会在社交媒体上吐槽他们糟糕的购物体验，给企业带来更大的品牌声誉损害。用户体验已成为电商企业成功的命脉！

网站的加载速度是用户体验的首要条件，来看看加载速度的影响力：

Google发现：搜索结果只要慢1/4秒，一天的搜索量就要减少800万。在这个高速浏览的时代，没人愿意等待。


如果，网站加载时间延迟1秒...？

大量统计数据表明：网站加载时间延迟1秒钟：转化率丢失7%，客户满意度降低16%!


对电商来说，网页加载“速度就是金钱”！


那么，如何有效提高电商的加载速度呢？以下是前人总结的一些小技巧，在这里跟大家分享。

1:合并Js文件和CSS

将JS代码和CSS样式分别合并到一个共享的文件，这样不仅能简化代码，而且在执行JS文件的时候，如果JS文件比较多，就需要进行多次“Get”请求，延长加载速度，将JS文件合并在一起后，自然就减少了Get请求次数，提高了加载速度。

2:Sprites图片技术

Spriting是一种网页图片应用处理方式，它是将一个页面涉及到的所有零星图片都包含到一张大图中去，然后利用CSS技术展现出来。这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了，可以减少了整个网页的图片大小，并且利用CSSSprites能很好地减少网页的http请求，从而大大的提高页面的性能。CSSSprites在国内很多人叫css精灵，很早就有了，在很多大型网站都有用到，特别是一些所有页面都存在的图标用得比较多，很好的提升加载速度。

3:压缩文本和图片

压缩技术如gzip可以有效减少页面加载的时间。包括HTML，XML，JSON(JavaScript对象符号)，JavaScript和CSS等，压缩率都可以在大小70%左右。文本压缩用得比较多，一般直接在空间开启就行，而图片的压缩就比较随意，很多都是直接上传，其实还有很大的压缩空间。

4: 延迟显示可见区域外的内容

为了确保用户可以更快地看见可见区域的网页可以延迟加载或展现可见区域外的内容，为了避免页面变形，可以使用占位符标签制定正确的高度和宽度。比如WP的jQueryImage LazyLoad插件就可以在用户停留在第一屏的时候，不加载任何第一屏以下的图片信息，只有当用户把鼠标往下滚动的时候，这些图片才开始加载。这样很明显提升可见区域的加载速度，提高用户体验。

5: 确保功能图片优先加载

网站主要考虑可用性的重要性，一个功能按钮要提前加载出来，用户进入下载页，一个只需要8s时间的下载花了5s在等待、寻找下载按钮图片，谁能忍受?

6: 重新布置Call-to-Action按钮

其实这个和上面一条是差不多的，都是从用户体验速度着手，跳过了网页的整体加载速度。速度没变，只是让一些行为按钮提前，Call-to-Action按钮一般习惯设计在页面底部，这样的习惯对于用户来说并不总是好的，购买用户需要等到最下面加载出来才能点击下一步操作。可以调整CTA按钮的位置或使用滑动的图片按钮。很多大型购物网站的加入购物车就是这种类型。

7: 图片格式优化

不恰当的图像格式是一种极为常见的减慢加载速度的罪魁祸首。正确的图片格式可以让图片缩小数倍，如果保存为最佳格式。可以节省大量带宽，减少处理时间时间，大大加快页面加载速度，这是一种很常见的做法。

8: 使用 Progressive JPEGs

ProgressiveJPEGs图片是JPEG格式的一个特殊变种，名为“高级JPEG”。在创建高级JPEG文件时，数据是这样安排的：在装入图像时，开始只显示一个模糊的图像，随着数据的装入，图像逐步变得清晰。它相当于交织的GIF格式的图片。高级JPEG主要是考虑到使用调制解调器的慢速网络而设计的，快速网络的使用者通常不会体会到它和正常JPEG格式图片的区别。对于网速比较慢的用户，这无疑有很好的体验。

9:精简代码

这个可以说是最直接的一个方法，也是用得比较多的，对网页代码进行瘦身，删除不必要的沉冗代码，比如不必要的空格、换行符、注释等，包括JS代码中的无用代码也需要清除。其中对于注释代码的清除可能有些人存在误区，甚至有的在里面堆砌关键词。

10: 延迟加载和执行非必要脚本

网页中有很多脚本是在页面完全加载完前都不需要执行的，可以延迟加载和执行非必要脚本。这些脚本可以在onload事件之后执行，避免对网页上重要内容的呈现造成影响。这些脚本可能是你自己网页的甲苯，往往更多的是一些第三方脚本，这样的有很多，比如评论、广告、智能推荐、百度云图、分享等等，这些完全可以等主体内容加载完后再执行。

11:使用AJAX

AJAX即“AsynchronousJavascript +XML“，是指一种创建交互式网页应用的网页开发技术。通过在后台与服务器进行少量数据交换，AJAX可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页(不使用AJAX)如果需要更新内容，必须重载整个网页面。

以上小技巧，或多或少的都能相应的提高页面加载速度……

当然也可以借助自动化的页面性能优化，（…比如性能极客，一站式全方位电商网站优化&提速解决方案供应商，全站优化，一键提速60%）


极客三剑客

极客Web --- Web端真实用户的前端性能监控和优化

  • 网页性能评测，精准测速

  • 用户体验评估

  • 瓶颈分析

  • 全站优化，一键加速

  • 网站监控，全网全地域性能趋势分析


极客H5 ---移动端Web前端性能监控 & 优化

  • 跨浏览器跨硬件跨网速下的精准测速

  • 真实用户体验

  • 全站优化，一键加速

  • 全球网站监控，实时定位性能波动，监控用户流失


极客APP---让您全方位了解您的APP

  • 精准评测APP加载速度，360°APP整体性能分析，

  • 精准定位APP性能瓶颈，10倍加速

  • 长期监控以及实时定位APP上线后的崩溃，闪退，加载缓慢等现象

  • 可监控未发布版本，完美解决APP上线前的功能性、兼容性问题，以及用户体验评测

去试试性能即可无与伦比的提速体验吧：www.perfgeek.com

举报
评论 0
    热门：