我们在前面的几节中分别讲了提高网站性能中内容、服务器、JavaScript和CSS等方面的内容 。除此之外,图片和Coockie也是我们网站中几乎不可缺少组成部分,此外随着移动设备的流行,对于移动应用的优化也十分重要 。这主要包括:
Coockie:
减小Cookie体积对于页面内容使用无coockie域名
图片:
【网站性能:图片和Coockie以及移动应用的优化】优化图像优化CSS Spirite不要在HTML中缩放图像favicon.ico要小而且可缓存
移动应用:
保持单个内容小于25K打包组件成复合文本
27、减小Cookie体积
HTTP coockie可以用于权限验证和个性化身份等多种用途 。coockie内的有关信息是通过HTTP文件头来在web服务器和浏览器之间进行交流的 。因此保持coockie尽可能的小以减少用户的响应时间十分重要 。
有关更多信息可以查看Tenni Theurer和Patty Chi的文章When the Cookie Crumbles 。这们研究中主要包括:去除不必要的coockie使coockie体积尽量小以减少对用户响应的影响注意在适应级别的域名上设置coockie以便使子域名不受影响设置合理的过期时间 。较早地Expire时间和不要过早去清除coockie,都会改善用户的响应时间 。
28、对于页面内容使用无coockie域名
当浏览器在请求中同时请求一张静态的图片和发送coockie时,服务器对于这些coockie不会做任何地使用 。因此他们只是因为某些负面因素而创建的网络传输 。所有你应该确定对于静态内容的请求是无coockie的请求 。创建一个子域名并用他来存放所有静态内容 。
如果你的域名是www.example.org,你可以在static.example.org上存在静态内容 。但是,如果你不是在www.example.org上而是在顶级域名example.org设置了coockie,那么所有对于static.example.org的请求都包含coockie 。在这种情况下,你可以再重新购买一个新的域名来存在静态内容,并且要保持这个域名是无coockie的 。Yahoo!使用的是ymig.com,YouTube使用的是ytimg.com,Amazon使用的是images-anazon.com等等 。
使用无coockie域名存在静态内容的另外一个好处就是一些代理(服务器)可能会拒绝对coockie的内容请求进行缓存 。一个相关的建议就是,如果你想确定应该使用example.org还是www.example.org作为你的一主页,你要考虑到coockie带来的影响 。忽略掉www会使你除了把coockie设置到*.example.org(*是泛域名解析,代表了所有子域名译者dudo注)外没有其它选择,因此出于性能方面的考虑最好是使用带有www的子域名并且在它上面设置coockie 。
29、优化图像
设计人员完成对页面的设计之后,不要急于将它们上传到web服务器,这里还需要做几件事:你可以检查一下你的GIF图片中图像颜色的数量是否和调色板规格一致 。使用imagemagick中下面的命令行很容易检查:
identify -verbose image.gif
如果你发现图片中只用到了4种颜色,而在调色板的中显示的256色的颜色槽,那么这张图片就还有压缩的空间 。尝试把GIF格式转换成PNG格式,看看是否节省空间 。大多数情况下是可以压缩的 。由于浏览器支持有限,设计者们往往不太乐意使用PNG格式的图片,不过这都是过去的事情了 。现在只有一个问题就是在真彩PNG格式中的alpha通道半透明问题,不过同样的,GIF也不是真彩格式也不支持半透明 。因此GIF能做到的,PNG(PNG8)同样也能做到(除了动画) 。下面这条简单的命令可以安全地把GIF格式转换为PNG格式:
convert image.gif image.png
我们要说的是:给PNG一个施展身手的机会吧!在所有的PNG图片上运行pngcrush(或者其它PNG优化工具) 。例如:
pngcrush image.png -rem alla -reduce -brute result.png在所有的JPEG图片上运行jpegtran 。这个工具可以对图片中的出现的锯齿等做无损操作,同时它还可以用于优化和清除图片中的注释以及其它无用信息(如EXIF信息):
推荐阅读
- 我如何让我的网站让百度搜索到
- Python自动调用IE打开某个网站的方法
- 如何实现IE8浏览器多用户登录同一网站的方法
- 使用PP鸭批量压缩图片的方法步骤
- Light Image Resizer分割图片文件的方法
- cl75升级教程
- JS实现获取图片大小和预览的方法完整实例【兼容IE和其它浏览器】
- IE下JS保存图片的简单实例
- 使IE6正常显示PNG-24格式图片的两种方法
- 关于拍照的图片不能全屏做桌面墙纸的问题