凡客诚品官方网站的前端改进建议

news/2024/5/20 11:31:22/文章来源:https://blog.csdn.net/weixin_34221036/article/details/90099037

打开http://www.vancl.com/发现采用的Asp.net,这点我感到很欣慰,毕竟国内采用.net技术体系的优秀网站少之又少。好奇之余右键-查看源码,却不由得皱起眉头,在此提几个可以让网站更快的前端建议:

  • 01.合并头部的script为一个(见图绿框部分),合并头部的css link为一个(见图红框部分)。减少对服务器端的文件请求数,加快客户端浏览器响应。

  • 02.合并尾部的script src=xxxx>成为一个(见图红框部分),以减少对服务器端的JS文件请求数,加快浏览器响应。

  • 03.将HTML压缩,去掉多余的空格和html注释,减少Html的大小,加快下载。可以参考http://www.1616.net/,html压缩后尺寸会更小,用户打开会更快,丝毫不会影响网页的表现。
  • 04.将CSS也压缩,去掉多余的空格和css注释。
  • 05.利用YUI Compressor或者jsmin对javascript文件进行压缩,我看到很多js文件连注释(比如http://www.vancl.com/defaultjs/jquery-1.2.3.pack.js)都没有去掉,白白增加文件的大小,浪费用户带宽和增加网页下载时间,影响用户体验,深感痛心。
  • 06.将图片进行压缩,比如将非动画形式的gif转换成png8,将颜色较少的jpg转成png8。这里借助了YSlow的一个小图片压缩工具Smush it做测试,发现天哪,可压缩空间太大了,压缩后减少了794.36kb,接近1MB!!!!!这是最值得做的优化之一。
  • 07.为常用且很少变更的静态文件添加http expires头,指定过期时间,让其可以缓存到客户端浏览器,不必每次都下载。节省用户的带宽,加快响应。比如http://images.vancl.com/NewVancl/Common/logo.jpg这个logo可以肯定是一个月内都很少变动的,可惜却只缓存了不到一个小半时(见图Firebug的分析),完全可以设置成一个月或者更长的时间。

  • 08.将静态文件(图片/.css/.js)放置于不同的域名下,而不是二级域名下,避免额外的cookie传递(登陆后这个cookie会更大,因为还有登录信息会附加传递)。现在凡客诚品的网站是将图片归于images.vancl.com下,通过firebug分析可以看到,额外传递了一些cookie,当静态文件很多的时候,合起来的总量就不小了,造成带宽浪费用户下载时间更长。应该独立一个域名比如http://www.static-vancl.com/来放置这些静态文件。

  • 09.最后一条就是将多个图标合成一张图片,利用css background的设置,来显示不同的图标,这样能减少图片的数量,也即减少对服务器文件的请求数量,加快浏览器响应。参考http://i.9533.com/style/images/_h_bg.png这张图,相信聪明的你一看就明白了:)

    还有一些建议是关于服务器端设置的,需要后端做配合,比如CDN,ETAG,哈希表缓存,文本数据库(Key-value形式)取代Mysql存储常用数据。

    总之,网站没有最快,只有更快!在不断的改进中你可以做到近乎极致的用户体验:快速、高效、顺畅!
     

 本文转自Kai的世界,道法自然博客园博客,原文链接:http://www.cnblogs.com/kaima/archive/2010/05/11/vancl_frontend_optimize.html,如需转载请自行联系原作者。


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_796912.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Servlet过滤器实现网站访问计数器功能

实现网站在线访问计数器功能,网站的初始值设置为1000 (1)创建CountFilter的类,实现javax。servlet.Filter接口,是一个过滤器对象,通过过滤器实现统计网站人数功能: 123456789101112131415161718…

2017年最受欢迎的10个编程挑战网站

2019独角兽企业重金招聘Python工程师标准>>> https://mp.weixin.qq.com/s/nnswkOs_FAq1NHDzfX8mwQ 转载于:https://my.oschina.net/u/3705388/blog/1575013

记一次使用Node.js electron打包网站的记录

具体步骤请参考:http://blog.csdn.net/a727911438/article/details/70834467 打包时出现了不少问题,逐一记录下来以供其他人参考。 package.json文件内容 {"name": "appname","version": "0.1.0","main&qu…

SEO是什么意思?SEO有什么用,怎么做SEO?

什么是SEO?关于SEO的定义,在网络上可以找到很多。如果你去百度一下:SEO是什么。或者你直接去百度百科搜一下:SEO。百度就会向你陈列出关于SEO的定义。它会告诉你: SEO由英文Search Engine Optimization缩写而来&#x…

高性能网站架构之缓存篇—Redis集群搭建

看过 高性能网站架构之缓存篇--Redis安装配置和高性能网站架构之缓存篇--Redis使用配置端口转发 这两篇文章的,相信你已经对redis有一定的了解,并能够安装上,进行简单的使用了,但是在咱们的实际应用中,使用redis肯定不…

内容换行_内容换行或分段不会影响到SEO优化和搜索引擎收录抓取

换行是为了看上去更加美观,而分段表示一个段落的结束,将会使内容版面更加美观,利于人们的阅读。内容是换行还是分段、文字的大小、颜色等不同情况的使用,对于搜索引擎收录抓取都是没有任何影响的,它们的不同使用只会影…

网站改成静态页面打不开_公司网站404,不淡定有啥办法,该有的态度还是要有...

了解网络营销,多元生活伴你左右,欢迎观看正阳说网络营销课程_12今天来聊一聊关于网站404的那些事儿,喜欢上网的朋友多多少少还是会遇到这个问题,为什么会出现这个原因呢?主要是用户操作失误;网站链接书写错…

linux车机系统怎么进工厂模式,工厂方法模式 - 跟JBPM学习设计模式_Linux编程_Linux公社-Linux系统门户网站...

模式简介工厂方法模式,定义一个用于创建对象的接口,让子类决定实例化那个类,其使一个类的实例化延迟到其子类中。前边我们学习了简单工厂模式,简单工厂模式的最大优势在于工厂类中包含了必要逻辑判断,根据客户端的条件…

seo服务器渲染_关于SSR( 服务端渲染 )其利与弊是什么?

服务端渲染(SSR)原理和客户端(CSR)渲染区别一、服务端渲染(SSR)是什么服务端渲染简单来说就是:用户使用的浏览器浏览的都是一些没有复杂逻辑的、简单的页面,这些页面都是在后端将 ht…

个人博客系统服务器,服务器搭建WordPress个人博客网站

WordPress 是世界上使用最广泛的博客系统之一,是一款开源的PHP软件。有丰富的插件模板资源,使用WordPress可以快速搭建独立的博客网站。WordPress-Logo-PNG-Picture.png本教程软件环境基于CentOS 6.8 64位,从配置LNMP环境开始一步步搭建属于你…

简单用户登录网站(HttpServlet1.2版本)

案例说明:当用户尚未登录就访问欢迎界面时,页面跳转到登录界面,并显示提示信息; 若用户填写的信息与固定用户信息不一致时,登录界面显示错误提示信息;否则跳转到欢迎页面,显示用户名信息. 新建Login2.java -- 用户登录界面,当用户信息输入错误时,会显示提醒信息.(当用户直接访问…

linux服务器如何上传网站,Linux服务器如何发布asp.net网站

ASP.NET core是一个用于net程序跨平台的框架,在此基础上会重写windows、Linux,以实现所有net程序、网站的跨平台。该开发框架主要用于构建基于云的现代web应用。.net开发应用运行于windows平台,由于成本原因而大量使用免费Linux平台&#xff…

通过url账号密码登录其他网站_记一次巨水的网站测试

01本人菜鸡,大佬们亲喷~长话短说就是得到了授权测试一下网站,事先说了网站是前后端分离的。整个过程没有啥骚操作,都比较基础。02给了一个url,由于这是公司某业务系统的管理口,只有一个登录界面。如下图。常规测试下登…

没有限制的搜索引擎_一个合格的SEO人员必须了解搜索引擎的基本工作原理

许多看似混乱的SEO原则和技术,实际上,从搜索引擎的原理来看,都是自然而然的事情。一个合格的SEO必须了解搜索引擎的基本工作原理。今天牛叔将带您了解搜索引擎的原理。SEO就是在保证用户体验的基础上,尽可能迎合搜索引擎。不同于对…

win7作网站服务器,win7系统做网站服务器

win7系统做网站服务器 内容精选换一换当您想在Internet上通过域名访问您的网站时,可以通过华为云的云解析服务为域名添加解析记录。例如,搭建一个网站服务器,采用IPv4格式的弹性IP地址。如果想要实现通过域名“example.com”及其子域名“www.…

香港云服务器网站备案,中国香港云服务器网站备案

中国香港云服务器网站备案 内容精选换一换安全组类似防火墙功能,是一个逻辑上的分组,用于设置网络访问控制。用户可以在安全组中定义各种访问规则,当弹性云服务器加入该安全组后,即受到这些访问规则的保护。入方向:入方…

搭建“ 双11”大型网站架构必须掌握的 5 个核心知识

每年电商双11大促对背后技术人都是一次大考,阿里数据库团队表示。经过9年的发展,双11单日交易额从2009年的0.5亿一路攀升到2017年的1682亿,秒级交易创建峰值达到了32.5万笔/秒。支撑这一切业务指标的背后,是底层技术体系的一次次迭…

让网站永久拥有HTTPS - 申请免费SSL证书并自动续期

为什么要用HTTPS 网站没有使用HTTPS的时候,浏览器一般会报不安全,而且在别人访问这个网站的时候,很有可能会被运营商劫持,然后在网站里显示一些莫名其妙的广告。 有HTTPS的时候,通俗地讲所有的数据传输都会被加密&…

gif分解工具_活用这些网站,轻松制作高级GIF动图

昨天,给大家写了哪些可以用来辅助运营作图的站点,实际上还有很多,作为即使不做全栈运营也得具备到处搜罗这些好站点的能力。很多做新媒体运营的同学,其实更多是要做配图,除了常规的头图之外,更多是文中的配…

网站服务器数据库没有权限怎么办,服务器数据库权限没有开启

服务器数据库权限没有开启 内容精选换一换安装Agent后,你才能开启数据库安全审计。通过本节介绍,您将了解如何在Linux操作系统的节点上安装Agent。Windows操作系统的Agent安装请参见安装Agent(Windows操作系统)。已成功购买数据库安全审计实例&#xff0…