方案节选:某知名电商公司官网重要问题分析及改造方案

2019-06-20 微构网络 团队动态

在很多企业网站开发项目中,有一部分是该公司已经有了项目,但由于原网站因为种种原因无法满足现有业务需要而需要改造或重做。最近有一个类似的项目,考虑到很多项目具有部分共性,我们后续会公开部分我们提供的项目方案中的适宜公开的内容供大家参考。

本次公开的内容为某知名电商公司现有官网重要问题分析及改造方案,也就是针对这些问题提供我们的解决方案。该部分内容如下(节选):

由于贵公司已经存在官网,只是由于已有官网存在多个方面的不足之处才需要重新设计开发一个新的官网;因此,几项重要的方案,我们将针对目前官网存在的问题提出我们的解决方案(对一下内容有疑问的辛苦与我们沟通,倾听我们的讲解)。

以下列出的内容,仅仅是一些比较典型的问题以及对应的解决方案,实际项目中还会有更多细节需要注意,但只是很多东西已经成为我们一种比较好的习惯。

①、静态单页,维护内容困难。

现状:目前的网站是一个静态的单页面,维护修改任何内容必须通过了解开发的人员介入去完成,而且只有一个页面,无法展示详尽的内容。

解决方案:我们将提供一个易用的管理后台,实现只要会用电脑、会上网的人就能完成网站内容的日常维护及更新。会把需要日常频繁更新的内容全部由后台管理完成,包括但不限于新闻、关于、业务、招聘、联系方式等。

②、打开速度过慢,有损品牌形象流失来之不易的流量。

现状:使用长沙电信200MB光纤网络访问首页首次加载需要大概24秒;虽然本项目主要目的是用于展示,但这样的体验会影响用户对品牌的印象。而如果是用于推广,这将浪费大量的精准流量;而且对于网站自然SEO积累带来负面影响。主要原因包括:

a、使用阿里云香港服务器,造成高延迟;

b、所有图片、css、js等静态资源完全放在一台带宽并不高的服务器上;

c、所有图片均是显示原图,而没有进行合理的缩略处理(如公司风采部分的图片本来只有400px以内的缩略即可,但都是显示大小几百KB的原图)。

d、大量冗余代码和资源造成网页体积加大。

首页首次打开需要24s

解决方案:将通过多个方面的措施实现网页首开时间在500ms-2s之间(不同客户端环境以及个别大量大体积图片页面可能有所偏差)。具体措施有:

a、使用阿里云或者其他云厂商的国内BGP骨干网络服务器,保障全国各地用户顺畅访问;

b、采用静态分离解决方案,使得网站绝大部分css、js、图片等静态资源分布式部署到云服务上,与网站web服务分离,实现理论上没有带宽峰值瓶颈,无论是1个用户还是10个用户访问带宽峰值不影响。

c、所有图片在不影响清晰度前提下,尽可能减小减小图片体积。

d、仅使用必要的代码,极大程度上减少代码冗余,同时杜绝无关资源加载。

③、代码过于冗余,并加载大量非必要资源。

现状:由于目前网站使用的是响应式布局,在代码上有容易不可避免,但是这里的冗余并不是响应式造成的,而是可能制作者也不知道那些库到底是干嘛的,所以全部一股脑加了进来。比如就为了两个向左向右的箭头icon却加载了整个FontAwesome字体图标库;更为严重的是,页面中包含了这个页面可能原始制作方某网络公司页面的原始资源,只是通过css的display:none属性值隐藏了,但在页面中依然被加载进来。

超过大半的资源是非必须的,多余的!

解决方案:a、结合实际,为PC和移动端编写独立的两个前端(数据来自同一个管理后台),极大减少冗余;b、杜绝加载无关的资源内容,引入项目需要的资源;c、由于页面都由我们团队重新开发,隐藏不存在会有其他公司信息的致命错误。

④、存在严重的知识产权风险。

现状:从上一点可以看得出,目前这个网站是随便另保存某公司一个页面,然后只是把最直观的部分信息改成xx电商相关的;这种行为本身就会出现很大的知识产权风险问题。由此产生的问题包括:c、页面上的内容图片大量来路不明;b、图片上的字体包含需要购买才可以商用的字体;c、由于代码本身来历不明,就算代码侵权追究在司法实践中不是那么容易,但css引用的字体文件被追究确是一告一个准。再者,出现多种这样的问题、特别是有第三方公司图片、文案等信息,就算对方不追究,如果用户发现将极大损害品牌形象。

解决方案:网站前端均有我们团队重新编码,有必要引用一些类库时仅引用MIT等协议可以商用的部分。如果需要,可以在图片、文案等内容上给出相关专业建议,尽可能避免知识产权风险。

⑤、SEO表现差。

现状:由于以上列出的种种原因,加上目前这个网站本身就压根没考虑SEO等问题,所以这方面表现自然就差。当然对于贵公司而言SEO这点流量不值得一提,但是有总比没有好;更重要的是,如果这方面表现更好相信用户对该品牌印象会更好。举个例子:现在搜索xx电商相关会出现一些咋一看是负面的内容,比如启信宝有一条这样结果“湖南xx电商xxxx有限公司-法律诉讼-判决文书-失信被执行人-启信宝”,虽然贵公司没有相关失信记录仅仅有一条跟员工劳动纠纷问题,然而这样的信息可能被人误解;而如果有更多的结果是自己可控的,这种可能被误解的信息自然就更少展示给用户。

解决方案:我们将从如下几个方面从设计开发角度更好的帮助网站的整体SEO表现,当然最终起决定作用的还是未来该网站的内容的数量和质量。主要措施包含:

a、减小网页体积;

b、规范代码编写;

c、静态资源与web服务分离;

d、所有主要页面可以灵活自定义页面的标题、关键词、摘要(TDK);

e、主动推送新生成内容给百度;

f、XML格式网站地图;

g、如果需要,可以为对接人提供基础SEO指导。

⑥、细节问题。

现状:由于之前网站据了解为业余人员制作,所以除了以上问题外,自然存在一些细节问题。比如根据项目经验:在PC端图片的实际视觉尺寸必须与css尺寸一致才最佳,比如一个100px的图片,css写尺寸99px或者101px都会严重印象。

这张图片是首页第二屏右边的一张图片,在视觉感受上毕竟模糊,实际上这张图的原图是非常清晰的,但视觉效果依然狠模糊。又如,在手机上,如果视觉区域100px,则实际图片大小应大于200-300px才可以有较好的视觉效果(跟屏幕物理比有关,所以视觉大小360的屏幕截图打开有1080大小)。

解决方案:在细节处理上我们有比较丰富的项目经验,在项目过程中,我作为项目经理,会严格协调前端、UI、后端把控应该把控的一些细节。另外,可以为对接人提供关于内容创作过程中图片导出等日常问题的专业建议。

以上内容未经微构网络书面许可不得转载,侵权必究!

微信与项目经理沟通

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

阅读 280
首页 服务 案例 博客 知识