面向内容的优化规则目前有 10 条。 1. 尽量减少 HTTP 请求 (Make Fewer HTTP Requests) 几种常见的方法能切实减少 HTTP 请求: 1) 合并文件,比如把多个 CSS 文件合成一个; 些分站点,存在明显的类似问题。对于国内站点来说,如果过多的使用了站外的 Widget ,也很容易引起过多的 DNS 查找问题。 3. 避免重定向 (Avoid Redirects) 免一次重定向。 与 二者之间是有差异的。如果是 Apache 服务器 ,通过配置 Alias 或mod_rewrite 或是 DirectorySlash 能够xx这个问题。 4. 使得 Ajax 可缓存 (Make Ajax Cacheable) 这一条也是有效的。 5. 延迟载入组件 (Post-load Components) 7. 减少 DOM 元素数量 (Reduce the Number of DOM Elements) 9. 最小化 iframe 的数量 (Minimize the Number of iframes) 10. 杜绝 http 404 错误 (No 404s) 与 Java Script 引起的 404 错误因为定位稍稍"难"一点而往往容易被忽略。 这是内容篇的 10 条。应该说具体引导性的内容还不够详细。逐渐会根据自己的理解补充上来。
:Exceptional Performance : Best Practices for Speeding Up Your Web Site 】 1. 使用 CDN (Use a Content Delivery Network) (假装如此)。【Tin 说国内 CDN 用的挺多,看看 CDN 厂商的市场就知道了,还没走入寻常百姓家】 2. 添加 Expires 或 Cache-Control 信息头 (Add an Expires or a Cache-Control Header) ExpiresActive On $HTTP["url"] =~ "\.(jpg|gif|png)___FCKpd___1quot; { location ~* \.(jpg|gif|png)$ {
对于绝大多数站点,这都是必要的一步,能有效减轻网络流量压力。或许有人担心对 CPU 压缩对于 CPU 的影响,放心大胆的整吧, 没事儿。Nginx 例子: gzip on; IIS 如何启用 Gzip 压缩? 4. 设置 Etags (Configure ETags) 了。当然,Etag 对多数站点性能的影响并不是很大。除非是面向 RSS 的网站。【看到有朋友批评说写的简略,并且说 IE 不支持 ETag。明确说一下:IE 支持 ETag,倒是使用 IIS 要注意相关 Etag Bug。】 补充:我的意思是"很多网站在不注意的情况下都是打开 Etag 的,而没有网站关心如何用,消耗资源而不知。并不是说 Etag 不好 ,合理利用 Etag ,{jd1}能取得很好的收益. 5. 尽早刷新 Buffer (Flush the Buffer Early) 6. 对 AJAX 请求使用 GET 方法 (Use GET for AJAX Requests)
1. 缩小 Cookie (Reduce Cookie Size) 上多数浏览器现在都比这个多,比如 Firefox 是 50 个) ,每个 Cookie 最多 4K,注意这里的 4K 根据不同的浏览器可能不是严格 的 4096 。别扯远了,对于 Cookie 最重要的就是,尽量控制 Cookie 的大小,不要塞入一些无用的信息。 2. 针对 Web 组件使用域名无关性的 Cookie (Use Cookie-free Domains for Components) Yahoo! 的静态文件都在 yimg.com 上,客户端请求静态文件的时候,减少了 Cookie 的反复传输对主域名 (yahoo.com) 的影响。 从这篇 When the Cookie Crumbles 能看出,MySpace 和 eBay 的 Cookie 都不小的,想必是对用户行为比较关心。eBay 前不久构 造了 Personalization Platform ,就是从 Cookie 的限制中跳出来。
CSS 1. 把 CSS 放到代码页上端 (Put Stylesheets at the Top) 到下进行解析和渲染。没有人喜欢等待,而浏览器已经考虑到了这一点。 2. 避免 CSS 表达式 (Avoid CSS Expressions) 3. 从页面中剥离 JavaScript 与 CSS (Make JavaScript and CSS External) 4. 精简 JavaScript 与 CSS (Minify JavaScript and CSS) 5. 使用 <link> 而不是@importChoose <link> over @import 6. 避免使用Filter (Avoid Filters)
",要理解这东西容易得很,关键是要去"实践",去"执行",去"反馈",去获取受益。 1. 脚本放到 HTML 代码页底部 (Put Scripts at the Bottom) 来有些两难。不过对于国内网站来说,有很多使用 Google Analytics 服务进行网站数据分析的。这这一点来说,{jd1}可行的建议, 放到页面{zd2}下。 2. Make JavaScript and CSS External 3. 精简 JavaScript 与 CSS (Minify JavaScript and CSS) 4. 移除重复脚本 (Remove Duplicate Scripts) 一些潜在的麻烦。 5. 减少 DOM 访问 (Minimize DOM Access) 缓存已经访问过的元素 (Cache references to accessed elements) 另外推荐一篇《如何优化 JavaScript 脚本的性能》,关于 Ajax 优化指导原则,可以参见 提高 Ajax 应用程序性能,避开 Web 服 务漏洞。 后记1) :整理得差不多之后,发现网络上已经有一篇 《Yahoo!网站性能{zj0}体验的34条黄金守则》,是翻译稿。看来我做了一部分 重复劳动。 后记 2):CSS / JavaScript 都有优化规则。但似乎缺少了对 Flash 的优化实践。
Stoyan Stefanov 做的 Image Optimization: How Many of These 7 Mistakes Are You Making 也非常有参考价值。结合一起说一 下。 1. 优化图片 (Optimize Images) 对于 PNG 图片,考虑用 Pngcrush 或类似的工具进行优化。常见的工具如下表: pngcrush 对 JPEG 图片的优化工具: jpegtran () 习惯,而不是什么高超的技能,只需要记住就成了。 2. 使用 CSS Sprites 技巧对图片优化 (Optimize CSS Sprites) CSS Sprites: Image Slicing's Kiss of Death 补充一下:对于这个技巧我曾经见到有人滥用的。把多个背景图片揉成一个,减少 HTTP 调用,这是一个很好的思路。但一定要记 住这个大图片不能太"重",我看到过 100 多K 的背景图。一个图片就把整个网站拖得很慢。比较好的例子可以参考雅虎关系的这个 图. 更新:使用 CSS Sprites 的一个潜在的副作用是客户端将消耗更多内存(参考)。 3. 不要在 HTML 中使用缩放图片 (Don't Scale Images in HTML) 搞定 。必须提及的是,看到太多的对图片拉伸很难看的页面,救救这些页面! 4. 用更小的并且可缓存的 favicon.ico (Make favicon.ico Small and Cacheable) 基本看一下是否有 favicon.ico 就差不多了。 --EOF-- 补充:视觉设计者应该尽量考虑控制图片大小,推荐在 200K 以下。这不是胡说的,参考页面。 Web 前端优化{zj0}实践{zh1}一部分是针对移动应用的,其实只是针对 iPhone 的,目前只有两条规则。 1. 单个数据对象小于 25K (Keep Components under 25K) 中的 Web 对象{zd0}支持到 10M,但经过测试,发现也就是 25K 左右。 iPhone 在市场上的优异表现,让 Web 人员不得不考虑如何针对其进行优化。相信这部分内容也在不断变化中。 2. Pack Components into a Multipart Document |