转 Web程序优化的最佳实践：Cookie图片及移动应用篇

Posted 2020-06-22 麒麟阁

【编者按】来自Yahoo!的Exceptional Performance团队为我们带来了改善Web性能的最佳实践方案。为此，他们为此进行了 一系列的实验、开发了各种工具、写了大量的文章和博客并在各种会议上参与探讨。最佳实践的核心就是提高网站性能。通过各种努力，xcetional Performance团队总结出了一系列可以提高网站速度的方法。可以分为 7 大类 34 条。包括内容、服务器、cookie、CSS、javascript、图片、移动应用等七部分。

延伸阅读：

• Web程序优化的最佳实践（网站内容篇）
• Web程序优化的最佳实践（服务器篇）
• Web程序优化的最佳实践：JavaScript和CSS篇

本文为Cookie、图片及移动应用部分的内容。

图片和 Coockie 也是我们网站中几乎不可缺少组成部分，此外随着移动设备的流行，对 于移动应用的优化也十分重要。这主要包括以下几个部分。

Coockie:

1. 减小Cookie体积

2. 对于页面内容使用无coockie域名

图片：

3. 优化图像

4. 优化CSS Spirite

5. 不要在html中缩放图像

6. favicon.ico要小而且可缓存

移动应用：

7. 保持单个内容小于 25K

8. 打包组件成复合文本

1、减小Cookie体积

HTTP coockie可以用于权限验证和个性化身份等多种用途。coockie内的有关信息是通 过HTTP文件头来在web服务器和浏览器之间进行交流的。因此保持coockie尽可能的小以 减少用户的响应时间十分重要。

有关更多信息可以查看Tenni Theurer和Patty Chi的文章"When the Cookie Crumbles"。

这们研究中主要包括：

• 去除不必要的 coockie

• 使 coockie 体积尽量小以减少对用户响应的影响

• 注意在适应级别的域名上设置 coockie 以便使子域名不受影响

• 设置合理的过期时间。较早地 Expire 时间和不要过早去清除 coockie，都会改 善用户的响应时间。

2、对于页面内容使用无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。

3、优化图像

设计人员完成对页面的设计之后，不要急于将它们上传到 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

4、优化 CSS Spirite

• 在 Spirite 中水平排列你的图片，垂直排列会稍稍增加文件大小；

• Spirite 中把颜色较近的组合在一起可以降低颜色数，理想状况是低于 256 色以 便适用 PNG8 格式；

• 便于移动，不要在 Spirite 的图像中间留有较大空隙。这虽然不大会增加文件 大小但对于用户代理来说它需要更少的内存来把图片解压为像素地图。

100×100 的图片为 1 万像素，而 1000×1000 就是 100 万像素。

5、不要在 HTML 中缩放图像

不要为了在 HTML 中设置长宽而使用比实际需要大的图片。如果你需要：

<img width="100″ height="100″ src="mycat.jpg" alt="Web程序优化 网站优化 图片优化 Web优化" />

那么你的图片（mycat.jpg）就应该是 100×100 像素而不是把一个 500×500 像素的图 片缩小使用。

6、favicon.ico 要小而且可缓存

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

因此，为了减少 favicon.ico 带来的弊端，要做到：

• 文件尽量地小，最好小于 1K

 

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

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

7、保持单个内容小于 25K

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

8、打包组件成复合文本

把页面内容打包成复合文本就如同带有多附件的 Email，它能够使你在一个 HTTP 请求中 取得多个组件（切记：HTTP 请求是很奢侈的）。当你使用这条规则时，首先要确定用户

代理是否支持（iPhone 就不支持）。