网站前端性能优化总结（共7篇）
篇1：网站前端性能优化总结
一、服务器侧优化
1.添加 Expires 或 Cache-Control 信息头
某些经常使用到、并且不会经常做改动的图片（banner、logo等等）、静态文件（登录首页、说明文档等）可以设置较长的有效期（expiration date），这些HTTP头向客户端表明了文档的有效性和持久性。如果有缓存，文档就可以从缓存（除已经过期）而不是从服务器读取。接着，客户端考察缓存中的副本，看看是否过期或者失效，以决定是否必须从服务器获得更新。
各个容器都有针对的方案,，以 Apache 为例：
ExpiresActive On ExpiresByType image/gif “access plus 1 weeks”
表示gif文件缓存一周，配置可以根据具体的业务进行调整，具体配置可以参考：http://lamp.linux.gov.cn/Apache/ApacheMenu/mod/mod_expires.html
2.压缩内容
对于绝大多数站点，这都是必要的一步，能有效减轻网络流量压力。
表示zlib在压缩时可以最大程度的使用内存，压缩html、文本、xml和php这几种类型的文件，指定扩展名为html、htm、xml、php、css和js的文件启用压缩。
具体配置可以参考：http://lamp.linux.gov.cn/Apache/ApacheMenu/mod/mod_deflate.html
3.设置 Etags
在使用etags之前，有必要复习一下 RFC2068 中规定的返回值 200 和 304 的含义：
200--OK 304--Not Modified
客户端在请求一份文件的时候，服务端会检查客户端是否存在该文件，如果客户端不存在该文件，则下载该文件并返回200；如果客户端存在该文件并且该文件在规定期限内没有被修改（Inode，MTime和Size），则服务端只返回一个304，并不返回资源内容，客户端将会使用之前的缓存文件。而etags就是判断该文件是否被修改的记号，与服务器端的资源一一关联，所以etags对于CGI类型的页面缓存尤其有用。
下图是优化前的首页：（注意，此时没有压缩首页图片，即使使用了缓存，仍需要5s左右的时间）
化前的某页面
需要注意的是，使用etags会增加服务器端的负载，在实际应用中需要自行平衡。
二、Cookie优化
1.减小Cookie体积
HTTP coockie可以用于权限验证和个性化身份等多种用途。coockie内的有关信息是通过HTTP文件头来在web服务器和浏览器之间进行交流的。因此保持coockie尽可能的小以减少用户的响应时间十分重要。
使cookie体积尽量小；
在合适的子域名上设置bookie，以免影响其他子域名下的响应；
设置合理的过期时间，去掉不必要的cookie。
下面对比一下各个网站的cookie：
图中可以看出，6K的cookie显然是不必要的。
2.对于页面内容使用无coockie域名
当浏览器在请求中同时请求一张静态的图片和发送coockie时，服务器对于这些coockie不会做任何地使用。因此它们只是因为某些负面因素而创建的网络传输。所以你应该确定对于静态内容的请求是无coockie的请求。创建一个子域名并用他来存放所有静态内容。
例如，域名是
3.切分组件到多个域
主要的目的是提高页面组件并行下载能力，但注意，也不要同时使用过多的域名，否则就会出现第一条DNS lookup过多的问题，一般情况下两个域名就可以了。
4.杜绝 http 404 错误
对页面链接的充分测试加上对 Web 服务器 error 日志的不断跟踪可以有效减少 404 错误，并提升用户体验。
后记：
这次总结给我带来的启发并不在于提升系统性能性能本身，提升性能只是一个很表面上的东西，网上的方法有很多，测试的方法也有很多，照着都做一遍，性能确实会有所提升，但是这种知其然而不知其所以然的性能提升是没有意义的，这便是本文的目的所在。
篇2：网站前端性能优化总结
核心提示:这段时间一直都在为网站架构的事情所烦恼,前端,程序,服务器三个方面应该如何协调才能达到一个较为优化的网站架构呢?根据前辈的经验,我总结了以下文档,特分享.
1.UIC需要做的
采用CssSprite将背景图片,图标图片集成在一张图片内.
优点:减少用户代理对服务器的请求次数;加快用户载入页面时间.
Css&& Js 统一使用YUIcompressor进行代码压缩处理.
优点:加快服务器结束线程的时间;加快用户载入页面时间.
单个数据对象小于25K.
优点:部分用户代理(如iphone),无法载入25K以上的数据对象.
外部广告图片,宣传图片尽量防止在本站图片缓存服务器上.
优点:减少用户的DNS查询,加快页面载入速度.
色彩不超过256色的图片,不采用JPG格式存储.
优点:减少文件大小,加快页面载入速度.
使用PNG8格式的PNG图片代替Gif格式图片.
优点:具备比Gif更高的压缩比,有利于网络传塑,加快页面载入速度.
JPG图片采用interlaced模式存储.
优点:色彩复杂的图片大小更小,可让图片呈渐进状态显示,直至清晰.增强用户体验.
2. UI 需要做的
设计稿图片尽量减少一些渐变效果的使用
优点:减少JPG图片的数量,加快用户载入页面时间.
3. 开发需要做的
如果出现Ajax 方式,采用Ajax缓存
可考虑
4. SA 需要做的
负载均衡
优点:减小Web服务器压力.
Gzip压缩输出
优点:减小输出的用户数据大小,加快页面载入时间.
图片与Web服务器分离
优点:减小Web服务器压力.
增加Squid缓存
优点:避免2次刷新带来的重复请求.减少服务器压力.
架构SVN测试服务器并与公网服务器的同步
优点:避免公网页面出现错误,增强用户体验.
篇3：网站前端优化的一些小经验
那么,要实现这样的目标,我们可以从哪些方面对前端进行优化呢?
一、减少http请求
这是进行优化最关键的一步。要减少http请求次数,自然要从数据入手。一般来说,数据有不变的数据和变化的数据两种类型,前者可以缓存,后者则不能。我们可以使不变化的数据不再重复请求,这样http请求的总次数就减少了,从而达到缩短页面访问时间的目的。下面,依据数据分类的其他几种途径分别进行描述。
1、合并脚本文件
脚本文件包括JS(Java Script,即脚本),CSS(Cascading Style Sheets,即样式定义)和图片三种。可以有选择的把一些JS和CSS合并成一个文件,对一些图片使用CSS Sprites技术。这么做有什么好处呢?做过Web开发的人都知道,js和css基本是不变的,属于静态文件,图片亦然。当我们把不变的文件适当地合并在一起时,http请求的次数就会由多次变为一次。不过文件合并之后增大的体积也会影响速度。所以需要在合并文件的时候需要权衡一下,比如有100份静态文件,要合并成10份还是1份就得看具体情况了。
2、指定Expire s或者Ca che-Control
我们知道,对于静态内容,当设置文件头过期时间Expire的值为"Never expire"意味着永不过期;对于动态页面,在代码中添加cache-control,表示多少时间之后过期,比如:response set Header("Cache-Control","max-age=3600")。如果使用了Expires文件头,那么当页面内容改变时就必须改变内容的文件名,通常是在文件内容后加版本号,这一点经常容易被忽略。之前很多人在论坛里发布自己的小系统,还有Demo,但是打开一看,出现一堆又一堆的JS,CSS,既没有恰当的合并,也没有设置过期时间,所以每次刷新页面都要重新下载,如此多的http请求看着都累,无谓的流量就这样产生了。
这种情况在企业应用的系统中也时有发生。比如我们使用Ext Js作为前端技术,大小有400多K,每打开一个页面都需要导入一次,够无聊的。说到这里有人可能要问了,静态文件为什么不用apache,lighttpd或者其它呢?答:用了又怎么样,不设expire或者max-age还不是一样得下载?所以最好的方法就是写一个filter,在filter中判断,如果url满足一定的条件(比如符合配置文件中的正则表达式),就设置一个max-age,这样几行代码就可轻松搞定,岂不快哉。
3、缓存Aja x请求
“缓存的方法同动态页面,ajax请求需要使用get方式,url长度为2k(post请求有两个过程,1、发送请求headers;2、发送请求数据。根据http规范,get请求只会发送一个tcp包)。”这一段话来自Yahoo,先不管其真假,我们从另外一个角度来说明一下为什么最好使用get方式。讲一个笔者自己经历过的事。之前有一个项目的ajax请求使用了post方式,后来频繁报错,而且抛出了squid的错误,因为我们的网站使用了squid。问题就出在这里了,从http协议上可以了解到,method=post是指把数据提交到服务器上去,而squid的一个特性恰好是不会缓存post请求(事实上它确实不应该缓存,因为这样会违反http协议中的语义)。当我们把ajax请求改成get方式之后,问题就都迎刃而解了。
4、移除重复的J S
重复的js导入也有可能导致ie重新加载该脚本,没什么好说的,直接删除。
5、避免重定向
有一种经常被网页开发者忽略却十分浪费响应时间的跳转现象,这种现象发生在当URL本该有“//”却被忽略掉时,这时候会返回一个301的状态码,然后浏览器再重新发起一次请求。在企业应用里,重定向是我们常用的技术,但用在网站项目上就要小心了,因为普通的重定向其实是Server在response header中设置http status=302,浏览器收到之后,判断出是302,会重新发送一个请求,目标地址是前一次返回中指定的地址。因此,在网站项目中如果可以不用重定向就不要用了。如果做企业应用项目,关系不大,那您就放心地“定”吧。
二、使用CDN(Content Delivery Network)内容分发网络
这样做的目的是为了让内容更靠近用户。原理很简单,就是根据用户所在机器的ip来判断哪些服务器离用户最近,浏览器会再次去请求这些最近的服务器。一般的cdn服务商是通过开发自己的dns server来达到这个目的的。不过这个是通常情况,技术实力比较高或者背景比较特殊的公司才会开发自己的cdn。总之不管怎么说,使用cdn肯定可以使页面响应更快(也包括音频,视频,图片,文本文件等等)。
三、减小返回数据的体积
1、使用Gzip压缩返回数据
Gzip压缩所有可能的文件类型是减少文件体积增加用户体验的简单方法。比如本来400k的文件,压缩后只有50k~100k,那么网络的流量就立刻下来了。压缩的代价是服务器端要压缩文件,需要消耗CPU,浏览器需要解压文件,也需要消耗CPU,不过对于当今主流配置的PC来说,浏览器解压数据带来的CPU消耗简直可以忽略不计。但压缩的时候也要注意,有的浏览器在特定场景下会出去一些小bug,导致页面显示不正常。比如IE6在跨域的时候可能会有些小麻烦,不过只要把这部分数据的Gzip去掉就可以了。
2、最小化J S文件和CS S文件
压缩js可以使用JSMin或者YUI Compressor,后者同时可以压缩CSS,这没什么好说的,照做吧!
3、将CS S和J S独立成外部文件
其实这一点也可以看成是区分不变数据和变化数据。很多人喜欢在页面中写很多的JS和CSS,这些其实都是不会变化的数据,也就是说这些数据完全可以缓存在浏览器上,通过把它们独立成外部文件缓存起来。这样做看上去好像是增加了请求的次数,但是由于第一次请求之后该部分数据已经被缓存,所以第二次就无需再请求后端从而减少网络带宽的开销。
四、优化Cookie
1、减小Cookie体积
能不放就别放吧,为什么呢?Cookie就象钥匙串,只有出门和回家的时候才用,但是一整天都要带在身上,多累赘啊。
2、合理设置Cookie域
由于二级域名可以拿到一级域名的Cookie,而二级域名之间却不能相互共享Cookie,所以合理得设置Cookie的域名也可以避免无必要的带宽浪费和响应速度的延迟。
3、设置合理的Cookie过期时间
该过期就过期,不要让不必要的数据一直带在身上走来走去。
4、使用域分离
为图片或者其他静态资源文件使用子域或者建立新的独立域名,可以就避免无必要的Cookie传输,尤其是对于图片类网站。其实Cookie上的问题,单从请求看上去显得微不足道,就那么几十个byte,,不过大家都听说过水滴石穿、绳锯木断的故事吧?所以该做的,我们还是要做,正所谓“勿以善小而不为,勿以恶小而为之”。
五、优化浏览器加载
1、将CS S放在页面顶部加载
把css放在文档底部的问题是在包括Internet Explorer在内的很多浏览器中都会终止内容的有序呈现。浏览器终止呈现是为了避免样式改变而引起的页面元素重绘,这样,用户就不得不面对一个空白页面。
HTML规范清楚地指出css要包含在页面的
区域内:“和
区域内,尽管它可以多次使用它”。所以无论是引起白屏还是出现没有css的内容都不值得去尝试,这种情况下最好的解决方案就是按照HTML规范在文档内加载你的css。
参考文献
[1]扎卡斯著,曹力等译.JavaScript高级程序设计[M].北京:人民邮电出版社,2006.
[2](英)巴德著,陈剑瓯译.精通CSS:高级Web标准解决方案[M].北京:人民邮电出版社,2006.
[3](美)哈梅斯,(美)迪亚斯,谢廷晟译.JavaScript设计模式[M].北京:人民邮电出版社,2009.
[4](英)基思,杨涛,王建桥,杨晓云译.JavaScript DOM编程艺术[M].北京:人民邮电出版社,2007.
篇4：网站前端性能优化总结
关键词：网站前端 网站前端技术 网站前端性能
1 网站前端开发技术分析
1.1 HTML语言
HTML（Hypertext Markup Language）是指超文本标记语言，是制作网页必须使用的语言，也是构成网页文件的主要语言。HTML语言是一种标记语言，由一系列的标记组成，他通过标记来格式化各种页面元素，某个标记可以使他所标记的内容具有某种格式或特征，从而使得页面可以按照需要的格式呈现。
HTML网页文件需要在网页浏览器中打开，这种程序需要网页浏览器解释执行，各种网页浏览器都可以完美的支持HTML语言，所以用HTML语言制作的网页可以供使用各种浏览器的用户浏览。
1.2 CSS样式表
随着Internet应用越来越普及，对Internet程序的要求越来越高，而Internet程序一般都是做成网站形式，所以就对网站制作技术有了更高的要求，CSS就是为了弥补HTML 的不足而出现的。CSS（Cascading Style Sheet）是指层叠样式表，他不是一种语言，由一系列的属性组成，他通过属性来格式化各种页面元素，某些属性可以使他所作用的内容具有某些格式或特征，从而使得页面可以按照需要的格式呈现。
在网页中嵌入CSS代码有三种方法：①直接在需要使用CSS样式的标记中添加CSS代码。②在STYLE标记中添加CSS代码。③在外部样式表文件中添加CSS代码。
1.3 客户端脚本语言
HTML和CSS都是进行页面布局的技术，他们只能对页面进行格式化，要想使页面具有动态效果、能够与用户交互，就需要在页面上编写程序，这就促使了客户端脚本语言的出现。客户端脚本语言是编写嵌入到网页中的一段一段独立程序的编程语言。客户端脚本语言有JavaScript和VBScript两种，目前常用的客户端脚本语言是由Netscape公司开发的JavaScript。通过在网页上嵌入由JavaScript编写的程序，可以使得页面内容或格式根据设置的条件或用户的操作发生变化，从而实现页面的动态效果。
在网页中嵌入客户端脚本有三种方法：①直接在需要使用脚本的标记中添加脚本。②在SCRIPT标记中添加脚本。③在外部脚本文件中添加脚本。
2 网站前端开发技术对网站性能的影响
2.1 HTML语言对网站性能的影响
2.1.1 HTML文档大小
用HTML语言编写的网页保存起来是一个以“html”为扩展名的文本文件，一般把它称作HTML文档。该文件会占用一定的存储空间，当用户请求该文件时，该文件需要被从服务器端下载到客户端，这就需要占用网络带宽，下载过程需要一定的时间。在相同网速下，HTML文档越小，下载所需要的时间就越短，用户的等待时间就越短，网站前端性能就越好。
2.1.2 网页图片的数量
为了美观，网页上都需要使用图片，图片是通过HTML语言的“IMG”标记插入的，但是图片文件本身并不在HTML文档中，而是一个单独的图片文件，通过“IMG”标记调用到页面上。因此，当用户请求一个HTML文档时，HTML文档本身和网页上调用的图片文件是被分别下载到客户端的，每一个单独文件的下载都需要一个HTTP请求，每一个HTTP请求连接的建立都需要时间。所以，一个页面上图片越多，所需要的HTTP请求数量就越多，下载所需要的额外时间越长。
2.1.3 网页图片缓存
HTML文档中调用的图片可以被浏览器缓存到客户端，当用户再次请求同一个HTML文档时，这些被缓存的图片就不需要再次下载，从而减少HTTP请求的数量，同时减少HTTP响应的大小，进而减少用户的等待时间，提高网站前端的性能。
2.2 CSS样式表对网站性能的影响
2.2.1 样式表的数量
一般在一个HTML文档中可以加载多个样式表文件，类似于HTML文档中引用的图片，当用户请求一个HTML文档时，HTML文档和样式表文件被分别下载到客户端，每一个文件的下载都需要一个HTTP请求，每一个HTTP请求连接的建立都需要时间。所以，一个HTML文档中样式表越少，所需要的HTTP请求数量就越少，下载所需要的额外时间越短。
2.2.2 样式表缓存
HTML文档中加载的样式表文件可以被浏览器缓存到客户端，当用户再次请求同一个HTML文档时，这些被缓存的样式表文件就不需要再次下载，从而减少HTTP请求的数量，同时减少HTTP响应的大小，进而减少用户的等待时间，提高网站前端的性能。
2.2.3 样式表位置
HTML文档中对样式表文件的加载既可以放在文档的顶部，也可以放在文档的底部，将样式表文件的加载放在文档的底部会阻止页面的逐步呈现，而将样式表文件的加载放在文档的顶部会使页面逐步呈现。而页面的逐步呈现可以避免出现屏幕空白，为用户提供可视化回馈，用户可以立即看到页面的部分内容，从而使用户在感觉上觉得网页的加载速度变快。
2.2.4 CSS表达式
CSS表达式是动态设置CSS属性的一种方法，IE5之后的浏览器都支持这种方式，其通过expression方法将JavaScript表达式的值设置为CSS属性的值，其用法如下：
CSS属性：expression（JavaScript表达式）
在页面呈现、页面大小改变、页面滚动或鼠标在页面上移动时，CSS表达式都要重新求值，这种对CSS表达式的重复求值需要消耗一定的系统资源，需要一定的时间，这就使得CSS表达式的性能比较底下，在页面中使用CSS表达式就会降低网站前端的性能。
2.3 客户端脚本对网站性能的影响
2.3.1 客户端脚本的数量
一般在一个HTML文档中可以加载多个客户端脚本文件，类似于样式表的数量，当用户请求一个HTML文档时，HTML文档和客户端脚本文件被分别下载到客户端，每一个单独文件的下载都需要一个HTTP请求，每一个HTTP请求连接的建立都需要时间。所以，一个HTML文档中客户端脚本越多，所需要的HTTP请求数量就越多，下载所需要的额外时间越长。
2.3.2 客户端脚本缓存
HTML文档中加载的客户端脚本文件可以被浏览器缓存到客户端，当用户再次请求同一个HTML文档时，这些被缓存的客户端脚本文件就不需要再次下载，从而减少HTTP请求的数量，同时减少HTTP响应的大小，进而减少用户的等待时间，提高网站前端的性能。
2.3.3 客户端脚本位置
HTML文档中对客户端脚本文件的加载既可以放在文档的顶部，也可以放在文档的底部，将客户端脚本文件的加载放在文档的顶部会带来两个方面的问题。一是脚本的执行会阻止页面组件的并行下载，这使得页面组件的下载速度变慢；二是这会阻止脚本以下的内容的逐步呈现，造成屏幕空白，从而使用户在感觉上觉得网页的加载速度变慢。
2.3.4 客户端脚本大小
客户端脚本文件是一个以“js”为扩展名的文本文件，当用户请求使用客户端脚本文件的HTML文档时，客户端脚本文件会被从服务器端下载到客户端，下载过程需要一定的时间。客户端脚本文件越小，下载所需要的时间就越短，用户的等待时间就越短，网站前端性能就越好。
3 网站前端开发应遵循的技术规范
3.1 HTML语言方面应遵循的技术规范
3.1.1 压缩HTML文档
HTML文档越小，网站前端的性能越好，那么我们就可以对HTML文档进行压缩，使在网络上传输的HTML文档变小，从而节约HTML文档的下载时间，提高网站前端性能。从HTTP1.1开始，Web浏览器和服务器就开始支持压缩，常用的压缩方法是gzip。
3.1.2 合并图片
网页上图片的数量越少，一个页面上HTTP请求的数量就越少，网站前端的性能就越高。我们可以通过合并页面上的图片来达到减少网页上图片数量的目的，常用的合并图片的方法有图片地图和CSS Sprites两种。
3.1.3 对图片使用缓存
将网页中的图片在其第一次被访问时缓存在客户端可以减少HTTP请求的数量，提高网站前端的性能。Web服务器可以使用expires头指定图片的有效期，Web浏览器可以在图片的有效期内使用缓存在客户端的图片，而不用重新从服务器端下载该图片。
3.2 CSS样式表方面应遵循的技术规范
3.2.1 合并样式表文件
网页上样式表文件的数量越少，一个页面上HTTP请求的数量就越少，网站前端的性能就越高。我们可以通过合并页面上的样式表文件来达到减少网页上样式表文件数量的目的。
3.2.2 对样式表文件使用缓存
将样式表文件缓存在客户端可以减少HTTP请求的数量，提高网站前端的性能。Web服务器可以使用expires头指定样式表文件的有效期，Web浏览器可以在样式表文件的有效期内使用缓存在客户端的样式表文件，而不用重新从服务器端下载该样式表文件。
3.2.3 将样式表文件放在顶部
页面的逐步呈现可以避免出现屏幕空白，用户可以立即看到页面的部分内容，从而使用户觉得网页的加载速度变快。我们可以将样式表文件放在页面的顶部，从而使页面逐步呈现。
3.2.4 避免CSS表达式
CSS表达式的重新求值会降低网站前端的性能，我们可以通过避免在网页中使用CSS表达式来提高网站前端的性能，可以通过一次性表达式或事件处理器来代替CSS表达式。
3.3 客户端脚本方面应遵循的技术规范
3.3.1 合并脚本文件
网页上脚本文件的数量越少，一个页面上HTTP请求的数量就越少，网站前端的性能就越高。我们可以通过合并页面上的脚本文件来达到减少网页上脚本文件数量的目的。
3.3.2 对脚本文件使用缓存
将脚本文件缓存在客户端可以减少HTTP请求的数量，提高网站前端的性能。Web服务器可以使用expires头指定脚本文件的有效期，Web浏览器可以在脚本文件的有效期内使用缓存在客户端的脚本文件，而不用重新从服务器端下载该脚本文件。
3.3.3 将脚本放在底部
将脚本放在页面底部可以避免脚本阻止页面组件的并行下载和页面的逐步呈现，从而提高页面组件的下载速度，缩短页面的加载时间，提高网站前端的性能。
3.3.4 精简JavaScript
为了使JavaScript文件盡量小，可以通过精简的方式来移除代码中注释、空白字符等不必要的字符，进而缩短加载时间，提高性能。常用的精简JavaScript文件代码的工具有JSMin和ShrinkSafe两个。
参考文献：
[1]雷海卫，张萍.网页制作中静态页生成技术的研究.电脑开发与应用，2007（05）.
[2]邓小善，龙艳军.高访问量网站性能监测与优化的设计与实现，现代计算机（专业版），2009（02）.
[3]张徽燕，张胡.动态Cache技术在网站性能设计中的应用.电脑知识与技术，2006（12）.
基金项目：河南工业大学校科研基金资助项目（编号：09XSK004）
篇5：网站性能优化的实践网页设计
慢500ms =Google用户访问量降低20%
慢400ms=Yahoo! 用户访问量降低5-9%
慢100ms=Amazon销售额降低1%
散会后,不禁想看看自己网站的性能如何。自从把网站搬家到国外，还真有点担心。通过Google网站管理员工具查看网站性能，不禁大吃一惊：您网站的平均网页载入时间为 20.2 秒。该站比99.7%的网站慢。
看来要动手优化一下了。先在自己的Firefox 浏览器里安装了网站性能检测工具Google Page Speed和Yslow。首先用YSlow来检测一下访问网站首页的大小。总共257.3KB。
再用Google Page Speed 看看有什么可以改进的。从发现的问题来看，还是有不少的可以优化的地方。
由于技术能力和时间都很有限，只能进行简单的优化。我做了以下一些优化工作：
一、压缩样式图片
我并没有用什么高深的压缩工具，只是用Fireworks CS4批量处理了图片(没有改变文件类型)，原来网站的主题的所有样式图片有195KB, 优化后就减少了54.94KB而且优化后的图片，肉眼根本看不出区别(至少我是没看出来)。
二、启动gzip 压缩
由于我使用的虚拟主机，并没有配置服务器开启gzip的权限。我只能依靠Wordpress 的插件 GZIP Output。首页页面大小(Html/Text)减少了18.9KB。
但是，GZIP Output 只能对于php 文件进行压缩，对于大部头的CSS、JS 文件都无法处理，
我又下载安装了WP CSS 和WP JS 插件想分别对CSS 和 JS 文件进行压缩。不过，WP JS这个插件我没搞懂怎么用，WP CSS 倒是应用成功了。网站主题样式表文件从原来的23.5KB 变成了8.1KB,单就首页来说又减少了15.4KB。
三、减少不必要的页面元素
从页面来看载入的js 来看，我有两个Js是用来做网站访问统计的。一个是google analytiss一个是piwik。权衡利弊我去掉了piwik的统计代码，首页大小又减少了8.3KB。
另外，网站页脚的有个图片没什么作用。我干脆给去掉了，首页大小又减少5.66KB,。这样做不仅可以减少页面大小，还可以减少不必要的Http请求。
总结一下
真是不优化不知道，一优化吓一跳。优化后首页大小从原来的257.3KB变成了154.0KB, 总优化数值为103.3KB,比原来页面优化了40.15%。首页的Http请求从原来的25个变为22个。具体优化明细如下：
经过了这一番优化，到底会对页面载入时间产生什么效果呢。让我们使用Web Page Analyzer试试看，它可以模拟用户在不同网络情况下访问页面载入时间。对比一下优化前后的情况，效果还是相当不错的。主流带宽的用户首页载入时间，从20.37秒优化到只有不到3秒。
以上的优化工作其实不只会对首页有优化效果。因为整个网站用的是一个主题样式，其他页面也都得到了优化。至于整个网站的优化性能，我们还用文章开头用的Google网站管理员工具来检验一下。到了一月份再通过它查看网站性能，终于，得到了满意的结果。“您网站的平均网页载入时间为 2.6 秒(更新时间：-1-9)。 该网站比 57% 的网站快。”
篇6：网站优化近期seo优化总结
一,如何确定关键词
一般来说,客户对关键词都有相对比较准确的定义了,只是一些词属于比较大范围,反而并不精准.应该深入再分析,以确定关键词的搜索里,用什么关键词转化率更高,长期的观察、总结，不断的修正方向，
二，搜索引擎的变化。
近期对百度，google的观测，发现百度更新较快，google比较慢，个人认为，百度作为国内最大的搜索引擎，在经历了很多事情以后，已经非常重视网站搜索质量，也尽可能的为网民提供有价值的搜索结果。从最近对一些网站排名的变化来看，一些只凭关键字的综合实力相对差的位置下调了，而在google上，这样的变化不够明显，一些有作弊嫌疑的网站仍然没有受到惩罚。给人的感觉是，百度越来越重视，越来越严格，而google可能正在大力发展其它业务，因而对搜索结果仍然在前期的基础，并没有作更大的提升。当然，google本身的搜索还是精准的，但改变的没有百度迅速。
最近我优化的网站，有在百度首页出现了，有的在百度和google首页都出现了，我所关注的就是为什么有个网站没有在google首页出现，我发现有一个小现像，在百度，首页标题出现三个一样主关键词，只要内容做得好，结构好，没有作弊，是没什么问题，而google呢，他比较认标题，如果在标题上出现三个一样主关键词，可能认为是作弊了，当然，这样做是对的，不过，有些片面，
这些规则，可能很久没变过了。
三，网站优化的形式，
如果用一个形像的比喻，网站优化这样的行为，我觉得像钓鱼，很多钓鱼的同行，在同一个水域钓鱼，不同的人用不同的方法，饵料，在不同的地方等待着客户咨询。而客户就像是鱼，在下面游弋，自由搜寻自己感兴起的饵料，这时，不同的地域，不同的方法，不同的饵料，将会钓到不同的鱼，多少的鱼。这是网站优化一个很重要的问题，除了运气以外，技术，经验非常重要。当然，不同的是，客户需要看更多的案例证明明，要真是钓鱼，鱼看到有这么多同类被钓上，肯定不敢再来了：)实际上，网站优化同钓鱼一样有很多复杂的问题，特别是如何获得长期稳定排名，超越对手。更重要是如何使访问量转化为合作机会，我想这里面除了经验，技术，观念以外，还涉及到如何分析客户心理，分析竞争对手状况及如果谈判等一系列的问题。
很多时间，我们的优化者给了客户具体的排名，模糊的优化营销理念，有的东西客户是明白的，有的是不明白的，甚至有些是网站优化者本身都不明白的。因为大总分的网站优化都都是技术出身，对于如何去做，心理明了，但对于更全面的东西，往往比较迷茫，毕竞，能在设计，技术，观念，营销概念上都有全面的认识的人并不多。
篇7：网站前端性能优化总结
前端技术是庞大的, 包括html、css、Javascript、Image、Flash等各种技术与资源。Web前端优化是复杂的, 针对每个资源都有不同的优化方式。从用户角度而言, 优化能够让页面加载得更快, 对用户的操作响应更及时, 给用户的体验更友好。从服务器角度而言, 优化能够减少页面请求数, 减小请求所占带宽, 节省服务器资源。Web前端优化的途径有很多, 按粒度大致可以分为两类[1]:第一类是页面级别的优化, 例如http请求数、脚本的无阻塞加载、内联脚本的位置优化等;第二类则是代码级别的优化, 例如Javascript中的dom操作优化、css优化、html结构优化, 以及后台C#代码优化等。
1.1 页面级优化
(1) 减少http请求数, 这条策略基本上是最重要最有效的。
一个完整的请求都需要经过DNS寻址、与服务器建立连接、发送数据、等待服务器响应、接收数据这样一个“漫长”而复杂的过程。每个请求都包含时间成本和资源成本, 时间成本就是用户看到或者“感受”到这个资源需要花费的时间, 资源成本是每个请求都因携带数据而占用的带宽。另外, 由于浏览器进行并发请求的数量是有上限的, 请求数多了, 浏览器就需要分批请求, 因此会增加用户的等待时间, 形成站点响应速度慢的印象。
减少http请求数的主要途径包括:①从设计实现层面简化页面, 保持页面简洁、减少资源的使用。一个网页不可避免地需要引入一些外部文件, 如js、css、背景图片等, 由于http协议的无状态性, 用户的每一次访问, 都需重新向服务器请求所有文件, 而大量http请求的累加, 正是影响网站速度的最主要原因;②合理设置http缓存。缓存无处不在[2], 有浏览器端的缓存、服务器端的缓存、代理服务器的缓存、Asp.net页面缓存、对象缓存等。http中具有缓存功能的是浏览器缓存, 以及缓存代理服务器。当Web请求抵达缓存时, 如果本地有“已缓存的”副本, 就可以从本地存储设备而不是从原始服务器中提取该文档。这样减少了冗余的数据传输, 加快了客户端加载网页的速度, 减少了服务器的负担, 大大提高了网站的性能;③资源的合并与压缩。如果可以的话, 尽可能将外部的脚本、样式进行合并, 多个合为一个。另外, css、Javascript、Image都可以用相应的工具进行压缩, 压缩后往往能省下不少空间。
(2) 将外部脚本置底。
浏览器是可以并发请求的, 这一特点使其能够更快地加载资源, 然而外链接脚本在加载时会阻塞其它图片样式脚本等资源, 直到脚本加载完成后才会开始加载其它资源。如果将脚本放在较前的位置, 势必会影响整个页面的加载速度。解决这一问题最简单的方法就是将脚本尽可能往后移, 减少对并发下载的影响。
(3) 异步执行inline脚本。
inline脚本对性能的影响与外部脚本相比更为严重。首先, 与外部脚本一样, inline脚本在执行时一样会阻塞并发请求;其次, 浏览器在页面处理方面是单线程的, 当inline脚本在页面渲染之前执行时, 页面的渲染工作则会被推迟。因此, 可选择异步执行时间较长的inline脚本。
(4) 采用LazyLoad延迟加载Javascript。
随着Javascript框架的流行, 越来越多的站点也使用起了框架。如今, 一个框架往往包括了太多功能, 许多功能并不是每一个页面都需要的, 这样既浪费了带宽又浪费了执行时间。目前的做法主要有两种:一种是定制一个专用的mini版框架;另一种则是Lazy Load模式, 这种模式最初只加载核心模块, 其它模块可以等到需要使用时才加载。
(5) 减少不必要的http跳转。
对于以目录形式访问的http链接, 很多人都会忽略链接最后是否带“/”, 假如服务器对此是区别对待, 则需要注意, 这其中很可能隐藏了301跳转, 增加了多余请求。
(6) 避免重复的资源请求。
这种情况主要是由于疏忽或页面由多个模块拼接而成, 然后每个模块中请求了同样的资源时, 会导致资源的重复请求。出现的几率不大, 但是还是要注意排查。
1.2 代码级优化
(1) Javascript优化。
DOM操作应该是脚本中最耗性能的一类操作, 例如增加、修改、删除DOM元素或者对DOM集合进行操作。如果脚本中包含了大量的DOM操作则需要注意以下几点:需要遍历html collection的时候, 尽量将它转为数组后再访问, 以提高性能。DOM操作还需要考虑浏览器的reflow和repaint, 因为这些都是需要消耗资源的。Javascript代码还应避免使用eval和function构造函数, 减少作用域链查找等。
(2) css优化。
css代码优化可以减少占用网页字节, 缩短浏览器下载css代码的时间, 也便于日后维护。优化时应注意缩写css代码, 同属性提取共用css选择器。尽量避免使用*通配符, 避免使用过小的背景做平铺, 避免使用expression等。
(3) html优化。
在整个前端的构成中, html是必不可少的一部分, 而且是真正地展示“前端”。虽然与十几K的Javascript相比, html的大小在整个页面资源中一般不会占太多的比重, 而且还有Gzip, 但事实表明, 大多数页面都有较大的压缩余地, 即使是Gzip过后仍然能减小可观的体积, 如使用相对URL、删除http或https、 删除注释、压缩空白符、删除元素默认属性等。
(4) 后台C#代码改进。
避免或减少装箱拆箱操作, 避免使用ArrayList, 可用泛型代替;捕获指定的异常, 不要使用通用的System.Exception;避免使用递归调用和嵌套循环, 使用它们会严重影响性能, 在不得不用时才使用等。
2 Asp.net技术或控件的合理使用
Asp.net技术或控件的合理使用主要表现在如下方面:[3]
(1) 不使用不必要的服务器控件 (Server Control) 。
在Asp.net中, 大量的服务器端控件方便了程序开发, 但也可能带来性能上的损失, 因为用户每操作一次服务器端控件, 就与服务器端发生一次往返过程, 在有些情况下呈现或数据绑定比使用服务器控件更有效。因此, 若非必要, 应当少使用Server Control, 尽量选择html控件。能在客户端实现的功能就在客户端实现, 减少服务器的压力。
(2) 不使用不必要的ViewState。
默认情况下, Asp.net对所有的Server Control都启用了ViewState (视图状态) 。视图状态管理是服务器控件的功能, 该功能使服务器控件的视图状态在隐藏的窗体字段中, 可以在往返服务器过程上重新填充它们的属性值, 所以该功能确实会对性能产生影响。ViewState需要在客户端保存一些信息, 这会造成性能上的消耗, 只在必要时保存服务器控件视图状态才启用ViewState。
(3) 避免与服务器发生不必要的往返过程。
通常, 只有在查询或者修改保存数据操作时, 才需要与服务器发生交互。有些数据操作可在客户端上进行。例如, 从html窗体验证用户输入经常可在数据提交到服务器之前在客户端进行。通常, 如果不需要将信息传递到服务器以将其存储在数据库中, 那么就不应该编写导致往返过程的代码。使用 Page.IsPostBack可以避免在往返过程中执行不必要的处理, 减少信息被不必要地发送到 Web 服务器的次数, 在page_load函数及一些只需要初始化一次的事件函数中均可以使用该属性来提高应用程序性能。
(4) 当不使用会话状态时禁用它, 并且程序开发中尽量少用Session。
并不是所有的应用程序或页面都需要针对于具体用户的会话状态, 应该对任何不需要会话状态的应用程序或页面禁用会话状态。
3 数据库端性能优化
数据库端的优化目标可以概括为:①减少数据访问 (减少磁盘访问) ;②返回更少数据 (减少网络传输或磁盘访问) ;③减少交互次数 (减少网络传输) ;④减少服务器CPU开销 (减少CPU及内存开销) ;⑤利用更多资源 (增加资源) 。本节从Asp.net技术及控件出发考虑数据库性能优化问题。
(1) 用完马上关闭数据库连接。
访问数据库资源需要创建连接、打开连接和关闭连接等操作步骤。这些过程需要多次与数据库交换信息以通过身份验证[5], 比较耗费服务器资源。Asp.net中提供了连接池 (connection pool) 来改善打开和关闭数据库对性能的影响。系统将用户的数据库连接放在连接池中, 需要时取出, 关闭时收回, 等待下一次连接请求。连接池的大小是有限的, 如果超过连接池的最大限度后仍要求创建连接, 必然大大影响性能。因此, 在建立数据库连接后只有在真正需要操作时才打开连接, 使用完毕后马上关闭, 从而尽量减少数据库连接打开的时间, 避免出现超出连接限制的情况。
(2) 尽量使用存储过程。
存储过程是存储在数据库服务器上的一组预编译的SQL语句, 使用存储过程可以避免对命令的多次编译, 在执行一次后其执行规划就驻留在高速缓存中, 以后需要时只需直接调用缓存中的二进制代码即可, 因此, 其处理速度非常迅速。在.net Framework 提供的所有数据访问方法中, 基于 SQL Server 的数据访问是生成高性能、可缩放Web应用程序的较佳选择。使用托管SQL Server提供程序时, 可通过使用编译的存储过程而不是特殊查询获得额外的性能上的提高。另外, 存储过程在服务器端运行, 它可以减少数据库操作语句在网络中的传输。
(3) 优化查询语句。
Asp.net中ADO连接消耗的资源相当大, SQL语句运行时间越长, 占用系统资源的时间也越长。因此, 尽量使用优化过的SQL语句以减少执行时间。比如, 不在查询语句中包含子查询语句, 只返回必需的数据、字段, 充分利用索引等。
(4) 减少数据绑定DataBinder的使用。
用DataBinder.eval绑定数据时不必考虑数据来源, 不必关心数据的类型, eval会把这个数据对象转换为一个字符串。在底层绑定做了很多工作, 使用了反射性能, 因此影响了数据性能。如将数据源直接转换成DataRowView, 将会带来性能上的较大提升。
参考文献
[1]网页前端开发优化的经验总结[EB/OL].http://www.missyuan.com/redirect.php?fid=16&tid=496839&goto=nextnewset, 2010.
[2]HTTP协议之缓存[EB/OL].http://www.cnblogs.com/TankXiao/ar-chive/2012/11/28/2793365.html#gainian, 2012.
[3]几点ASP.NET开发过程中的最优化[EB/OL].http://hi.baidu.com/litangfei520/item/6ef3f3ccaff600090bd93a25.
[4]几十个ASP.NET性能优化的常用方法[EB/OL].http://www.chinaz.com/program/2008/1024/41979.shtml, 2008.
【网站前端性能优化总结】相关文章：
Web前端性能优化的研究与应用09-27
Web前端优化06-13
前端培训总结04-20
前端项目总结05-03
前端员工工作总结07-11
菜鸟前端开发年终总结10-20
前端年度考核个人总结01-31
年度工作总结前端06-18
web前端学习总结06-02
前端笔试面试题目总结06-02