Yahoo!网站性能最佳体验的34条黄金守则——图片、Coockie与移动应用

简介: 原文地址:http://dudo.org/archives/2008051511220.html   英文地址:http://developer.yahoo.com/performance/rules.html中文地址:http://www.dudo.org/article.asp?id=218      我们在前面的几节中分别讲了提高网站性能中内容、服务器、JavaScript和CSS等方面的内容。

原文地址:http://dudo.org/archives/2008051511220.html

 

英文地址:http://developer.yahoo.com/performance/rules.html
中文地址:http://www.dudo.org/article.asp?id=218
      我们在前面的几节中分别讲了提高网站性能中内容、服务器、JavaScript和CSS等方面的内容。除此之外,图片和Coockie也是我们网站中几乎不可缺少组成部分,此外随着移动设备的流行,对于移动应用的优化也十分重要。这主要包括:
Coockie:

  1. 减小Cookie体积
  2. 对于页面内容使用无coockie域名

图片:

  1. 优化图像
  2. 优化CSS Spirite
  3. 不要在HTML中缩放图像
  4. favicon.ico要小而且可缓存

移动应用:

  1. 保持单个内容小于25K
  2. 打包组件成复合文本


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(*是泛域名解析,代表了所有子域名)外没有其它选择,因此出于性能方面的考虑最好是使用带有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信息):
    jpegtran -copy none -optimize -perfect src.jpg dest.jpg

30、优化CSS Spirite

  • 在Spirite中水平排列你的图片,垂直排列会稍稍增加文件大小;
  • Spirite中把颜色较近的组合在一起可以降低颜色数,理想状况是低于256色以便适用PNG8格式;
  • 便于移动,不要在Spirite的图像中间留有较大空隙。这虽然不大会增加文件大小但对于用户代理来说它需要更少的内存来把图片解压为像素地图。100×100的图片为1万像素,而1000×1000就是100万像素。

31、不要在HTML中缩放图像
      不要为了在HTML中设置长宽而使用比实际需要大的图片。如果你需要:
<img width="100" height="100" src="mycat.jpg" alt="My Cat" />
那么你的图片(mycat.jpg)就应该是100×100像素而不是把一个500×500像素的图片缩小使用。

32、favicon.ico要小而且可缓存
      favicon.ico是位于服务器根目录下的一个图片文件。它是必定存在的,因为即使你不关心它是否有用,浏览器也会对它发出请求,因此最好不要返回一个404 Not Found的响应。由于是在同一台服务器上,它每被请求一次coockie就会被发送一次。这个图片文件还会影响下载顺序,例如在IE中当你在onload中请求额外的文件时,favicon会在这些额外内容被加载前下载。
      因此,为了减少favicon.ico带来的弊端,要做到:

  • 文件尽量地小,最好小于1K
  • 在适当的时候(也就是你不要打算再换favicon.ico的时候,因为更换新文件时不能对它进行重命名)为它设置Expires文件头。你可以很安全地把Expires文件头设置为未来的几个月。你可以通过核对当前favicon.ico的上次编辑时间来作出判断。

Imagemagick可以帮你创建小巧的favicon。

33、保持单个内容小于25K
      这条限制主要是因为iPhone不能缓存大于25K的文件。注意这里指的是解压缩后的大小。由于单纯gizp压缩可能达不要求,因此精简文件就显得十分重要。
      查看更多信息,请参阅Wayne Shea和Tenni Theurer的文件“Performance Research, Part 5: iPhone Cacheability – Making it Stick”

34、打包组件成复合文本
      把页面内容打包成复合文本就如同带有多附件的Email,它能够使你在一个HTTP请求中取得多个组件(切记:HTTP请求是很奢侈的)。当你使用这条规则时,首先要确定用户代理是否支持(iPhone就不支持)。

adpics.aspx?source=kbh1983&sourcesuninfo
相关实践学习
基于函数计算快速搭建Hexo博客系统
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Hexo博客。
目录
相关文章
|
9月前
|
数据采集 搜索推荐 算法
如何做谷歌SEO优化?
答案是:谷歌SEO排名优化需要足够多的GPB外链+足够多的优质内容。 了解SEO的基础 首先,要做好谷歌SEO优化,你需要理解SEO的基础知识。 SEO的定义 搜索引擎优化(SEO)是一种提高网站在搜索引擎中的排名的方法。 通过优化你的网站,你可以提高其可见性,从而增加你的流量。 谷歌搜索引擎的工作原理 了解谷歌如何评估和排名网站是优化你的网站的关键。 谷歌使用复杂的算法来确定每个搜索查询的结果。
103 0
如何做谷歌SEO优化?
谷歌留痕霸屏平台有哪些?
通常你要做谷歌的排名霸屏,至少需要上千个不同的网站资源去操作,而且这些网站不能一成不变。
153 0
谷歌留痕霸屏平台有哪些?
|
搜索推荐 SEO
搜索引擎优化优化网站哪家好?前十大优良的优化网站有哪些?
《SEO优化网站哪家好?前十大优秀的SEO优化网站有哪些?》跟着互联网技能的不断发展,网站优化已经成为互联网行业的一个重要组成部分。SEO优化网站的目的是通过改进网站的内容和结构,提高网站在搜索引擎中的可见度和排名,然后完成网站营销和推行的目的。那么,SEO优化网站哪家好?前十大优秀的SEO优化网站有哪些?
239 0
搜索引擎优化优化网站哪家好?前十大优良的优化网站有哪些?
流量如何才能变现?实际测试谷歌广告联盟(Google Adsense)的广告效果以及如何优化相关代码
2010年,谷歌正式退出中国市场,无数人扼腕叹息,如今十年过去了,谷歌还有两条重要的业务线并没有完全退出,一个是页面统计业务(Google Analytics),另外一个则是谷歌广告联盟(Google Adsense),说起广告联盟,玩儿过网站的朋友应该并不陌生,对于中小型站长、博主来说,要想通过网站的流量取得一些收入,除了和一些线下线上厂商谈包月广告位,更多的可能就是投放广告联盟广告了。但随着网络广告的不断发展,广告形式有了很大的变化,出现了CPC、CPS、CPA、CPV等众多广告类型。
流量如何才能变现?实际测试谷歌广告联盟(Google Adsense)的广告效果以及如何优化相关代码
|
UED 开发者
婚恋交友软件源码,以用户体验为中心的开发细节
婚恋交友软件源码,以用户体验为中心的开发细节
|
编解码 开发者
小视频源码的运营商们不可忽视的三个问题
截止到2020年5月17日,小视频平台中抖音、快手礼物收入分别达到9503.2万和6139.3万,这是从2020年年初起到现在为止的礼物收入额。我们熟知的斗鱼、虎牙排在了第三第四位,礼物收入也都在3000万以内。
582 0
|
程序员 UED
用户体验!=挑剔的美工设计,互联网营销
  最近一年来,国内互联网业界突然流行起来“UX用户体验”风。这一方面得益于Apple等巨头在这方面极致的表现,另一方面现在信息过载导致用户越来越挑剔,从而对体验越来越重视了。《程序员》甚至为此出了专题:《刘江: 用户体验,技术人员的必备常识》   但是许多UX的强调者,很容易偏向“界面设计”,甚至将UX理解为“挑剔的美工设计”。
672 0
|
机器学习/深度学习 计算机视觉