网站建设品质差别实例说明之慢与快你要什么?

2016-11-18 22:54 栏目:实用知识 查看(8532)

最近,同事不停抱怨说总接到用户咨询网站建设的问题的时候,总会一开始就是你们做个网站多少钱,这让人很无语,特别是对于我们这帮以技术为主的团队。似乎网站是从别处批发来的样子,这样对于做技术的同学来说无疑是一种羞辱——自己辛辛苦苦开发的东西被用户理解为一文不值。

当然实际上一直以来都有不少用户接通电话就问你们做一个网站多少钱的问题。很庆幸的是,我们发现现在越来越多的客户在与我们沟通的时候说:“其实一般网络公司跟直接说做什么东西多少钱,我一般都不会需要他的服务,因为他都不知道我要干嘛,就已经把价格给确定了,因此他肯定是给一个非常固定的东西给我;那我还不如买现成的产品。”

的确,其实网站建设(当然包括微信开发、app开发),其实都是非标准化的东西,其实跟律师那样的行业差不多,虽然有很多可以“复用”的东西,但真正要把案子处理好,还是得根据具体情况具体实施。

呃,不对,好像上面说了一段废话的样子,但实际上我们今天要讲的问题是由上面引出的问题。接下来的时间里,我们微构网络会不定期发布这个系列的内容。就是通过一个个实例说明,为什么同样的网站,有的收费高又得收费低;而同样的价格,为什么不同建站公司做出来的东西不一样。

在我本人和客户打交道的时候,我很少跟客户吹自己公司怎么怎么的,而贬同行怎么怎么的。我就想用用户听得懂的东西来说明,如果说技术细节用户显然不知道我在说什么。

————-分割线————-

今天是这个系列的第一篇文章,这一个系列我们微构网络都希望用短文来阐述,把重点概述下就好。这里我就以一个例子说明走心的开发与不走心的开发带来最终网站品质的差异,今天这个差别跟网站的加载速度,从而影响用户体验有关。

wrwqe

上图就是曾经我们做过的一个实例模型,而且这个模型在网站建设过程中非常常见,但是否走心的开发结果却不一样,这个需求大概如下:

这是某公司的一个产品系列,这个系列有是个以上,并以后可以在后台随时添加系列,而每个系列有大概10-20(初期可能就几个,后续不超过20个)个具体的产品。现在,就是想在首页的一个位置加上这个模块,在这个模块中可以向用户展示这个产品系列的所有产品的一张大图片。

如果仅仅只是实现这个需求,大概就是产品进行分类,比如这个系列是属于A类,在A类下有多个小分类(当然也可以用标签之类的属性),然后就是下面的产品。而前台就调用A类下的子分类以及子分类下面的产品;然后输出,加上css及js就是上面的样子了。

就上面一段我还真见过不少,甚至很多网站就是按照上面说的办,然后就完工的。实际上这样真的好吗。现在我做一个假设,假设这个网站运行了半年,产品资料都比较齐全了。假设A类下有10个小类,每个小类有10个产品,而每个产品展示在这里的大图是高清的图,就算只有200KB吧(实际上这种图大于这尺寸,因为色彩比较丰富又高清)。那么光这一部分的图片文件大小就是10*10*200KB=20MB。不算上这个页面其他的静态资源体积以及数据库查询(如果是动态的)以及页面解析,就光这一部分可以计算下加载时间。

如果光这一部分20MB,不考虑服务端的压力,我们只考虑客户端,就算客户是独享的20MB光钎网络,理论上也得8秒才能加载完成。而实际上在现在的网络环境下单个用户客户端很难达到这要求。更别说服务端的问题了,比如一个普通的企业网站基本上使用单台服务器,甚至是虚拟主机,很少见一个企业使用10MB以上独享带宽资源的服务器;当然现在有云空间使用,比如七牛等等。

因此,这样显然是不行的,这样也许可以过客户这关,但你如果就这样能对得起自己作为一个开发者的身份么?也就是如果那样只能算是一个“半成品”,最多是“半成品+”。

那么改如何解决?

其实稍微改进一下就可以解决这个问题。比如首先仅加载A类下的一个子分类的10个产品,这样初始状态下这部分图片的体积就是1*10*200KB=2MB,这个大小对于现在的网络环境似乎还可以接受。然后在每次切换的时候,通过ajax请求对应子分类的产品图片信息,加载进来覆盖之前的;当然可以对已经加载的内容进行缓存。实际上就一个模块2MB也并不完美,还是觉得大了,那么可以进一步优化,那就是默认状态下仅加载A类下子分类的第一个产品的大图,以及这个子分类下所有产品的缩略图,这样默认大小理论上大概就是1*1*200+1*10*10=300KB(其中假设缩略图是10KB每张);这样显然并最开始不是一个档次;形象地说,在其他条件一致情况下,现在和最开始打开网页,就相当于是一个火箭一个是拖拉机了。

与我们的项目经理联系
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流

转载请注明出处:网站建设品质差别实例说明之慢与快你要什么? - 微构网络
分享: