欢迎您,零度科技专业海外服务器租用
公司电话: 24小时电话: 

当前位置:首页>网站建设教程>SEO教程

目录导航

Page Speed优化Web前端性能

亚洲服务器 发布于 2013-12-07  
SEO教程

1、使用gzip压缩

这里放在第一,是性能优化效果最显著的一步。所谓gzip压缩是一种开发的压缩算法,目前的主流浏览器(Firefox, Safari, Chrome,IE4及以上)与主流服务器(Apache, Lighttpd, Nginx)均对其有很好的支持。gzip压缩是通过HTTP 1.1协议中的Content-Encoding : gzip来进行标记说明,其可以明显减少文本文件的大小,从而节省带宽和加载时间。我做过的一个实验,发现启用gzip后,jquery 1.2.6 minify版本的大小从54.4k减少到16k,减少了70%。gzip适用的情况包括:HTML\CSS\JavaScript文件,gzip算法对于文本文件的效率比较高,而jpg/gif/png/pdf等二进制文件本身已经进 行了一次压缩,再使用gzip的成效已经不明显了。而且gzip压缩需要消耗服务器的资源,而解压缩需要消耗浏览器的资源,对于比较大的二进制文件具有非 常高的性能消耗;

2、尽量使用一种大小写方式,要么全部大写,要么全部小写。学过数据结构和算法的同学一定知道压缩其本身就是对冗余信息熵进行压缩,如何数据原素的类型种类太多,其信息冗余度会降低,从而压缩率降低;

3、过小的文件(通常小于150个字节)不宜进行gzip压缩,因为gzip会在文件头加入相关信息,对于小文件反而会增加文件的长度;

关于各服务器如何启用gzip,可以参加相关文档说明。
 
如何检查gzip是否启用?使用Firebug,在Net模块中进行检查HTTP Header是否有Content-Encoding gzip标记,参见下图:
apache开启gzip
1. httpd.conf中打开deflate_Module和headers_Module模块 http://robin.sh
2. httpd.conf中添加: simple is beautiful
<IfModuledeflate_module>
SetOutputFilter DEFLATE
# Don’t compress images and other
SetEnvIfNoCase Request_URI .(?:gif|jpe?g|png)$ no-gzipdont-vary
SetEnvIfNoCase Request_URI .(?:exe|t?gz|zip|bz2|sit|rar)$no-gzip dont-vary
SetEnvIfNoCase Request_URI .(?:pdf|doc)$ no-gzipdont-vary
AddOutputFilterByType DEFLATE text/html text/plaintext/xml text/css
AddOutputFilterByType DEFLATE application/x-javascript
</IfModule>

4、最小化JS和图片

对于JavaScript文件本身具有非常大的优化空间。所谓JavaScript压缩,就是通过一些工具将函数、变量名进行优化(其实就是尽可能 缩短变量名长度),消除多余字符(比如空格、换行符、注释等),最终得到的代码可以在分析和执行上得到性能提升。压缩后得到的代码对于机器而言是可读的, 对于人来说就不行了,因为文件内容已经面目全非。所以压缩一般用于生产期的代码,不能使用于开发期。
同样的道理,图片内容中也有一定的冗余信息,比如文件头部的一些内容描述(这些内容在jpg)图片上尤其如此。通过一定的工具(比如GIMP)可以 去除这些信息,从而节省一定的空间。
幸运的是,Page Speed已经内置了这些功能,我们不需要找第三方的工具。如下图所示,可以看到对JS文件进行最小化可以得到的预期效果:

5、启用浏览器缓存

这是经常使用的方法。当请求的资源在浏览器本地得到缓存后,第二次请求这些内容就可以从直接缓存中取出,减少了连线的HTTP请求。
HTTP 1.1提供的缓存方法主要有两种:
1.Expires andCache-Control: max-age. 即内容在缓存中的生命有效期。第一次请求后,在生命有效期之内的后期请求直接从本地缓存中取,不过问服务器;
2.Last-Modifiedand ETag. 其中Last-Modified标记文件最后一次修改的时间,浏览器第二次请求是在头部加入上次请求缓存下来的Last-Modified时间,如何两次 请求期间服务器的内容没有进行修改,服务器直接返回304 Not Modified,浏览器接到以后直接使用本地缓存。否则,服务器会返回200以及更新后的版本。ETag是服务器对于文件生成的Hash散列,其生成算法与最后一次修改的时间相关。浏览器第二次请求发送上次的ETag信息,服务器通过简单的比对就知道是否应该返回304还是200。

6、JavaScript延迟加载

通常浏览器在解析HTML时遇到JS文件会先下载,解析执行后才会下载后面的内容,期间自然会造成一定的延时。为了提高性能,尽可能将JS文件的位 置后移,如果可能,还可以通过部分代码进行异步加载。另外,对于JS和CSS在必须放置在一起情况,需要报JS放置在CSS之后,这样CSS与JS文件可 以同步下载。

7、文件拼接

这里主要包括JS/CSS等文本文件和图片。对于文本文件,尽可能将同一类型放置到一个文件中,减少HTTP请求。对于CSS背景图片,可以使用 Sprit技术将图片拼接到一起,然后使用background-position属性选择对应的图片。

到零度科技查看原文:http://www.ldisp.com/a/seo/2013/2473.shtml

上一篇:IIS / Apache / lighttpd设置内容过期方法
下一篇:http响应Last-Modified和ETag

 
了解零度?

零度科技主营全球服务器租用,如果您有服务器租用需求请联系

海外服务器租用

推荐香港、美国、韩国。提供站群服务器、高防服务器租用

海外特价服务器

关注零度特价服务器频道,了解全球特价服务器。

0

业务咨询

    技术服务

      特价活动
        全站搜索
        热门搜索:
        会员
        0通知
        客服
        0特价
        搜索
        TOP
        香港高防服务器,远程桌面,韩国服务器,nginx,反向代理